127 lines
4.5 KiB
JavaScript
127 lines
4.5 KiB
JavaScript
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
|
|
// See License.txt for license information.
|
|
|
|
import React, {Component, PropTypes} from 'react';
|
|
import {View, Text, TextInput, Image} from 'react-native';
|
|
import {Actions as Routes} from 'react-native-router-flux';
|
|
|
|
import Button from 'components/button';
|
|
import FormattedText from 'components/formatted_text';
|
|
import ErrorText from 'components/error_text';
|
|
import Loading from 'components/loading';
|
|
import {GlobalStyles} from 'styles';
|
|
import logo from 'images/logo.png';
|
|
|
|
import {injectIntl, intlShape} from 'react-intl';
|
|
|
|
const propTypes = {
|
|
intl: intlShape.isRequired,
|
|
clientConfig: PropTypes.object.isRequired,
|
|
login: PropTypes.object.isRequired,
|
|
actions: PropTypes.object.isRequired
|
|
};
|
|
|
|
class LoginView extends Component {
|
|
static propTypes = propTypes;
|
|
state = {
|
|
loginId: '',
|
|
password: ''
|
|
};
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (this.props.login.status === 'fetching' &&
|
|
nextProps.login.status === 'fetched') {
|
|
Routes.goToSelectTeam();
|
|
}
|
|
}
|
|
|
|
signIn() {
|
|
if (this.props.login.status !== 'fetching') {
|
|
const {loginId, password} = this.state;
|
|
this.props.actions.login(loginId, password);
|
|
}
|
|
}
|
|
|
|
createLoginPlaceholder() {
|
|
const {formatMessage} = this.props.intl;
|
|
const clientConfig = this.props.clientConfig.data;
|
|
|
|
const loginPlaceholders = [];
|
|
if (clientConfig.EnableSignInWithEmail === 'true') {
|
|
loginPlaceholders.push(formatMessage({id: 'login.email', defaultMessage: 'Email'}));
|
|
}
|
|
|
|
if (clientConfig.EnableSignInWithUsername === 'true') {
|
|
loginPlaceholders.push(formatMessage({id: 'login.username', defaultMessage: 'Username'}));
|
|
}
|
|
|
|
if (clientConfig.EnableLdap === 'true') { // TODO check if we're licensed once we have that
|
|
if (clientConfig.LdapLoginFieldName) {
|
|
loginPlaceholders.push(clientConfig.LdapLoginFieldName);
|
|
} else {
|
|
loginPlaceholders.push(formatMessage({id: 'login.ldapUsername', defaultMessage: 'AD/LDAP Username'}));
|
|
}
|
|
}
|
|
|
|
if (loginPlaceholders.length >= 2) {
|
|
return loginPlaceholders.slice(0, loginPlaceholders.length - 1).join(', ') +
|
|
` ${formatMessage({id: 'login.or', defaultMessage: 'or'})} ` +
|
|
loginPlaceholders[loginPlaceholders.length - 1];
|
|
} else if (loginPlaceholders.length === 1) {
|
|
return loginPlaceholders[0];
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
render() {
|
|
if (!this.props.clientConfig || !this.props.clientConfig.data) {
|
|
return <Loading/>;
|
|
}
|
|
|
|
return (
|
|
<View style={GlobalStyles.container}>
|
|
<Image
|
|
style={GlobalStyles.logo}
|
|
source={logo}
|
|
/>
|
|
<Text style={GlobalStyles.header}>
|
|
{this.props.clientConfig.data.SiteName}
|
|
</Text>
|
|
<FormattedText
|
|
style={GlobalStyles.subheader}
|
|
id='web.root.signup_info'
|
|
defaultMessage='All team communication in one place, searchable and accessible anywhere'
|
|
/>
|
|
<TextInput
|
|
value={this.state.loginId}
|
|
onChangeText={(loginId) => this.setState({loginId})}
|
|
style={GlobalStyles.inputBox}
|
|
placeholder={this.createLoginPlaceholder()}
|
|
autoCorrect={false}
|
|
autoCapitalize='none'
|
|
underlineColorAndroid='transparent'
|
|
/>
|
|
<TextInput
|
|
value={this.state.password}
|
|
onChangeText={(password) => this.setState({password})}
|
|
style={GlobalStyles.inputBox}
|
|
placeholder={this.props.intl.formatMessage({id: 'login.password', defaultMessage: 'Password'})}
|
|
secureTextEntry={true}
|
|
autoCorrect={false}
|
|
autoCapitalize='none'
|
|
underlineColorAndroid='transparent'
|
|
/>
|
|
<Button onPress={() => this.signIn()}>
|
|
<FormattedText
|
|
id='login.signIn'
|
|
defaultMessage='Sign in'
|
|
/>
|
|
</Button>
|
|
<ErrorText error={this.props.login.error}/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default injectIntl(LoginView);
|