forgot password added

agarwalbhargavi · Oct 10, 2024 · 352b7cd · 352b7cd
1 parent d8cd5b1
commit 352b7cd
Show file tree

Hide file tree

Showing 9 changed files with 215 additions and 4 deletions.
diff --git a/about.html b/about.html
@@ -100,11 +100,28 @@ <h2>Login</h2>
         <input type="email" id="loginEmail" placeholder="Enter Email" name="email" required>
         <label for="loginPsw"><b>Password</b></label>
         <input type="password" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+        <div class="forgot">
+            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+          </div>
         <button type="submit" class="btn">LOGIN</button>
         <button type="button" class="btn cancel" onclick="closeForm('login')">CLOSE</button>
     </form>
 </div>
 
+<!-- Forgot Password Modal -->
+<div id="forgot-password-modal" class="modal">
+    <div class="form-container modal-content">
+      <h2>Forgot Password</h2>
+      <p>Please enter your email address to reset your password.</p>
+
+      <label for="email">Email Address</label>
+      <input type="email" id="email" placeholder="Enter your email" required />
+
+      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+    </div>
+  </div>
+
    <!-- Login Form -->
 <div class="form-popup" id="loginForm">
     <form class="form-container" onsubmit="return validateLoginForm()">
@@ -117,7 +134,9 @@ <h2>Login</h2>
             <input type="password" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
             <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
         </div>
-
+        <div class="forgot">
+            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+          </div>
         <button type="submit" class="btn">LOGIN</button>
         <button type="button" class="btn cancel" onclick="closeForm('login')">CLOSE</button>
     </form>

diff --git a/blog.html b/blog.html
@@ -65,6 +65,9 @@ <h2>Login</h2>
           <input type="password" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
           <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
       </div>
+      <div class="forgot">
+        <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+      </div>
 
       <button type="submit" class="btn">LOGIN</button>
       <button type="button" class="btn cancel" onclick="closeForm('login')">CLOSE</button>
@@ -103,6 +106,20 @@ <h2>Signup</h2>
   </form>
 </div>
 
+<!-- Forgot Password Modal -->
+<div id="forgot-password-modal" class="modal">
+  <div class="form-container modal-content">
+    <h2>Forgot Password</h2>
+    <p>Please enter your email address to reset your password.</p>
+
+    <label for="email">Email Address</label>
+    <input type="email" id="email" placeholder="Enter your email" required />
+
+    <button class="btn" onclick="submitForgotPassword()">Submit</button>
+    <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+  </div>
+</div>
+
 <!-- Bootstrap Icons and Script for Eye Icon Functionality -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 <script>

diff --git a/category.html b/category.html
@@ -77,6 +77,9 @@ <h2>Login</h2>
                 <input type="email" id="loginEmail" placeholder="Enter Email" name="email" required>
                 <label for="loginPsw"><b>Password</b></label>
                 <input type="password" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                <div class="forgot">
+                    <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+                  </div>
                 <button type="submit" class="btn">LOGIN</button>
                 <button type="button" class="btn cancel" onclick="closeForm('login')">CLOSE</button>
             </form>
@@ -110,7 +113,19 @@ <h2>Signup</h2>
         </div>
         <script src="signup.js"></script> <!-- Link to your JavaScript file -->
 
-
+        <!-- Forgot Password Modal -->
+<div id="forgot-password-modal" class="modal">
+    <div class="form-container modal-content">
+      <h2>Forgot Password</h2>
+      <p>Please enter your email address to reset your password.</p>
+
+      <label for="email">Email Address</label>
+      <input type="email" id="email" placeholder="Enter your email" required />
+
+      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+    </div>
+  </div>
 
         <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">

diff --git a/contact_us.html b/contact_us.html
@@ -119,6 +119,9 @@ <h2>Login</h2>
           <input type="password" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
           <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
       </div>
+      <div class="forgot">
+        <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+      </div>
 
       <button type="submit" class="btn">LOGIN</button>
       <button type="button" class="btn cancel" onclick="closeForm('login')">CLOSE</button>
@@ -156,6 +159,19 @@ <h2>Signup</h2>
       <button type="button" class="btn cancel" onclick="closeForm('signup')">CLOSE</button>
   </form>
 </div>
+<!-- Forgot Password Modal -->
+<div id="forgot-password-modal" class="modal">
+  <div class="form-container modal-content">
+    <h2>Forgot Password</h2>
+    <p>Please enter your email address to reset your password.</p>
+
+    <label for="email">Email Address</label>
+    <input type="email" id="email" placeholder="Enter your email" required />
+
+    <button class="btn" onclick="submitForgotPassword()">Submit</button>
+    <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+  </div>
+</div>
 
 <!-- Bootstrap Icons and Script for Eye Icon Functionality -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

diff --git a/index.html b/index.html
@@ -200,6 +200,9 @@ <h2 class="text-center">Login</h2>
             <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
             <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
         </div>
+        <div class="forgot">
+            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+          </div>
         <button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
        <!-- Google Sign-In Button -->
              <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
@@ -241,6 +244,20 @@ <h2 class="text-center">Signup</h2>
     </form>
 </div>
 
+<!-- Forgot Password Modal -->
+<div id="forgot-password-modal" class="modal">
+    <div class="form-container modal-content">
+      <h2>Forgot Password</h2>
+      <p>Please enter your email address to reset your password.</p>
+
+      <label for="email">Email Address</label>
+      <input type="email" id="email" placeholder="Enter your email" required />
+
+      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+    </div>
+  </div>
+
 <!-- Toggle Password Visibility Script -->
 <script>
     function togglePasswordVisibility(passwordFieldId, iconId) {

diff --git a/main.js b/main.js
@@ -65,6 +65,38 @@ function closeForm(formType) {
   }
 }
 
+function openForgotPassword() {
+  document.getElementById('loginForm').style.display = 'none';
+  document.getElementById('forgot-password-modal').style.display = 'block';
+}
+
+// Close Forgot Password Modal
+function closeForgotPasswordModal() {
+  document.getElementById('forgot-password-modal').style.display = 'none';
+}
+
+// Simulate form submission for Forgot Password
+function submitForgotPassword() {
+  const email = document.getElementById('email').value;
+  if (email) {
+    alert("Password reset instructions have been sent to " + email);
+    closeForgotPasswordModal(); // Close modal after submission
+  } else {
+    alert("Please enter your email.");
+  }
+}
+
+// Close modal when clicking outside of it
+window.onclick = function(event) {
+  const modal = document.getElementById('forgot-password-modal');
+  if (event.target == modal) {
+    modal.style.display = 'none';
+  }
+};
+
+
+
+
 //Active Nav bar 
 const navLinks = document.querySelectorAll('.nav-link');
 const setActiveLink = () => {

diff --git a/start.html b/start.html
@@ -62,7 +62,9 @@ <h2>Login</h2>
           <input type="password" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
           <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
       </div>
-
+      <div class="forgot">
+        <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+      </div>
       <button type="submit" class="btn">LOGIN</button>
       <button type="button" class="btn cancel" onclick="closeForm('login')">CLOSE</button>
   </form>
@@ -99,7 +101,19 @@ <h2>Signup</h2>
       <button type="button" class="btn cancel" onclick="closeForm('signup')">CLOSE</button>
   </form>
 </div>
+<!-- Forgot Password Modal -->
+<div id="forgot-password-modal" class="modal">
+  <div class="form-container modal-content">
+    <h2>Forgot Password</h2>
+    <p>Please enter your email address to reset your password.</p>
+
+    <label for="email">Email Address</label>
+    <input type="email" id="email" placeholder="Enter your email" required />
 
+    <button class="btn" onclick="submitForgotPassword()">Submit</button>
+    <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+  </div>
+</div>
 <!-- Bootstrap Icons and Script for Eye Icon Functionality -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 <script>

diff --git a/start_writing.html b/start_writing.html
@@ -86,7 +86,9 @@ <h2>Login</h2>
           <input type="password" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
           <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
       </div>
-
+      <div class="forgot">
+        <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+      </div>
       <button type="submit" class="btn">LOGIN</button>
       <button type="button" class="btn cancel" onclick="closeForm('login')">CLOSE</button>
   </form>
@@ -124,6 +126,19 @@ <h2>Signup</h2>
   </form>
 </div>
 
+<!-- Forgot Password Modal -->
+<div id="forgot-password-modal" class="modal">
+  <div class="form-container modal-content">
+    <h2>Forgot Password</h2>
+    <p>Please enter your email address to reset your password.</p>
+
+    <label for="email">Email Address</label>
+    <input type="email" id="email" placeholder="Enter your email" required />
+
+    <button class="btn" onclick="submitForgotPassword()">Submit</button>
+    <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+  </div>
+</div>
 <!-- Bootstrap Icons and Script for Eye Icon Functionality -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 <script>

diff --git a/style.css b/style.css
@@ -709,6 +709,60 @@ button {
   transition: all 0.3s;
 }
 
+/* Modal Styling */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed;
+  z-index: 500;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */
+}
+
+.modal-content {
+  background-color: var(--background-color);
+  margin: 10% auto; /* 10% from the top and centered */
+  padding: 20px;
+  border-radius: 10px;
+  width: 50%; /* Adjust as needed */
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* Modal form container */
+.form-container h2,
+.form-container p {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.form-container input[type="email"] {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 2px solid var(--text-color);
+  border-radius: 5px;
+  font-size: 16px;
+  background-color: transparent;
+  color: var(--text-color);
+}
+
+.form-container .btn,
+.form-container .cancel {
+  margin-top: 20px;
+}
+
+/* Center the modal content */
+.form-container {
+  padding: 5% 10%;
+}
+
+.cancel {
+  background-color: #ec6371;
+  color: white;
+  border: none;
+}
 
 
 
@@ -2428,3 +2482,15 @@ footer p {
   border-color: #333;
   outline: none;
 }
+
+.forgot {
+  text-align: end;
+  font-size: 13px;
+  padding: 23px;
+}
+
+.forgot a {
+  text-decoration: none;
+  color: brown;
+  cursor: pointer;
+}