1- import React , { Component } from "react" ;
2- import { ProxyPage } from "@openimis/fe-core" ;
1+ import React , { useState , useMemo } from "react" ;
2+ import { Box , Button , Paper , Typography , Grid } from "@material-ui/core" ;
3+ import { makeStyles } from "@material-ui/styles" ;
4+ import {
5+ useGraphqlMutation ,
6+ useTranslations ,
7+ useModulesManager ,
8+ TextInput ,
9+ useAuthentication ,
10+ } from "@openimis/fe-core" ;
311
12+ const useStyles = makeStyles ( ( theme ) => ( {
13+ page : theme . page ,
14+ paper : theme . paper . paper ,
15+ title : theme . paper . title ,
16+ } ) ) ;
417
5- class ChangePasswordPage extends Component {
6- render ( ) {
7- return < ProxyPage url = "/ChangePassword.aspx" />
18+ const ChangePasswordPage = ( props ) => {
19+ const classes = useStyles ( ) ;
20+ const modulesManager = useModulesManager ( ) ;
21+ const { formatMessage } = useTranslations ( "profile.ChangePasswordPage" , modulesManager ) ;
22+ const [ formValues , setFormValues ] = useState ( { } ) ;
23+ const [ error , setError ] = useState ( "" ) ;
24+
25+ const isValid = useMemo (
26+ ( ) => formValues . password && formValues . password === formValues . confirmPassword && formValues . oldPassword ,
27+ [ formValues ]
28+ ) ;
29+
30+ const { mutate, isLoading } = useGraphqlMutation (
31+ `
32+ mutation changePassword ($input: ChangePasswordMutationInput!) {
33+ changePassword(input: $input) {
34+ clientMutationId
35+ success
36+ error
37+ }
38+ }
39+ ` ,
40+ { wait : false }
41+ ) ;
42+
43+ const onSubmit = async ( e ) => {
44+ e . preventDefault ( ) ;
45+ if ( isValid ) {
46+ setError ( null ) ;
47+ const result = await mutate ( {
48+ oldPassword : formValues . oldPassword ,
49+ newPassword : formValues . password ,
50+ } ) ;
51+
52+ setError ( result . changePassword ?. error ) ;
853 }
9- }
54+ } ;
55+
56+ return (
57+ < Box className = { classes . page } >
58+ < Paper className = { classes . paper } >
59+ < Typography className = { classes . title } variant = "h6" >
60+ { formatMessage ( "title" ) }
61+ </ Typography >
62+ < Box padding = "10px" >
63+ < form onSubmit = { onSubmit } >
64+ < Grid container spacing = { 2 } >
65+ < Grid xs = { 4 } item >
66+ < TextInput
67+ module = "profile"
68+ required
69+ readOnly = { isLoading }
70+ type = "password"
71+ label = { "ChangePasswordPage.oldPasswordLabel" }
72+ onChange = { ( oldPassword ) => setFormValues ( { ...formValues , oldPassword } ) }
73+ />
74+ </ Grid >
75+ < Grid xs = { 4 } item >
76+ < TextInput
77+ module = "profile"
78+ required
79+ readOnly = { isLoading }
80+ type = "password"
81+ label = { "ChangePasswordPage.newPasswordLabel" }
82+ onChange = { ( password ) => setFormValues ( { ...formValues , password } ) }
83+ />
84+ </ Grid >
85+ < Grid xs = { 4 } item >
86+ < TextInput
87+ module = "profile"
88+ readOnly = { isLoading }
89+ required
90+ type = "password"
91+ label = { "ChangePasswordPage.confirmPasswordLabel" }
92+ onChange = { ( confirmPassword ) => setFormValues ( { ...formValues , confirmPassword } ) }
93+ />
94+ </ Grid >
95+ { formValues . password !== formValues . confirmPassword && formValues . confirmPassword && formValues . password && (
96+ < Grid item xs = { 12 } >
97+ < Box color = "error.main" > { formatMessage ( "notEqualError" ) } </ Box >
98+ </ Grid >
99+ ) }
100+ { error && (
101+ < Grid item xs = { 12 } >
102+ < Box color = "error.main" > { error } </ Box >
103+ </ Grid >
104+ ) }
105+ < Grid item >
106+ < Button type = "submit" color = "primary" variant = "contained" disabled = { ! isValid || isLoading } >
107+ { formatMessage ( "submitButton" ) }
108+ </ Button >
109+ </ Grid >
110+ </ Grid >
111+ </ form >
112+ </ Box >
113+ </ Paper >
114+ </ Box >
115+ ) ;
116+ } ;
10117
11- export { ChangePasswordPage } ;
118+ export default ChangePasswordPage ;
0 commit comments