@@ -8,41 +8,70 @@ function ChangePassword() {
88 const [ currentpassword , setCurrentPassword ] = useState ( "" ) ;
99 const [ newpassword , setnewpassword ] = useState ( "" ) ;
1010 const [ confirmpassword , setconfirmpassword ] = useState ( "" ) ;
11+ const [ lengthValid , setLengthValid ] = useState ( false ) ;
12+ const [ caseDigitValid , setCaseDigitValid ] = useState ( false ) ;
13+ const [ specialCharValid , setSpecialCharValid ] = useState ( false ) ;
14+ const [ showNewPassword , setNewShowPassword ] = useState ( false ) ;
15+ const [ showConfirmPassword , setShowConfirmPassword ] = useState ( false ) ;
16+ const toggleNewPasswordVisibility = ( ) => {
17+ setNewShowPassword ( ! showNewPassword ) ;
18+ } ;
19+ const toggleConfirmPasswordVisibility = ( ) => {
20+ setShowConfirmPassword ( ! showConfirmPassword ) ;
21+ } ;
22+
23+ const handlePasswordChange = ( e ) => {
24+ const newPassword = e . target . value ;
25+ setconfirmpassword ( newPassword ) ;
26+ // Check conditions separately
27+ setLengthValid ( newPassword . length >= 8 ) ;
28+ setCaseDigitValid (
29+ / [ a - z ] / . test ( newPassword ) &&
30+ / [ A - Z ] / . test ( newPassword ) &&
31+ / \d / . test ( newPassword )
32+ ) ;
33+ setSpecialCharValid ( / [ ! @ # $ % ^ & * ( ) \- _ = + { } ; : , < . > ] / . test ( newPassword ) ) ;
34+ } ;
1135 const handleSubmit = async ( evt ) => {
1236 evt . preventDefault ( ) ;
1337 try {
1438 if ( newpassword === confirmpassword ) {
15- Parse . User . logIn ( localStorage . getItem ( "userEmail" ) , currentpassword )
16- . then ( async ( user ) => {
17- if ( user ) {
18- const User = new Parse . User ( ) ;
19- const query = new Parse . Query ( User ) ;
20- await query . get ( user . id ) . then ( ( user ) => {
21- // Updates the data we want
22- user . set ( "password" , newpassword ) ;
23- user
24- . save ( )
25- . then ( async ( ) => {
26- let _user = user . toJSON ( ) ;
27- if ( _user ) {
28- await Parse . User . become ( _user . sessionToken ) ;
29- localStorage . setItem ( "accesstoken" , _user . sessionToken ) ;
30- }
31- alert ( t ( "password-update-alert-1" ) ) ;
32- } )
33- . catch ( ( error ) => {
34- console . log ( "err" , error ) ;
35- alert ( t ( "something-went-wrong-mssg" ) ) ;
36- } ) ;
37- } ) ;
38- } else {
39- alert ( t ( "password-update-alert-2" ) ) ;
40- }
41- } )
42- . catch ( ( error ) => {
43- alert ( t ( "password-update-alert-3" ) ) ;
44- console . error ( "Error while logging in user" , error ) ;
45- } ) ;
39+ if ( lengthValid && caseDigitValid && specialCharValid ) {
40+ Parse . User . logIn ( localStorage . getItem ( "userEmail" ) , currentpassword )
41+ . then ( async ( user ) => {
42+ if ( user ) {
43+ const User = new Parse . User ( ) ;
44+ const query = new Parse . Query ( User ) ;
45+ await query . get ( user . id ) . then ( ( user ) => {
46+ // Updates the data we want
47+ user . set ( "password" , newpassword ) ;
48+ user
49+ . save ( )
50+ . then ( async ( ) => {
51+ let _user = user . toJSON ( ) ;
52+ if ( _user ) {
53+ await Parse . User . become ( _user . sessionToken ) ;
54+ localStorage . setItem ( "accesstoken" , _user . sessionToken ) ;
55+ }
56+ setCurrentPassword ( "" ) ;
57+ setnewpassword ( "" ) ;
58+ setconfirmpassword ( "" ) ;
59+ alert ( t ( "password-update-alert-1" ) ) ;
60+ } )
61+ . catch ( ( error ) => {
62+ console . log ( "err" , error ) ;
63+ alert ( t ( "something-went-wrong-mssg" ) ) ;
64+ } ) ;
65+ } ) ;
66+ } else {
67+ alert ( t ( "password-update-alert-2" ) ) ;
68+ }
69+ } )
70+ . catch ( ( error ) => {
71+ alert ( t ( "password-update-alert-3" ) ) ;
72+ console . error ( "Error while logging in user" , error ) ;
73+ } ) ;
74+ }
4675 } else {
4776 alert ( t ( "password-update-alert-4" ) ) ;
4877 }
@@ -80,34 +109,93 @@ function ChangePassword() {
80109 < label htmlFor = "newpassword" className = "text-xs block ml-1" >
81110 { t ( "new-password" ) }
82111 </ label >
83- < input
84- type = "password"
85- name = "newpassword"
86- value = { newpassword }
87- onChange = { ( e ) => setnewpassword ( e . target . value ) }
88- className = "op-input op-input-bordered op-input-sm text-xs w-full"
89- placeholder = { t ( "new-password" ) }
90- onInvalid = { ( e ) => e . target . setCustomValidity ( t ( "input-required" ) ) }
91- onInput = { ( e ) => e . target . setCustomValidity ( "" ) }
92- required
93- />
112+ < div className = "relative" >
113+ < input
114+ type = { showNewPassword ? "text" : "password" }
115+ name = "newpassword"
116+ value = { newpassword }
117+ onChange = { ( e ) => setnewpassword ( e . target . value ) }
118+ className = "op-input op-input-bordered op-input-sm text-xs w-full"
119+ placeholder = { t ( "new-password" ) }
120+ onInvalid = { ( e ) =>
121+ e . target . setCustomValidity ( t ( "input-required" ) )
122+ }
123+ onInput = { ( e ) => e . target . setCustomValidity ( "" ) }
124+ required
125+ />
126+ < span
127+ className = { `absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer text-base-content` }
128+ onClick = { toggleNewPasswordVisibility }
129+ >
130+ { showNewPassword ? (
131+ < i className = "fa fa-eye-slash" /> // Close eye icon
132+ ) : (
133+ < i className = "fa fa-eye" /> // Open eye icon
134+ ) }
135+ </ span >
136+ </ div >
94137 </ div >
95138 < div >
96- < label htmlFor = "newpassword " className = "text-xs block ml-1" >
139+ < label htmlFor = "confirmpassword " className = "text-xs block ml-1" >
97140 { t ( "confirm-password" ) }
98141 </ label >
99- < input
100- type = "password"
101- name = "confirmpassword"
102- className = "op-input op-input-bordered op-input-sm text-xs w-full"
103- value = { confirmpassword }
104- onChange = { ( e ) => setconfirmpassword ( e . target . value ) }
105- placeholder = { t ( "confirm-password" ) }
106- onInvalid = { ( e ) => e . target . setCustomValidity ( t ( "input-required" ) ) }
107- onInput = { ( e ) => e . target . setCustomValidity ( "" ) }
108- required
109- />
142+ < div className = "relative" >
143+ < input
144+ type = { showConfirmPassword ? "text" : "password" }
145+ name = "confirmpassword"
146+ className = "op-input op-input-bordered op-input-sm text-xs w-full"
147+ value = { confirmpassword }
148+ onChange = { handlePasswordChange }
149+ placeholder = { t ( "confirm-password" ) }
150+ onInvalid = { ( e ) =>
151+ e . target . setCustomValidity ( t ( "input-required" ) )
152+ }
153+ onInput = { ( e ) => e . target . setCustomValidity ( "" ) }
154+ required
155+ />
156+ < span
157+ className = { `absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer text-base-content` }
158+ onClick = { toggleConfirmPasswordVisibility }
159+ >
160+ { showConfirmPassword ? (
161+ < i className = "fa fa-eye-slash" /> // Close eye icon
162+ ) : (
163+ < i className = "fa fa-eye" /> // Open eye icon
164+ ) }
165+ </ span >
166+ </ div >
110167 </ div >
168+ { confirmpassword . length > 0 && (
169+ < div className = "mt-1 text-[11px]" >
170+ { newpassword . length > 0 && (
171+ < p
172+ className = { `${ newpassword === confirmpassword ? "text-green-600" : "text-red-600" } }
173+ >
174+ { newpassword === confirmpassword ? "✓" : "✗" } { " " }
175+ { t ( "password-match-length" ) }
176+ </ p >
177+ ) }
178+ < p
179+ className = { `${ lengthValid ? "text-green-600" : "text-red-600" } }
180+ >
181+ { lengthValid ? "✓" : "✗" } { t ( "password-length" ) }
182+ </ p >
183+ < p
184+ className = { `${
185+ caseDigitValid ? "text-green-600" : "text-red-600"
186+ } `}
187+ >
188+ { caseDigitValid ? "✓" : "✗" } { t ( "password-case" ) }
189+ </ p >
190+ < p
191+ className = { `${
192+ specialCharValid ? "text-green-600" : "text-red-600"
193+ } `}
194+ >
195+ { specialCharValid ? "✓" : "✗" } { t ( "password-special-char" ) }
196+ </ p >
197+ </ div >
198+ ) }
111199 < button
112200 type = "submit"
113201 className = "op-btn op-btn-primary shadow-md mt-2"
0 commit comments