From 9170cbdd2de01d5af9084226de067a99e46c025a Mon Sep 17 00:00:00 2001 From: Fae Date: Wed, 4 Dec 2024 01:14:03 -0300 Subject: [PATCH] Ajustes e telas para a funcionalidade Esqueci Minha Senha -- CORRETO --- src/app/components/ForgetButton.tsx | 55 ++++++++-------- src/app/private/pages/esqueciSenha.tsx | 89 ++++++++++++++++++++++++++ src/app/public/login.tsx | 27 ++++++-- 3 files changed, 138 insertions(+), 33 deletions(-) create mode 100644 src/app/private/pages/esqueciSenha.tsx diff --git a/src/app/components/ForgetButton.tsx b/src/app/components/ForgetButton.tsx index f12c4874..585d1c23 100644 --- a/src/app/components/ForgetButton.tsx +++ b/src/app/components/ForgetButton.tsx @@ -1,50 +1,47 @@ import React from "react"; -import { ActivityIndicator, Pressable, StyleSheet, Text } from "react-native"; +import { ActivityIndicator, StyleSheet, Text } from "react-native"; +import { router } from "expo-router"; +import { View } from 'react-native'; interface Props { title: string; - callbackFn: () => unknown; - backgroundColor?: string; showLoading?: boolean; } export default function ForgetButton({ title, - callbackFn, - backgroundColor, showLoading, }: Readonly) { - const background = backgroundColor ?? "#2CCDB5"; + + const handlePress = () => { + router.push("/private/pages/esqueciSenha"); + }; return ( - callbackFn()} - > + {showLoading ? ( - + ) : ( - {title} + + {title} + )} - + ); } -const styles = (backgroundColor: string) => - StyleSheet.create({ - buttonText: { - fontSize: 13, - color: "white", - fontWeight: "300", - }, - button: { - width: "30%", - maxWidth: 150, - paddingVertical: 10, - paddingHorizontal: 10, - backgroundColor, - alignItems: "center", - borderRadius: 15, +const styles = StyleSheet.create({ + linkText: { + width: "40%", + color: "#2CCDB5", + maxWidth: 300, + textDecorationLine: "underline", + paddingVertical: 12, + paddingHorizontal: 18, + textAlign: "left", + borderRadius: 20, }, }); diff --git a/src/app/private/pages/esqueciSenha.tsx b/src/app/private/pages/esqueciSenha.tsx new file mode 100644 index 00000000..b75e969f --- /dev/null +++ b/src/app/private/pages/esqueciSenha.tsx @@ -0,0 +1,89 @@ +import React, { useState } from "react"; +import { Image, Text, View, TextInput, StyleSheet, TouchableOpacity } from "react-native"; +//import BackButton from "/components/BackButton.tsx"; Não consigo achar esse caminho, preciso fazer rodar... (é o botão q volta pra outra pag) + +export default function EsqueciSenha() { + const [email, setEmail] = useState(""); + + return ( + + + {/* Logo */} + + {/* Título */} + Esqueceu sua senha? + Calma, a GERO te ajuda!! + + {/* Campo de Email */} + + + + + {/* Botão de Recuperar Senha */} + + Recuperar senha + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#FFF", + padding: 16, + }, + logo: { + width: 280, + height: 90, + marginBottom: 40, + }, + title: { + fontSize: 28, + fontWeight: "300", + textAlign: "center", + marginBottom: 19, + }, + subtitle: { + fontSize: 18, + fontWeight: "300", + textAlign: "center", + marginBottom: 10, + }, + inputContainer: { + width: "90%", + maxWidth: 400, + borderBottomWidth: 1, + borderBottomColor: "#CCC", + marginBottom: 20, + }, + input: { + fontSize: 16, + paddingVertical: 8, + paddingHorizontal: 10, + color: "#333", + width: "100%", + }, + button: { + width: "90%", + maxWidth: 200, + backgroundColor: "#2CCDB5", + paddingVertical: 12, + borderRadius: 8, + alignItems: "center", + }, + buttonText: { + color: "#FFF", + fontSize: 16, + fontWeight: "600", + }, +}); diff --git a/src/app/public/login.tsx b/src/app/public/login.tsx index 32789e01..b3bff392 100644 --- a/src/app/public/login.tsx +++ b/src/app/public/login.tsx @@ -1,7 +1,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage"; import { router } from "expo-router"; import React, { useState, useEffect } from "react"; -import { Image, StyleSheet, Text, View, TextInput } from "react-native"; +import { Image, StyleSheet, Text, View, TextInput, Button } from "react-native"; import Toast from "react-native-toast-message"; import Icon from "react-native-vector-icons/MaterialCommunityIcons"; @@ -16,6 +16,7 @@ import database from "../db"; import { Collection, Q } from "@nozbe/watermelondb"; import { syncDatabaseWithServer } from "../services/watermelon.service"; import Usuario from "../model/Usuario"; +import ForgetButton from "../components/ForgetButton"; interface IErrors { email?: string; @@ -23,13 +24,16 @@ interface IErrors { } export default function Login() { + const API_URL = process.env.EXPO_PUBLIC_API_URL; + const API_PORT = process.env.EXPO_PUBLIC_API_USUARIO_PORT; + const BASE_URL = `${API_URL}:${API_PORT}/api/usuario`; const [email, setEmail] = useState(""); const [senha, setSenha] = useState(""); const [escondeSenha, setEscondeSenha] = useState(true); const [erros, setErros] = useState({}); const [showErrors, setShowErrors] = useState(false); const [showLoading, setShowLoading] = useState(false); - + const login = async () => { if (Object.keys(erros).length > 0) { setShowErrors(true); @@ -41,7 +45,7 @@ export default function Login() { try { setShowLoading(true); console.log("Iniciando o login..."); - + console.log(BASE_URL); const response = await loginUser(body); console.log("Resposta do login:", response); @@ -242,6 +246,7 @@ export default function Login() { name={escondeSenha ? "eye-outline" : "eye-off-outline"} size={20} /> + @@ -253,9 +258,16 @@ export default function Login() { showLoading={showLoading} /> + + + + - ); + ); } const styles = StyleSheet.create({ @@ -347,4 +359,11 @@ const styles = StyleSheet.create({ eye: { marginLeft: 100, }, + EsqueciButton: { + marginTop: 35, + alignItems: "center", + justifyContent: "center", // Adicionado para centralizar verticalmente + width: "100%", + flex: 1, + } });