password change refresh

Author: laheri72

blueprints/auth/routes.py

@@ -114,13 +114,17 @@ def change_password():
         return redirect(url_for('auth.login'))
 
     if request.method == 'POST':
+        full_name = request.form.get('full_name')
         new_password = request.form.get('new_password')
         confirm_password = request.form.get('confirm_password')
 
         if new_password != confirm_password:
             flash('Passwords do not match', 'error')
             return render_template('change_password.html')
 
+        user.full_name = full_name
+        _ensure_username_from_full_name(user, db.session)
+        
         user.password_hash = generate_password_hash(new_password)
         user.is_first_login = False
         db.session.commit()

blueprints/utils.py

@@ -23,7 +23,15 @@ def _extract_first_name(full_name):
     full_name = full_name.strip()
     if not full_name:
         return None
-    return full_name.split()[0][:64]
+    
+    parts = full_name.split()
+    if not parts:
+        return None
+        
+    if len(parts) > 1 and parts[0].lower() == 'mulla':
+        return parts[1][:64]
+    
+    return parts[0][:64]
 
 def _make_unique_username(base, exclude_user_id=None):
     base = (base or '').strip()

static/script.js

@@ -11,6 +11,9 @@ function initializeApp() {
     // Initialize form validation
     initializeFormValidation();
 
+    // Initialize silent password matching
+    initializeSilentPasswordMatching();
+    
     // Initialize offline functionality
     initializeOfflineSupport();
 
@@ -27,6 +30,40 @@ function initializeApp() {
     saveCurrentPage();
 }
 
+function initializeSilentPasswordMatching() {
+    const newPassword = document.getElementById('new_password');
+    const confirmPassword = document.getElementById('confirm_password');
+    const statusDiv = document.getElementById('passwordMatchStatus');
+
+    if (!newPassword || !confirmPassword || !statusDiv) return;
+
+    function updateStatus() {
+        const val1 = newPassword.value;
+        const val2 = confirmPassword.value;
+
+        if (!val1 && !val2) {
+            statusDiv.style.display = 'none';
+            return;
+        }
+
+        statusDiv.style.display = 'block';
+        if (val1 === val2 && val1 !== '') {
+            statusDiv.textContent = '✓ Passwords match';
+            statusDiv.className = 'small mt-2 text-center py-1 rounded bg-success-subtle text-success border border-success';
+            statusDiv.style.backgroundColor = '#d1e7dd';
+        } else if (val2 === '') {
+            statusDiv.style.display = 'none';
+        } else {
+            statusDiv.textContent = '✗ Passwords do not match';
+            statusDiv.className = 'small mt-2 text-center py-1 rounded bg-danger-subtle text-danger border border-danger';
+            statusDiv.style.backgroundColor = '#f8d7da';
+        }
+    }
+
+    newPassword.addEventListener('input', updateStatus);
+    confirmPassword.addEventListener('input', updateStatus);
+}
+
 // Theme Management
 function loadTheme() {
     const savedTheme = localStorage.getItem('theme');
@@ -68,7 +105,7 @@ function initializeFormValidation() {
     // Password confirmation validation
     const passwordInputs = document.querySelectorAll('input[name="confirm_password"]');
     passwordInputs.forEach(input => {
-        input.addEventListener('input', validatePasswordMatch);
+        // Validation moved to form submission to prevent premature error messages
     });
 
     // Form submission validation
@@ -99,8 +136,19 @@ function validateEmailRealTime(event) {
 }
 
 function validatePasswordMatch(event) {
+    if (!event || !event.target) return true;
+    
     const confirmPassword = event.target.value;
-    const password = document.querySelector('input[name="password"]').value;
+    const passwordElement = document.querySelector('input[name="password"]') || 
+                            document.querySelector('input[name="new_password"]') ||
+                            document.getElementById('new_password');
+    
+    if (!passwordElement) {
+        console.warn('Password element not found for matching');
+        return true;
+    }
+    
+    const password = passwordElement.value || '';
 
     if (confirmPassword && password !== confirmPassword) {
         showFieldError(event.target, 'Passwords do not match');

static/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'ajs-pantry-v1';
+const CACHE_NAME = 'ajs-pantry-v2';
 const STATIC_ASSETS = [
     '/',
     '/static/style.css',

templates/change_password.html

@@ -7,18 +7,38 @@
                 <h3 class="font-weight-light my-1">Change Initial Password</h3>
             </div>
             <div class="card-body p-4">
-                <p class="text-muted small mb-4">You are logging in for the first time. Please set a new password to secure your account.</p>
-                <form method="POST">
-                    <div class="form-group mb-3">
-                        <label class="small mb-1" for="new_password">New Password</label>
-                        <input class="form-control" name="new_password" type="password" placeholder="Enter new password" required />
+                <p class="text-muted small mb-4">You are logging in for the first time. Please set your details to secure your account.</p>
+                <form method="POST" id="changePasswordForm">
+                    <!-- Name Section -->
+                    <div class="p-3 mb-4 rounded border-start border-4 border-primary bg-light">
+                        <label class="fw-bold small mb-2 text-primary text-uppercase" style="letter-spacing: 1px;">Personal Information</label>
+                        <div class="form-group">
+                            <label class="small mb-1" for="full_name">Full Name</label>
+                            <input class="form-control form-control-lg shadow-sm" name="full_name" type="text" placeholder="e.g. Idris Laheri" required />
+                            <div class="form-text small text-muted">Please enter your real full name.</div>
+                        </div>
                     </div>
-                    <div class="form-group mb-3">
-                        <label class="small mb-1" for="confirm_password">Confirm New Password</label>
-                        <input class="form-control" name="confirm_password" type="password" placeholder="Confirm new password" required />
+
+                    <!-- Password Section -->
+                    <div class="p-3 mb-3 rounded border-start border-4 border-info bg-light">
+                        <label class="fw-bold small mb-2 text-info text-uppercase" style="letter-spacing: 1px;">Security Setup</label>
+                        <div class="form-group mb-3">
+                            <label class="small mb-1" for="new_password">New Password</label>
+                            <input class="form-control shadow-sm" id="new_password" name="new_password" type="password" placeholder="Enter new password" required />
+                        </div>
+                        <div class="form-group mb-2">
+                            <label class="small mb-1" for="confirm_password">Confirm New Password</label>
+                            <input class="form-control shadow-sm" id="confirm_password" name="confirm_password" type="password" placeholder="Confirm new password" required />
+                        </div>
+                        
+                        <!-- Silent Match Indicator -->
+                        <div id="passwordMatchStatus" class="small mt-2 text-center py-1 rounded" style="display: none; transition: all 0.3s ease; font-weight: 500;">
+                            <!-- Indicator text will appear here -->
+                        </div>
                     </div>
+
                     <div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">
-                        <button type="submit" class="btn btn-primary btn-block w-100 py-2">Update Password & Continue</button>
+                        <button type="submit" class="btn btn-primary btn-block w-100 py-2 shadow-sm fw-bold">Update Password & Continue</button>
                     </div>
                 </form>
             </div>

templates/login.html

@@ -41,7 +41,7 @@ <h2 class="fw-bold mb-0 mt-2">Member Login</h2>
                         <span class="input-group-text bg-light border-end-0"><i
                                 class="fas fa-key text-teal-light"></i></span>
                         <input class="form-control bg-light border-start-0 ps-0" id="password" name="password"
-                            type="password" placeholder="Enter your password" required />
+                            type="password" placeholder="initial password is: maskan1447" required />
                         <button class="btn btn-outline-light border bg-light text-muted border-start-0" type="button"
                             id="togglePassword">
                             <i class="fas fa-eye"></i>
@@ -70,7 +70,8 @@ <h2 class="fw-bold mb-0 mt-2">Member Login</h2>
 
             <div class="pt-2 border-top mt-3">
                 <span class="small text-muted">Are you Staff?</span>
-                <a href="{{ url_for('auth.staff_login') }}" class="small fw-bold text-teal text-decoration-none hover-link">
+                <a href="{{ url_for('auth.staff_login') }}"
+                    class="small fw-bold text-teal text-decoration-none hover-link">
                     Staff Login <i class="fas fa-arrow-right ms-1"></i>
                 </a>
             </div>

templates/staff_login.html

@@ -67,7 +67,7 @@ <h2 class="fw-bold mb-0 mt-2">Staff Login</h2>
                         <span class="input-group-text bg-light border-end-0"><i
                                 class="fas fa-key text-teal-light"></i></span>
                         <input class="form-control bg-light border-start-0 ps-0" id="password" name="password"
-                            type="password" placeholder="Enter your password" required />
+                            type="password" placeholder="initial password is: maskan1447" required />
                         <button class="btn btn-outline-light border bg-light text-muted border-start-0" type="button"
                             id="togglePassword">
                             <i class="fas fa-eye"></i>