javascript App.js

Posted 2021-05-03

import React from 'react';
import { StyleSheet, ScrollView, KeyboardAvoidingView, Button, Text, View, Switch } from 'react-native';
import TextEntry from './Components/TextEntry'
import useful from "./useful";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F1F1F5',
    justifyContent: 'center'
  },
  grayLight:{
    color: "#a9a9ad"
  }
});

const titlePassword ='Le mot de passe doit comporter au moins 6 caractéres sans accent ni tiret ni espace et au moins une lettre';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: null,
      password: null
    }
    this.lastName = React.createRef();
    this.firstName = React.createRef();
    this.email = React.createRef();
    this.password = React.createRef();
  }

  focusLastName = () => {
    this.lastName.current.focus()
  };
  focusEmail = () => {
    this.email.current.focus()
  };
  focusPassword = () => {
    this.password.current.focus()
  };

  submit = () => {
    const {email, password} = this.state
    useful(email, password)
  };

  render() {
    console.log(this.state.email)
    console.log(this.state.password)
    return (
      <KeyboardAvoidingView style={{flex: 1}} behavior="padding" enabled>
        <ScrollView contentContainerStyle={styles.container}>
          {this.renderUSername()}
          {this.renderFirstname()}
          {this.renderLastname()}
          {this.renderEmail()}
          {this.renderPassword()}
          {this.renderButton()}
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }

  renderUSername = () => (
    <TextEntry
      onSubmitEditing={this.focusLastName}
      placeholder="Username"
      title="Username"
      returnKeyType='next'
      textRef={this.firstName}
    />
  )

  renderFirstname = () => (
    <TextEntry
      onSubmitEditing={this.focusLastName}
      placeholder="Nom"
      title="Nom"
      returnKeyType='next'
      textRef={this.firstName}
    />
  );

  renderLastname = () => (
    <TextEntry
      placeholder="Prenom"
      title="Prenom"
      returnKeyType='next'
      textRef={this.lastName}
      onSubmitEditing={this.focusEmail}

    />
  );

  renderEmail = () => (
    <TextEntry
      placeholder="Email"
      title="Email"
      returnKeyType='next'
      textRef={this.email}
      onSubmitEditing={this.focusPassword}
      onChangeText={(email) => this.setState({email})}

    />
  );

  renderPassword = () => (
    <>
      <TextEntry
        placeholder="password"
        title="password"
        returnKeyType='next'
        secureTextEntry={true}
        textRef={this.password}
        onChangeText={password => this.setState({password})}
      />
        <Text style={styles.grayLight}>{titlePassword}