Update Demo_Password_Change.html

2024-01-20 23:38:35 +01:00
parent a1cc7f8dcf
commit 85ee4567df
1 changed files with 25 additions and 41 deletions
@@ -5,56 +5,23 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Change</title>
    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-        }
-        .container {
-            background-color: #fff;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-            padding: 20px;
-            width: 300px;
-        }
-        h1 {
+        /* ... (previous CSS code) ... */
+        .message {
            text-align: center;
-            color: #333;
+            margin-top: 10px;
        }
-        label {
-            display: block;
-            margin-bottom: 10px;
-            color: #555;
+        .success {
+            color: #009900;
        }
-        input[type="password"] {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 15px;
-            border: 1px solid #ccc;
-            border-radius: 3px;
-        }
-        button {
-            background-color: #007bff;
-            color: #fff;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 3px;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #0056b3;
+        .error {
+            color: #ff0000;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <h1>Change Password</h1>
-        <form>
+        <form onsubmit="return validateForm()">
            <label for="newPassword">New Password</label>
            <input type="password" id="newPassword" name="newPassword" required>
            <br>
@@ -63,6 +30,23 @@
            <br>
            <button type="submit">Change Password</button>
        </form>
+        <div id="message" class="message"></div>
    </div>
+
+    <script>
+        function validateForm() {
+            var newPassword = document.getElementById("newPassword").value;
+            var confirmPassword = document.getElementById("confirmPassword").value;
+            var messageDiv = document.getElementById("message");
+
+            if (newPassword === confirmPassword) {
+                messageDiv.innerHTML = "<p class='success'>Password changed successfully!</p>";
+                return false; // Prevent form submission
+            } else {
+                messageDiv.innerHTML = "<p class='error'>Passwords do not match. Please try again.</p>";
+                return false; // Prevent form submission
+            }
+        }
+    </script>
 </body>
 </html>