Changeset 79fff4f for interfejs/change-password.html

Timestamp:

02/22/26 22:32:07 (7 months ago)

Author:

Klimentina Efremova <klimentina08642@…>

Branches:

finki-main, main

Children:

6fea37e, 81bc7da

Parents:

4dff800

Message:

Improved employee logging in and changing password

File:

• interfejs/change-password.html (modified) (5 diffs)

interfejs/change-password.html

@@ -17 +17 @@
             <li><a href="index.html">Home</a></li>
             <li><a href="products.html">Products</a></li>
-            <li><a href="login.html">Login</a></li>
+            <li><a href="#" id="dashboard-link">Dashboard</a></li>
         </ul>
     </nav>
@@ -23 +23 @@
 
 <main>
-    <div class="form-container">
+    <div class="auth-container">
         <h2>Change Password</h2>
-        <p class="form-subtitle" id="password-message">Please set a new password</p>
-
-        <div id="error-message" class="error-message" style="display: none; color: red; margin-bottom: 1rem; padding: 10px; background-color: #ffeeee; border-radius: 5px;"></div>
-        <div id="success-message" class="success-message" style="display: none; color: green; margin-bottom: 1rem; padding: 10px; background-color: #eeffee; border-radius: 5px;"></div>
+        <div id="password-message" class="message"></div>
 
         <form id="change-password-form" class="form">
             <div class="form-group">
                 <label for="new-password">New Password</label>
-                <input type="password" id="new-password" name="new-password" required>
+                <input type="password" id="new-password" required>
                 <small class="password-hint">At least 8 characters with uppercase, lowercase, number, and special character</small>
             </div>
@@ -39 +36 @@
             <div class="form-group">
                 <label for="confirm-password">Confirm New Password</label>
-                <input type="password" id="confirm-password" name="confirm-password" required>
+                <input type="password" id="confirm-password" required>
             </div>
 
-            <div class="form-group">
-                <button type="submit" class="btn-primary btn-full" id="submit-btn">Change Password</button>
-            </div>
+            <button type="submit" class="btn-primary">Change Password</button>
         </form>
     </div>
@@ -62 +57 @@
             </ul>
         </div>
+        <div class="footer-section">
+            <h3>Contact</h3>
+            <p>Email: support@handcraft.com</p>
+        </div>
     </div>
     <div class="footer-bottom">
@@ -70 +69 @@
 <script src="script.js"></script>
 <script>
-    document.addEventListener('DOMContentLoaded', () => {
+    document.addEventListener('DOMContentLoaded', async function() {
         const urlParams = new URLSearchParams(window.location.search);
-        const isForced = urlParams.get('forced') === 'true';
-        let userType = 'admin'; // Default
+        const forced = urlParams.get('forced');
+        const redirect = urlParams.get('redirect');
 
-        if (isForced) {
-            document.getElementById('password-message').textContent =
-                'You must change your password before continuing.';
+        // Check if user is authenticated for password change
+        try {
+            const user = await loadUserData();
+            if (!user) {
+                window.location.href = 'login.html';
+                return;
+            }
+        } catch (error) {
+            console.error('Error loading user:', error);
+            window.location.href = 'login.html';
+            return;
         }
 
-        const form = document.getElementById('change-password-form');
-        const submitBtn = document.getElementById('submit-btn');
-        const errorDiv = document.getElementById('error-message');
-        const successDiv = document.getElementById('success-message');
+        if (forced === 'true') {
+            const messageDiv = document.getElementById('password-message');
+            messageDiv.className = 'message warning';
+            messageDiv.innerHTML = '⚠️ You are required to change your password before continuing.';
+        }
 
-        // Check if user is authenticated for password change and get user type
-        checkAuthStatus();
+        // Store redirect URL in session storage
+        if (redirect) {
+            sessionStorage.setItem('passwordChangeRedirect', redirect);
+        }
 
-        form.addEventListener('submit', async (e) => {
+        // Handle form submission
+        document.getElementById('change-password-form').addEventListener('submit', async function(e) {
             e.preventDefault();
-
-            // Clear previous messages
-            errorDiv.style.display = 'none';
-            successDiv.style.display = 'none';
-
-            // Disable submit button to prevent double submission
-            submitBtn.disabled = true;
-            submitBtn.textContent = 'Changing Password...';
 
             const newPassword = document.getElementById('new-password').value;
             const confirmPassword = document.getElementById('confirm-password').value;
 
-            // Client-side validation
-            if (!newPassword || !confirmPassword) {
-                showError('All fields are required');
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
+            if (newPassword !== confirmPassword) {
+                showMessage('Passwords do not match', 'error');
                 return;
             }
 
-            if (newPassword !== confirmPassword) {
-                showError('New passwords do not match');
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
+            // Password validation
+            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+            if (!passwordRegex.test(newPassword)) {
+                showMessage('Password must have at least 8 characters, including uppercase, lowercase, number and special character', 'error');
                 return;
             }
 
-            // Validate password strength
-            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
-            if (!passwordRegex.test(newPassword)) {
-                showError('Password must have at least 8 characters, including uppercase, lowercase, number and special character');
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
-                return;
-            }
-
-            const formData = {
-                newPassword: newPassword,
-                confirmPassword: confirmPassword
-            };
+            // Get redirect from session storage or URL
+            const redirectTo = sessionStorage.getItem('passwordChangeRedirect') || '';
 
             try {
-                console.log('Sending password change request...');
                 const response = await fetch('/api/force-change-password', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(formData),
-                    credentials: 'include' // Important: include cookies
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        newPassword,
+                        confirmPassword,
+                        redirectTo: redirectTo
+                    })
                 });
 
                 const data = await response.json();
-                console.log('Response:', data);
 
                 if (data.success) {
-                    showSuccess('Password changed successfully! Redirecting...');
+                    showMessage('Password changed successfully! Redirecting...', 'success');
+                    sessionStorage.removeItem('passwordChangeRedirect');
 
-                    // Clear form
-                    form.reset();
-
-                    // Redirect after short delay
+                    // Redirect to appropriate dashboard
                     setTimeout(() => {
                         window.location.href = data.redirectTo || 'dashboard.html';
                     }, 1500);
                 } else {
-                    showError(data.message || 'Failed to change password');
-                    submitBtn.disabled = false;
-                    submitBtn.textContent = 'Change Password';
+                    showMessage(data.message || 'Failed to change password', 'error');
                 }
             } catch (error) {
-                console.error('Password change error:', error);
-                showError('Network error: ' + error.message);
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
+                console.error('Error changing password:', error);
+                showMessage('An error occurred. Please try again.', 'error');
             }
         });
 
-        async function checkAuthStatus() {
-            try {
-                const response = await fetch('/api/user', {
-                    credentials: 'include'
-                });
-                const data = await response.json();
-
-                if (!data.success) {
-                    // Not authenticated, redirect to login
-                    window.location.href = 'login.html';
-                } else if (data.isTempSession) {
-                    console.log('Valid temporary session for password change');
-                    if (data.user && data.user.userType) {
-                        userType = data.user.userType;
-                    }
-                } else {
-                    // Already have full session, redirect to appropriate dashboard
-                    if (data.user && data.user.userType) {
-                        switch(data.user.userType) {
-                            case 'admin':
-                                window.location.href = 'admin.html';
-                                break;
-                            case 'store_owner':
-                                window.location.href = 'store-owner.html';
-                                break;
-                            case 'store_employee':
-                                window.location.href = 'store-employee.html';
-                                break;
-                            case 'client':
-                                window.location.href = 'client-dashboard.html';
-                                break;
-                            default:
-                                window.location.href = 'dashboard.html';
-                        }
-                    }
-                }
-            } catch (error) {
-                console.error('Auth check error:', error);
-            }
-        }
-
-        function showError(message) {
-            errorDiv.textContent = message;
-            errorDiv.style.display = 'block';
-            setTimeout(() => {
-                errorDiv.style.display = 'none';
-            }, 5000);
-        }
-
-        function showSuccess(message) {
-            successDiv.textContent = message;
-            successDiv.style.display = 'block';
+        function showMessage(msg, type) {
+            const messageDiv = document.getElementById('password-message');
+            messageDiv.className = 'message ' + type;
+            messageDiv.textContent = msg;
         }
     });