Browse Source

Initiam implementation of enabling/disabling secure password

master
GabrielTrettel 3 years ago
parent
commit
f1e216531b
  1. 70
      src/app/components/forms/PasswordFormField.js
  2. 4
      src/app/screens/LoginScreen.js

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

@ -0,0 +1,70 @@
import React, {useState} from "react";
import ErrorMessage from "./ErrorMessage";
import { useFormikContext } from "formik";
import { View, TextInput, StyleSheet } 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();
const [fieldVal, setFieldVal] = useState(values[name]);
return (
<View>
<View style={styles.container}>
<TextInput
flex={1}
onBlur={() => setFieldTouched(name)}
onChangeText={(val) => {
setFieldVal(val);
}}
value={fieldVal.toString()}
style={defaultStyles.text}
height={48}
placeholderTextColor={colors.medium}
{...otherProps}
/>
<MaterialCommunityIcons
name={"eye"}
size={20}
color={defaultStyles.colors.medium}
style={styles.icon}
/>
</View>
<View style={{ paddingHorizontal: 16 }}>
<ErrorMessage error={errors[name]} visible={touched[name]} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
...defaultStyles.shadow,
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.white,
borderRadius: 6,
borderColor: colors.grayBG,
borderWidth: 1,
padding: 5,
paddingLeft: 10,
marginHorizontal: 16
},
icon: {
marginRight: 10,
alignItems: "flex-end"
},
});
export default PasswordFormField;

4
src/app/screens/LoginScreen.js

@ -17,6 +17,7 @@ import assets from "../config/assets";
import Button from "../components/Button";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { login, userPersonalData } from "../api/auth";
import PasswordFormField from "../components/forms/PasswordFormField";
const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@ -124,10 +125,9 @@ export default function LoginScreen(props) {
</View>
<View style={{ paddingBottom: 24 }}>
<FormField
<PasswordFormField
maxLength={12}
name="password"
secureTextEntry={true}
placeholder="Senha"
/>
</View>

Loading…
Cancel
Save