From 260149d2371dd21ebedfc6352c8484537b19bba7 Mon Sep 17 00:00:00 2001
From: AnthonyDeSantiago <94334680+AnthonyDeSantiago@users.noreply.github.com>
Date: Sun, 24 Sep 2023 17:27:01 -0400
Subject: [PATCH] Added text fields for forgot password screen

---
 public/password_page_1.html | 41 ++++++++++++++++++++++++++-----
 public/sprout.js            |  4 ++++
 public/style.css            | 48 +++++++++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/public/password_page_1.html b/public/password_page_1.html
index 23ed455..3d9e629 100644
--- a/public/password_page_1.html
+++ b/public/password_page_1.html
@@ -19,10 +19,38 @@
 
             <!-- Form Page-->
             <form id="password_form">
-                <input type="email" name="user_email" class="forgot_password_form" placeholder="Email">
-                <input type="user_id" name="user_id" class="forgot_password_form" placeholder="Username">
+                <div class="form-control">
+                    <label for="email">Email</label>
+                    <input type="email" name="user_email" class="forgot_password_form" placeholder="Email">
+                    <small>Error Message</small>
+                </div>
+
+                <div class="form-control">
+                    <label for="user_id">Username</label>
+                    <input type="user_id" name="user_id" class="forgot_password_form" placeholder="Username">
+                    <small>Error Message</small>
+                </div>
+
+                
+                <label for="question1" class="question">QUESTION 1: LOAD FROM DB</label>
+                <div class="form-control">
+                    <!-- <label for="answer1">Answer</label> -->
+                    <input type="answer1" name="answer1" class="forgot_password_form" placeholder="Answer">
+                    <small>Error Message</small>
+                </div>
+
+
+                <label for="question2" class="question">QUESTION 2: LOAD FROM DB</label>
+                <div class="form-control">
+                    <!-- <label for="answer1">Answer</label> -->
+                    <input type="answer2" name="answer2" class="forgot_password_form" placeholder="Answer">
+                    <small>Error Message</small>
+                </div>
+                
                 <br>
-            <div class="drop_down_list">
+
+
+            <!--<div class="drop_down_list">
                 <div class="selector">
                     <label for="security_question" class= "dropdown_list_FP"> 
                         Security Questions
@@ -46,12 +74,13 @@
 
                     
                 </div>
-            </div>    
-        </form>        
+            </div> -->  
+                <button class="password_submit_form" type="submit">Submit</button>
+            </form>        
 
             <!-- button -->
             <a href="index.html">
-                <button class = "password_submit_form">Submit</button>
+                
             </a>
             
         </main>
diff --git a/public/sprout.js b/public/sprout.js
index f14f99a..94f90c6 100644
--- a/public/sprout.js
+++ b/public/sprout.js
@@ -85,6 +85,10 @@ function showError(input, message) {
     small.innerText = message
 }
 
+document.getElementById("password_form").addEventListener("submit", async function (e) {
+    console.log("button was pressed")
+});
+
 document.getElementById("new_user_form").addEventListener("submit", async function (e) {
     e.preventDefault();
 
diff --git a/public/style.css b/public/style.css
index 9eb5128..92cd1f0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -96,8 +96,56 @@ body{
     
     visibility: hidden;
 }
+
+.form-control.error small {
+    color: var(--error-color);
+    visibility: visible;
+}
 /*End of New user Form*/
 
+#password_form {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    width:100%;    
+    margin-top: 10%;
+}
+
+.form-control {
+    margin-bottom: 1%;
+    padding-bottom: 1%;
+    position: relative;
+}
+
+.form-control label {
+    color: #444444;
+    display: block;
+    margin-bottom: 1%;
+    font-size: x-large;
+}
+
+.form-control input {
+    border: 2px solid #6d6d6d;
+    border-radius: 4px;
+    display: block;
+    margin-bottom: 1%;
+    width: 100%;
+    padding: 2%
+}
+
+.form-control input:focus {
+    outline: 0;
+    border-color: #161616;
+}
+
+.form-control.error input {
+    border-color: var(--error-color);
+}
+
+.form-control small {
+    
+    visibility: hidden;
+}
 
 .form-control.error small {
     color: var(--error-color);