Merge pull request #19 from AnthonyDeSantiago/newUser

Added text fields for forgot password screen
AnthonyDeSantiago · Sep 24, 2023 · e21444b · e21444b
2 parents 7e2952d + 260149d
commit e21444b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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);