Refactor to use full name instead of first and last name

Redesigned the user profile page to receive Full Name instead of First and Last name. The user update method was adjusted to handle this change. Inputs in the UI that took the first and last name as separate inputs have also been modified to only accept a single name input.

Here's a summary of what was changed:
- The First Name and Last Name fields were replaced with a Full Name field in the form.
- The functions that submitted or processed first and last name data have been simplified to process full name data.
- The client-side and server-side code handling the user update has also been updated to handle only full name.
- Any relevant variable names were also updated to reflect this change.
- The user object now only checks and assigns the `name` property, instead of `given_name` and `family_name`. 

As a note, this simplifies the form and the process but some user's may find the change limiting if they typically prefer to provide their names separately for their first and last names.

src/lib/api/cloud/api.ts

@@ -153,16 +153,10 @@ export default (
 						'X-Auth-Token': token
 					}
 				}).then(parseResponseJSON),
-			update: async (
-				token: string,
-				params: { given_name?: string; family_name?: string; picture?: File }
-			) => {
+			update: async (token: string, params: { name?: string; picture?: File }) => {
 				const formData = new FormData();
-				if (params.given_name) {
-					formData.append('given_name', params.given_name);
-				}
-				if (params.family_name) {
-					formData.append('family_name', params.family_name);
+				if (params.name) {
+					formData.append('name', params.name);
 				}
 				if (params.picture) {
 					formData.append('avatar', params.picture);

src/routes/user/+page.svelte

@@ -37,8 +37,7 @@
 		}
 	};
 
-	let newGivenName = '';
-	let newFamilyName = '';
+	let newName = '';
 
 	let loaded = false;
 	$: if ($user && !loaded) {
@@ -46,8 +45,7 @@
 		cloud.user.get($user?.access_token).then((cloudUser) => {
 			$user = cloudUser;
 		});
-		newGivenName = $user?.given_name || $user?.name;
-		newFamilyName = $user?.family_name || '';
+		newName = $user?.name || '';
 	}
 
 	const onSubmit = async (e: SubmitEvent) => {
@@ -60,8 +58,7 @@
 
 		try {
 			$user = await cloud.user.update($user.access_token, {
-				given_name: newGivenName,
-				family_name: newFamilyName,
+				name: newName,
 				picture: picture
 			});
 			toasts.success('Profile updated');
@@ -166,31 +163,17 @@
 				</div>
 
 				<div id="contact-info" class="flex flex-1 flex-wrap">
-					<div class="basis-1/2 pr-4">
-						<label for="firstName" class="text-zinc-400">First name</label>
+					<div class="basis-full pr-4">
+						<label for="fullName" class="text-zinc-400">Full name</label>
 						<input
 							autocomplete="off"
 							autocorrect="off"
 							spellcheck="false"
 							name="firstName"
-							bind:value={newGivenName}
+							bind:value={newName}
 							type="text"
 							class="w-full"
-							placeholder="First name can't be empty"
-							required
-						/>
-					</div>
-					<div class="basis-1/2 pr-4">
-						<label for="lastName" class="text-zinc-400">Last name</label>
-						<input
-							autocomplete="off"
-							autocorrect="off"
-							spellcheck="false"
-							name="lastName"
-							bind:value={newFamilyName}
-							type="text"
-							class="w-full"
-							placeholder="Last name can't be empty"
+							placeholder="Name can't be empty"
 							required
 						/>
 					</div>