From 594f2ae967407d888256e233aa6e2c7c12cb80c0 Mon Sep 17 00:00:00 2001
From: Sania <sania.golhar@gmail.com>
Date: Sat, 2 Nov 2024 14:46:47 +0530
Subject: [PATCH] Functional login with google and signup with google button
 options

---
 index.html  |   6 +-
 login.html  | 200 ----------------------------------------------------
 signup.html | 188 ------------------------------------------------
 3 files changed, 3 insertions(+), 391 deletions(-)
 delete mode 100644 login.html
 delete mode 100644 signup.html
diff --git a/index.html b/index.html
index 3c358fc0..39ed6b64 100644
--- a/index.html
+++ b/index.html
@@ -418,8 +418,8 @@ <h2 class="text-center">Login</h2>
                                 transition: 0.5s ease;
                             }
                         </style>
-                        <!-- Google Sign-In Button -->
-                        <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
+                        <!-- Google Login Button -->
+                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
                             <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
                             Sign in with Google</button>
                         <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
@@ -456,7 +456,7 @@ <h2 class="text-center">Signup</h2>
                         </div>
                         <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
                         <!-- Google Sign-In Button -->
-                        <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
+                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
                             <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
                             Sign in with Google</button>
                         <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
diff --git a/login.html b/login.html
deleted file mode 100644
index 0cdbbeb2..00000000
--- a/login.html
+++ /dev/null
@@ -1,200 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>WordWise</title>
-    <!--favicon-->
-    <link rel="shortcut icon" type="image/x-icon" href="/images/favi.webp" />
-
-    <!--css-->
-    <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="login.css" />
-
-    <style>
-      .input-field {
-        position: relative;
-        margin-bottom: 20px;
-      }
-
-      .input-box {
-        width: 100%;
-        padding-right: 40px; /* Extra space for icons */
-        padding-left: 10px;
-        height: 40px;
-        box-sizing: border-box;
-      }
-
-      .toggle-eye,
-      .close-btn {
-        cursor: pointer;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        color: black;
-        font-size: 18px;
-        margin-top: 15px;
-      }
-
-      .toggle-eye {
-        right: 40px; /* Space for close button */
-      }
-
-      .close-btn {
-        right: 10px;
-        font-size: 20px;
-        color: red;
-      }
-
-      .toggle-eye:hover,
-      .close-btn:hover {
-        color: #555; /* Change color on hover for better UX */
-      }
-
-      /* Animation for smooth transitions */
-      .input-box {
-        transition: all 0.3s ease;
-      }
-
-      .fa-eye,
-      .fa-eye-slash {
-        transition: all 0.3s ease;
-      }
-    </style>
-  </head>
-
-  <body>
-    <header class="navbar">
-      <div class="logo">
-        <h2><a class="home-link" href="index.html">WordWise</a></h2>
-      </div>
-
-      <nav class="nav-menu">
-        <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="blog.html">Leading Blog</a></li>
-          <li><a href="start_writing.html">Start Writing</a></li>
-          <li><a href="category.html">Categories</a></li>
-
-          <li><a href="contact_us.html">Contact Us</a></li>
-          <li><a href="contact_us.html">Give Feedback</a></li>
-        </ul>
-      </nav>
-
-      <div class="auth-buttons">
-        <div class="nav-item dropdown" style="list-style-type: none">
-          <button class="dropbtn">
-            <img
-              width="30px"
-              src="images/profile.webp"
-              alt="Profile"
-              class="profile-icon"
-              onclick="toggleDropdown()"
-            />
-          </button>
-          <div id="profile-dropdown" class="dropdown-content">
-            <div class="login-signup-form">
-              <a href="login.html">Log In</a>
-              <a href="signup.html">Sign Up</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="theme-switch-wrapper">
-        <label class="theme-switch" for="checkbox">
-          <input type="checkbox" id="checkbox" />
-          <div class="slider">
-            <img
-              src="https://img.icons8.com/emoji/48/000000/sun-emoji.png"
-              alt="Sun"
-              class="icon sun-icon"
-            />
-            <img
-              src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png"
-              alt="Moon"
-              class="icon moon-icon"
-            />
-          </div>
-        </label>
-        <span id="mode-label">Light Mode</span>
-      </div>
-    </header>
-
-    <main>
-      <div class="container-login">
-        <!-- Login Form -->
-        <div class="box-login">
-          <div class="top-header">
-            <h2>Login</h2>
-          </div>
-          <div class="input-group">
-            <div class="input-field">
-              <label for="Name">Email</label><br />
-              <input type="email" class="input-box name" aria-label="email" placeholder="Enter Name" />
-            </div>
-
-            <!-- Password field with eye icon and cross button -->
-            <div class="input-field">
-              <label for="password">Password</label><br />
-              <input
-                type="password"
-                id="password"
-                class="input-box pass"
-                aria-label="password"
-                placeholder="Enter Password"
-              />
-              <span
-                class="toggle-eye"
-                onclick="togglePassword('password', 'eye-icon')"
-              >
-                <i id="eye-icon" class="fa fa-eye-slash"></i>
-              </span>
-              <!-- Close button to clear input -->
-              <span class="close-btn" onclick="clearInput('password')">&times;</span>
-            </div>
-
-            <div class="remember">
-              <input type="checkbox" class="check" id="formcheck" />
-              <label for="formcheck">Remember Me</label>
-            </div>
-            <div class="submit">
-              <input type="submit" class="Input-submit" value="LOGIN" />
-            </div>
-            <div class="forgot">
-              <a href="/*">Forgot Password?</a>
-            </div>
-          </div>
-          <div class="new">
-            <span>New User?</span>
-            <a href="signup.html">Sign Up</a>
-          </div>
-        </div>
-      </div>
-    </main>
-
-    <!-- Font Awesome for icons -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
-
-    <script>
-      // Toggle password visibility
-      function togglePassword(inputId, iconId) {
-        const passwordField = document.getElementById(inputId);
-        const eyeIcon = document.getElementById(iconId);
-        if (passwordField.type === "password") {
-          passwordField.type = "text";
-          eyeIcon.classList.remove("fa-eye-slash");
-          eyeIcon.classList.add("fa-eye");
-        } else {
-          passwordField.type = "password";
-          eyeIcon.classList.remove("fa-eye");
-          eyeIcon.classList.add("fa-eye-slash");
-        }
-      }
-
-      // Clear input field
-      function clearInput(inputId) {
-        document.getElementById(inputId).value = "";
-      }
-    </script>
-  </body>
-</html>
diff --git a/signup.html b/signup.html
deleted file mode 100644
index 21cdf51e..00000000
--- a/signup.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>WordWise</title>
-    <link rel="shortcut icon" type="image/x-icon" href="/images/favi.webp" />
-    <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="signup.css" />
-    <style>
-      .input-field {
-        position: relative;
-        margin-bottom: 20px;
-      }
-
-      .input-box {
-        width: 100%;
-        padding-right: 40px; /* Extra space for the eye icon */
-        padding-left: 10px;
-        height: 40px;
-        box-sizing: border-box; /* Ensure padding is included in width */
-      }
-
-      .toggle-eye {
-        cursor: pointer;
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%); /* Align vertically in the center */
-        color: black;
-        font-size: 18px;
-        margin-top: 15px;
-      }
-
-      .error {
-        color: red;
-        font-size: 12px;
-        margin-top: 5px;
-      }
-    </style>
-  </head>
-  <body>
-    <header class="navbar">
-      <div class="logo">
-        <h2><a class="home-link" href="index.html">WordWise</a></h2>
-      </div>
-    </header>
-
-    <main>
-      <div class="container-signup">
-        <div class="box-login">
-          <div class="top-header">
-            <h2>Sign Up</h2>
-          </div>
-          <div class="input-group">
-            <div class="input-field">
-              <label for="Name">Name</label><br />
-              <input type="text" id="name" class="input-box" aria-label="name" placeholder="Enter Name" />
-            </div>
-            <div class="input-field">
-              <label for="Mail">Email</label><br />
-              <input type="text" id="email" class="input-box" placeholder="Enter Email" />
-            </div>
-
-            <!-- Password Field with Toggle Eye Icon inside -->
-            <div class="input-field">
-              <label for="password">Password</label><br />
-              <input
-                type="password"
-                id="password"
-                class="input-box"
-                placeholder="Enter Password"
-                aria-label="password"
-                oninput="validatePassword()"
-              />
-              <span
-                class="toggle-eye"
-                onclick="togglePassword('password', 'eye-icon1')"
-              >
-                <i id="eye-icon1" class="fa fa-eye-slash"></i>
-              </span>
-              <div class="error" id="passwordError"></div>
-            </div>
-
-            <!-- Confirm Password Field with Toggle Eye Icon inside -->
-            <div class="input-field">
-              <label for="confirm-password">Confirm Password</label><br />
-              <input
-                type="password"
-                id="confirm-password"
-                class="input-box"
-                aria-label="confirm password"
-                placeholder="Confirm Password"
-              />
-              <span
-                class="toggle-eye"
-                onclick="togglePassword('confirm-password', 'eye-icon2')"
-              >
-                <i id="eye-icon2" class="fa fa-eye-slash"></i>
-              </span>
-            </div>
-
-            <div class="submit">
-              <input
-                type="submit"
-                class="Input-submit"
-                value="SIGN UP"
-                aria-label="submit"
-                onclick="submitForm(event)"
-              />
-            </div>
-          </div>
-          <div class="new">
-            <span>Already have an account?</span>
-            <a href="login.html">Log In</a>
-          </div>
-        </div>
-      </div>
-    </main>
-
-    <!-- Font Awesome for icons -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
-
-    <script>
-      // Toggle password visibility for both password fields
-      function togglePassword(inputId, iconId) {
-        const passwordField = document.getElementById(inputId);
-        const eyeIcon = document.getElementById(iconId);
-        if (passwordField.type === "password") {
-          passwordField.type = "text";
-          eyeIcon.classList.remove("fa-eye-slash");
-          eyeIcon.classList.add("fa-eye");
-        } else {
-          passwordField.type = "password";
-          eyeIcon.classList.remove("fa-eye");
-          eyeIcon.classList.add("fa-eye-slash");
-        }
-      }
-
-      // Password validation
-      function validatePassword() {
-        const password = document.getElementById("password").value;
-        const errorElement = document.getElementById("passwordError");
-        const hasUpperCase = /[A-Z]/.test(password);
-        const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
-        const isValidLength = password.length >= 8;
-
-        if (!hasUpperCase || !hasSpecialChar || !isValidLength) {
-          errorElement.textContent =
-            "Password must have at least 1 uppercase letter, 1 special character, and be at least 8 characters long.";
-          return false;
-        } else {
-          errorElement.textContent = ""; // Clear error
-          return true;
-        }
-      }
-
-      // Handle form submission
-      async function submitForm(event) {
-        event.preventDefault()
-        
-        if (!validatePassword()) {
-          event.preventDefault(); // Prevent form submission if validation fails
-        }
-        const password = document.getElementById("password").value;
-        const name = document.getElementById("name").value;
-        const email = document.getElementById("email").value;
-
-        const data = {
-          name: name,
-          email: email,
-          password: password
-        };
-
-        const options = {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(data),
-        };
-
-        await fetch("http://localhost:3000/signup", options)
-         
-      }
-    </script>
-  </body>
-</html>
