Browse Source

Enable/Disable password view

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

42
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 ErrorMessage from "./ErrorMessage";
import { useFormikContext } from "formik"; 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 { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../../config/colors"; import colors from "../../config/colors";
import defaultStyles from "../../config/styles"; 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 [fieldVal, setFieldVal] = useState(values[name]);
const [hidePswd, setHidePswd] = useState(true);
return ( return (
<View>
<View flex={flex} paddingLeft={paddingLeft} paddingRight={paddingRight}>
<View style={styles.container}> <View style={styles.container}>
<TextInput <TextInput
flex={1} flex={1}
@ -30,20 +34,23 @@ function PasswordFormField({ name, ...otherProps }) {
value={fieldVal.toString()} value={fieldVal.toString()}
style={defaultStyles.text} style={defaultStyles.text}
height={48} height={48}
secureTextEntry={hidePswd}
placeholderTextColor={colors.medium} placeholderTextColor={colors.medium}
{...otherProps} {...otherProps}
/> />
<TouchableNativeFeedback onPress={() => setHidePswd(!hidePswd)}>
<MaterialCommunityIcons <MaterialCommunityIcons
name={"eye"}
size={20}
name={hidePswd ? "eye-off" : "eye"}
size={25}
color={defaultStyles.colors.medium} color={defaultStyles.colors.medium}
style={styles.icon} style={styles.icon}
/> />
</TouchableNativeFeedback>
</View> </View>
<View style={{ paddingHorizontal: 16 }}>
{/* <View style={{ paddingHorizontal: 2 }}> */}
<ErrorMessage error={errors[name]} visible={touched[name]} /> <ErrorMessage error={errors[name]} visible={touched[name]} />
</View>
{/* </View> */}
</View> </View>
); );
} }
@ -59,11 +66,10 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
padding: 5, padding: 5,
paddingLeft: 10, paddingLeft: 10,
marginHorizontal: 16
}, },
icon: { icon: {
marginRight: 10, 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 { AuthContext } from "../auth/context";
import authStorage from "../auth/storage"; import authStorage from "../auth/storage";
import ConfirmationModal from "../components/ConfirmationModal"; import ConfirmationModal from "../components/ConfirmationModal";
import PasswordFormField from "../components/forms/PasswordFormField";
const phoneRegex = RegExp( 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({ const validationSchema = Yup.object().shape({
@ -396,18 +397,17 @@ export default function RegisterScreen(props) {
flex={1} flex={1}
maxLength={12} maxLength={12}
name="number" name="number"
placeholder="Digite o número de telefone celular"
placeholder="(DDD) XXXXX-XXXX"
paddingRight={2} paddingRight={2}
/> />
</View> </View>
<Text style={styles.labelStyle}>Senha:*</Text> <Text style={styles.labelStyle}>Senha:*</Text>
<View style={styles.iconField}> <View style={styles.iconField}>
<MaterialCommunityIconsCustom name="lock" /> <MaterialCommunityIconsCustom name="lock" />
<FormField
<PasswordFormField
flex={1} flex={1}
maxLength={12}
maxLength={20}
name="password" name="password"
secureTextEntry={true}
placeholder="Digite a senha" placeholder="Digite a senha"
paddingRight={2} paddingRight={2}
/> />
@ -415,11 +415,10 @@ export default function RegisterScreen(props) {
<Text style={styles.labelStyle}>Confirmar senha:*</Text> <Text style={styles.labelStyle}>Confirmar senha:*</Text>
<View style={styles.iconField}> <View style={styles.iconField}>
<MaterialCommunityIconsCustom name="lock" /> <MaterialCommunityIconsCustom name="lock" />
<FormField
<PasswordFormField
flex={1} flex={1}
maxLength={12}
maxLength={20}
name="confirmPassword" name="confirmPassword"
secureTextEntry={true}
placeholder="Repita a senha" placeholder="Repita a senha"
paddingRight={2} paddingRight={2}
/> />

Loading…
Cancel
Save