Improved login screen

screens/Amicale/LoginScreen.js

@@ -1,9 +1,10 @@
 // @flow
 
 import * as React from 'react';
-import {Keyboard, KeyboardAvoidingView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import {Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
-import {Button, Text, TextInput, Title} from 'react-native-paper';
+import {Avatar, Button, Card, HelperText, Text, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager from "../../managers/ConnectionManager";
+import {openBrowser} from "../../utils/WebBrowser";
 
 type Props = {
     navigation: Object,
@@ -12,34 +13,99 @@ type Props = {
 type State = {
     email: string,
     password: string,
+    isEmailValidated: boolean,
+    isPasswordValidated: boolean,
 }
 
+const ICON_AMICALE = require('../../assets/amicale.png');
 
-export default class LoginScreen extends React.Component<Props, State> {
+const RESET_PASSWORD_LINK = "https://www.amicale-insat.fr/password/reset";
+
+class LoginScreen extends React.Component<Props, State> {
 
     state = {
         email: '',
         password: '',
+        isEmailValidated: false,
+        isPasswordValidated: false,
     };
 
+    colors: Object;
+
     onEmailChange: Function;
     onPasswordChange: Function;
+    validateEmail: Function;
+    validatePassword: Function;
+    onSubmit: Function;
+    onEmailSubmit: Function;
+    onResetPasswordClick: Function;
 
-    constructor() {
+    passwordInputRef: Object;
-        super();
+
+    constructor(props) {
+        super(props);
         this.onEmailChange = this.onInputChange.bind(this, true);
         this.onPasswordChange = this.onInputChange.bind(this, false);
+        this.validateEmail = this.validateEmail.bind(this);
+        this.validatePassword = this.validatePassword.bind(this);
+        this.onSubmit = this.onSubmit.bind(this);
+        this.onEmailSubmit = this.onEmailSubmit.bind(this);
+        this.onResetPasswordClick = this.onResetPasswordClick.bind(this);
+        this.colors = props.theme.colors;
+    }
+
+    onResetPasswordClick() {
+        openBrowser(RESET_PASSWORD_LINK, this.colors.primary);
+    }
+
+    validateEmail() {
+        this.setState({isEmailValidated: true});
+    }
+
+    isEmailValid() {
+        return false;
+    }
+
+    shouldShowEmailError() {
+        return this.state.isEmailValidated && !this.isEmailValid();
+    }
+
+    validatePassword() {
+        this.setState({isPasswordValidated: true});
+    }
+
+    isPasswordValid() {
+        return this.state.password !== '';
+    }
+
+    shouldShowPasswordError() {
+        return this.state.isPasswordValidated && !this.isPasswordValid();
+    }
+
+    shouldEnableLogin() {
+        return this.isEmailValid() && this.isPasswordValid();
     }
 
     onInputChange(isEmail: boolean, value: string) {
-        if (isEmail)
+        if (isEmail) {
-            this.setState({email: value});
+            this.setState({
-        else
+                email: value,
-            this.setState({password: value});
+                isEmailValidated: false,
+            });
+        } else {
+            this.setState({
+                password: value,
+                isPasswordValidated: false,
+            });
+        }
+    }
+
+    onEmailSubmit() {
+        this.passwordInputRef.focus();
     }
 
     onSubmit() {
-        console.log('pressed');
+        if (this.shouldEnableLogin()) {
             ConnectionManager.getInstance().connect(this.state.email, this.state.password)
                 .then((data) => {
                     console.log(data);
@@ -48,43 +114,127 @@ export default class LoginScreen extends React.Component<Props, State> {
                     console.log(error);
                 });
         }
+    }
 
-    render() {
+    getFormInput() {
         return (
-            <KeyboardAvoidingView
+            <View>
-                behavior={"padding"}
-                contentContainerStyle={styles.container}
-                style={styles.container}
-            >
-                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-                    <View style={styles.inner}>
-                        <Title>COUCOU</Title>
-                        <Text>entrez vos identifiants</Text>
                 <TextInput
                     label='Email'
                     mode='outlined'
                     value={this.state.email}
                     onChangeText={this.onEmailChange}
+                    onBlur={this.validateEmail}
+                    onSubmitEditing={this.onEmailSubmit}
+                    error={this.shouldShowEmailError()}
+                    textContentType={'emailAddress'}
+                    autoCapitalize={'none'}
+                    autoCompleteType={'email'}
+                    autoCorrect={false}
+                    keyboardType={'email-address'}
+                    returnKeyType={'next'}
+                    secureTextEntry={false}
                 />
+                <HelperText
+                    type="error"
+                    visible={this.shouldShowEmailError()}
+                >
+                    EMAIL INVALID
+                </HelperText>
                 <TextInput
+                    ref={(ref) => {
+                        this.passwordInputRef = ref;
+                    }}
                     label='Password'
                     mode='outlined'
                     value={this.state.password}
                     onChangeText={this.onPasswordChange}
+                    onBlur={this.validatePassword}
+                    onSubmitEditing={this.onSubmit}
+                    error={this.shouldShowPasswordError()}
+                    textContentType={'password'}
+                    autoCapitalize={'none'}
+                    autoCompleteType={'password'}
+                    autoCorrect={false}
+                    keyboardType={'default'}
+                    returnKeyType={'done'}
+                    secureTextEntry={true}
                 />
-                        <View style={styles.btnContainer}>
+                <HelperText
-                            <Button icon="send" onPress={() => this.onSubmit()}>
+                    type="error"
+                    visible={this.shouldShowPasswordError()}
+                >
+                    PLS ENTER PASSWORD
+                </HelperText>
+            </View>
+        );
+    }
+
+    getMainCard() {
+        return (
+            <Card style={styles.card}>
+                <Card.Title
+                    title="COUCOU"
+                    subtitle="ENTREZ VOS IDENTIFIANTS"
+                    left={(props) => <Avatar.Image
+                        {...props}
+                        source={ICON_AMICALE}
+                        style={{backgroundColor: 'transparent'}}/>}
+                />
+                <Card.Content>
+                    {this.getFormInput()}
+                    <Card.Actions>
+                        <Button
+                            icon="send"
+                            mode="contained"
+                            disabled={!this.shouldEnableLogin()}
+                            onPress={this.onSubmit}
+                            style={{marginLeft: 'auto'}}>
                             LOGIN
                         </Button>
-                        </View>
+                    </Card.Actions>
-                        <Text>Pas de compte, dommage !</Text>
+                </Card.Content>
+            </Card>
+        );
+    }
+
+    getSecondaryCard() {
+        return (
+            <Card style={styles.card}>
+                <Card.Content>
+                    <Text>MDP OUBLIÉ ? t'es pas doué</Text>
                     <View style={styles.btnContainer}>
-                            <Button icon="send" onPress={() => console.log('Pressed')}>
+                        <Button
-                                Créer un compte
+                            icon="reload"
+                            mode="contained"
+                            onPress={this.onResetPasswordClick}
+                            style={{marginLeft: 'auto'}}>
+                            RESET MDP
                         </Button>
                     </View>
+                    <Text>PAS DE COMPTE ? DOMMAGE PASSE À L'AMICALE</Text>
+                </Card.Content>
+            </Card>
+        );
+    }
+
+    render() {
+        return (
+            <KeyboardAvoidingView
+                behavior={"height"}
+                contentContainerStyle={styles.container}
+                style={styles.container}
+                enabled
+                keyboardVerticalOffset={100}
+            >
+                <ScrollView>
+                    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+                        <View>
+                            {this.getMainCard()}
+                            {this.getSecondaryCard()}
                         </View>
                     </TouchableWithoutFeedback>
+                </ScrollView>
             </KeyboardAvoidingView>
         );
     }
@@ -92,11 +242,12 @@ export default class LoginScreen extends React.Component<Props, State> {
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1
-    },
-    inner: {
-        padding: 24,
         flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
+    card: {
+        margin: 10,
     },
     header: {
         fontSize: 36,
@@ -104,6 +255,9 @@ const styles = StyleSheet.create({
     },
     textInput: {},
     btnContainer: {
-        marginTop: 12
+        marginTop: 5,
+        marginBottom: 10,
     }
 });
+
+export default withTheme(LoginScreen);