diff --git a/src/actions/login.js b/src/actions/login.js new file mode 100644 index 000000000..2f74c37bd --- /dev/null +++ b/src/actions/login.js @@ -0,0 +1,18 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {LoginTypes as types} from 'constants'; +import Client from 'client/client_instance'; +import {bindClientFunc} from 'actions/helpers.js'; + +export function login(loginId, password, mfaToken = '') { + return bindClientFunc( + Client.login, + types.LOGIN_REQUEST, + types.LOGIN_SUCCESS, + types.LOGIN_FAILURE, + loginId, + password, + mfaToken + ); +} diff --git a/src/components/login.js b/src/components/login.js new file mode 100644 index 000000000..dbe54fa47 --- /dev/null +++ b/src/components/login.js @@ -0,0 +1,105 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React, {Component, PropTypes} from 'react'; + +import {bindActionCreators} from 'redux'; +import {connect} from 'react-redux'; +import {Image, StyleSheet, Text, TextInput, View} from 'react-native'; +import {Actions as Routes} from 'react-native-router-flux'; + +import * as loginActions from 'actions/login'; +import Button from 'components/button'; +import ErrorText from 'components/error_text'; +import {GlobalStyles} from 'styles'; +import logo from 'images/logo.png'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'column', + alignItems: 'center', + paddingTop: 200, + backgroundColor: 'white' + }, + logo: { + marginBottom: 10 + } +}); + +const propTypes = { + login: PropTypes.object.isRequired, + actions: PropTypes.object.isRequired +}; + +class Login extends Component { + static propTypes = propTypes; + state = { + loginId: '', + password: '' + }; + + componentWillReceiveProps(props) { + if (this.props.login.status === 'fetching' && + props.login.status === 'fetched') { + Routes.SelectTeam(); // eslint-disable-line new-cap + } + } + + signIn() { + if (this.props.login.status !== 'fetching') { + const {loginId, password} = this.state; + this.props.actions.login(loginId, password); + } + } + + render() { + return ( + + + {'Mattermost'} + + {'All team communication in one place, searchable and accessible anywhere'} + + this.setState({loginId})} + style={GlobalStyles.inputBox} + placeholder='Email or Username' + autoCorrect={false} + autoCapitalize='none' + /> + this.setState({password})} + style={GlobalStyles.inputBox} + placeholder='Password' + autoCorrect={false} + autoCapitalize='none' + /> +