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. 83
      src/app/screens/LoginScreen.js

8
src/app/components/Button.js

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

2
src/app/components/TextInput.js

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

1
src/app/config/colors.js

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

83
src/app/screens/LoginScreen.js

@ -1,5 +1,5 @@
import React, { useState, useContext } from "react"; 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 * as Yup from "yup";
import { import {
Form, Form,
@ -15,6 +15,8 @@ import jwdDecode from "jwt-decode";
import { AuthContext } from "../auth/context"; import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage"; import authStorage from "../auth/storage";
import assets from "../config/assets"; import assets from "../config/assets";
import Button from "../components/Button";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
const phoneRegex = RegExp( const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/ /^\(?[\(]?([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"), .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) { export default function LoginScreen(props) {
const authContext = useContext(AuthContext); const authContext = useContext(AuthContext);
@ -47,7 +89,7 @@ export default function LoginScreen(props) {
const [loginFailed, setLoginFailed] = useState(false); const [loginFailed, setLoginFailed] = useState(false);
return ( return (
<Screen style={styles.containter}>
<Screen style={[styles.containter, { backgroundColor: colors.grayBG }]}>
<Form <Form
initialValues={{ initialValues={{
name: "", name: "",
@ -58,7 +100,7 @@ export default function LoginScreen(props) {
handleSubmit(name, password, setLoginFailed) handleSubmit(name, password, setLoginFailed)
} }
> >
<View>
<View paddingHorizontal={14}>
<assets.AppLogoTitle <assets.AppLogoTitle
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
width={300} width={300}
@ -92,18 +134,31 @@ export default function LoginScreen(props) {
/> />
</View> </View>
<SubmitButton title="entrar" backgroundColor={colors.primary} />
<SubmitButton title="entrar" backgroundColor={colors.primary} />
<TouchableNativeFeedback
onPress={() => {
props.navigation.navigate("ForgotPassword");
}}
>
<View flexDirection="row" alignSelf="center">
<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> </View>
{/* <TouchableNativeFeedback
onPress={() => {
props.navigation.navigate("Register");
}}
>
<View flexDirection="row" alignSelf="center">
<Text>Não tem uma conta? </Text>
<Text style={{ color: colors.lightBlue }}>Cadastre-se</Text>
</View>
</TouchableNativeFeedback>*/}
</Form> </Form>
</Screen> </Screen>
); );

Loading…
Cancel
Save