Working state before icon/utils fixes - Oct 22
This commit is contained in:
399
16.jinja2_migration_progress-2.md
Normal file
399
16.jinja2_migration_progress-2.md
Normal file
@@ -0,0 +1,399 @@
|
||||
# Work Plan - October 22, 2025
|
||||
## Jinja2 Migration: Polish & Complete Admin Panel
|
||||
|
||||
**Current Status:** Core migration complete ✅ | Auth loop fixed ✅ | Minor issues remaining ⚠️
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Today's Goals
|
||||
|
||||
1. ✅ Fix icon system and utils.js conflicts
|
||||
2. ✅ Test and verify logout flow
|
||||
3. ✅ Test all admin pages (vendors, users)
|
||||
4. ✅ Create remaining templates
|
||||
5. ✅ Clean up and remove old code
|
||||
|
||||
**Estimated Time:** 3-4 hours
|
||||
|
||||
---
|
||||
|
||||
## 📋 Task List
|
||||
|
||||
### Priority 1: Fix Icon/Utils Conflicts (HIGH) ⚠️
|
||||
|
||||
**Issue Reported:**
|
||||
> "Share some outputs about $icons issues and utils already declared"
|
||||
|
||||
#### Task 1.1: Investigate Icon Issues
|
||||
- [ ] Check browser console for icon-related errors
|
||||
- [ ] Verify `icons.js` is loaded only once
|
||||
- [ ] Check for duplicate `window.icon` declarations
|
||||
- [ ] Test icon rendering in all templates
|
||||
|
||||
**Files to Check:**
|
||||
- `static/shared/js/icons.js`
|
||||
- `app/templates/admin/base.html` (script order)
|
||||
- `app/templates/admin/login.html` (script order)
|
||||
|
||||
**Expected Issues:**
|
||||
```javascript
|
||||
// Possible duplicate declaration
|
||||
Uncaught SyntaxError: Identifier 'icon' has already been declared
|
||||
// or
|
||||
Warning: window.icon is already defined
|
||||
```
|
||||
|
||||
**Fix:**
|
||||
- Ensure `icons.js` loaded only once per page
|
||||
- Remove any duplicate `icon()` function declarations
|
||||
- Verify Alpine magic helper `$icon()` is registered correctly
|
||||
|
||||
#### Task 1.2: Investigate Utils Issues
|
||||
- [ ] Check for duplicate `Utils` object declarations
|
||||
- [ ] Verify `utils.js` loaded only once
|
||||
- [ ] Test all utility functions (formatDate, showToast, etc.)
|
||||
|
||||
**Files to Check:**
|
||||
- `static/shared/js/utils.js`
|
||||
- `static/shared/js/api-client.js` (Utils defined here too?)
|
||||
|
||||
**Potential Fix:**
|
||||
```javascript
|
||||
// Option 1: Use namespace to avoid conflicts
|
||||
if (typeof window.Utils === 'undefined') {
|
||||
window.Utils = { /* ... */ };
|
||||
}
|
||||
|
||||
// Option 2: Remove duplicate definitions
|
||||
// Keep Utils only in one place (either utils.js OR api-client.js)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Priority 2: Test Logout Flow (HIGH) 🔐
|
||||
|
||||
#### Task 2.1: Test Logout Button
|
||||
- [ ] Click logout in header
|
||||
- [ ] Verify cookie is deleted
|
||||
- [ ] Verify localStorage is cleared
|
||||
- [ ] Verify redirect to login page
|
||||
- [ ] Verify cannot access dashboard after logout
|
||||
|
||||
**Test Script:**
|
||||
```javascript
|
||||
// Before logout
|
||||
console.log('Cookie:', document.cookie);
|
||||
console.log('localStorage:', localStorage.getItem('admin_token'));
|
||||
|
||||
// Click logout
|
||||
|
||||
// After logout (should be empty)
|
||||
console.log('Cookie:', document.cookie); // Should not contain admin_token
|
||||
console.log('localStorage:', localStorage.getItem('admin_token')); // Should be null
|
||||
```
|
||||
|
||||
#### Task 2.2: Update Logout Endpoint (if needed)
|
||||
**File:** `app/api/v1/admin/auth.py`
|
||||
|
||||
Already implemented, just verify:
|
||||
```python
|
||||
@router.post("/logout")
|
||||
def admin_logout(response: Response):
|
||||
# Clears the cookie
|
||||
response.delete_cookie(key="admin_token", path="/")
|
||||
return {"message": "Logged out successfully"}
|
||||
```
|
||||
|
||||
#### Task 2.3: Update Header Logout Button
|
||||
**File:** `app/templates/partials/header.html`
|
||||
|
||||
Verify logout button calls the correct endpoint:
|
||||
```html
|
||||
<button @click="handleLogout()">
|
||||
Logout
|
||||
</button>
|
||||
|
||||
<script>
|
||||
function handleLogout() {
|
||||
// Call logout API
|
||||
fetch('/api/v1/admin/auth/logout', { method: 'POST' })
|
||||
.then(() => {
|
||||
// Clear localStorage
|
||||
localStorage.clear();
|
||||
// Redirect
|
||||
window.location.href = '/admin/login';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Priority 3: Test All Admin Pages (MEDIUM) 📄
|
||||
|
||||
#### Task 3.1: Test Vendors Page
|
||||
- [ ] Navigate to `/admin/vendors`
|
||||
- [ ] Verify page loads with authentication
|
||||
- [ ] Check if template exists or needs creation
|
||||
- [ ] Test vendor list display
|
||||
- [ ] Test vendor creation button
|
||||
|
||||
**If template missing:**
|
||||
Create `app/templates/admin/vendors.html`
|
||||
|
||||
#### Task 3.2: Test Users Page
|
||||
- [ ] Navigate to `/admin/users`
|
||||
- [ ] Verify page loads with authentication
|
||||
- [ ] Check if template exists or needs creation
|
||||
- [ ] Test user list display
|
||||
|
||||
**If template missing:**
|
||||
Create `app/templates/admin/users.html`
|
||||
|
||||
#### Task 3.3: Test Navigation
|
||||
- [ ] Click all sidebar links
|
||||
- [ ] Verify no 404 errors
|
||||
- [ ] Verify active state highlights correctly
|
||||
- [ ] Test breadcrumbs (if applicable)
|
||||
|
||||
---
|
||||
|
||||
### Priority 4: Create Missing Templates (MEDIUM) 📝
|
||||
|
||||
#### Task 4.1: Create Vendors Template
|
||||
**File:** `app/templates/admin/vendors.html`
|
||||
|
||||
```jinja2
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% block title %}Vendors Management{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminVendors(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="my-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
||||
Vendors Management
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Vendor list content -->
|
||||
<div x-data="adminVendors()">
|
||||
<!-- Your existing vendors.html content here -->
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='admin/js/vendors.js') }}"></script>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
#### Task 4.2: Create Users Template
|
||||
**File:** `app/templates/admin/users.html`
|
||||
|
||||
Similar structure to vendors template.
|
||||
|
||||
#### Task 4.3: Verify Vendor Edit Page
|
||||
Check if vendor-edit needs a template or if it's a modal/overlay.
|
||||
|
||||
---
|
||||
|
||||
### Priority 5: Cleanup (LOW) 🧹
|
||||
|
||||
#### Task 5.1: Remove Old Static HTML Files
|
||||
- [ ] Delete `static/admin/dashboard.html` (if exists)
|
||||
- [ ] Delete `static/admin/vendors.html` (if exists)
|
||||
- [ ] Delete `static/admin/users.html` (if exists)
|
||||
- [ ] Delete `static/admin/partials/` directory
|
||||
|
||||
**Before deleting:** Backup files just in case!
|
||||
|
||||
#### Task 5.2: Remove Partial Loader
|
||||
- [ ] Delete `static/shared/js/partial-loader.js`
|
||||
- [ ] Remove any references to `partialLoader` in code
|
||||
- [ ] Search codebase: `grep -r "partial-loader" .`
|
||||
|
||||
#### Task 5.3: Clean Up frontend.py
|
||||
**File:** `app/routes/frontend.py`
|
||||
|
||||
- [ ] Remove commented-out admin routes
|
||||
- [ ] Or delete file entirely if only contained admin routes
|
||||
- [ ] Update imports if needed
|
||||
|
||||
#### Task 5.4: Production Mode Preparation
|
||||
- [ ] Set log levels to production (INFO or WARN)
|
||||
- [ ] Update cookie `secure=True` for production
|
||||
- [ ] Remove debug console.logs
|
||||
- [ ] Test with production settings
|
||||
|
||||
**Update log levels:**
|
||||
```javascript
|
||||
// static/admin/js/log-config.js
|
||||
GLOBAL_LEVEL: isDevelopment ? 4 : 2, // Debug in dev, Warnings in prod
|
||||
LOGIN: isDevelopment ? 4 : 1, // Full debug in dev, errors only in prod
|
||||
API_CLIENT: isDevelopment ? 3 : 1, // Info in dev, errors only in prod
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
### Comprehensive Testing
|
||||
- [ ] Fresh login (clear all data first)
|
||||
- [ ] Dashboard loads correctly
|
||||
- [ ] Stats cards display data
|
||||
- [ ] Recent vendors table works
|
||||
- [ ] Sidebar navigation works
|
||||
- [ ] Dark mode toggle works
|
||||
- [ ] Logout clears auth and redirects
|
||||
- [ ] Cannot access dashboard after logout
|
||||
- [ ] Vendors page loads
|
||||
- [ ] Users page loads
|
||||
- [ ] No console errors
|
||||
- [ ] No 404 errors in Network tab
|
||||
- [ ] Icons display correctly
|
||||
- [ ] All Alpine.js components work
|
||||
|
||||
### Browser Testing
|
||||
- [ ] Chrome/Edge
|
||||
- [ ] Firefox
|
||||
- [ ] Safari (if available)
|
||||
- [ ] Mobile view (responsive)
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Debugging Guide
|
||||
|
||||
### If Icons Don't Display:
|
||||
```javascript
|
||||
// Check in console:
|
||||
console.log('window.icon:', typeof window.icon);
|
||||
console.log('window.Icons:', typeof window.Icons);
|
||||
console.log('$icon available:', typeof Alpine !== 'undefined' && Alpine.magic('icon'));
|
||||
|
||||
// Test manually:
|
||||
document.body.innerHTML += window.icon('home', 'w-6 h-6');
|
||||
```
|
||||
|
||||
### If Utils Undefined:
|
||||
```javascript
|
||||
// Check in console:
|
||||
console.log('Utils:', typeof Utils);
|
||||
console.log('Utils methods:', Object.keys(Utils || {}));
|
||||
|
||||
// Test manually:
|
||||
Utils.showToast('Test message', 'info');
|
||||
```
|
||||
|
||||
### If Auth Fails:
|
||||
```javascript
|
||||
// Check storage:
|
||||
console.log('localStorage token:', localStorage.getItem('admin_token'));
|
||||
console.log('Cookie:', document.cookie);
|
||||
|
||||
// Test API manually:
|
||||
fetch('/api/v1/admin/auth/me', {
|
||||
headers: { 'Authorization': `Bearer ${localStorage.getItem('admin_token')}` }
|
||||
}).then(r => r.json()).then(console.log);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 Documentation Tasks
|
||||
|
||||
### Update Documentation
|
||||
- [ ] Update project README with new architecture
|
||||
- [ ] Document authentication flow (cookies + localStorage)
|
||||
- [ ] Document template structure
|
||||
- [ ] Add deployment notes (dev vs production)
|
||||
- [ ] Update API documentation if needed
|
||||
|
||||
### Code Comments
|
||||
- [ ] Add comments to complex authentication code
|
||||
- [ ] Document cookie settings and rationale
|
||||
- [ ] Explain dual token storage pattern
|
||||
- [ ] Add JSDoc comments to JavaScript functions
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Phase Preview (After Today)
|
||||
|
||||
### Vendor Portal Migration
|
||||
1. Apply same Jinja2 pattern to vendor routes
|
||||
2. Create vendor templates (login, dashboard, etc.)
|
||||
3. Implement vendor authentication (separate cookie: `vendor_token`)
|
||||
4. Test vendor flows
|
||||
|
||||
### Customer/Shop Migration
|
||||
1. Customer authentication system
|
||||
2. Shop templates
|
||||
3. Shopping cart (consider cookie vs localStorage)
|
||||
4. "Remember Me" implementation
|
||||
|
||||
### Advanced Features
|
||||
1. "Remember Me" checkbox (30-day cookies)
|
||||
2. Session management
|
||||
3. Multiple device logout
|
||||
4. Security enhancements (CSRF tokens)
|
||||
|
||||
---
|
||||
|
||||
## ⏰ Time Estimates
|
||||
|
||||
| Task | Estimated Time | Priority |
|
||||
|------|---------------|----------|
|
||||
| Fix icon/utils issues | 30-45 min | HIGH |
|
||||
| Test logout flow | 15-30 min | HIGH |
|
||||
| Test admin pages | 30 min | MEDIUM |
|
||||
| Create missing templates | 45-60 min | MEDIUM |
|
||||
| Cleanup old code | 30 min | LOW |
|
||||
| Testing & verification | 30-45 min | HIGH |
|
||||
| Documentation | 30 min | LOW |
|
||||
|
||||
**Total: 3-4 hours**
|
||||
|
||||
---
|
||||
|
||||
## ✅ Success Criteria for Today
|
||||
|
||||
By end of day, we should have:
|
||||
- [ ] All icons displaying correctly
|
||||
- [ ] No JavaScript errors in console
|
||||
- [ ] Logout flow working perfectly
|
||||
- [ ] All admin pages accessible and working
|
||||
- [ ] Templates for vendors and users pages
|
||||
- [ ] Old code cleaned up
|
||||
- [ ] Comprehensive testing completed
|
||||
- [ ] Documentation updated
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Stretch Goals (If Time Permits)
|
||||
|
||||
1. Add loading states to all buttons
|
||||
2. Improve error messages (user-friendly)
|
||||
3. Add success/error toasts to all operations
|
||||
4. Implement "Remember Me" checkbox
|
||||
5. Start vendor portal migration
|
||||
6. Add unit tests for authentication
|
||||
|
||||
---
|
||||
|
||||
## 📞 Support Resources
|
||||
|
||||
### If Stuck:
|
||||
- Review yesterday's complete file implementations
|
||||
- Check browser console for detailed logs (log level 4)
|
||||
- Use test-auth-flow.html for systematic testing
|
||||
- Check Network tab for HTTP requests/responses
|
||||
|
||||
### Reference Files:
|
||||
- `static/admin/test-auth-flow.html` - Testing interface
|
||||
- `TESTING_CHECKLIST.md` - Systematic testing guide
|
||||
- Yesterday's complete file updates (in conversation)
|
||||
|
||||
---
|
||||
|
||||
**Good luck with today's tasks! 🚀**
|
||||
|
||||
Remember: Take breaks, test
|
||||
Reference in New Issue
Block a user