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/forms/login-form.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 	import { loginPageMessage } from '$lib/constants';
-	import { api, OAuthConfigResponseDto } from '@api';
+	import { api, oauth, OAuthConfigResponseDto } from '@api';
 	import { createEventDispatcher, onMount } from 'svelte';
 
 	let error: string;
@@ -14,11 +14,10 @@
 	const dispatch = createEventDispatcher();
 
 	onMount(async () => {
-		const search = window.location.search;
-		if (search.includes('code=') || search.includes('error=')) {
+		if (oauth.isCallback(window.location)) {
 			try {
 				loading = true;
-				await api.oauthApi.callback({ url: window.location.href });
+				await oauth.login(window.location);
 				dispatch('success');
 				return;
 			} catch (e) {
@@ -29,9 +28,7 @@
 		}
 
 		try {
-			const redirectUri = window.location.href.split('?')[0];
-			console.log(`OAuth Redirect URI: ${redirectUri}`);
-			const { data } = await api.oauthApi.generateConfig({ redirectUri });
+			const { data } = await oauth.getConfig(window.location);
 			oauthConfig = data;
 		} catch (e) {
 			console.error('Error [login-form] [oauth.generateConfig]', e);

web/src/lib/components/user-settings-page/change-password-settings.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { api, ApiError } from '@api';
+	import { fade } from 'svelte/transition';
+	import SettingInputField, {
+		SettingInputFieldType
+	} from '../admin-page/settings/setting-input-field.svelte';
+
+	let password = '';
+	let newPassword = '';
+	let confirmPassword = '';
+
+	const handleChangePassword = async () => {
+		try {
+			await api.authenticationApi.changePassword({
+				password,
+				newPassword
+			});
+
+			notificationController.show({
+				message: 'Updated password',
+				type: NotificationType.Info
+			});
+
+			password = '';
+			newPassword = '';
+			confirmPassword = '';
+		} catch (error) {
+			console.error('Error [user-profile] [changePassword]', error);
+			notificationController.show({
+				message: (error as ApiError)?.response?.data?.message || 'Unable to change password',
+				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.PASSWORD}
+					label="Password"
+					bind:value={password}
+					required={true}
+				/>
+
+				<SettingInputField
+					inputType={SettingInputFieldType.PASSWORD}
+					label="New password"
+					bind:value={newPassword}
+					required={true}
+				/>
+
+				<SettingInputField
+					inputType={SettingInputFieldType.PASSWORD}
+					label="Confirm password"
+					bind:value={confirmPassword}
+					required={true}
+				/>
+
+				<div class="flex justify-end">
+					<button
+						type="submit"
+						disabled={!(password && newPassword && newPassword === confirmPassword)}
+						on:click={() => handleChangePassword()}
+						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>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { oauth, OAuthConfigResponseDto, UserResponseDto } from '@api';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { handleError } from '../../utils/handle-error';
+	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
+
+	export let user: UserResponseDto;
+
+	let config: OAuthConfigResponseDto = { enabled: false };
+	let loading = true;
+
+	onMount(async () => {
+		if (oauth.isCallback(window.location)) {
+			try {
+				loading = true;
+
+				const { data } = await oauth.link(window.location);
+				user = data;
+
+				notificationController.show({
+					message: 'Linked OAuth account',
+					type: NotificationType.Info
+				});
+			} catch (error) {
+				handleError(error, 'Unable to link OAuth account');
+			} finally {
+				goto('?open=oauth');
+			}
+		}
+
+		try {
+			const { data } = await oauth.getConfig(window.location);
+			config = data;
+		} catch (error) {
+			handleError(error, 'Unable to load OAuth config');
+		}
+
+		loading = false;
+	});
+
+	const handleUnlink = async () => {
+		try {
+			const { data } = await oauth.unlink();
+			user = data;
+			notificationController.show({
+				message: 'Unlinked OAuth account',
+				type: NotificationType.Info
+			});
+		} catch (error) {
+			handleError(error, 'Unable to unlink account');
+		}
+	};
+</script>
+
+<section class="my-4">
+	<div in:fade={{ duration: 500 }}>
+		<div class="flex justify-end">
+			{#if loading}
+				<div class="flex place-items-center place-content-center">
+					<LoadingSpinner />
+				</div>
+			{:else if config.enabled}
+				{#if user.oauthId}
+					<button
+						on:click={() => handleUnlink()}
+						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"
+						>Unlink OAuth
+					</button>
+				{:else}
+					<a href={config.url}>
+						<button
+							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"
+							>Link to OAuth</button
+						>
+					</a>
+				{/if}
+			{/if}
+		</div>
+	</div>
+</section>

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>

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

@@ -1,156 +1,43 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { api, UserResponseDto } from '@api';
-	import { AxiosError } from 'axios';
-	import { fade } from 'svelte/transition';
+	import { page } from '$app/stores';
+	import { oauth, UserResponseDto } from '@api';
+	import { onMount } from 'svelte';
 	import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
-	import SettingInputField, {
-		SettingInputFieldType
-	} from '../admin-page/settings/setting-input-field.svelte';
-
-	type ApiError = AxiosError<{ message: string }>;
+	import ChangePasswordSettings from './change-password-settings.svelte';
+	import OAuthSettings from './oauth-settings.svelte';
+	import UserProfileSettings from './user-profile-settings.svelte';
 
 	export let user: UserResponseDto;
 
-	const handleSaveProfile = async () => {
+	let oauthEnabled = false;
+	let oauthOpen = false;
+
+	onMount(async () => {
+		oauthOpen = oauth.isCallback(window.location);
+
 		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
-			});
+			const { data } = await oauth.getConfig(window.location);
+			oauthEnabled = data.enabled;
+		} catch {
+			// noop
 		}
-	};
-
-	let password = '';
-	let newPassword = '';
-	let confirmPassword = '';
-
-	const handleChangePassword = async () => {
-		try {
-			await api.authenticationApi.changePassword({
-				password,
-				newPassword
-			});
-
-			notificationController.show({
-				message: 'Updated password',
-				type: NotificationType.Info
-			});
-
-			password = '';
-			newPassword = '';
-			confirmPassword = '';
-		} catch (error) {
-			console.error('Error [user-profile] [changePassword]', error);
-			notificationController.show({
-				message: (error as ApiError)?.response?.data?.message || 'Unable to change password',
-				type: NotificationType.Error
-			});
-		}
-	};
+	});
 </script>
 
 <SettingAccordion title="User Profile" subtitle="View and manage your profile">
-	<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>
+	<UserProfileSettings {user} />
 </SettingAccordion>
 
 <SettingAccordion title="Password" subtitle="Change your password">
-	<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.PASSWORD}
-						label="Password"
-						bind:value={password}
-						required={true}
-					/>
-
-					<SettingInputField
-						inputType={SettingInputFieldType.PASSWORD}
-						label="New password"
-						bind:value={newPassword}
-						required={true}
-					/>
-
-					<SettingInputField
-						inputType={SettingInputFieldType.PASSWORD}
-						label="Confirm password"
-						bind:value={confirmPassword}
-						required={true}
-					/>
-
-					<div class="flex justify-end">
-						<button
-							type="submit"
-							disabled={!(password && newPassword && newPassword === confirmPassword)}
-							on:click={() => handleChangePassword()}
-							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>
+	<ChangePasswordSettings />
 </SettingAccordion>
+
+{#if oauthEnabled}
+	<SettingAccordion
+		title="OAuth"
+		subtitle="Manage your linked account"
+		isOpen={oauthOpen || $page.url.searchParams.get('open') === 'oauth'}
+	>
+		<OAuthSettings {user} />
+	</SettingAccordion>
+{/if}