source: interfejs/change-password.html@ 79fff4f

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

Improved employee logging in and changing password
  • Property mode set to 100644
File size: 5.7 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="#" id="dashboard-link">Dashboard</a></li>
20 </ul>
21 </nav>
22</header>
23
24<main>
25 <div class="auth-container">
26 <h2>Change Password</h2>
27 <div id="password-message" class="message"></div>
28
29 <form id="change-password-form" class="form">
30 <div class="form-group">
31 <label for="new-password">New Password</label>
32 <input type="password" id="new-password" required>
33 <small class="password-hint">At least 8 characters with uppercase, lowercase, number, and special character</small>
34 </div>
35
36 <div class="form-group">
37 <label for="confirm-password">Confirm New Password</label>
38 <input type="password" id="confirm-password" required>
39 </div>
40
41 <button type="submit" class="btn-primary">Change Password</button>
42 </form>
43 </div>
44</main>
45
46<footer>
47 <div class="footer-content">
48 <div class="footer-section">
49 <h3>Handcraft Marketplace</h3>
50 <p>Connecting artisans with buyers worldwide</p>
51 </div>
52 <div class="footer-section">
53 <h3>Quick Links</h3>
54 <ul>
55 <li><a href="index.html">Home</a></li>
56 <li><a href="products.html">Products</a></li>
57 </ul>
58 </div>
59 <div class="footer-section">
60 <h3>Contact</h3>
61 <p>Email: support@handcraft.com</p>
62 </div>
63 </div>
64 <div class="footer-bottom">
65 <p>&copy; 2025 Handcraft Marketplace. All rights reserved.</p>
66 </div>
67</footer>
68
69<script src="script.js"></script>
70<script>
71 document.addEventListener('DOMContentLoaded', async function() {
72 const urlParams = new URLSearchParams(window.location.search);
73 const forced = urlParams.get('forced');
74 const redirect = urlParams.get('redirect');
75
76 // Check if user is authenticated for password change
77 try {
78 const user = await loadUserData();
79 if (!user) {
80 window.location.href = 'login.html';
81 return;
82 }
83 } catch (error) {
84 console.error('Error loading user:', error);
85 window.location.href = 'login.html';
86 return;
87 }
88
89 if (forced === 'true') {
90 const messageDiv = document.getElementById('password-message');
91 messageDiv.className = 'message warning';
92 messageDiv.innerHTML = '⚠️ You are required to change your password before continuing.';
93 }
94
95 // Store redirect URL in session storage
96 if (redirect) {
97 sessionStorage.setItem('passwordChangeRedirect', redirect);
98 }
99
100 // Handle form submission
101 document.getElementById('change-password-form').addEventListener('submit', async function(e) {
102 e.preventDefault();
103
104 const newPassword = document.getElementById('new-password').value;
105 const confirmPassword = document.getElementById('confirm-password').value;
106
107 if (newPassword !== confirmPassword) {
108 showMessage('Passwords do not match', 'error');
109 return;
110 }
111
112 // Password validation
113 const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
114 if (!passwordRegex.test(newPassword)) {
115 showMessage('Password must have at least 8 characters, including uppercase, lowercase, number and special character', 'error');
116 return;
117 }
118
119 // Get redirect from session storage or URL
120 const redirectTo = sessionStorage.getItem('passwordChangeRedirect') || '';
121
122 try {
123 const response = await fetch('/api/force-change-password', {
124 method: 'POST',
125 headers: { 'Content-Type': 'application/json' },
126 body: JSON.stringify({
127 newPassword,
128 confirmPassword,
129 redirectTo: redirectTo
130 })
131 });
132
133 const data = await response.json();
134
135 if (data.success) {
136 showMessage('Password changed successfully! Redirecting...', 'success');
137 sessionStorage.removeItem('passwordChangeRedirect');
138
139 // Redirect to appropriate dashboard
140 setTimeout(() => {
141 window.location.href = data.redirectTo || 'dashboard.html';
142 }, 1500);
143 } else {
144 showMessage(data.message || 'Failed to change password', 'error');
145 }
146 } catch (error) {
147 console.error('Error changing password:', error);
148 showMessage('An error occurred. Please try again.', 'error');
149 }
150 });
151
152 function showMessage(msg, type) {
153 const messageDiv = document.getElementById('password-message');
154 messageDiv.className = 'message ' + type;
155 messageDiv.textContent = msg;
156 }
157 });
158</script>
159</body>
160</html>
Note: See TracBrowser for help on using the repository browser.