From 980d9d4935045f2f7d839dc13cfd037bd2f3fd13 Mon Sep 17 00:00:00 2001
From: Gowtham M <gowtham.m@venbainfotech.com>
Date: Tue, 11 Mar 2025 16:23:41 +0530
Subject: [PATCH] GWM

---
 pb_public/confirm_password_reset.html | 256 ++++++++++++++++++++++----
 1 file changed, 225 insertions(+), 31 deletions(-)
diff --git a/pb_public/confirm_password_reset.html b/pb_public/confirm_password_reset.html
index db3ba9b..4438be8 100644
--- a/pb_public/confirm_password_reset.html
+++ b/pb_public/confirm_password_reset.html
@@ -4,17 +4,168 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reset Password</title>
+
+    <!-- Font Awesome for Eye Icon -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script>
+
+    <style>
+        * {
+            box-sizing: border-box;
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f4f4;
+            padding: 20px;
+        }
+
+        .container {
+            background: #fff;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            width: 100%;
+            max-width: 400px;
+        }
+
+        h2 {
+            margin-bottom: 15px;
+            font-size: 18px;
+        }
+
+        .email {
+            font-weight: bold;
+            margin-bottom: 20px;
+            display: block;
+            font-size: 16px;
+        }
+
+        .form-group {
+            position: relative;
+            margin-bottom: 40px; /* Ensures spacing for error message */ 
+        }
+
+        .input-wrapper {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        /* input {
+            width: 100%;
+            padding-right: 40px; 
+        } */
+
+        input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+            background: #f0f2f5;
+            padding-right: 40px;
+        }
+
+        .toggle-password {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            font-size: 18px;
+            color: #555;
+            z-index: 10;
+        }
+
+        .error-message {
+            color: red;
+            font-size: 14px;
+            position: absolute;
+            top: 100%; /* Position below input */
+            left: 0;
+            white-space: nowrap;
+            margin-top: 4px;
+        }
+
+        .success-message {
+            color: green;
+            font-size: 18px;
+            font-weight: bold;
+            display: none;
+        }
+
+        button {
+            width: 100%;
+            padding: 12px;
+            background: #131313;
+            color: #fff;
+            border: none;
+            font-size: 16px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background: #000;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 480px) {
+            .container {
+                padding: 20px;
+                width: 90%;
+            }
+            h2 {
+                font-size: 16px;
+            }
+        }
+    </style>
 </head>
 <body>
-    <h2>Reset Your Password</h2>
-    <form id="resetForm">
-        <input type="hidden" id="token" value="">
-        <label for="password">New Password:</label>
-        <input type="password" id="password" required>
-        <label for="confirmPassword">Confirm Password:</label>
-        <input type="password" id="confirmPassword" required>
-        <button type="submit">Reset Password</button>
-    </form>
+
+    <div class="container" id="content">
+        <h2>Reset your user password</h2>
+        <!-- <span class="email">surendar.m@venbaitinfotech.com</span> --> 
+
+        <form id="resetForm">
+            <input type="hidden" id="token" value="">
+        
+            <div class="form-group">
+                <label for="password">New password *</label>
+                <div class="input-wrapper">
+                    <input type="password" id="password" required>
+                    <i class="toggle-password fas fa-eye" onclick="togglePassword('password', this)"></i>
+                </div>
+                <span class="error-message" id="passwordError"></span>
+            </div>
+        
+            <div class="form-group">
+                <label for="confirmPassword">New password confirm *</label>
+                <div class="input-wrapper">
+                    <input type="password" id="confirmPassword" required>
+                    <i class="toggle-password fas fa-eye" onclick="togglePassword('confirmPassword', this)"></i>
+                </div>
+                <span class="error-message" id="confirmPasswordError"></span>
+            </div>
+        
+            <button type="submit">Set new password</button>
+        </form>        
+
+        <div class="success-message" id="successMessage">Successfully Reset</div>
+    </div>
 
     <script>
         // Extract token from URL
@@ -22,33 +173,76 @@
         document.getElementById("token").value = params.get("token");
 
         document.getElementById("resetForm").addEventListener("submit", async (e) => {
-            e.preventDefault();
+        e.preventDefault();
 
-            const token = document.getElementById("token").value;
-            const password = document.getElementById("password").value;
-            const confirmPassword = document.getElementById("confirmPassword").value;
+        const token = document.getElementById("token").value;
+        const password = document.getElementById("password").value;
+        const confirmPassword = document.getElementById("confirmPassword").value;
 
-            if (password !== confirmPassword) {
-                alert("Passwords do not match!");
-                return;
+        const passwordError = document.getElementById("passwordError");
+        const confirmPasswordError = document.getElementById("confirmPasswordError");
+        const successMessage = document.getElementById("successMessage");
+        const resetForm = document.getElementById("resetForm");
+
+        passwordError.style.display = "none";
+        confirmPasswordError.style.display = "none";
+
+        if (!validatePassword(password)) {
+            passwordError.innerText = "Password must be at least 8 characters, include uppercase, lowercase, and a number.";
+            passwordError.style.display = "block";
+            return;
+        }
+
+        if (password !== confirmPassword) {
+            confirmPasswordError.innerText = "Passwords do not match!";
+            confirmPasswordError.style.display = "block";
+            return;
+        }
+
+        try {
+            const response = await fetch("https://pb.venbait.in/api/collections/users/confirm-password-reset", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ token, password, passwordConfirm: confirmPassword }),
+            });
+
+            if (response.ok) {
+                // Hide the form
+                resetForm.style.display = "none";
+
+                // Show success message
+                successMessage.style.display = "block";
+            } else {
+                confirmPasswordError.innerText = "Failed to reset password. Please try again.";
+                confirmPasswordError.style.display = "block";
             }
+        } catch (error) {
+            confirmPasswordError.innerText = "An error occurred. Please try again.";
+            confirmPasswordError.style.display = "block";
+            console.error("Error:", error);
+        }
+    });
 
-            try {
-                const response = await fetch("https://pb.venbait.in/api/collections/users/confirm-password-reset", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ token, password, passwordConfirm: confirmPassword }),
-                });
-
-                if (response.ok) {
-                    alert("Password reset successfully! You can now log in.");
-                } else {
-                    alert("Failed to reset password.");
-                }
-            } catch (error) {
-                console.error("Error:", error);
+        // Toggle password visibility and icon
+        function togglePassword(fieldId, icon) {
+            const field = document.getElementById(fieldId);
+            if (field.type === "password") {
+                field.type = "text";
+                icon.classList.remove("fa-eye");
+                icon.classList.add("fa-eye-slash");
+            } else {
+                field.type = "password";
+                icon.classList.remove("fa-eye-slash");
+                icon.classList.add("fa-eye");
             }
-        });
+        }
+
+        // Password validation function
+        function validatePassword(password) {
+            const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
+            return regex.test(password);
+        }
     </script>
+
 </body>
 </html>
