1
- import { forwardRef , useState } from 'react' ;
2
- import { Box , Button , Stack , Typography } from '@mui/material' ;
3
- import PasswordTextField from '../PasswordTextField' ;
4
- import { userClient } from '../../utils/api' ;
5
- import axios from 'axios' ;
6
- import { FAILED_PW_UPDATE_MESSAGE , SUCCESS_PW_UPDATE_MESSAGE } from '../../utils/constants' ;
1
+ import { forwardRef , useState } from "react" ;
2
+ import { Box , Button , Stack , Typography } from "@mui/material" ;
3
+ import PasswordTextField from "../PasswordTextField" ;
4
+ import { userClient } from "../../utils/api" ;
5
+ import axios from "axios" ;
6
+ import {
7
+ FAILED_PW_UPDATE_MESSAGE ,
8
+ SUCCESS_PW_UPDATE_MESSAGE ,
9
+ } from "../../utils/constants" ;
7
10
8
11
interface ChangePasswordModalProps {
9
12
handleClose : ( ) => void ;
10
13
userId : string ;
11
- onUpdate : ( isProfileEdit : boolean , message : string , isSuccess : boolean ) => void ;
14
+ onUpdate : (
15
+ isProfileEdit : boolean ,
16
+ message : string ,
17
+ isSuccess : boolean ,
18
+ ) => void ;
12
19
}
13
20
14
- const ChangePasswordModal = forwardRef < HTMLDivElement , ChangePasswordModalProps > ( ( props , ref ) => {
21
+ const ChangePasswordModal = forwardRef <
22
+ HTMLDivElement ,
23
+ ChangePasswordModalProps
24
+ > ( ( props , ref ) => {
15
25
const { handleClose, userId, onUpdate } = props ;
16
- const [ currPassword , setCurrPassword ] = useState < string > ( '' ) ;
17
- const [ newPassword , setNewPassword ] = useState < string > ( '' ) ;
18
- const [ confirmPassword , setConfirmPassword ] = useState < string > ( '' ) ;
26
+ const [ currPassword , setCurrPassword ] = useState < string > ( "" ) ;
27
+ const [ newPassword , setNewPassword ] = useState < string > ( "" ) ;
28
+ const [ confirmPassword , setConfirmPassword ] = useState < string > ( "" ) ;
19
29
20
- const [ isCurrPasswordValid , setIsCurrPasswordValid ] = useState < boolean > ( false ) ;
30
+ const [ isCurrPasswordValid , setIsCurrPasswordValid ] =
31
+ useState < boolean > ( false ) ;
21
32
const [ isNewPasswordValid , setIsNewPasswordValid ] = useState < boolean > ( false ) ;
22
- const [ isConfirmPasswordValid , setIsConfirmPasswordValid ] = useState < boolean > ( false ) ;
23
-
24
- const isUpdateDisabled = ! ( isCurrPasswordValid && isNewPasswordValid && isConfirmPasswordValid ) ;
33
+ const [ isConfirmPasswordValid , setIsConfirmPasswordValid ] =
34
+ useState < boolean > ( false ) ;
35
+
36
+ const isUpdateDisabled = ! (
37
+ isCurrPasswordValid &&
38
+ isNewPasswordValid &&
39
+ isConfirmPasswordValid
40
+ ) ;
25
41
26
42
const handleSubmit = async ( ) => {
27
43
const accessToken = localStorage . getItem ( "token" ) ;
@@ -32,13 +48,14 @@ const ChangePasswordModal = forwardRef<HTMLDivElement, ChangePasswordModalProps>
32
48
{
33
49
oldPassword : currPassword ,
34
50
newPassword : newPassword ,
35
- } ,
51
+ } ,
36
52
{
37
53
headers : {
38
54
Authorization : `Bearer ${ accessToken } ` ,
39
55
"Content-Type" : "application/json" ,
40
56
} ,
41
- } ) ;
57
+ } ,
58
+ ) ;
42
59
handleClose ( ) ;
43
60
onUpdate ( false , SUCCESS_PW_UPDATE_MESSAGE , true ) ;
44
61
} catch ( error ) {
@@ -53,47 +70,64 @@ const ChangePasswordModal = forwardRef<HTMLDivElement, ChangePasswordModalProps>
53
70
} ;
54
71
55
72
return (
56
- < Box
73
+ < Box
57
74
ref = { ref }
58
75
sx = { ( theme ) => ( {
59
76
backgroundColor : theme . palette . common . white ,
60
77
display : "flex" ,
61
78
width : 600 ,
62
79
flexDirection : "column" ,
63
80
alignItems : "center" ,
64
- borderRadius : ' 16px' ,
81
+ borderRadius : " 16px" ,
65
82
padding : "40px" ,
66
83
} ) }
67
84
>
68
85
< Typography component = "h1" variant = "h3" >
69
86
Change Password
70
87
</ Typography >
71
- < PasswordTextField
72
- label = "Current password"
73
- passwordVal = { false }
74
- password = { currPassword }
75
- setPassword = { setCurrPassword }
76
- isMatch = { false }
77
- setValidity = { setIsCurrPasswordValid } />
78
- < PasswordTextField
79
- label = "New password"
80
- passwordVal = { true }
81
- password = { newPassword }
82
- setPassword = { setNewPassword }
83
- isMatch = { true }
88
+ < PasswordTextField
89
+ label = "Current password"
90
+ passwordVal = { false }
91
+ password = { currPassword }
92
+ setPassword = { setCurrPassword }
93
+ isMatch = { false }
94
+ setValidity = { setIsCurrPasswordValid }
95
+ />
96
+ < PasswordTextField
97
+ label = "New password"
98
+ passwordVal = { true }
99
+ password = { newPassword }
100
+ setPassword = { setNewPassword }
101
+ isMatch = { true }
84
102
passwordToMatch = { confirmPassword }
85
- setValidity = { setIsNewPasswordValid } />
86
- < PasswordTextField
87
- label = "Confirm new password"
88
- passwordVal = { false }
89
- password = { confirmPassword }
90
- setPassword = { setConfirmPassword }
91
- isMatch = { true }
92
- passwordToMatch = { newPassword }
93
- setValidity = { setIsConfirmPasswordValid } />
94
- < Stack direction = "row" spacing = { 2 } sx = { { marginTop : 2 , width : '100%' } } >
95
- < Button variant = "contained" color = "secondary" onClick = { handleClose } sx = { { flexGrow : 1 } } > Cancel</ Button >
96
- < Button variant = "contained" disabled = { isUpdateDisabled } onClick = { handleSubmit } sx = { { flexGrow : 1 } } > Update</ Button >
103
+ setValidity = { setIsNewPasswordValid }
104
+ />
105
+ < PasswordTextField
106
+ label = "Confirm new password"
107
+ passwordVal = { false }
108
+ password = { confirmPassword }
109
+ setPassword = { setConfirmPassword }
110
+ isMatch = { true }
111
+ passwordToMatch = { newPassword }
112
+ setValidity = { setIsConfirmPasswordValid }
113
+ />
114
+ < Stack direction = "row" spacing = { 2 } sx = { { marginTop : 2 , width : "100%" } } >
115
+ < Button
116
+ variant = "contained"
117
+ color = "secondary"
118
+ onClick = { handleClose }
119
+ sx = { { flexGrow : 1 } }
120
+ >
121
+ Cancel
122
+ </ Button >
123
+ < Button
124
+ variant = "contained"
125
+ disabled = { isUpdateDisabled }
126
+ onClick = { handleSubmit }
127
+ sx = { { flexGrow : 1 } }
128
+ >
129
+ Update
130
+ </ Button >
97
131
</ Stack >
98
132
</ Box >
99
133
) ;
0 commit comments