feat(web,server): link/unlink oauth account (#1154)

* feat(web,server): link/unlink oauth account

* chore: linting

* fix: broken oauth callback

* fix: user core bugs

* fix: tests

* fix: use user response

* chore: update docs

* feat: prevent the same oauth account from being linked twice

* chore: mock logger

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { api, UserResponseDto } from '@api';
+	import { fade } from 'svelte/transition';
+	import SettingInputField, {
+		SettingInputFieldType
+	} from '../admin-page/settings/setting-input-field.svelte';
+
+	export let user: UserResponseDto;
+
+	const handleSaveProfile = async () => {
+		try {
+			const { data } = await api.userApi.updateUser({
+				id: user.id,
+				firstName: user.firstName,
+				lastName: user.lastName
+			});
+
+			Object.assign(user, data);
+
+			notificationController.show({
+				message: 'Saved profile',
+				type: NotificationType.Info
+			});
+		} catch (error) {
+			console.error('Error [user-profile] [updateProfile]', error);
+			notificationController.show({
+				message: 'Unable to save profile',
+				type: NotificationType.Error
+			});
+		}
+	};
+</script>
+
+<section class="my-4">
+	<div in:fade={{ duration: 500 }}>
+		<form autocomplete="off" on:submit|preventDefault>
+			<div class="flex flex-col gap-4 ml-4 mt-4">
+				<SettingInputField
+					inputType={SettingInputFieldType.TEXT}
+					label="User ID"
+					bind:value={user.id}
+					disabled={true}
+				/>
+
+				<SettingInputField
+					inputType={SettingInputFieldType.TEXT}
+					label="Email"
+					bind:value={user.email}
+					disabled={true}
+				/>
+
+				<SettingInputField
+					inputType={SettingInputFieldType.TEXT}
+					label="First name"
+					bind:value={user.firstName}
+					required={true}
+				/>
+
+				<SettingInputField
+					inputType={SettingInputFieldType.TEXT}
+					label="Last name"
+					bind:value={user.lastName}
+					required={true}
+				/>
+
+				<div class="flex justify-end">
+					<button
+						type="submit"
+						on:click={() => handleSaveProfile()}
+						class="text-sm bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 px-4 py-2 text-white dark:text-immich-dark-gray rounded-full shadow-md font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+						>Save
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+</section>