-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
ResendValidationForm.js
executable file
·162 lines (141 loc) · 5.57 KB
/
ResendValidationForm.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
import React from 'react';
import {TouchableOpacity, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import _ from 'underscore';
import Str from 'expensify-common/lib/str';
import styles from '../../styles/styles';
import Button from '../../components/Button';
import Text from '../../components/Text';
import * as Session from '../../libs/actions/Session';
import ONYXKEYS from '../../ONYXKEYS';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import compose from '../../libs/compose';
import redirectToSignIn from '../../libs/actions/SignInRedirect';
import Avatar from '../../components/Avatar';
import * as OptionsListUtils from '../../libs/OptionsListUtils';
const propTypes = {
/* Onyx Props */
/** The credentials of the logged in person */
credentials: PropTypes.shape({
/** The email/phone the user logged in with */
login: PropTypes.string,
}).isRequired,
/** The details about the account that the user is signing in with */
account: PropTypes.shape({
/** Whether or not a sign on form is loading (being submitted) */
loading: PropTypes.bool,
/** Whether or not the account is validated */
validated: PropTypes.bool,
/** Whether or not the account is closed */
closed: PropTypes.bool,
/** Whether or not the account already exists */
accountExists: PropTypes.bool,
}),
...withLocalizePropTypes,
};
const defaultProps = {
account: {},
};
class ResendValidationForm extends React.Component {
constructor(props) {
super(props);
this.validateAndSubmitForm = this.validateAndSubmitForm.bind(this);
this.state = {
formSuccess: '',
};
}
componentWillUnmount() {
if (!this.successMessageTimer) {
return;
}
clearTimeout(this.successMessageTimer);
}
/**
* Check that all the form fields are valid, then trigger the submit callback
*/
validateAndSubmitForm() {
this.setState({
formSuccess: this.props.translate('resendValidationForm.linkHasBeenResent'),
});
if (this.props.account.closed) {
Session.reopenAccount();
} else if (!this.props.account.validated) {
Session.resendValidationLink();
} else {
Session.resetPassword();
}
this.successMessageTimer = setTimeout(() => {
this.setState({formSuccess: ''});
}, 5000);
}
render() {
const isNewAccount = !this.props.account.accountExists;
const isOldUnvalidatedAccount = this.props.account.accountExists && !this.props.account.validated;
const isSMSLogin = Str.isSMSLogin(this.props.credentials.login);
const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login;
const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase();
let message = '';
if (isNewAccount) {
message = this.props.translate('resendValidationForm.newAccount', {
login,
loginType,
});
} else if (isOldUnvalidatedAccount) {
message = this.props.translate('resendValidationForm.unvalidatedAccount');
} else if (this.props.account.validateCodeExpired) {
message = this.props.translate('resendValidationForm.validationCodeFailedMessage');
} else {
message = this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {
login,
});
}
return (
<>
<View style={[styles.mt3, styles.flexRow, styles.alignItemsCenter, styles.justifyContentStart]}>
<Avatar
source={OptionsListUtils.getDefaultAvatar(this.props.credentials.login)}
imageStyles={[styles.mr2]}
/>
<View style={[styles.flex1]}>
<Text style={[styles.textStrong]}>
{login}
</Text>
</View>
</View>
<View style={[styles.mv5]}>
<Text>
{message}
</Text>
</View>
{!_.isEmpty(this.state.formSuccess) && (
<Text style={[styles.formSuccess]}>
{this.state.formSuccess}
</Text>
)}
<View style={[styles.mb4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
<TouchableOpacity onPress={() => redirectToSignIn()}>
<Text>
{this.props.translate('common.back')}
</Text>
</TouchableOpacity>
<Button
success
text={this.props.translate('resendValidationForm.resendLink')}
isLoading={this.props.account.loading}
onPress={this.validateAndSubmitForm}
/>
</View>
</>
);
}
}
ResendValidationForm.propTypes = propTypes;
ResendValidationForm.defaultProps = defaultProps;
export default compose(
withLocalize,
withOnyx({
credentials: {key: ONYXKEYS.CREDENTIALS},
account: {key: ONYXKEYS.ACCOUNT},
}),
)(ResendValidationForm);