source: interfejs/change-password.html@ 4dff800

finki-main main
Last change on this file since 4dff800 was 4dff800, checked in by Klimentina Efremova <klimentina08642@…>, 7 months ago

Fixed admin logging in and force change password
  • Property mode set to 100644
File size: 8.6 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Change Password - Handcraft Marketplace</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10<header>
11 <div class="logo-container">
12 <img src="../images/administrative/logo.jpg" alt="Handcraft Marketplace Logo" onerror="this.style.display='none'">
13 <h1>🎨 Handcraft Marketplace</h1>
14 </div>
15 <nav>
16 <ul>
17 <li><a href="index.html">Home</a></li>
18 <li><a href="products.html">Products</a></li>
19 <li><a href="login.html">Login</a></li>
20 </ul>
21 </nav>
22</header>
23
24<main>
25 <div class="form-container">
26 <h2>Change Password</h2>
27 <p class="form-subtitle" id="password-message">Please set a new password</p>
28
29 <div id="error-message" class="error-message" style="display: none; color: red; margin-bottom: 1rem; padding: 10px; background-color: #ffeeee; border-radius: 5px;"></div>
30 <div id="success-message" class="success-message" style="display: none; color: green; margin-bottom: 1rem; padding: 10px; background-color: #eeffee; border-radius: 5px;"></div>
31
32 <form id="change-password-form" class="form">
33 <div class="form-group">
34 <label for="new-password">New Password</label>
35 <input type="password" id="new-password" name="new-password" required>
36 <small class="password-hint">At least 8 characters with uppercase, lowercase, number, and special character</small>
37 </div>
38
39 <div class="form-group">
40 <label for="confirm-password">Confirm New Password</label>
41 <input type="password" id="confirm-password" name="confirm-password" required>
42 </div>
43
44 <div class="form-group">
45 <button type="submit" class="btn-primary btn-full" id="submit-btn">Change Password</button>
46 </div>
47 </form>
48 </div>
49</main>
50
51<footer>
52 <div class="footer-content">
53 <div class="footer-section">
54 <h3>Handcraft Marketplace</h3>
55 <p>Connecting artisans with buyers worldwide</p>
56 </div>
57 <div class="footer-section">
58 <h3>Quick Links</h3>
59 <ul>
60 <li><a href="index.html">Home</a></li>
61 <li><a href="products.html">Products</a></li>
62 </ul>
63 </div>
64 </div>
65 <div class="footer-bottom">
66 <p>&copy; 2025 Handcraft Marketplace. All rights reserved.</p>
67 </div>
68</footer>
69
70<script src="script.js"></script>
71<script>
72 document.addEventListener('DOMContentLoaded', () => {
73 const urlParams = new URLSearchParams(window.location.search);
74 const isForced = urlParams.get('forced') === 'true';
75 let userType = 'admin'; // Default
76
77 if (isForced) {
78 document.getElementById('password-message').textContent =
79 'You must change your password before continuing.';
80 }
81
82 const form = document.getElementById('change-password-form');
83 const submitBtn = document.getElementById('submit-btn');
84 const errorDiv = document.getElementById('error-message');
85 const successDiv = document.getElementById('success-message');
86
87 // Check if user is authenticated for password change and get user type
88 checkAuthStatus();
89
90 form.addEventListener('submit', async (e) => {
91 e.preventDefault();
92
93 // Clear previous messages
94 errorDiv.style.display = 'none';
95 successDiv.style.display = 'none';
96
97 // Disable submit button to prevent double submission
98 submitBtn.disabled = true;
99 submitBtn.textContent = 'Changing Password...';
100
101 const newPassword = document.getElementById('new-password').value;
102 const confirmPassword = document.getElementById('confirm-password').value;
103
104 // Client-side validation
105 if (!newPassword || !confirmPassword) {
106 showError('All fields are required');
107 submitBtn.disabled = false;
108 submitBtn.textContent = 'Change Password';
109 return;
110 }
111
112 if (newPassword !== confirmPassword) {
113 showError('New passwords do not match');
114 submitBtn.disabled = false;
115 submitBtn.textContent = 'Change Password';
116 return;
117 }
118
119 // Validate password strength
120 const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
121 if (!passwordRegex.test(newPassword)) {
122 showError('Password must have at least 8 characters, including uppercase, lowercase, number and special character');
123 submitBtn.disabled = false;
124 submitBtn.textContent = 'Change Password';
125 return;
126 }
127
128 const formData = {
129 newPassword: newPassword,
130 confirmPassword: confirmPassword
131 };
132
133 try {
134 console.log('Sending password change request...');
135 const response = await fetch('/api/force-change-password', {
136 method: 'POST',
137 headers: {
138 'Content-Type': 'application/json'
139 },
140 body: JSON.stringify(formData),
141 credentials: 'include' // Important: include cookies
142 });
143
144 const data = await response.json();
145 console.log('Response:', data);
146
147 if (data.success) {
148 showSuccess('Password changed successfully! Redirecting...');
149
150 // Clear form
151 form.reset();
152
153 // Redirect after short delay
154 setTimeout(() => {
155 window.location.href = data.redirectTo || 'dashboard.html';
156 }, 1500);
157 } else {
158 showError(data.message || 'Failed to change password');
159 submitBtn.disabled = false;
160 submitBtn.textContent = 'Change Password';
161 }
162 } catch (error) {
163 console.error('Password change error:', error);
164 showError('Network error: ' + error.message);
165 submitBtn.disabled = false;
166 submitBtn.textContent = 'Change Password';
167 }
168 });
169
170 async function checkAuthStatus() {
171 try {
172 const response = await fetch('/api/user', {
173 credentials: 'include'
174 });
175 const data = await response.json();
176
177 if (!data.success) {
178 // Not authenticated, redirect to login
179 window.location.href = 'login.html';
180 } else if (data.isTempSession) {
181 console.log('Valid temporary session for password change');
182 if (data.user && data.user.userType) {
183 userType = data.user.userType;
184 }
185 } else {
186 // Already have full session, redirect to appropriate dashboard
187 if (data.user && data.user.userType) {
188 switch(data.user.userType) {
189 case 'admin':
190 window.location.href = 'admin.html';
191 break;
192 case 'store_owner':
193 window.location.href = 'store-owner.html';
194 break;
195 case 'store_employee':
196 window.location.href = 'store-employee.html';
197 break;
198 case 'client':
199 window.location.href = 'client-dashboard.html';
200 break;
201 default:
202 window.location.href = 'dashboard.html';
203 }
204 }
205 }
206 } catch (error) {
207 console.error('Auth check error:', error);
208 }
209 }
210
211 function showError(message) {
212 errorDiv.textContent = message;
213 errorDiv.style.display = 'block';
214 setTimeout(() => {
215 errorDiv.style.display = 'none';
216 }, 5000);
217 }
218
219 function showSuccess(message) {
220 successDiv.textContent = message;
221 successDiv.style.display = 'block';
222 }
223 });
224</script>
225</body>
226</html>
Note: See TracBrowser for help on using the repository browser.