From 04c3e3962392e1f6a8c56fa88ab441c24a6300de Mon Sep 17 00:00:00 2001
From: SaadAli100 <150887259+SaadAli100@users.noreply.github.com>
Date: Thu, 16 May 2024 14:38:07 +0500
Subject: [PATCH]  Hide/Show_Password_Feature_registrator_html

Signed-off-by: SaadAli100 <150887259+SaadAli100@users.noreply.github.com>
---
 neo_dolfin/templates/register.html | 51 ++++++++++++++++--------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/neo_dolfin/templates/register.html b/neo_dolfin/templates/register.html
index 1aedb815..e9efafab 100644
--- a/neo_dolfin/templates/register.html
+++ b/neo_dolfin/templates/register.html
@@ -60,31 +60,34 @@ <h2 class="Subtitle">Empowering Your Financial Journey</h2>
                                             </div>
                                         </div>
                                         <div class="row mb-3">
-                                            <div class="col-md-6">
-                                                <input id ="password-input" type="password" name="password" class="form-control" placeholder="Password" pattern="(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).{12,20}" 
-                                                title="Your password must contain one digit, one lowercase letter, one uppercase letter, one special character, no space, and it must be at least 8 characters long with a maximum of 16 characters" required 
-                                                oninput="checkPassword()" onfocus="showRequirements()" onblur="hideRequirements()">
-                                                <div id="checkField">
-                                                    <ul>
-                                                        <li id="digit">One digit</li>
-                                                        <li id="lowercase">One lowercase letter</li>
-                                                        <li id="uppercase">One uppercase letter</li>
-                                                        <li id="special">One special character</li>
-                                                        <li id="length-min">At least 12 characters long</li>
-                                                        <li id="length-max">Maximum of 20 characters</li>
-                                                    </ul>
-                                                    <p id="internalList">Password is too common. Please choose a different one</p>
-                                                </div>    
-                                              <!--Checkfield for validation of password requirements-->
-
-                                            </div>
-                                            <div class="col-md-6">
-                                                <input type="password" name="confirm_password" class="form-control" placeholder="Confirm Password" required>
-                                            </div>
-                                        	<!-- Add the reCAPTCHA widget -->
-<!--<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
+                                           <div class="col-md-6">
+        <input id="password-input" type="password" name="password" class="form-control" placeholder="Password" pattern="(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).{12,20}" 
+            title="Your password must contain one digit, one lowercase letter, one uppercase letter, one special character, no space, and it must be at least 8 characters long with a maximum of 16 characters" 
+            required oninput="updateStrengthBar(this.value)" onfocus="showRequirements()" onblur="hideRequirements()">
+			<button class="btn btn-outline-secondary" type="button" id="togglePasswordBtn">Show</button>
+        <div id="checkField">
+            <ul>
+                <li id="digit">One digit</li>
+                <li id="lowercase">One lowercase letter</li>
+                <li id="uppercase">One uppercase letter</li>
+                <li id="special">One special character</li>
+                <li id="length-min">At least 12 characters long</li>
+                <li id="length-max">Maximum of 20 characters</li>
+            </ul>
+            <p id="internalList">Password is too common. Please choose a different one</p>
+        </div>
+        <!-- Checkfield for validation of password requirements -->
+        <!-- Password strength bar -->
+        <div class="password-strength">
+            <div id="strength-bar"></div>
+            <span id="strength-label"></span>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <input id="confirm_password_input"  type="password" name="confirm_password" class="form-control" placeholder="Confirm Password" required>
+		<button class="btn btn-outline-secondary" type="button" id="toggleConfirmPasswordBtn">Show</button>
+    </div>
 </div>
-
 <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->
                                         <!-- Occupation Field -->
                                         <div class="row mb-3">