From d1e59097e6ba7326d76ac153d3d29d3e1b2b4cef Mon Sep 17 00:00:00 2001
From: knoy00 <kelvin.oy16@gmail.com>
Date: Thu, 27 Jul 2023 10:16:40 +0000
Subject: [PATCH] Made some modifications by adding a sign up form

---
 login-01/index.html | 26 ++++++++++++++++++++++----
 login-01/script.js  | 15 ++++++++++++++-
 login-01/style.css  | 13 +++++++++++++
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/login-01/index.html b/login-01/index.html
index 02f8e5d6..c3b0de32 100644
--- a/login-01/index.html
+++ b/login-01/index.html
@@ -14,7 +14,7 @@
                         src="astronaut.jpg"
                     />
                     <!-- optimize the image in production -->
-                    <h1>LogIn!</h1>
+                    <h1 id="title">LogIn!</h1>
                 </span>
                 <div class="text-field">
                     <label for="email">Email:</label>
@@ -50,14 +50,32 @@ <h1>LogIn!</h1>
                         src="password.svg"
                     >
                 </div>
-                <input type="submit" class="my-form__button" value="Login" />
+                <div class="text-field" id="confirmPassword">
+                    <label for="password">Confirm Password:</label>
+                    <input
+                        id="password"
+                        type="password"
+                        aria-label="Password"
+                        name="password"
+                        placeholder="Your Password"
+                        title="Minimum 6 characters at least 1 Alphabet and 1 Number"
+                        pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$"
+                        required
+                    >
+                    <img
+                        alt="Password Icon"
+                        title="Password Icon"
+                        src="password.svg"
+                    >
+                </div>
+                <input type="submit" class="my-form__button" value="Login" id="Login_button"/>
                 <div class="my-form__actions">
-                    <div class="my-form__row">
+                    <div class="my-form__row" id="resetPassword">
                         <span>Did you forget your password?</span>
                         <a href="#" title="Reset Password">Reset Password</a>
                     </div>
                     <div class="my-form__signup">
-                        <a href="#" title="Create Account">Create Account</a>
+                        <a href="#" title="Create Account" id="Create_account">Create Account</a>
                     </div>
                 </div>
             </form>
diff --git a/login-01/script.js b/login-01/script.js
index 24cf6716..01ffc6d3 100644
--- a/login-01/script.js
+++ b/login-01/script.js
@@ -8,4 +8,17 @@ loginForm.addEventListener("submit", (e) => {
     console.log('Email:', email.value);
     console.log('Password:', password.value);
     // process and send to API 
-});
\ No newline at end of file
+});
+
+let title = document.getElementById("title");
+let loginButton = document.getElementById("Login_button");
+let createLink = document.getElementById("Create_account");
+let reset = document.getElementById("resetPassword")
+
+createLink.onclick = function() {
+    title.innerHTML = "SignUp";
+    loginButton.value = "Signup";
+    createLink.innerHTML = "Login";
+    confirmPassword.classList.add("show");
+    reset.style.display = "none"
+}
diff --git a/login-01/style.css b/login-01/style.css
index 1f483546..a3753418 100644
--- a/login-01/style.css
+++ b/login-01/style.css
@@ -117,6 +117,19 @@ h1 {
     margin-top: 8px;
 }
 
+#confirmPassword {
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+    transition: opacity 0.7s ease, height 0.7s ease;
+  }
+  
+  
+  #confirmPassword.show {
+    opacity: 1;
+    height: auto;
+  }
+
 
 .my-form__button:hover {
     background-color: var(--primary-hover);