From 08fa1259e3304aed22305807d271b268647d27af Mon Sep 17 00:00:00 2001 From: TRProjects98 Date: Sat, 28 Dec 2024 18:43:39 +0000 Subject: [PATCH 1/2] From Layout Created --- src/pages/LoginPage.js | 48 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js index 54266f7..353d763 100644 --- a/src/pages/LoginPage.js +++ b/src/pages/LoginPage.js @@ -1,10 +1,44 @@ -import React from "react"; -import { View, Text } from "react-native"; +import React, { useState } from "react"; +import { View, Text, TextInput, Button, TouchableOpacity } from "react-native"; export default function LoginPage() { - return ( - - Login - - ); + const [name, setName] = useState(""); + const [pass, setPass] = useState(""); + const [error, setError] = useState(""); + return ( + + {/* Page Title*/} + + Login + + + {/*Form*/} + + + + + Esqueceste-te da password? + + + { + console.log(name, pass); + }} + > + Entrar + + + + ); } From 16671633f45d4d7301df48447aac856f71ae8f16 Mon Sep 17 00:00:00 2001 From: TRProjects98 Date: Thu, 2 Jan 2025 16:54:59 +0000 Subject: [PATCH 2/2] Login form created || Reset password modal created || Register bubble redirect created --- src/App.js | 13 +- src/components/PasswordResetModal.js | 177 +++++++++++++++++++++++++++ src/components/SpeechBubble.js | 34 +++++ src/pages/LoginPage.js | 126 ++++++++++++++++--- src/pages/RegisterPage.js | 12 ++ 5 files changed, 343 insertions(+), 19 deletions(-) create mode 100644 src/components/PasswordResetModal.js create mode 100644 src/components/SpeechBubble.js create mode 100644 src/pages/RegisterPage.js diff --git a/src/App.js b/src/App.js index c5650a9..2d9123b 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,10 @@ import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import Icon from "react-native-vector-icons/Ionicons"; -import { Quicksand_400Regular, Quicksand_700Bold } from "@expo-google-fonts/quicksand"; +import { + Quicksand_400Regular, + Quicksand_700Bold, +} from "@expo-google-fonts/quicksand"; import { useFonts } from "expo-font"; // Importar as telas @@ -15,6 +18,7 @@ import DataPage from "./pages/DataPage"; import ProfilePage from "./pages/ProfilePage"; import HelpPage from "./pages/HelpPage"; import LoginPage from "./pages/LoginPage"; +import RegisterPage from "./pages/RegisterPage"; export default function App() { const [fontsLoaded] = useFonts({ @@ -79,6 +83,11 @@ export default function App() { component={LoginPage} options={{ headerShown: false }} /> + {/* Tela HomeTabs com navbar */} ); -} \ No newline at end of file +} diff --git a/src/components/PasswordResetModal.js b/src/components/PasswordResetModal.js new file mode 100644 index 0000000..bd6e07f --- /dev/null +++ b/src/components/PasswordResetModal.js @@ -0,0 +1,177 @@ +import React, { useState } from "react"; +import { View, Text, TextInput, TouchableOpacity, Modal } from "react-native"; +import { FontAwesome } from "@expo/vector-icons"; + +export default function PasswordResetModal({ + modalVisible, + setModalVisible, + Users, +}) { + // Modal State + const [email, setEmail] = useState(""); + const [code, setCode] = useState(0); + const [userCode, setUserCode] = useState(""); + const [Newpass, setNewPass] = useState(""); + const [PassConfirm, setPassConfirm] = useState(""); + const [emailForm, setEmailForm] = useState(true); + const [error, setError] = useState(false); + const [PassChangeVal, setPassChangeVal] = useState(false); + + //Function to verify email and send code to change password + function SendEmail() { + //Gets user from database + const email_exists = Users.some((user) => user.Email === email); + setCode(Math.floor(1000 + Math.random() * 9000)); // Generate a random 4-digit code + + //Sends email with the code and shows new pass form or shows error + if (email_exists) { + // Need to install emailjs-com to send a E-mail + setEmailForm(false); + setError(false); + } else { + setError(true); + } + } + + //Function to change password + function ChangePass() { + //Checks if new passwords matches or shows error + if (Newpass === PassConfirm) { + //Checks if the user code is the same send to email or shows error + if (userCode == code) { + setError(false); + setPassChangeVal(true); + + // Clear Inputs + setNewPass(""); + setPassConfirm(""); + setUserCode(""); + + // Close Modal after success + setTimeout(() => { + setModalVisible(false); + setEmailForm(true); + setPassChangeVal(false); + }, 1000); + } else { + setError(true); + } + } else { + setError(true); + } + } + + //Function to close Modal resets modal form and sucsses and error messages + function CloseModal() { + setModalVisible(false); + setEmailForm(true); + setError(false); + setPassChangeVal(false); + } + + return ( + + {/* Overlay */} + + + {/* Modal Content */} + + {/* Email Form */} + {emailForm && ( + + + Insere o teu e-mail + + + Vamos te mandar um código para o teu email + + + + {error && ( + + Este email não está registado + + )} + + Enviar + + + )} + + {/* New Password Form */} + {!emailForm && ( + + + Cria a tua nova password + + + + Código + + + {error && ( + + Algo não correu bem + + )} + + {PassChangeVal && ( + + Palavra passe mudada com sucesso + + )} + + + + Mudar Password + + + + )} + + + + + + + + ); +} diff --git a/src/components/SpeechBubble.js b/src/components/SpeechBubble.js new file mode 100644 index 0000000..94fe2af --- /dev/null +++ b/src/components/SpeechBubble.js @@ -0,0 +1,34 @@ +import React from "react"; +import { View, Text, TouchableOpacity, Image } from "react-native"; +import { useNavigation } from "@react-navigation/native"; + +export default function SpeechBubble() { + const navigation = useNavigation(); + function RedirectToRegister() { + navigation.replace("Register"); + } + return ( + + {/* Imagem */} + + {/* Bubble */} + + + Ainda não estás registado? + + + + Clica aqui + + + + + ); +} diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js index 353d763..d9c6714 100644 --- a/src/pages/LoginPage.js +++ b/src/pages/LoginPage.js @@ -1,12 +1,79 @@ import React, { useState } from "react"; -import { View, Text, TextInput, Button, TouchableOpacity } from "react-native"; +import { View, Text, TextInput, TouchableOpacity, Image } from "react-native"; +import { FontAwesome } from "@expo/vector-icons"; +import PasswordResetModal from "../components/PasswordResetModal"; +import SpeechBubble from "../components/SpeechBubble"; export default function LoginPage() { - const [name, setName] = useState(""); + //DB Simulation + const Users = [ + { + id: 0, + User_name: "reistiago", + Pass: "123", + Email: "reistiago64@gmail.com", + Idade: 26, + }, + { + id: 1, + User_name: "eng_gracicha", + Pass: "123", + Email: "reistiago64@gmail.com", + Idade: 21, + }, + { + id: 2, + User_name: "maezinhaVani", + Pass: "123", + Email: "reistiago64@gmail.com", + Idade: 23, + }, + ]; + + //State Variables + const [username, setUname] = useState(""); const [pass, setPass] = useState(""); - const [error, setError] = useState(""); + const [securePass, setSecurePass] = useState(true); + const [modalVisible, setModalVisible] = useState(false); + + //Login Form Actions + + //Function to clear Login Form + const clearLoginForm = () => { + setUname(""); + setPass(""); + }; + + //Function to check if Username exists and if Password corresponds to user in Login Form + function handleLoginForm() { + const user = Users.find((user) => user.User_name === username); + + //From Validation + if (username === "" || pass === "") { + console.log("Fill all inputs."); + } else { + if (user != undefined) { + if (user.Pass === pass) { + // !Falta a encriptação da password + console.log(username, pass); + clearLoginForm(); + } else { + console.log("Wrong password."); + } + } else { + console.log("Username does not exist."); + } + } + } + return ( + {/* Modal*/} + {/* Page Title*/} Login @@ -14,31 +81,56 @@ export default function LoginPage() { {/*Form*/} + {/* Input do username */} - - - Esqueceste-te da password? - + + {/* Input da password */} + + + {/* Ícone de olho */} + { + setSecurePass(!securePass); + }} + > + + + + setModalVisible(true)}> + + Esqueceste-te da password? + + + {/* Botão do form */} { - console.log(name, pass); - }} + onPress={handleLoginForm} > Entrar + + {/* Register redirect */} + + + ); } diff --git a/src/pages/RegisterPage.js b/src/pages/RegisterPage.js new file mode 100644 index 0000000..3e1c80d --- /dev/null +++ b/src/pages/RegisterPage.js @@ -0,0 +1,12 @@ +import React from "react"; +import { View, Text } from "react-native"; + +export default function RegisterPage() { + return ( + <> + + Hello + + + ); +}