From dc0f648cc49b654944dca6e01d84ddae0503c985 Mon Sep 17 00:00:00 2001 From: TRProjects98 Date: Fri, 3 Jan 2025 15:22:51 +0000 Subject: [PATCH 1/2] Register Created || Terms and Conditions Modal Created || react-native-elements installed || Register Redirect to First Questionnaire --- package-lock.json | 125 +++++++++++++++++ package.json | 5 +- src/App.js | 27 +++- src/components/PasswordResetModal.js | 2 +- src/components/SpeechBubble.js | 2 +- src/components/TermsAndConditionsModal.js | 68 ++++++++++ src/pages/FirstQuestionnaire.js | 9 ++ src/pages/LoginPage.js | 6 +- src/pages/RegisterPage.js | 157 +++++++++++++++++++++- 9 files changed, 384 insertions(+), 17 deletions(-) create mode 100644 src/components/TermsAndConditionsModal.js create mode 100644 src/pages/FirstQuestionnaire.js diff --git a/package-lock.json b/package-lock.json index 065fd07..ad26060 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.5", + "react-native-elements": "^3.4.3", "react-native-gesture-handler": "~2.20.2", "react-native-reanimated": "^3.16.6", "react-native-safe-area-context": "4.12.0", @@ -4278,6 +4279,41 @@ "@types/node": "*" } }, + "node_modules/@types/prop-types": { + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "18.3.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", + "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-native": { + "version": "0.70.19", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz", + "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==", + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-native-vector-icons": { + "version": "6.4.18", + "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz", + "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==", + "license": "MIT", + "dependencies": { + "@types/react": "*", + "@types/react-native": "^0.70" + } + }, "node_modules/@types/stack-utils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", @@ -5701,6 +5737,12 @@ "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", "license": "CC0-1.0" }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", @@ -8016,6 +8058,12 @@ "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "license": "MIT" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "license": "MIT" + }, "node_modules/lodash.throttle": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", @@ -9142,6 +9190,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/opencollective-postinstall": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz", + "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==", + "license": "MIT", + "bin": { + "opencollective-postinstall": "index.js" + } + }, "node_modules/ora": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz", @@ -10134,6 +10191,52 @@ "node": ">=10" } }, + "node_modules/react-native-elements": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.4.3.tgz", + "integrity": "sha512-VtZc25EecPZyUBER85zFK9ZbY6kkUdcm1ZwJ9hdoGSCr1R/GFgxor4jngOcSYeMvQ+qimd5No44OVJW3rSJECA==", + "hasInstallScript": true, + "license": "MIT", + "dependencies": { + "@types/react-native-vector-icons": "^6.4.6", + "color": "^3.1.2", + "deepmerge": "^4.2.2", + "hoist-non-react-statics": "^3.3.2", + "lodash.isequal": "^4.5.0", + "opencollective-postinstall": "^2.0.3", + "react-native-ratings": "8.0.4", + "react-native-size-matters": "^0.3.1" + }, + "peerDependencies": { + "react-native-safe-area-context": ">= 3.0.0", + "react-native-vector-icons": ">7.0.0" + } + }, + "node_modules/react-native-elements/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "license": "MIT", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, + "node_modules/react-native-elements/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "license": "MIT", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/react-native-elements/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "license": "MIT" + }, "node_modules/react-native-gesture-handler": { "version": "2.20.2", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.20.2.tgz", @@ -10150,6 +10253,19 @@ "react-native": "*" } }, + "node_modules/react-native-ratings": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.0.4.tgz", + "integrity": "sha512-Xczu5lskIIRD6BEdz9A0jDRpEck/SFxRqiglkXi0u67yAtI1/pcJC76P4MukCbT8K4BPVl+42w83YqXBoBRl7A==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.15" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-reanimated": { "version": "3.16.6", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.6.tgz", @@ -10198,6 +10314,15 @@ "react-native": "*" } }, + "node_modules/react-native-size-matters": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz", + "integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==", + "license": "MIT", + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/react-native-svg": { "version": "15.8.0", "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.8.0.tgz", diff --git a/package.json b/package.json index 3e91be9..025310c 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,14 @@ "@react-navigation/native-stack": "^7.2.0", "expo": "~52.0.23", "expo-font": "~13.0.2", + "expo-linear-gradient": "~14.0.1", "expo-splash-screen": "~0.29.18", "expo-status-bar": "~2.0.0", "nativewind": "^4.1.23", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.5", + "react-native-elements": "^3.4.3", "react-native-gesture-handler": "~2.20.2", "react-native-reanimated": "^3.16.6", "react-native-safe-area-context": "4.12.0", @@ -30,8 +32,7 @@ "react-native-svg": "15.8.0", "react-native-svg-transformer": "^1.5.0", "react-native-vector-icons": "^10.2.0", - "react-native-web": "~0.19.13", - "expo-linear-gradient": "~14.0.1" + "react-native-web": "~0.19.13" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/App.js b/src/App.js index 8fb4cbe..6d1bd8e 100644 --- a/src/App.js +++ b/src/App.js @@ -3,8 +3,10 @@ import { Text, View, StatusBar } from "react-native"; 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 os ícones personalizados @@ -23,6 +25,7 @@ import ProfilePage from "./pages/ProfilePage"; import HelpPage from "./pages/HelpPage"; import LoginPage from "./pages/LoginPage"; import RegisterPage from "./pages/RegisterPage"; +import FirstQuestionnaire from "./pages/FirstQuestionnaire"; export default function App() { const [fontsLoaded] = useFonts({ @@ -77,7 +80,13 @@ export default function App() { IconComponent = null; } - return ; + return ( + + ); }, tabBarActiveTintColor: "#fcc766", tabBarInactiveTintColor: "#d0d0d0", @@ -95,7 +104,6 @@ export default function App() { // Stack Navigator (para gerenciar Welcome e HomeTabs) return ( <> - {/* Tela de boas-vindas sem navbar */} @@ -110,9 +118,14 @@ export default function App() { options={{ headerShown: false }} /> + {/* Tela HomeTabs com navbar */} - Código + Código {/* Bubble */} - + Ainda não estás registado? diff --git a/src/components/TermsAndConditionsModal.js b/src/components/TermsAndConditionsModal.js new file mode 100644 index 0000000..cdccf04 --- /dev/null +++ b/src/components/TermsAndConditionsModal.js @@ -0,0 +1,68 @@ +import React from "react"; +import { View, Text, Modal, TouchableOpacity, ScrollView } from "react-native"; +import { FontAwesome } from "@expo/vector-icons"; + +export default function TermsAndContitionsModal({ + modalVisible, + setModalVisible, +}) { + function CloseModal() { + setModalVisible(false); + } + return ( + + {/* Overlay */} + + + + + Termos e Condições + + + Lorem ipsum + + Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. + + Lorem ipsum + + Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. + + Lorem ipsum + + Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. + + + + + + + + + ); +} diff --git a/src/pages/FirstQuestionnaire.js b/src/pages/FirstQuestionnaire.js new file mode 100644 index 0000000..d9dc0e1 --- /dev/null +++ b/src/pages/FirstQuestionnaire.js @@ -0,0 +1,9 @@ +import React from "react"; +import { View, Text, TouchableOpacity, TextInput } from "react-native"; +export default function FirstQuestionnaire() { + return ( + + First Questionnaire + + ); +} diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js index d9c6714..694193e 100644 --- a/src/pages/LoginPage.js +++ b/src/pages/LoginPage.js @@ -1,8 +1,9 @@ import React, { useState } from "react"; -import { View, Text, TextInput, TouchableOpacity, Image } from "react-native"; +import { View, Text, TextInput, TouchableOpacity } from "react-native"; import { FontAwesome } from "@expo/vector-icons"; import PasswordResetModal from "../components/PasswordResetModal"; import SpeechBubble from "../components/SpeechBubble"; +import { useNavigation } from "@react-navigation/native"; export default function LoginPage() { //DB Simulation @@ -30,6 +31,8 @@ export default function LoginPage() { }, ]; + const navigation = useNavigation(); + //State Variables const [username, setUname] = useState(""); const [pass, setPass] = useState(""); @@ -57,6 +60,7 @@ export default function LoginPage() { // !Falta a encriptação da password console.log(username, pass); clearLoginForm(); + navigation.replace("HomeTabs"); } else { console.log("Wrong password."); } diff --git a/src/pages/RegisterPage.js b/src/pages/RegisterPage.js index 3e1c80d..c4276b6 100644 --- a/src/pages/RegisterPage.js +++ b/src/pages/RegisterPage.js @@ -1,12 +1,159 @@ -import React from "react"; -import { View, Text } from "react-native"; +import React, { useState } from "react"; +import { + View, + Text, + TouchableOpacity, + TextInput, + ScrollView, +} from "react-native"; +import { CheckBox } from "react-native-elements"; +import { FontAwesome } from "@expo/vector-icons"; +import { useNavigation } from "@react-navigation/native"; +import TermsAndContitionsModal from "../components/TermsAndConditionsModal"; export default function RegisterPage() { + const navigation = useNavigation(); + + //DB Simulation + const Users = []; + + const [username, setUname] = useState(""); + const [email, setEmail] = useState(""); + const [pass, setPass] = useState(""); + const [passConf, setPassConf] = useState(""); + const [idade, setIdade] = useState(""); + const [isChecked, setIsChecked] = useState(false); + const [error, setError] = useState(""); + const [hasError, setHasError] = useState(false); + const [modalVisible, setModalVisible] = useState(false); + + function RedirectToLogin() { + navigation.replace("Login"); + } + + function handleRegistration() { + if ( + username != "" && + email != "" && + idade != "" && + pass != "" && + passConf != "" + ) { + if (pass === passConf) { + if (isChecked) { + const user = { + id: Users.length, + User_name: username, + Pass: pass, + Email: email, + Idade: idade, + }; + Users.push(user); + } + } else { + setHasError(true); + setError("As passwords devem coincidir"); + } + } else { + setHasError(true); + setError("Deve preencher todos os campos do formulário"); + console.log(Users.length); + } + } + + function QuestionnaireRedirect() { + navigation.replace("FirstQuestionnaire"); + } return ( <> - - Hello - + + + + {/* Page Title*/} + + Register + + + + + + {/*Form*/} + + {/* Input do username */} + + + + + + + {/* Input da password */} + + + {/* Input da Confirm password */} + + + + setIsChecked(!isChecked)} + checkedColor="#ff9d00" + size={20} + /> + setModalVisible(true)}> + + Termos e condições + + + + {hasError && {error}} + + {/* Botão do form */} + + + Criar Conta + + + + ); } From 2d5314526c62e2aad3433772164742f5f52b3e12 Mon Sep 17 00:00:00 2001 From: TRProjects98 Date: Fri, 3 Jan 2025 15:28:41 +0000 Subject: [PATCH 2/2] Function handleRegistration updated --- src/pages/RegisterPage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/RegisterPage.js b/src/pages/RegisterPage.js index c4276b6..d8685dc 100644 --- a/src/pages/RegisterPage.js +++ b/src/pages/RegisterPage.js @@ -49,6 +49,7 @@ export default function RegisterPage() { Idade: idade, }; Users.push(user); + navigation.replace("FirstQuestionnaire"); } } else { setHasError(true);