From f93968c3eb8fa167c8da87bd915a85f863739e00 Mon Sep 17 00:00:00 2001
From: Arthur Jamet <arthur.jamet@gmail.com>
Date: Thu, 4 Jan 2024 11:33:11 +0100
Subject: [PATCH] Front: Add Username for Guest Mode

---
 front/API.ts                           |  4 +-
 front/components/UI/LogoutButtonCC.tsx |  4 +-
 front/components/UI/ScaffoldAuth.tsx   | 58 ++++++++++++++++--------
 front/components/forms/guestForm.tsx   | 63 ++++++++++++++++++++++++++
 front/components/forms/signupform.tsx  |  5 +-
 front/i18n/Translations.ts             |  3 ++
 6 files changed, 114 insertions(+), 23 deletions(-)
 create mode 100644 front/components/forms/guestForm.tsx

diff --git a/front/API.ts b/front/API.ts
index af7597c..e15b423 100644
--- a/front/API.ts
+++ b/front/API.ts
@@ -187,12 +187,12 @@ export default class API {
 		});
 	}
 
-	public static async createAndGetGuestAccount(): Promise<AccessToken> {
+	public static async createAndGetGuestAccount(username: string): Promise<AccessToken> {
 		return API.fetch(
 			{
 				route: '/auth/guest',
 				method: 'POST',
-				body: undefined,
+				body: { username },
 			},
 			{ handler: AccessTokenResponseHandler }
 		)
diff --git a/front/components/UI/LogoutButtonCC.tsx b/front/components/UI/LogoutButtonCC.tsx
index bb54105..c81ae21 100644
--- a/front/components/UI/LogoutButtonCC.tsx
+++ b/front/components/UI/LogoutButtonCC.tsx
@@ -9,6 +9,7 @@ import SignUpForm from '../../components/forms/signupform';
 import API, { APIError } from '../../API';
 import PopupCC from './PopupCC';
 import { StyleProp, ViewStyle } from 'react-native';
+import { useQuery } from '../../Queries';
 
 const handleSubmit = async (username: string, password: string, email: string) => {
 	try {
@@ -36,6 +37,7 @@ const LogoutButtonCC = ({
 }: LogoutButtonCCProps) => {
 	const dispatch = useDispatch();
 	const [isVisible, setIsVisible] = useState(false);
+	const user = useQuery(API.getUserInfo);
 
 	return (
 		<>
@@ -54,7 +56,7 @@ const LogoutButtonCC = ({
 				isVisible={isVisible}
 				setIsVisible={setIsVisible}
 			>
-				<SignUpForm onSubmit={handleSubmit} />
+				<SignUpForm onSubmit={handleSubmit} defaultValues={{ username: user.data?.name }} />
 				<ButtonBase
 					style={!collapse ? { width: '100%' } : {}}
 					type="outlined"
diff --git a/front/components/UI/ScaffoldAuth.tsx b/front/components/UI/ScaffoldAuth.tsx
index bcb9fd3..49e44ad 100644
--- a/front/components/UI/ScaffoldAuth.tsx
+++ b/front/components/UI/ScaffoldAuth.tsx
@@ -1,9 +1,9 @@
 import { LinearGradient } from 'expo-linear-gradient';
 import { Stack, View, Text, Wrap, Image, Row, Column, ScrollView, useToast } from 'native-base';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useState } from 'react';
 import { Linking, Platform, useWindowDimensions } from 'react-native';
 import ButtonBase from './ButtonBase';
-import { translate } from '../../i18n/i18n';
+import { Translate, translate } from '../../i18n/i18n';
 import API, { APIError } from '../../API';
 import SeparatorBase from './SeparatorBase';
 import LinkBase from './LinkBase';
@@ -12,9 +12,14 @@ import { setAccessToken } from '../../state/UserSlice';
 import useColorScheme from '../../hooks/colorScheme';
 import { useAssets } from 'expo-asset';
 import APKDownloadButton from '../APKDownloadButton';
+import PopupCC from './PopupCC';
+import GuestForm from '../forms/guestForm';
 
-const handleGuestLogin = async (apiSetter: (accessToken: string) => void): Promise<string> => {
-	const apiAccess = await API.createAndGetGuestAccount();
+const handleGuestLogin = async (
+	username: string,
+	apiSetter: (accessToken: string) => void
+): Promise<string> => {
+	const apiAccess = await API.createAndGetGuestAccount(username);
 	apiSetter(apiAccess);
 	return translate('loggedIn');
 };
@@ -38,6 +43,7 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 	const dispatch = useDispatch();
 	const toast = useToast();
 	const colorScheme = useColorScheme();
+	const [guestModalIsOpen, openGuestModal] = useState(false);
 	const [logo] = useAssets(
 		colorScheme == 'light'
 			? require('../../assets/icon_light.png')
@@ -85,21 +91,35 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 					</Row>
 					<ButtonBase
 						title={translate('guestMode')}
-						onPress={async () => {
-							try {
-								handleGuestLogin((accessToken: string) => {
-									dispatch(setAccessToken(accessToken));
-								});
-							} catch (error) {
-								if (error instanceof APIError) {
-									toast.show({ description: translate(error.userMessage) });
-									return;
-								}
-								toast.show({ description: error as string });
-							}
-						}}
+						onPress={() => openGuestModal(true)}
 					/>
 				</Wrap>
+				<PopupCC
+					title={translate('guestMode')}
+					isVisible={guestModalIsOpen}
+					setIsVisible={openGuestModal}
+				>
+					<GuestForm
+						onSubmit={(username) => {
+							return handleGuestLogin(username, (accessToken: string) => {
+								dispatch(setAccessToken(accessToken));
+							})
+								.catch((error) => {
+									if (error instanceof APIError) {
+										toast.show({
+											description: translate(error.userMessage),
+										});
+										return;
+									}
+									toast.show({ description: error as string });
+								})
+								.then(() => {
+									openGuestModal(false);
+									return translate('loggedIn');
+								});
+						}}
+					/>
+				</PopupCC>
 				<ScrollView
 					contentContainerStyle={{
 						padding: 16,
@@ -152,7 +172,9 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 								title={translate('continuewithgoogle')}
 								onPress={() => Linking.openURL(`${API.baseUrl}/auth/login/google`)}
 							/>
-							<SeparatorBase>or</SeparatorBase>
+							<SeparatorBase>
+								<Translate translationKey="or" />
+							</SeparatorBase>
 							<Stack
 								space={3}
 								justifyContent="center"
diff --git a/front/components/forms/guestForm.tsx b/front/components/forms/guestForm.tsx
new file mode 100644
index 0000000..b14af01
--- /dev/null
+++ b/front/components/forms/guestForm.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { translate } from '../../i18n/i18n';
+import { string } from 'yup';
+import { useToast, Column } from 'native-base';
+import TextFormField from '../UI/TextFormField';
+import ButtonBase from '../UI/ButtonBase';
+import { Sms } from 'iconsax-react-native';
+import { useWindowDimensions } from 'react-native';
+
+interface GuestFormProps {
+	onSubmit: (username: string) => Promise<string>;
+}
+
+const validationSchemas = {
+	username: string().required('Username is required'),
+};
+
+const GuestForm = ({ onSubmit }: GuestFormProps) => {
+	const [formData, setFormData] = React.useState({
+		username: {
+			value: '',
+			error: null as string | null,
+		},
+	});
+
+	const toast = useToast();
+	const layout = useWindowDimensions();
+
+	return (
+		<Column style={{ width: layout.width * 0.5 }}>
+			<TextFormField
+				style={{ marginVertical: 10 }}
+				isRequired
+				icon={Sms}
+				placeholder={translate('username')}
+				value={formData.username.value}
+				error={formData.username.error}
+				onChangeText={(t) => {
+					let error: null | string = null;
+					validationSchemas.username
+						.validate(t)
+						.catch((e) => (error = e.message))
+						.finally(() => {
+							setFormData({ ...formData, username: { value: t, error } });
+						});
+				}}
+			/>
+			<ButtonBase
+				isDisabled={formData.username.error !== null || formData.username.value === ''}
+				type={'filled'}
+				title={translate('submitBtn')}
+				style={{ marginVertical: 10 }}
+				onPress={() => {
+					onSubmit(formData.username.value).catch((e) => {
+						toast.show({ description: e as string });
+					});
+				}}
+			/>
+		</Column>
+	);
+};
+
+export default GuestForm;
diff --git a/front/components/forms/signupform.tsx b/front/components/forms/signupform.tsx
index 0e1e429..c32d205 100644
--- a/front/components/forms/signupform.tsx
+++ b/front/components/forms/signupform.tsx
@@ -10,13 +10,14 @@ import ButtonBase from '../UI/ButtonBase';
 import Spacer from '../UI/Spacer';
 
 interface SignupFormProps {
+	defaultValues: Partial<{ username: string }>;
 	onSubmit: (username: string, password: string, email: string) => Promise<string>;
 }
 
-const SignUpForm = ({ onSubmit }: SignupFormProps) => {
+const SignUpForm = ({ onSubmit, defaultValues }: SignupFormProps) => {
 	const [formData, setFormData] = React.useState({
 		username: {
-			value: '',
+			value: defaultValues.username || '',
 			error: null as string | null,
 		},
 		password: {
diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts
index 44f751c..f6c1fbe 100644
--- a/front/i18n/Translations.ts
+++ b/front/i18n/Translations.ts
@@ -1,5 +1,6 @@
 export const en = {
 	error: 'Error',
+	or: 'or',
 	guestMode: 'Guest Mode',
 	downloadAPK: 'Download Android App',
 	goBackHome: 'Go Back Home',
@@ -323,6 +324,7 @@ export const en = {
 
 export const fr: typeof en = {
 	error: 'Erreur',
+	or: 'ou',
 	downloadAPK: "Télécharger l'App Android",
 	guestMode: 'Mode Invité',
 	goBackHome: "Retourner à l'accueil",
@@ -646,6 +648,7 @@ export const fr: typeof en = {
 
 export const sp: typeof en = {
 	error: 'Error',
+	or: 'u',
 	downloadAPK: 'Descarga la Aplicación de Android',
 	guestMode: 'Modo Invitado',
 	anErrorOccured: 'ocurrió un error',