From 9eb8f3d637658e2dfc39a3e7baf5769a8fbff534 Mon Sep 17 00:00:00 2001 From: Nayanika Mukherjee <132455412+Nayanika1402@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:52:48 +0530 Subject: [PATCH] Added Reset Password Form (#1367) --- .../Forms/Reset-Password-Form/index.html | 31 ++++++++ .../Forms/Reset-Password-Form/script.js | 15 ++++ .../Forms/Reset-Password-Form/style.css | 70 +++++++++++++++++++ assets/html_files/forms.html | 13 ++++ 4 files changed, 129 insertions(+) create mode 100644 Components/Forms/Reset-Password-Form/index.html create mode 100644 Components/Forms/Reset-Password-Form/script.js create mode 100644 Components/Forms/Reset-Password-Form/style.css diff --git a/Components/Forms/Reset-Password-Form/index.html b/Components/Forms/Reset-Password-Form/index.html new file mode 100644 index 00000000..ea00a88c --- /dev/null +++ b/Components/Forms/Reset-Password-Form/index.html @@ -0,0 +1,31 @@ + + + + + + Reset Password + + + +
+

Reset Your Password

+
+
+ + +
+
+ + +
+
+ + +
+ +

+
+
+ + + diff --git a/Components/Forms/Reset-Password-Form/script.js b/Components/Forms/Reset-Password-Form/script.js new file mode 100644 index 00000000..df2841d4 --- /dev/null +++ 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 new file mode 100644 index 00000000..28d12008 --- /dev/null +++ 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 index 3c271d63..8b617819 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -519,6 +519,19 @@

Registration Form

+
+

Reset Password Form

+
+ + + +
+
+ + + +
+

Sign Up Form