1- const sign_in_btn = document . querySelector ( "#sign-in-btn" ) ;
2- const sign_up_btn = document . querySelector ( "#sign-up-btn" ) ;
3- const container = document . querySelector ( ".container" ) ;
4-
5- sign_up_btn . addEventListener ( "click" , ( ) => {
6- container . classList . add ( "sign-up-mode" ) ;
7- } ) ;
8-
9- sign_in_btn . addEventListener ( "click" , ( ) => {
10- container . classList . remove ( "sign-up-mode" ) ;
11- } ) ;
12-
13- // Sign in form submission
14- document . querySelector ( ".sign-in-form" ) . addEventListener ( 'submit' , function ( event ) {
15- event . preventDefault ( ) ;
16-
17- // Get the input values
18- const username = document . querySelector ( ".sign-in-form input[type='text']" ) . value ;
19- const password = document . querySelector ( ".sign-in-form input[type='password']" ) . value ;
20-
21- // Dummy login logic for demo purposes
22- if ( username === 'admin' && password === 'password' ) {
23- alert ( 'Login successful!' ) ;
1+ // Wait until the DOM is fully loaded before executing
2+ document . addEventListener ( 'DOMContentLoaded' , ( ) => {
3+
4+ // Toggle password visibility for both sign-in and sign-up forms
5+ const togglePasswordIcons = document . querySelectorAll ( '.toggle-password' ) ;
6+
7+ togglePasswordIcons . forEach ( iconWrapper => {
8+ iconWrapper . addEventListener ( 'click' , function ( ) {
9+ const passwordField = this . previousElementSibling ;
10+ const icon = this . querySelector ( 'i' ) ;
11+
12+ // Toggle password visibility
13+ const isPasswordVisible = passwordField . type === 'password' ;
14+ passwordField . type = isPasswordVisible ? 'text' : 'password' ;
15+
16+ // Toggle icon between eye and eye-slash
17+ icon . classList . toggle ( 'fa-eye' , ! isPasswordVisible ) ;
18+ icon . classList . toggle ( 'fa-eye-slash' , isPasswordVisible ) ;
19+ } ) ;
20+ } ) ;
21+
22+ // Toggle between sign-in and sign-up mode
23+ const sign_in_btn = document . querySelector ( "#sign-in-btn" ) ;
24+ const sign_up_btn = document . querySelector ( "#sign-up-btn" ) ;
25+ const container = document . querySelector ( ".container" ) ;
26+
27+ sign_up_btn . addEventListener ( "click" , ( ) => {
28+ container . classList . add ( "sign-up-mode" ) ;
29+ } ) ;
30+
31+ sign_in_btn . addEventListener ( "click" , ( ) => {
32+ container . classList . remove ( "sign-up-mode" ) ;
33+ } ) ;
34+
35+ // Sign-in form submission
36+ document . querySelector ( ".sign-in-form" ) . addEventListener ( 'submit' , function ( event ) {
37+ event . preventDefault ( ) ;
38+
39+ // Get the input values
40+ const username = document . querySelector ( ".sign-in-form input[type='text']" ) . value ;
41+ const password = document . querySelector ( ".sign-in-form input[type='password']" ) . value ;
42+
43+ // Dummy login logic for demo purposes
44+ if ( username === 'admin' && password === 'password' ) {
45+ alert ( 'Login successful!' ) ;
46+ // Redirect to dashboard page
47+ window . location . href = 'index.html' ;
48+ } else {
49+ alert ( 'Invalid username or password' ) ;
50+ }
51+ } ) ;
52+
53+ // Sign-up form submission
54+ document . querySelector ( ".sign-up-form" ) . addEventListener ( 'submit' , function ( event ) {
55+ event . preventDefault ( ) ;
56+
57+ // Get the input values
58+ const username = document . querySelector ( ".sign-up-form input[type='text']" ) . value ;
59+ const email = document . querySelector ( ".sign-up-form input[type='email']" ) . value ;
60+ const password = document . querySelector ( ".sign-up-form input[type='password']" ) . value ;
61+
62+ if ( username === '' || email === '' || password === '' ) {
63+ alert ( 'Please fill in all fields' ) ;
64+ return ;
65+ }
66+
67+ // Dummy signup logic for demo purposes
68+ localStorage . setItem ( 'username' , username ) ;
69+ localStorage . setItem ( 'email' , email ) ;
70+ localStorage . setItem ( 'password' , password ) ;
71+ localStorage . setItem ( 'isLoggedIn' , 'true' ) ;
72+
73+ alert ( 'Signup successful!' ) ;
2474 // Redirect to dashboard page
2575 window . location . href = 'index.html' ;
26- } else {
27- alert ( 'Invalid username or password' ) ;
76+ } ) ;
77+
78+ // Check password strength for sign-up form
79+ function checkPasswordStrength ( ) {
80+ const password = document . querySelector ( ".sign-up-form input[type='password']" ) . value ;
81+ const strengthWeak = document . getElementById ( 'strength-weak' ) ;
82+ const strengthMedium = document . getElementById ( 'strength-medium' ) ;
83+ const strengthStrong = document . getElementById ( 'strength-strong' ) ;
84+
85+ let strength = 0 ;
86+
87+ if ( password . length >= 8 ) strength ++ ;
88+ if ( password . match ( / [ A - Z ] / ) ) strength ++ ;
89+ if ( password . match ( / [ a - z ] / ) ) strength ++ ;
90+ if ( password . match ( / [ 0 - 9 ] / ) ) strength ++ ;
91+ if ( password . match ( / [ ^ a - z A - Z 0 - 9 ] / ) ) strength ++ ;
92+
93+ // Reset classes
94+ strengthWeak . className = '' ;
95+ strengthMedium . className = '' ;
96+ strengthStrong . className = '' ;
97+
98+ // Apply strength classes based on criteria
99+ if ( strength >= 1 ) strengthWeak . className = 'weak' ;
100+ if ( strength >= 3 ) strengthMedium . className = 'medium' ;
101+ if ( strength >= 5 ) strengthStrong . className = 'strong' ;
28102 }
29- } ) ;
30-
31- // Sign up form submission
32- document . querySelector ( ".sign-up-form" ) . addEventListener ( 'submit' , function ( event ) {
33- event . preventDefault ( ) ;
34-
35- // Get the input values
36- const username = document . querySelector ( ".sign-up-form input[type='text']" ) . value ;
37- const email = document . querySelector ( ".sign-up-form input[type='email']" ) . value ;
38- const password = document . querySelector ( ".sign-up-form input[type='password']" ) . value ;
39103
40- if ( username === '' || email === '' || password === '' ) {
41- alert ( 'Please fill in all fields' ) ;
42- return ;
43- }
44-
45- // Dummy signup logic for demo purposes
46- localStorage . setItem ( 'username' , username ) ;
47- localStorage . setItem ( 'email' , email ) ;
48- localStorage . setItem ( 'password' , password ) ;
49- localStorage . setItem ( 'isLoggedIn' , 'true' ) ;
104+ // Monitor password input on the sign-up form to check password strength
105+ document . querySelector ( ".sign-up-form input[type='password']" ) . addEventListener ( 'input' , checkPasswordStrength ) ;
50106
51- alert ( 'Signup successful!' ) ;
52- // Redirect to dashboard page
53- window . location . href = 'index.html' ;
54107} ) ;
55-
56- // Toggle password visibility
57- function togglePassword ( fieldId , icon ) {
58- const field = document . getElementById ( fieldId ) ;
59- const isPassword = field . type === 'password' ;
60-
61- // Toggle between 'password' and 'text'
62- field . type = isPassword ? 'text' : 'password' ;
63-
64- // Change the icon class between eye and eye-slash
65- icon . classList . toggle ( 'fa-eye-slash' , isPassword ) ;
66- icon . classList . toggle ( 'fa-eye' , ! isPassword ) ;
67- }
68-
69- // Check password strength
70- function checkPasswordStrength ( ) {
71- const password = document . querySelector ( ".sign-up-form input[type='password']" ) . value ;
72- const strengthWeak = document . getElementById ( 'strength-weak' ) ;
73- const strengthMedium = document . getElementById ( 'strength-medium' ) ;
74- const strengthStrong = document . getElementById ( 'strength-strong' ) ;
75-
76- let strength = 0 ;
77-
78- if ( password . length >= 8 ) strength ++ ;
79- if ( password . match ( / [ A - Z ] / ) ) strength ++ ;
80- if ( password . match ( / [ a - z ] / ) ) strength ++ ;
81- if ( password . match ( / [ 0 - 9 ] / ) ) strength ++ ;
82- if ( password . match ( / [ ^ a - z A - Z 0 - 9 ] / ) ) strength ++ ;
83-
84- strengthWeak . className = '' ;
85- strengthMedium . className = '' ;
86- strengthStrong . className = '' ;
87-
88- if ( strength >= 1 ) strengthWeak . className = 'weak' ;
89- if ( strength >= 3 ) strengthMedium . className = 'medium' ;
90- if ( strength >= 5 ) strengthStrong . className = 'strong' ;
91- }
92-
93- // Call the checkPasswordStrength function on password input
94- document . querySelector ( ".sign-up-form input[type='password']" ) . addEventListener ( 'input' , checkPasswordStrength ) ;
0 commit comments