Improved login screen

This commit is contained in:
Arnaud Vergnet 2020-03-30 19:50:16 +02:00
parent e3b3657e6e
commit 6b336cfd03

View file

@ -1,9 +1,10 @@
// @flow // @flow
import * as React from 'react'; 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 ConnectionManager from "../../managers/ConnectionManager";
import {openBrowser} from "../../utils/WebBrowser";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -12,34 +13,99 @@ type Props = {
type State = { type State = {
email: string, email: string,
password: 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 = { state = {
email: '', email: '',
password: '', password: '',
isEmailValidated: false,
isPasswordValidated: false,
}; };
colors: Object;
onEmailChange: Function; onEmailChange: Function;
onPasswordChange: 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.onEmailChange = this.onInputChange.bind(this, true);
this.onPasswordChange = this.onInputChange.bind(this, false); 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) { 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() { onSubmit() {
console.log('pressed'); if (this.shouldEnableLogin()) {
ConnectionManager.getInstance().connect(this.state.email, this.state.password) ConnectionManager.getInstance().connect(this.state.email, this.state.password)
.then((data) => { .then((data) => {
console.log(data); console.log(data);
@ -48,43 +114,127 @@ export default class LoginScreen extends React.Component<Props, State> {
console.log(error); console.log(error);
}); });
} }
}
render() { getFormInput() {
return ( 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 <TextInput
label='Email' label='Email'
mode='outlined' mode='outlined'
value={this.state.email} value={this.state.email}
onChangeText={this.onEmailChange} 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 <TextInput
ref={(ref) => {
this.passwordInputRef = ref;
}}
label='Password' label='Password'
mode='outlined' mode='outlined'
value={this.state.password} value={this.state.password}
onChangeText={this.onPasswordChange} 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 LOGIN
</Button> </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}> <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> </Button>
</View> </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> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</ScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
); );
} }
@ -92,11 +242,12 @@ export default class LoginScreen extends React.Component<Props, State> {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1
},
inner: {
padding: 24,
flex: 1, flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
card: {
margin: 10,
}, },
header: { header: {
fontSize: 36, fontSize: 36,
@ -104,6 +255,9 @@ const styles = StyleSheet.create({
}, },
textInput: {}, textInput: {},
btnContainer: { btnContainer: {
marginTop: 12 marginTop: 5,
marginBottom: 10,
} }
}); });
export default withTheme(LoginScreen);