Ajustes e telas para a funcionalidade Esqueci Minha Senha -- CORRETO

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<Props>) {
-  const background = backgroundColor ?? "#2CCDB5";
+
+  const handlePress = () => {
+    router.push("/private/pages/esqueciSenha"); 
+  };
 
   return (
-    <Pressable
-      testID="customButtonId"
-      style={styles(background).button}
-      onPress={() => callbackFn()}
-    >
+    <View>
       {showLoading ? (
-        <ActivityIndicator size="small" color="#fff" />
+        <ActivityIndicator size="small" color="#0000ff" />
       ) : (
-        <Text style={styles(background).buttonText}>{title}</Text>
+        <Text
+          style={styles.linkText}
+          onPress={handlePress}
+        >
+          {title}
+        </Text>
       )}
-    </Pressable>
+    </View>
   );
 }
 
-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,
     },
   });

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 (
+
+    <View style={styles.container}>
+      {/* Logo */}
+
+      {/* Título */}
+      <Text style={styles.title}>Esqueceu sua senha? </Text>
+      <Text style={styles.subtitle}>Calma, a GERO te ajuda!! </Text>
+
+      {/* Campo de Email */}
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          placeholderTextColor="black" // Garante que o placeholder tenha cor definida
+        />
+      </View>
+
+      {/* Botão de Recuperar Senha */}
+      <TouchableOpacity style={styles.button}>
+        <Text style={styles.buttonText}>Recuperar senha</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+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",
+  },
+});

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,20 +16,24 @@ 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;
   senha?: string;
 }
 
 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<IErrors>({});
   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}
             />
+
           </View>
           <ErrorMessage show={showErrors} text={erros.senha} />
         </View>
@@ -253,9 +258,16 @@ export default function Login() {
             showLoading={showLoading}
           />
         </View>
+
+        <View style={styles.EsqueciButton}>
+          <ForgetButton
+            title="Esqueci minha senha!!"
+            showLoading={showLoading}
+          />
+        </View>
       </ScrollView>
     </View>
-  );
+  );  
 }
 
 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,
+  }
 });