Added Reset Password Form (#1367)

Rakesh9100 · Aug 10, 2024 · 9eb8f3d · 9eb8f3d
1 parent 3859003
commit 9eb8f3d
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 0 deletions.
diff --git a/Components/Forms/Reset-Password-Form/index.html b/Components/Forms/Reset-Password-Form/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reset Password</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="reset-password-container">
+        <h2>Reset Your Password</h2>
+        <form id="resetPasswordForm">
+            <div class="input-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            <div class="input-group">
+                <label for="newPassword">New Password</label>
+                <input type="password" id="newPassword" name="newPassword" required>
+            </div>
+            <div class="input-group">
+                <label for="confirmPassword">Confirm Password</label>
+                <input type="password" id="confirmPassword" name="confirmPassword" required>
+            </div>
+            <button type="submit">Reset Password</button>
+            <p id="error-message"></p>
+        </form>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Components/Forms/Reset-Password-Form/script.js b/Components/Forms/Reset-Password-Form/script.js
@@ -0,0 +1,15 @@
+document.getElementById("resetPasswordForm").addEventListener("submit", function(event) {
+    event.preventDefault();
+
+    const newPassword = document.getElementById("newPassword").value;
+    const confirmPassword = document.getElementById("confirmPassword").value;
+    const errorMessage = document.getElementById("error-message");
+
+    if (newPassword !== confirmPassword) {
+        errorMessage.textContent = "Passwords do not match.";
+    } else {
+        errorMessage.textContent = "";
+        // Add your form submission logic here
+        alert("Password reset successful!");
+    }
+});
diff --git a/Components/Forms/Reset-Password-Form/style.css b/Components/Forms/Reset-Password-Form/style.css
@@ -0,0 +1,70 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #72EDF2 10%, #5151E5 100%);
+}
+
+.reset-password-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    width: 350px;
+}
+
+h2 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+    font-family: 'Georgia', serif;
+}
+
+.input-group {
+    margin-bottom: 15px;
+    font-family: 'Lobster', cursive;
+}
+
+.label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #555;
+
+}
+
+input[type="email"],
+input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 14px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #5151E5;
+    border: none;
+    border-radius: 4px;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    font-family: 'Lobster', cursive;
+}
+
+button:hover {
+    background-color: #333;
+}
+
+#error-message {
+    color: red;
+    text-align: center;
+    margin-top: 10px;
+}
diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
@@ -519,6 +519,19 @@ <h1>Registration Form</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Reset Password Form</h1>
+                <div class="preview">
+                    <a href="../../Components/Forms/Reset-Password-Form/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Forms/Reset-Password-Form" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Sign Up Form</h1>
                 <div class="preview">