# All files / atlas/src/components/Auth/Registration RegisterCredentials.js

15.38% Statements 2/13
0% Branches 0/14
0% Functions 0/6
15.38% Lines 2/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120

    3x

    3x

     import React from 'react';
    import { Controller, useForm } from 'react-hook-form';
    import { Dimensions, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
    import 'react-native-get-random-values';
    import { Text } from 'react-native-paper';
    import { useRegistrationFormState } from '../../../contexts/RegisterContext';

    const RegisterCredentials = ({changeStep}) => {
      const { dispatch, state: { username, email, step} } = useRegistrationFormState();
      const { control, handleSubmit, formState: {errors} } = useForm({
        mode: 'all'
      });

      const next = (formData) => {
        dispatch({ type: "USERNAME_CHANGE", payload: formData.username });
        dispatch({ type: "EMAIL_CHANGE", payload: formData.email });
        changeStep(2, "Next, we'll have you set a password.");
      }

      return (
            <View>
              <View style={{margin: 20}}>
                <Controller
                  control={control}
                  render={({ field: { onChange, value }}) => (
                    <TextInput
                      mode="outlined"
                      style={[styles.textInput, errors.username && styles.errorInput]}
                      placeholder="Username"
                      value={value}
                      onChangeText={value => onChange(value)} />
                  )}
                  name="username"
                  rules={{ required: true, minLength: 5, maxLength: 15}}
                  />
                  {errors.username?.type === "required" && <Text style={styles.errorText}>Username is required.</Text>}
                  {errors.username?.type === "minLength" && <Text style={styles.errorText}>Username must be at least 5 characters.</Text>}
                  {errors.username?.type === "maxLength" && <Text style={styles.errorText}>Username must be no more than 15 characters.</Text>}
                <Controller
                  defaultValue={email}
                  control={control}
                  render={({ field: { onChange, value }}) => (
                    <TextInput
                      mode="outlined"
                      style={[styles.textInput, errors.username && styles.errorInput]}
                      placeholder="Email"
                      value={value}
                      onChangeText={value => onChange(value)} />
                )}
                rules={{
                  required: true,
                  pattern:
                  {
                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                  }}}
                name="email"/>
                {errors.email?.type === "required" && <Text style={styles.errorText}>Email is required.</Text>}
                {errors.email?.type === "pattern" && <Text style={styles.errorText}>Must be a valid email address.</Text>}
              </View>
              <TouchableOpacity onPress={handleSubmit(next)} style={styles.nextBtn} >
                  <Text style={{ color: 'white', fontSize: 20 }}>Next</Text>
              </TouchableOpacity>
          </View>
      )
    }

    const styles = StyleSheet.create({
        container: {
          position: 'absolute',
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
          flex: 1,
          justifyContent: 'flex-start',
          resizeMode: 'cover',
        },

        textContainer: {
          marginHorizontal: 20,
          marginBottom: 30,
          borderRadius: 50,
        },

        textInput: {
          marginVertical: 7,
          paddingLeft: 30,
          borderRadius: 50,
          overflow: 'hidden',
          backgroundColor: 'white',
          height: 50
        },

        errorText: {
          alignSelf: 'flex-end',
          color: 'red',
          fontSize: 15
        },

        errorInput: {
          borderWidth: 2,
          borderColor: 'red'
        },

        nextBtn: {
          marginHorizontal: 20,
          marginBottom: 60,
          borderRadius: 50,
          justifyContent: 'center',
          backgroundColor: '#df3f3f',
          margin: 5,
          height: 50,
          alignItems: 'center'
        },
      })

    export default RegisterCredentials;