345 lines
9.9 KiB
JavaScript
345 lines
9.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
Text, View, StyleSheet, Keyboard
|
|
} from 'react-native';
|
|
import { connect } from 'react-redux';
|
|
import RNPickerSelect from 'react-native-picker-select';
|
|
|
|
import log, { logEvent, events } from '../utils/log';
|
|
import sharedStyles from './Styles';
|
|
import Button from '../containers/Button';
|
|
import I18n from '../i18n';
|
|
import * as HeaderButton from '../containers/HeaderButton';
|
|
import { themes } from '../constants/colors';
|
|
import { withTheme } from '../theme';
|
|
import FormContainer, { FormContainerInner } from '../containers/FormContainer';
|
|
import TextInput from '../containers/TextInput';
|
|
import isValidEmail from '../utils/isValidEmail';
|
|
import { showErrorAlert } from '../utils/info';
|
|
import RocketChat from '../lib/rocketchat';
|
|
import { loginRequest as loginRequestAction } from '../actions/login';
|
|
import openLink from '../utils/openLink';
|
|
import LoginServices from '../containers/LoginServices';
|
|
import { getShowLoginButton } from '../selectors/login';
|
|
|
|
const styles = StyleSheet.create({
|
|
title: {
|
|
...sharedStyles.textBold,
|
|
fontSize: 22
|
|
},
|
|
inputContainer: {
|
|
marginVertical: 16
|
|
},
|
|
bottomContainer: {
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
marginBottom: 32,
|
|
marginHorizontal: 30
|
|
},
|
|
bottomContainerText: {
|
|
...sharedStyles.textRegular,
|
|
fontSize: 13
|
|
},
|
|
bottomContainerTextBold: {
|
|
...sharedStyles.textSemibold,
|
|
fontSize: 13
|
|
},
|
|
registerButton: {
|
|
marginTop: 16,
|
|
marginBottom: 32
|
|
}
|
|
});
|
|
|
|
class RegisterView extends React.Component {
|
|
static navigationOptions = ({ route, navigation }) => ({
|
|
title: route.params?.title ?? 'Rocket.Chat',
|
|
headerRight: () => <HeaderButton.Legal testID='register-view-more' navigation={navigation} />
|
|
});
|
|
|
|
static propTypes = {
|
|
navigation: PropTypes.object,
|
|
server: PropTypes.string,
|
|
Accounts_CustomFields: PropTypes.string,
|
|
Accounts_EmailVerification: PropTypes.bool,
|
|
Accounts_ManuallyApproveNewUsers: PropTypes.bool,
|
|
theme: PropTypes.string,
|
|
Site_Name: PropTypes.string,
|
|
loginRequest: PropTypes.func,
|
|
showLoginButton: PropTypes.bool
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
const customFields = {};
|
|
this.parsedCustomFields = {};
|
|
if (props.Accounts_CustomFields) {
|
|
try {
|
|
this.parsedCustomFields = JSON.parse(props.Accounts_CustomFields);
|
|
} catch (e) {
|
|
log(e);
|
|
}
|
|
}
|
|
Object.keys(this.parsedCustomFields).forEach((key) => {
|
|
if (this.parsedCustomFields[key].defaultValue) {
|
|
customFields[key] = this.parsedCustomFields[key].defaultValue;
|
|
}
|
|
});
|
|
this.state = {
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
username: '',
|
|
saving: false,
|
|
customFields
|
|
};
|
|
}
|
|
|
|
login = () => {
|
|
const { navigation, Site_Name } = this.props;
|
|
navigation.navigate('LoginView', { title: Site_Name });
|
|
}
|
|
|
|
valid = () => {
|
|
const {
|
|
name, email, password, username, customFields
|
|
} = this.state;
|
|
let requiredCheck = true;
|
|
Object.keys(this.parsedCustomFields).forEach((key) => {
|
|
if (this.parsedCustomFields[key].required) {
|
|
requiredCheck = requiredCheck && customFields[key] && Boolean(customFields[key].trim());
|
|
}
|
|
});
|
|
return name.trim() && email.trim() && password.trim() && username.trim() && isValidEmail(email) && requiredCheck;
|
|
}
|
|
|
|
submit = async() => {
|
|
logEvent(events.REGISTER_DEFAULT_SIGN_UP);
|
|
if (!this.valid()) {
|
|
return;
|
|
}
|
|
this.setState({ saving: true });
|
|
Keyboard.dismiss();
|
|
|
|
const {
|
|
name, email, password, username, customFields
|
|
} = this.state;
|
|
const {
|
|
loginRequest,
|
|
Accounts_EmailVerification,
|
|
navigation,
|
|
Accounts_ManuallyApproveNewUsers
|
|
} = this.props;
|
|
|
|
try {
|
|
await RocketChat.register({
|
|
name, email, pass: password, username, ...customFields
|
|
});
|
|
|
|
if (Accounts_EmailVerification) {
|
|
await navigation.goBack();
|
|
showErrorAlert(I18n.t('Verify_email_desc'), I18n.t('Registration_Succeeded'));
|
|
} else if (Accounts_ManuallyApproveNewUsers) {
|
|
await navigation.goBack();
|
|
showErrorAlert(I18n.t('Wait_activation_warning'), I18n.t('Registration_Succeeded'));
|
|
} else {
|
|
await loginRequest({ user: email, password });
|
|
}
|
|
} catch (e) {
|
|
if (e.data?.errorType === 'username-invalid') {
|
|
return loginRequest({ user: email, password });
|
|
}
|
|
if (e.data?.error) {
|
|
logEvent(events.REGISTER_DEFAULT_SIGN_UP_F);
|
|
showErrorAlert(e.data.error, I18n.t('Oops'));
|
|
}
|
|
}
|
|
this.setState({ saving: false });
|
|
}
|
|
|
|
openContract = (route) => {
|
|
const { server, theme } = this.props;
|
|
if (!server) {
|
|
return;
|
|
}
|
|
openLink(`${ server }/${ route }`, theme);
|
|
}
|
|
|
|
renderCustomFields = () => {
|
|
const { customFields } = this.state;
|
|
const { Accounts_CustomFields, theme } = this.props;
|
|
if (!Accounts_CustomFields) {
|
|
return null;
|
|
}
|
|
try {
|
|
return Object.keys(this.parsedCustomFields).map((key, index, array) => {
|
|
if (this.parsedCustomFields[key].type === 'select') {
|
|
const options = this.parsedCustomFields[key].options.map(option => ({ label: option, value: option }));
|
|
return (
|
|
<RNPickerSelect
|
|
key={key}
|
|
items={options}
|
|
onValueChange={(value) => {
|
|
const newValue = {};
|
|
newValue[key] = value;
|
|
this.setState({ customFields: { ...customFields, ...newValue } });
|
|
}}
|
|
value={customFields[key]}
|
|
>
|
|
<TextInput
|
|
inputRef={(e) => { this[key] = e; }}
|
|
placeholder={key}
|
|
value={customFields[key]}
|
|
testID='register-view-custom-picker'
|
|
theme={theme}
|
|
/>
|
|
</RNPickerSelect>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TextInput
|
|
inputRef={(e) => { this[key] = e; }}
|
|
key={key}
|
|
label={key}
|
|
placeholder={key}
|
|
value={customFields[key]}
|
|
onChangeText={(value) => {
|
|
const newValue = {};
|
|
newValue[key] = value;
|
|
this.setState({ customFields: { ...customFields, ...newValue } });
|
|
}}
|
|
onSubmitEditing={() => {
|
|
if (array.length - 1 > index) {
|
|
return this[array[index + 1]].focus();
|
|
}
|
|
this.avatarUrl.focus();
|
|
}}
|
|
containerStyle={styles.inputContainer}
|
|
theme={theme}
|
|
/>
|
|
);
|
|
});
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { saving } = this.state;
|
|
const { theme, showLoginButton, navigation } = this.props;
|
|
return (
|
|
<FormContainer theme={theme} testID='register-view'>
|
|
<FormContainerInner>
|
|
<LoginServices navigation={navigation} />
|
|
<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>
|
|
<TextInput
|
|
label='Name'
|
|
containerStyle={styles.inputContainer}
|
|
placeholder={I18n.t('Name')}
|
|
returnKeyType='next'
|
|
onChangeText={name => this.setState({ name })}
|
|
onSubmitEditing={() => { this.usernameInput.focus(); }}
|
|
testID='register-view-name'
|
|
theme={theme}
|
|
/>
|
|
<TextInput
|
|
label='Username'
|
|
containerStyle={styles.inputContainer}
|
|
inputRef={(e) => { this.usernameInput = e; }}
|
|
placeholder={I18n.t('Username')}
|
|
returnKeyType='next'
|
|
onChangeText={username => this.setState({ username })}
|
|
onSubmitEditing={() => { this.emailInput.focus(); }}
|
|
testID='register-view-username'
|
|
theme={theme}
|
|
/>
|
|
<TextInput
|
|
label='Email'
|
|
containerStyle={styles.inputContainer}
|
|
inputRef={(e) => { this.emailInput = e; }}
|
|
placeholder={I18n.t('Email')}
|
|
returnKeyType='next'
|
|
keyboardType='email-address'
|
|
onChangeText={email => this.setState({ email })}
|
|
onSubmitEditing={() => { this.passwordInput.focus(); }}
|
|
testID='register-view-email'
|
|
theme={theme}
|
|
/>
|
|
<TextInput
|
|
label='Password'
|
|
containerStyle={styles.inputContainer}
|
|
inputRef={(e) => { this.passwordInput = e; }}
|
|
placeholder={I18n.t('Password')}
|
|
returnKeyType='send'
|
|
secureTextEntry
|
|
onChangeText={value => this.setState({ password: value })}
|
|
onSubmitEditing={this.submit}
|
|
testID='register-view-password'
|
|
theme={theme}
|
|
/>
|
|
|
|
{this.renderCustomFields()}
|
|
|
|
<Button
|
|
title={I18n.t('Register')}
|
|
type='primary'
|
|
onPress={this.submit}
|
|
testID='register-view-submit'
|
|
disabled={!this.valid()}
|
|
loading={saving}
|
|
theme={theme}
|
|
style={styles.registerButton}
|
|
/>
|
|
|
|
<View style={styles.bottomContainer}>
|
|
<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
|
|
{`${ I18n.t('Onboarding_agree_terms') }\n`}
|
|
<Text
|
|
style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
|
|
onPress={() => this.openContract('terms-of-service')}
|
|
>{I18n.t('Terms_of_Service')}
|
|
</Text> {I18n.t('and')}
|
|
<Text
|
|
style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
|
|
onPress={() => this.openContract('privacy-policy')}
|
|
> {I18n.t('Privacy_Policy')}
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
|
|
{showLoginButton
|
|
? (
|
|
<View style={styles.bottomContainer}>
|
|
<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Do_you_have_an_account')}</Text>
|
|
<Text
|
|
style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
|
|
onPress={this.login}
|
|
>{I18n.t('Login')}
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
</FormContainerInner>
|
|
</FormContainer>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
server: state.server.server,
|
|
Site_Name: state.settings.Site_Name,
|
|
Gitlab_URL: state.settings.API_Gitlab_URL,
|
|
CAS_enabled: state.settings.CAS_enabled,
|
|
CAS_login_url: state.settings.CAS_login_url,
|
|
Accounts_CustomFields: state.settings.Accounts_CustomFields,
|
|
Accounts_EmailVerification: state.settings.Accounts_EmailVerification,
|
|
Accounts_ManuallyApproveNewUsers: state.settings.Accounts_ManuallyApproveNewUsers,
|
|
showLoginButton: getShowLoginButton(state)
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
loginRequest: params => dispatch(loginRequestAction(params))
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RegisterView));
|