Browse Source

Loggin screen with new layout

master
GabrielTrettel 3 years ago
parent
commit
9b604c1c02
  1. 8
      src/app/components/Button.js
  2. 2
      src/app/components/TextInput.js
  3. 1
      src/app/config/colors.js
  4. 73
      src/app/screens/LoginScreen.js

8
src/app/components/Button.js

@ -1,16 +1,18 @@
import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
import colors from "../config/colors";
function AppButton({ title, onPress, color = "lightBlue" }) {
function AppButton({ title, onPress, color = colors.lightBlue, style }) {
return (
<View style={style}>
<TouchableOpacity
style={[styles.button, { backgroundColor: colors[color] }]}
style={[styles.button, { backgroundColor: color }]}
onPress={onPress}
>
<Text style={styles.text}>{title}</Text>
</TouchableOpacity>
</View>
);
}

2
src/app/components/TextInput.js

@ -38,7 +38,7 @@ const styles = StyleSheet.create({
container: {
backgroundColor: colors.white,
borderRadius: 6,
borderColor: colors.medium,
borderColor: colors.grayBG,
borderWidth: 1,
padding: 5,
},

1
src/app/config/colors.js

@ -9,6 +9,7 @@ export default {
danger: "#ff5252",
notActivated: "rgba(201, 69, 54, 0.87)",
activated: "rgba(26, 138, 17, 0.63)",
green: "#1A8A11",
lightGray: "#C4C4C4",
gray: "#999999",
separatorGray: "#D9D9D9",

73
src/app/screens/LoginScreen.js

@ -1,5 +1,5 @@
import React, { useState, useContext } from "react";
import { StyleSheet, View } from "react-native";
import { StyleSheet, View, Text } from "react-native";
import * as Yup from "yup";
import {
Form,
@ -15,6 +15,8 @@ import jwdDecode from "jwt-decode";
import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage";
import assets from "../config/assets";
import Button from "../components/Button";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@ -30,6 +32,46 @@ const validationSchema = Yup.object().shape({
.matches(/[a-zA-Z]/, "A senha só pode conter letras"),
});
function DashedOrSeparator() {
return (
<View
style={{
flexDirection: "row",
marginVertical: 20,
alignItems: "center",
paddingHorizontal: 14,
}}
>
<View
style={{
flex: 1,
height: 1,
backgroundColor: colors.subText,
}}
></View>
<Text
style={{
marginHorizontal: 10,
fontSize: 14,
fontWeight: "bold",
color: colors.subText,
}}
>
OU
</Text>
<View
style={{
height: 1,
flex: 1,
backgroundColor: colors.subText,
}}
></View>
</View>
);
}
export default function LoginScreen(props) {
const authContext = useContext(AuthContext);
@ -47,7 +89,7 @@ export default function LoginScreen(props) {
const [loginFailed, setLoginFailed] = useState(false);
return (
<Screen style={styles.containter}>
<Screen style={[styles.containter, { backgroundColor: colors.grayBG }]}>
<Form
initialValues={{
name: "",
@ -58,7 +100,7 @@ export default function LoginScreen(props) {
handleSubmit(name, password, setLoginFailed)
}
>
<View>
<View paddingHorizontal={14}>
<assets.AppLogoTitle
preserveAspectRatio="xMidYMid meet"
width={300}
@ -93,17 +135,30 @@ export default function LoginScreen(props) {
</View>
<SubmitButton title="entrar" backgroundColor={colors.primary} />
</View>
{/* <TouchableNativeFeedback
<TouchableNativeFeedback
onPress={() => {
props.navigation.navigate("Register");
props.navigation.navigate("ForgotPassword");
}}
>
<View flexDirection="row" alignSelf="center">
<Text>Não tem uma conta? </Text>
<Text style={{ color: colors.lightBlue }}>Cadastre-se</Text>
<Text style={{ color: colors.lightBlue, fontWeight: "bold" }}>
Esqueceu a senha?
</Text>
</View>
</TouchableNativeFeedback>
<DashedOrSeparator />
<Button
title="cadastrar-se"
color={colors.green}
style={{ paddingHorizontal: 16 }}
onPress={() => {
props.navigation.navigate("Register");
}}
/>
</View>
</TouchableNativeFeedback>*/}
</Form>
</Screen>
);

Loading…
Cancel
Save