From 9033fbe937ae69dba209deb07874999610dba6ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Tue, 11 Apr 2023 21:43:13 +0200
Subject: [PATCH] Added a tab settings when user is guest to transform guest
 account into regular account

---
 front/components/forms/signupform.tsx    |  4 +--
 front/views/settings/GuestToUserView.tsx | 42 ++++++++++++++++++++++++
 front/views/settings/SettingsView.tsx    | 17 ++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 front/views/settings/GuestToUserView.tsx

diff --git a/front/components/forms/signupform.tsx b/front/components/forms/signupform.tsx
index 7abf098..85a12a1 100644
--- a/front/components/forms/signupform.tsx
+++ b/front/components/forms/signupform.tsx
@@ -21,7 +21,7 @@ interface SignupFormProps {
 	) => Promise<string>;
 }
 
-const LoginForm = ({ onSubmit }: SignupFormProps) => {
+const SignUpForm = ({ onSubmit }: SignupFormProps) => {
 	const [formData, setFormData] = React.useState({
 		username: {
 			value: "",
@@ -210,4 +210,4 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 	);
 };
 
-export default LoginForm;
+export default SignUpForm;
diff --git a/front/views/settings/GuestToUserView.tsx b/front/views/settings/GuestToUserView.tsx
new file mode 100644
index 0000000..4f62a5e
--- /dev/null
+++ b/front/views/settings/GuestToUserView.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import SignUpForm from "../../components/forms/signupform";
+import { Center } from "native-base";
+import API, { APIError } from "../../API";
+import { translate } from "../../i18n/i18n";
+import { useDispatch } from "../../state/Store";
+import { setAccessToken } from "../../state/UserSlice";
+
+const handleSubmit = async (
+	username: string,
+	password: string,
+	email: string,
+	apiSetter: (token: string) => void
+) => {
+	let res: string;
+	try {
+		res = await API.createAccount({ username, password, email });
+	} catch (error) {
+		if (error instanceof APIError) return translate(error.userMessage);
+		if (error instanceof Error) return error.message;
+		return translate("unknownError");
+	}
+	apiSetter(res);
+	return translate("loggedIn");
+};
+
+const GuestToUserView = () => {
+	const dispatch = useDispatch();
+	return (
+		<Center flex={1} justifyContent={"center"}>
+			<SignUpForm
+				onSubmit={(username, password, email) =>
+					handleSubmit(username, password, email, (token) =>
+						dispatch(setAccessToken(token))
+					)
+				}
+			/>
+		</Center>
+	);
+};
+
+export default GuestToUserView;
diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx
index 0421b4d..aecdcce 100644
--- a/front/views/settings/SettingsView.tsx
+++ b/front/views/settings/SettingsView.tsx
@@ -17,8 +17,10 @@ import ProfileSettings from './SettingsProfileView';
 import NotificationsView from './NotificationView';
 import PrivacyView from './PrivacyView';
 import PreferencesView from './PreferencesView';
+import GuestToUserView from './GuestToUserView';
 
 import API, { APIError } from '../../API';
+import User from '../../models/User';
 
 
 const SettingsStack = createNativeStackNavigator();
@@ -114,11 +116,26 @@ export const PianoSettingsView = ({navigation}) => {
 const TabRow = createTabRowNavigator(); 
 
 const SetttingsNavigator = () => {
+	const [user, setUser] = React.useState<null | User>(null);
+
+	React.useEffect(() => {
+		API.getUserInfo().then((user) => {
+			setUser(user);
+		});
+	}, []);
+
 	return (
 		<TabRow.Navigator initialRouteName='InternalDefault'>
 			{/* I'm doing this to be able to land on the summary of settings when clicking on settings and directly to the
 			wanted settings page if needed so I need to do special work with the 0 index */}
 			<TabRow.Screen name='InternalDefault' component={Box} />
+			{user && user.isGuest &&
+				<TabRow.Screen name='GuestToUser' component={GuestToUserView} options={{
+					title: translate('SettingsCategoryGuest'),
+					iconProvider: FontAwesome5,
+					iconName: "user-clock"
+				}} />
+			}
 			<TabRow.Screen name='Profile' component={ProfileSettings} options={{ 
 				title: translate('SettingsCategoryProfile'),
 				iconProvider: FontAwesome5,