From 9170cbdd2de01d5af9084226de067a99e46c025a Mon Sep 17 00:00:00 2001 From: Fae Date: Wed, 4 Dec 2024 01:14:03 -0300 Subject: [PATCH 1/2] 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, + } }); From 352bfc2256e131597ccb99ad8c2fcb81521ceca1 Mon Sep 17 00:00:00 2001 From: Fae Date: Mon, 9 Dec 2024 03:23:41 -0300 Subject: [PATCH 2/2] =?UTF-8?q?Funcionalidade=20de=20esqueci=20minha=20sen?= =?UTF-8?q?ha=20conectada=20com=20o=20backend.=20O=20envio=20de=20emails?= =?UTF-8?q?=20est=C3=A1=20funcionando,=20por=C3=A9m=20ainda=20n=C3=A3o=20p?= =?UTF-8?q?ossui=20uma=20tela=20para=20a=20segunda=20parte=20--=20recupera?= =?UTF-8?q?r=20a=20senha=20(alterar=20a=20senha=20ap=C3=B3s=20inserir=20o?= =?UTF-8?q?=20token=20de=20verifica=C3=A7=C3=A3o).?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/private/pages/esqueciSenha.tsx | 28 +++++++++++++++++++------- src/app/public/login.tsx | 2 +- src/app/services/user.service.ts | 22 ++++++++++++++++++++ 3 files changed, 44 insertions(+), 8 deletions(-) diff --git a/src/app/private/pages/esqueciSenha.tsx b/src/app/private/pages/esqueciSenha.tsx index b75e969f..57ad37c1 100644 --- a/src/app/private/pages/esqueciSenha.tsx +++ b/src/app/private/pages/esqueciSenha.tsx @@ -1,20 +1,35 @@ import React, { useState } from "react"; -import { Image, Text, View, TextInput, StyleSheet, TouchableOpacity } from "react-native"; +import { forgotPassword } from "../../services/user.service"; +import { Alert, Text, View, TextInput, StyleSheet, TouchableOpacity } from "react-native"; +import axios from 'axios'; //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 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/esqueci-senha`; const [email, setEmail] = useState(""); + const handleRecuperarSenha = async () => { + if (!email) { + Alert.alert("Erro", "Por favor, insira um email válido."); + return; + } + try { + const response = await forgotPassword(email); + console.log("E-mail de recuperação enviado:", response); + } catch (error) { + console.error("Erro ao solicitar recuperação de senha:", error.message); + } + }; return ( - {/* Logo */} + {/* Logo deveria estar aqui, mas não consegui encaixá-la */} - {/* Título */} Esqueceu sua senha? Calma, a GERO te ajuda!! - {/* Campo de Email */} - {/* Botão de Recuperar Senha */} - + Recuperar senha diff --git a/src/app/public/login.tsx b/src/app/public/login.tsx index b3bff392..1ff7f532 100644 --- a/src/app/public/login.tsx +++ b/src/app/public/login.tsx @@ -261,7 +261,7 @@ export default function Login() { diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index 03122fdb..de4821b8 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -26,6 +26,28 @@ export const postUser = async ( return json; }; +export const forgotPassword = async ( + email: string, +): Promise> => { + const response = await fetch(`${BASE_URL}/esqueci-senha`, { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ email }), + }); + + const json = await response.json(); + + if (response.status !== 200) { + throw new Error(json.message as string); + } + + return json; +}; + + export const updateUser = async ( id: number, body: Partial,