Browse Source

Enable/Disable password view

master
GabrielTrettel 3 years ago
parent
commit
4f8c963c3a
  1. 44
      src/app/components/forms/PasswordFormField.js
  2. 15
      src/app/screens/RegisterScreen.js

44
src/app/components/forms/PasswordFormField.js

@ -1,25 +1,29 @@
import React, {useState} from "react";
import React, { useState } from "react";
import ErrorMessage from "./ErrorMessage";
import { useFormikContext } from "formik";
import { View, TextInput, StyleSheet } from "react-native";
import {
View,
TextInput,
StyleSheet,
TouchableNativeFeedback,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../../config/colors";
import defaultStyles from "../../config/styles";
function PasswordFormField({ name, ...otherProps }) {
const {
values,
setFieldTouched,
setFieldValue,
handleChange,
errors,
touched,
} = useFormikContext();
function PasswordFormField({
name,
flex = 0,
paddingLeft = 16,
paddingRight = 16,
...otherProps
}) {
const { values, setFieldTouched, errors, touched } = useFormikContext();
const [fieldVal, setFieldVal] = useState(values[name]);
const [hidePswd, setHidePswd] = useState(true);
return (
<View>
<View flex={flex} paddingLeft={paddingLeft} paddingRight={paddingRight}>
<View style={styles.container}>
<TextInput
flex={1}
@ -30,20 +34,23 @@ function PasswordFormField({ name, ...otherProps }) {
value={fieldVal.toString()}
style={defaultStyles.text}
height={48}
secureTextEntry={hidePswd}
placeholderTextColor={colors.medium}
{...otherProps}
/>
<TouchableNativeFeedback onPress={() => setHidePswd(!hidePswd)}>
<MaterialCommunityIcons
name={"eye"}
size={20}
name={hidePswd ? "eye-off" : "eye"}
size={25}
color={defaultStyles.colors.medium}
style={styles.icon}
/>
</TouchableNativeFeedback>
</View>
<View style={{ paddingHorizontal: 16 }}>
{/* <View style={{ paddingHorizontal: 2 }}> */}
<ErrorMessage error={errors[name]} visible={touched[name]} />
</View>
{/* </View> */}
</View>
);
}
@ -59,11 +66,10 @@ const styles = StyleSheet.create({
borderWidth: 1,
padding: 5,
paddingLeft: 10,
marginHorizontal: 16
},
icon: {
marginRight: 10,
alignItems: "flex-end"
alignItems: "flex-end",
},
});

15
src/app/screens/RegisterScreen.js

@ -34,9 +34,10 @@ import {
import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage";
import ConfirmationModal from "../components/ConfirmationModal";
import PasswordFormField from "../components/forms/PasswordFormField";
const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
/^\(?[\(]?([0-9]{2,3})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
);
const validationSchema = Yup.object().shape({
@ -396,18 +397,17 @@ export default function RegisterScreen(props) {
flex={1}
maxLength={12}
name="number"
placeholder="Digite o número de telefone celular"
placeholder="(DDD) XXXXX-XXXX"
paddingRight={2}
/>
</View>
<Text style={styles.labelStyle}>Senha:*</Text>
<View style={styles.iconField}>
<MaterialCommunityIconsCustom name="lock" />
<FormField
<PasswordFormField
flex={1}
maxLength={12}
maxLength={20}
name="password"
secureTextEntry={true}
placeholder="Digite a senha"
paddingRight={2}
/>
@ -415,11 +415,10 @@ export default function RegisterScreen(props) {
<Text style={styles.labelStyle}>Confirmar senha:*</Text>
<View style={styles.iconField}>
<MaterialCommunityIconsCustom name="lock" />
<FormField
<PasswordFormField
flex={1}
maxLength={12}
maxLength={20}
name="confirmPassword"
secureTextEntry={true}
placeholder="Repita a senha"
paddingRight={2}
/>

Loading…
Cancel
Save