Merge branch 'main' of github.com:okbrandon/ft_transcendence

okbrandon · Nov 14, 2024 · 93c845e · 93c845e
2 parents 26c037b + 16f184b
commit 93c845e
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 22 deletions.
diff --git a/frontend/public/locales/EN/translation.json b/frontend/public/locales/EN/translation.json
@@ -284,6 +284,7 @@
 			"saveButton": "Save Changes",
 			"loadingButton": "Saving...",
 			"successMessage": "Changes saved successfully.",
+			"noChanges": "No changes detected.",
 			"subSections": {
 				"signIn": {
 					"title": "Sign In",

diff --git a/frontend/public/locales/ES/translation.json b/frontend/public/locales/ES/translation.json
@@ -284,6 +284,7 @@
 			"saveButton": "Guardar cambios",
 			"loadingButton": "Guardando...",
 			"successMessage": "Cambios guardados exitosamente.",
+			"noChanges": "No se detectaron cambios.",
 			"subSections": {
 				"signIn": {
 					"title": "Inicio de sesión",

diff --git a/frontend/public/locales/FR/translation.json b/frontend/public/locales/FR/translation.json
@@ -284,6 +284,7 @@
 			"saveButton": "Enregistrer les modifications",
 			"loadingButton": "Enregistrement...",
 			"successMessage": "Modifications enregistrées avec succès.",
+			"noChanges": "Aucune modification détectée.",
 			"subSections": {
 				"signIn": {
 					"title": "Connexion",

diff --git a/frontend/src/components/Settings/Security/2FA/TwoFactorAuthSecurity.js b/frontend/src/components/Settings/Security/2FA/TwoFactorAuthSecurity.js
@@ -44,12 +44,20 @@ const TwoFactorAuthSecurity = ({ formData, setUser, setShowTwoFactorAuth }) => {
 
 		const submissionData = { ...formData };
 
+		console.log('TwofactorAuthSecurity submissionData before:', submissionData);
+		['password', 'phone_number', 'email'].forEach(field => {
+			if (!submissionData[field]) {
+				delete submissionData[field];
+			}
+		});
+		console.log('TwofactorAuthSecurity submissionData after:', submissionData);
+
 		API.patch('users/@me/profile', { ...submissionData, otp: authCode })
 			.then(() => {
 				addNotification('success', t('settings.security.successMessage'));
 				getUser()
 					.then(res => {
-						setUser(res.data);
+						setUser(res);
 					})
 					.catch(err => {
 						setError(err.response.data.error);

diff --git a/frontend/src/components/Settings/Security/2FA/TwoFactorAuthToggle.js b/frontend/src/components/Settings/Security/2FA/TwoFactorAuthToggle.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import QRCode from "react-qr-code";
 import TwoFactorAuthDeactivate from "./TwoFactorAuthDeactivate";
 import API from "../../../../api/api";
@@ -16,34 +16,23 @@ import ErrorMessage from "../../../../styles/shared/ErrorMessage.styled";
 import { useNotification } from "../../../../context/NotificationContext";
 import { useTranslation } from "react-i18next";
 
-const TwoFactorAuthToggle = () => {
+const TwoFactorAuthToggle = ({ has2FA, setHas2FA }) => {
 	const { addNotification } = useNotification();
-	const [is2FAEnabled, setIs2FAEnabled] = useState(false);
 	const [show2FA, setShow2FA] = useState(false);
 	const [qrCodeToken, setQrCodeToken] = useState('');
 	const [showQRCode, setShowQRCode] = useState(false);
 	const [error, setError] = useState('');
 	const { t } = useTranslation();
 
-	useEffect(() => {
-		API.get('auth/totp')
-			.then(res => {
-				setIs2FAEnabled(res.data.has_otp);
-			})
-			.catch(err => {
-				addNotification('error', `${err?.response?.data?.error || 'An error occurred'}`);
-			});
-	}, [addNotification]);
-
 	const handleToggle = () => {
-		if (is2FAEnabled) {
+		if (has2FA) {
 			setShow2FA(true);
 		} else {
 			API.post('auth/totp/enable')
 				.then(res => {
 					setQrCodeToken(res.data.token);
 					setShowQRCode(true);
-					setIs2FAEnabled(true);
+					setHas2FA(true);
 					setError('');
 				})
 				.catch(err => {
@@ -56,12 +45,12 @@ const TwoFactorAuthToggle = () => {
 		<>
 			<SubSectionHeading>{t('auth.twoFactor.title')}</SubSectionHeading>
 			<ToggleContainer>
-				<ToggleLabel>{is2FAEnabled ? t('auth.twoFactor.disableButton') : t('auth.twoFactor.enableButton')}</ToggleLabel>
+				<ToggleLabel>{has2FA ? t('auth.twoFactor.disableButton') : t('auth.twoFactor.enableButton')}</ToggleLabel>
 				<ToggleSwitch>
 				<input
 					type="checkbox"
 					id="2fa"
-					checked={is2FAEnabled}
+					checked={has2FA}
 					onChange={handleToggle}
 				/>
 				<Slider/>
@@ -81,7 +70,7 @@ const TwoFactorAuthToggle = () => {
 				<TwoFactorAuthDeactivate
 					setShow2FA={setShow2FA}
 					setShowQRCode={setShowQRCode}
-					setIs2FAEnabled={setIs2FAEnabled}
+					setIs2FAEnabled={setHas2FA}
 				/>}
 			{error && <ErrorMessage>{error}</ErrorMessage>}
 		</>

diff --git a/frontend/src/components/Settings/Security/Security.js b/frontend/src/components/Settings/Security/Security.js
@@ -118,6 +118,8 @@ const Security = ({ user, setUser }) => {
 				.catch(err => {
 					addNotification('error', `${err?.response?.data?.error || 'An error occurred'}`);
 				});
+		} else {
+			addNotification('info', t('settings.security.noChanges'));
 		}
 	};
 
@@ -142,7 +144,7 @@ const Security = ({ user, setUser }) => {
 					{loading ? t('settings.security.loadingButton') : t('settings.security.saveButton')}
 				</PongButton>
 			</Form>
-			<TwoFactorAuthToggle user={user} handleChange={handleChange}/>
+			<TwoFactorAuthToggle has2FA={has2FA} setHas2FA={setHas2FA}/>
 			{showTwoFactorAuth && (
 				<TwoFactorAuthSecurity
 					formData={formData}

diff --git a/frontend/src/components/Settings/Security/TwoFactorAuthSecurity.js b/frontend/src/components/Settings/Security/TwoFactorAuthSecurity.js
@@ -54,7 +54,7 @@ const TwoFactorAuthSecurity = ({ formData, setUser, setSuccess, setShowTwoFactor
 				setSuccess(t('settings.security.successMessage'));
 				getUser()
 					.then(res => {
-						setUser(res.data);
+						setUser(res);
 						console.log('User data refetched and updated in context:', res.data);
 					})
 					.catch(err => {

diff --git a/frontend/src/components/Settings/Settings.js b/frontend/src/components/Settings/Settings.js
@@ -21,7 +21,7 @@ const Settings = () => {
 	const navigate = useNavigate();
 	const { t } = useTranslation();
 
-	if (loading) {
+	if (!user || loading) {
 		return (
 			<PageContainer>
 				<Loader/>