-
Notifications
You must be signed in to change notification settings - Fork 0
/
ChangePassword.js
127 lines (118 loc) · 3.61 KB
/
ChangePassword.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { KeyboardAvoidingView } from 'react-native';
import { Mutation } from '@apollo/client/react/components';
import { gql } from '@apollo/client';
import { Formik } from 'formik';
import * as Yup from 'yup';
import {
BackgroundView,
Button,
TextInput,
PaddedView,
styled,
} from '@apollosproject/ui-kit';
import { SafeAreaView } from 'react-native-safe-area-context';
import CHANGE_PASSWORD from './passwordChange';
const FlexedKeyboardAvoidingView = styled({
flex: 1,
})(KeyboardAvoidingView);
const Footer = styled(({ theme }) => ({
flex: 1,
justifyContent: 'flex-end',
marginBottom: theme.sizing.baseUnit * 5,
}))(SafeAreaView);
class ChangePassword extends PureComponent {
static propTypes = {
navigation: PropTypes.shape({
navigate: PropTypes.func,
goBack: PropTypes.func,
}),
};
renderForm = (props) => (
<BackgroundView avoidHeader>
<FlexedKeyboardAvoidingView behavior="padding">
<PaddedView>
<TextInput
label="New Password"
type="password"
value={props.values?.password}
error={props.touched.password && props.errors.password}
onChangeText={(text) => props.setFieldValue('password', text)}
/>
<TextInput
label="Confirm Password"
type="password"
value={props.values?.confirmPassword}
error={
props.touched.confirmPassword && props.errors.confirmPassword
}
onChangeText={(text) =>
props.setFieldValue('confirmPassword', text)
}
/>
</PaddedView>
<Footer>
<PaddedView>
<Button
disabled={props.isSubmitting}
onPress={props.handleSubmit}
title="Save"
loading={props.isSubmitting}
/>
</PaddedView>
</Footer>
</FlexedKeyboardAvoidingView>
</BackgroundView>
);
render() {
return (
<Mutation
mutation={CHANGE_PASSWORD}
update={async (cache, { data: { token } }) => {
await cache.writeQuery({
query: gql`
query authToken {
authToken @client
}
`,
data: { authToken: token },
});
}}
>
{(updatePassword) => (
<Formik
validationSchema={Yup.object().shape({
password: Yup.string()
.min(6, 'Password must be at least 6 characters')
.required('Password is required'),
confirmPassword: Yup.string()
.min(6, 'Password must be at least 6 characters')
.oneOf([Yup.ref('password')], 'Passwords must match.')
.required('Password confirm is required'),
})}
initialValues={{ password: '', confirmPassword: '' }}
onSubmit={async (variables, { setSubmitting, setFieldError }) => {
try {
await updatePassword({ variables });
await this.props.navigation.goBack();
} catch (e) {
const { graphQLErrors } = e;
if (graphQLErrors.length) {
setFieldError(
'confirmPassword',
'Unknown error. Please try again later.'
);
}
}
setSubmitting(false);
}}
>
{this.renderForm}
</Formik>
)}
</Mutation>
);
}
}
export default ChangePassword;