From a5ee24687d82932ec784eb09067435da4560729e Mon Sep 17 00:00:00 2001 From: YoanRos Date: Thu, 5 Sep 2024 15:55:32 +0200 Subject: [PATCH] fix: add last front parts --- api/src/controllers/consommation.js | 2 +- expo/src/scenes/Infos/AccountInfo.js | 11 +- expo/src/scenes/Infos/AccountMenu.js | 2 + expo/src/scenes/Infos/ChangeAccountModal.js | 97 ++++++------ expo/src/scenes/Infos/ChangePassword.js | 159 ++++++++++++++++++++ expo/src/scenes/Infos/DeleteAccount.js | 4 +- 6 files changed, 225 insertions(+), 50 deletions(-) create mode 100644 expo/src/scenes/Infos/ChangePassword.js diff --git a/api/src/controllers/consommation.js b/api/src/controllers/consommation.js index ad6413b41..f54c4d5f4 100644 --- a/api/src/controllers/consommation.js +++ b/api/src/controllers/consommation.js @@ -20,7 +20,7 @@ router.post( catchErrors(async (req, res) => { const matomoId = req.body?.matomoId; if (!matomoId) return res.status(400).json({ ok: false, error: "no matomo id" }); - + console.log("syncing consos", matomoId); const { drinks, drinksCatalog } = req.body; if (!drinks.length) { diff --git a/expo/src/scenes/Infos/AccountInfo.js b/expo/src/scenes/Infos/AccountInfo.js index 95fccae5b..731b04219 100644 --- a/expo/src/scenes/Infos/AccountInfo.js +++ b/expo/src/scenes/Infos/AccountInfo.js @@ -34,17 +34,20 @@ const AccountInfo = ({ navigation }) => { /> navigation.navigate("ROUTER", { screen: "ChangeAccountModal" })} + onPress={() => { + navigation.navigate("CHANGE_PASSWORD"); + }} className={`mt-2 rounded-full px-6 py-2 ${isButtonDisabled ? "bg-[#EA6C96]" : "bg-[#de285e]"}`} - // disabled={isButtonDisabled} > Modifier mon email Mot de passe - Pour modifier votre mot de passe, cliquez ici + Pour modifier votre mot de passe, + navigation.navigate("CHANGE_PASSWORD")}> + cliquez ici + diff --git a/expo/src/scenes/Infos/AccountMenu.js b/expo/src/scenes/Infos/AccountMenu.js index a4591fc6f..7cbe01b2e 100644 --- a/expo/src/scenes/Infos/AccountMenu.js +++ b/expo/src/scenes/Infos/AccountMenu.js @@ -13,6 +13,7 @@ import AccountGearIcon from "../../components/illustrations/icons/AccountGearIco import AccountInfo from "./AccountInfo"; import Support from "./Support"; import DeleteAccount from "./DeleteAccount"; +import ChangePassword from "./ChangePassword"; const AccountStack = createStackNavigator(); @@ -27,6 +28,7 @@ const Account = () => { + ); diff --git a/expo/src/scenes/Infos/ChangeAccountModal.js b/expo/src/scenes/Infos/ChangeAccountModal.js index f682a0656..6fd29afe4 100644 --- a/expo/src/scenes/Infos/ChangeAccountModal.js +++ b/expo/src/scenes/Infos/ChangeAccountModal.js @@ -6,6 +6,8 @@ import { SafeAreaView } from "react-native-safe-area-context"; import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons"; const ChangeAccountModal = ({ navigation, route }) => { + const isChangeEmail = route?.params?.from === "changeEmail"; + const [password, setPassword] = useState(""); const [hidePassword, setHidePassword] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true); @@ -16,58 +18,65 @@ const ChangeAccountModal = ({ navigation, route }) => { return ( - - - - { - navigation.navigate("CRAVING", { screen: "CRAVING_STRATEGIES" }); - }} - > - - - - - - - Modifier l'e-mail - - Afin de confirmer la modification de l’adresse e-mail du compte, veuillez saisir votre mot de passe - ci-dessous. - - Mot de passe - - + + { + navigation.navigate("CRAVING", { screen: "CRAVING_STRATEGIES" }); + }} + > + + - setHidePassword(!hidePassword)}> - {hidePassword ? ( - - ) : ( - - )} - + + + + + + + {isChangeEmail ? "Modifier l'e-mail" : "Supprimer mon compte"} + + + {isChangeEmail + ? "Afin de confirmer la modification de l’adresse e-mail du compte, veuillez saisir votre mot de passe ci-dessous." + : "Afin de confirmer la suppression de votre compte, veuillez saisir votre mot de passe ci-dessous."} + + + Mot de passe + + + setHidePassword(!hidePassword)}> + {hidePassword ? ( + + ) : ( + + )} + + - + { navigation.goBack(); }} > - Valider + + {isChangeEmail ? "Valider" : "Confirmer la suppression"} + diff --git a/expo/src/scenes/Infos/ChangePassword.js b/expo/src/scenes/Infos/ChangePassword.js new file mode 100644 index 000000000..748d718fc --- /dev/null +++ b/expo/src/scenes/Infos/ChangePassword.js @@ -0,0 +1,159 @@ +import React, { useEffect, useState } from "react"; +import { View, TextInput, TouchableOpacity, Text, SafeAreaView, KeyboardAvoidingView, Platform } from "react-native"; +import AntDesign from "@expo/vector-icons/AntDesign"; +import Entypo from "@expo/vector-icons/Entypo"; +import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons"; +import BackButton from "../../components/BackButton"; + +const ChangePassword = ({ navigation }) => { + const [formerPassword, setFormerPassword] = useState(""); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [isDifferent, setIsDifferent] = useState(false); + const [isStrongPassword, setIsStrongPassword] = useState(false); + const [isMatching, setIsMatching] = useState(false); + const [isButtonDisabled, setIsButtonDisabled] = useState(true); + const [hidePassword, setHidePassword] = useState(true); + const [passwordChecks, setPasswordChecks] = useState({ + minLength: false, + hasUpperCase: false, + hasLowerCase: false, + hasNumber: false, + hasSpecialChar: false, + }); + + const checkPassword = (password) => { + const checks = { + minLength: password.length >= 12, + hasUpperCase: /[A-Z]/.test(password), + hasLowerCase: /[a-z]/.test(password), + hasNumber: /[0-9]/.test(password), + hasSpecialChar: /[!@#\$%\^&\*]/.test(password), + }; + setPasswordChecks(checks); + setIsStrongPassword(Object.values(checks).every((check) => check)); + setIsMatching(password === confirmPassword); + setIsDifferent(password !== formerPassword); + }; + + const handleConfirmPasswordChange = (text) => { + setConfirmPassword(text); + setIsMatching(password === text); + }; + + useEffect(() => { + if (isStrongPassword && isMatching && isDifferent) { + setIsButtonDisabled(false); + } else { + setIsButtonDisabled(true); + } + }, [isStrongPassword, isMatching, isDifferent]); + + const numberOfChecksPassed = Object.values(passwordChecks).filter(Boolean).length; + + return ( + + + + + + Modifier le mot de passe + + Veuillez saisir votre mot de passe actuel, ainsi que votre nouveau mot de passe. + + + Mot de passe actuel + + + + + + + Mot de passe + + doit contenir au minimum 12 caractères, 1 Majuscule, 1 chiffre, 1 caractère spécial + + + { + setPassword(text); + checkPassword(text); + }} + secureTextEntry={hidePassword} + className="text-black flex-1" + /> + setHidePassword(!hidePassword)}> + {hidePassword ? ( + + ) : ( + + )} + + + + {[...Array(5)].map((_, index) => ( + + ))} + + + + Confirmation du mot de passe + + + setHidePassword(!hidePassword)}> + {hidePassword ? ( + + ) : ( + + )} + + + {confirmPassword && ( + + {isMatching ? ( + + ) : ( + + )} + + {isMatching ? "Mots de passe similaires" : "Mots de passe différents"} + + + )} + + + + navigation.push("TABS")} + className={`rounded-full px-6 py-3 ${isButtonDisabled ? "bg-[#EA6C96]" : "bg-[#de285e]"}`} + // disabled={isButtonDisabled} + > + Valider + + + + + ); +}; + +export default ChangePassword; diff --git a/expo/src/scenes/Infos/DeleteAccount.js b/expo/src/scenes/Infos/DeleteAccount.js index af29248de..8e494ec64 100644 --- a/expo/src/scenes/Infos/DeleteAccount.js +++ b/expo/src/scenes/Infos/DeleteAccount.js @@ -15,7 +15,9 @@ const DeleteAccount = ({ navigation }) => { } + onPress={() => { + navigation.navigate("CHANGE_ACCOUNT"); + }} className=" rounded-full px-6 py-2 bg-[#de285e] mt-8" > Supprimer mon Compte