feat(web,server): disable password login (#1223)

* feat(web,server): disable password login

* chore: unit tests

* chore: fix import

* chore: linting

* feat(cli): server command for enable/disable password login

* chore: update docs

* feat(web): confirm dialogue

* chore: linting

* chore: linting

* chore: linting

* chore: linting

* chore: linting

* chore: fix web test

* chore: server unit tests

web/src/lib/components/admin-page/settings/confirm-disable-login.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+</script>
+
+<ConfirmDialogue title="Disable Login" on:cancel on:confirm>
+	<svelte:fragment slot="prompt">
+		<div class="flex flex-col gap-4 p-3">
+			<p class="text-md  text-center">
+				Are you sure you want to disable all login methods? Login will be completely disabled.
+			</p>
+
+			<p class="text-md text-center">
+				To re-enable, use a
+				<a
+					href="https://immich.app/docs/features/server-commands"
+					rel="noreferrer"
+					target="_blank"
+					class="underline"
+				>
+					Server Command</a
+				>.
+			</p>
+		</div>
+	</svelte:fragment>
+</ConfirmDialogue>

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

@@ -7,6 +7,7 @@
 	import { api, SystemConfigOAuthDto } from '@api';
 	import _ from 'lodash';
 	import { fade } from 'svelte/transition';
+	import ConfirmDisableLogin from '../confirm-disable-login.svelte';
 	import SettingButtonsRow from '../setting-buttons-row.svelte';
 	import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
 	import SettingSwitch from '../setting-switch.svelte';
@@ -43,26 +44,43 @@
 		});
 	}
 
+	let isConfirmOpen = false;
+	let handleConfirm: (value: boolean) => void;
+
+	const openConfirmModal = () => {
+		return new Promise((resolve) => {
+			handleConfirm = (value: boolean) => {
+				isConfirmOpen = false;
+				resolve(value);
+			};
+			isConfirmOpen = true;
+		});
+	};
+
 	async function saveSetting() {
 		try {
-			const { data: currentConfig } = await api.systemConfigApi.getConfig();
+			const { data: current } = await api.systemConfigApi.getConfig();
+
+			if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
+				const confirmed = await openConfirmModal();
+				if (!confirmed) {
+					return;
+				}
+			}
 
 			if (!oauthConfig.mobileOverrideEnabled) {
 				oauthConfig.mobileRedirectUri = '';
 			}
 
-			const result = await api.systemConfigApi.updateConfig({
-				...currentConfig,
+			const { data: updated } = await api.systemConfigApi.updateConfig({
+				...current,
 				oauth: oauthConfig
 			});
 
-			oauthConfig = { ...result.data.oauth };
-			savedConfig = { ...result.data.oauth };
+			oauthConfig = { ...updated.oauth };
+			savedConfig = { ...updated.oauth };
 
-			notificationController.show({
-				message: 'OAuth settings saved',
-				type: NotificationType.Info
-			});
+			notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
 		} catch (error) {
 			handleError(error, 'Unable to save OAuth settings');
 		}
@@ -80,6 +98,13 @@
 	}
 </script>
 
+{#if isConfirmOpen}
+	<ConfirmDisableLogin
+		on:cancel={() => handleConfirm(false)}
+		on:confirm={() => handleConfirm(true)}
+	/>
+{/if}
+
 <div class="mt-2">
 	{#await getConfigs() then}
 		<div in:fade={{ duration: 500 }}>
@@ -147,6 +172,13 @@
 					disabled={!oauthConfig.enabled}
 				/>
 
+				<SettingSwitch
+					title="AUTO LAUNCH"
+					subtitle="Start the OAuth login flow automatically upon navigating to the login page"
+					disabled={!oauthConfig.enabled}
+					bind:checked={oauthConfig.autoLaunch}
+				/>
+
 				<SettingSwitch
 					title="MOBILE REDIRECT URI OVERRIDE"
 					subtitle="Enable when `app.immich:/` is an invalid redirect URI."

web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { handleError } from '$lib/utils/handle-error';
+	import { api, SystemConfigPasswordLoginDto } from '@api';
+	import _ from 'lodash';
+	import { fade } from 'svelte/transition';
+	import ConfirmDisableLogin from '../confirm-disable-login.svelte';
+	import SettingButtonsRow from '../setting-buttons-row.svelte';
+	import SettingSwitch from '../setting-switch.svelte';
+
+	export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
+
+	let savedConfig: SystemConfigPasswordLoginDto;
+	let defaultConfig: SystemConfigPasswordLoginDto;
+
+	async function getConfigs() {
+		[savedConfig, defaultConfig] = await Promise.all([
+			api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
+			api.systemConfigApi.getDefaults().then((res) => res.data.passwordLogin)
+		]);
+	}
+
+	let isConfirmOpen = false;
+	let handleConfirm: (value: boolean) => void;
+
+	const openConfirmModal = () => {
+		return new Promise((resolve) => {
+			handleConfirm = (value: boolean) => {
+				isConfirmOpen = false;
+				resolve(value);
+			};
+			isConfirmOpen = true;
+		});
+	};
+
+	async function saveSetting() {
+		try {
+			const { data: current } = await api.systemConfigApi.getConfig();
+
+			if (!current.oauth.enabled && current.passwordLogin.enabled && !passwordLoginConfig.enabled) {
+				const confirmed = await openConfirmModal();
+				if (!confirmed) {
+					return;
+				}
+			}
+
+			const { data: updated } = await api.systemConfigApi.updateConfig({
+				...current,
+				passwordLogin: passwordLoginConfig
+			});
+
+			passwordLoginConfig = { ...updated.passwordLogin };
+			savedConfig = { ...updated.passwordLogin };
+
+			notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
+		} catch (error) {
+			handleError(error, 'Unable to save settings');
+		}
+	}
+
+	async function reset() {
+		const { data: resetConfig } = await api.systemConfigApi.getConfig();
+
+		passwordLoginConfig = { ...resetConfig.passwordLogin };
+		savedConfig = { ...resetConfig.passwordLogin };
+
+		notificationController.show({
+			message: 'Reset settings to the recent saved settings',
+			type: NotificationType.Info
+		});
+	}
+
+	async function resetToDefault() {
+		const { data: configs } = await api.systemConfigApi.getDefaults();
+
+		passwordLoginConfig = { ...configs.passwordLogin };
+		defaultConfig = { ...configs.passwordLogin };
+
+		notificationController.show({
+			message: 'Reset password settings to default',
+			type: NotificationType.Info
+		});
+	}
+</script>
+
+{#if isConfirmOpen}
+	<ConfirmDisableLogin
+		on:cancel={() => handleConfirm(false)}
+		on:confirm={() => handleConfirm(true)}
+	/>
+{/if}
+
+<div>
+	{#await getConfigs() then}
+		<div in:fade={{ duration: 500 }}>
+			<form autocomplete="off" on:submit|preventDefault>
+				<div class="flex flex-col gap-4 ml-4 mt-4">
+					<div class="ml-4">
+						<SettingSwitch
+							title="ENABLED"
+							subtitle="Login with email and password"
+							bind:checked={passwordLoginConfig.enabled}
+						/>
+
+						<SettingButtonsRow
+							on:reset={reset}
+							on:save={saveSetting}
+							on:reset-to-default={resetToDefault}
+							showResetToDefault={!_.isEqual(savedConfig, defaultConfig)}
+						/>
+					</div>
+				</div>
+			</form>
+		</div>
+	{/await}
+</div>

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -93,7 +93,6 @@ describe('AlbumCard component', () => {
 		expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
 			'thumbnailIdOne',
 			ThumbnailFormat.Jpeg,
-			'',
 			{ responseType: 'blob' }
 		);
 		expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailBlob);

web/src/lib/components/album-page/album-viewer.svelte

@@ -439,7 +439,7 @@
 
 	const handleDownloadSelectedAssets = async () => {
 		await bulkDownload(
-      album.albumName,
+			album.albumName,
 			Array.from(multiSelectAsset),
 			() => {
 				isMultiSelectionMode = false;

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -6,7 +6,7 @@
 
 	export let album: AlbumResponseDto;
 	export let variant: 'simple' | 'full' = 'full';
-	export let searchQuery: string = '';
+	export let searchQuery = '';
 	let albumNameArray: string[] = ['', '', ''];
 
 	// This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query

web/src/lib/components/asset-viewer/video-viewer.svelte

@@ -9,7 +9,6 @@
 	export let publicSharedKey = '';
 	let asset: AssetResponseDto;
 
-	let videoPlayerNode: HTMLVideoElement;
 	let isVideoLoading = true;
 	let videoUrl: string;
 	const dispatch = createEventDispatcher();
@@ -55,7 +54,6 @@
 			class="h-full object-contain"
 			on:canplay={handleCanPlay}
 			on:ended={() => dispatch('onVideoEnded')}
-			bind:this={videoPlayerNode}
 		>
 			<source src={videoUrl} type="video/mp4" />
 			<track kind="captions" />

web/src/lib/components/forms/login-form.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 	import { loginPageMessage } from '$lib/constants';
 	import { api, oauth, OAuthConfigResponseDto } from '@api';
@@ -8,7 +9,7 @@
 	let email = '';
 	let password = '';
 	let oauthError: string;
-	let oauthConfig: OAuthConfigResponseDto = { enabled: false };
+	let oauthConfig: OAuthConfigResponseDto = { enabled: false, passwordLoginEnabled: false };
 	let loading = true;
 
 	const dispatch = createEventDispatcher();
@@ -30,6 +31,14 @@
 		try {
 			const { data } = await oauth.getConfig(window.location);
 			oauthConfig = data;
+
+			const { enabled, url, autoLaunch } = oauthConfig;
+
+			if (enabled && url && autoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
+				await goto('/auth/login?autoLaunch=0', { replaceState: true });
+				await goto(url);
+				return;
+			}
 		} catch (e) {
 			console.error('Error [login-form] [oauth.generateConfig]', e);
 		}
@@ -83,60 +92,68 @@
 			<LoadingSpinner />
 		</div>
 	{:else}
-		<form on:submit|preventDefault={login} autocomplete="off">
-			<div class="m-4 flex flex-col gap-2">
-				<label class="immich-form-label" for="email">Email</label>
-				<input
-					class="immich-form-input"
-					id="email"
-					name="email"
-					type="email"
-					bind:value={email}
-					required
-				/>
-			</div>
-
-			<div class="m-4 flex flex-col gap-2">
-				<label class="immich-form-label" for="password">Password</label>
-				<input
-					class="immich-form-input"
-					id="password"
-					name="password"
-					type="password"
-					bind:value={password}
-					required
-				/>
-			</div>
-
-			{#if error}
-				<p class="text-red-400 pl-4">{error}</p>
-			{/if}
-
-			<div class="flex w-full">
-				<button
-					type="submit"
-					disabled={loading}
-					class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
-					>Login</button
-				>
-			</div>
-
-			{#if oauthConfig.enabled}
-				<div class="flex flex-col gap-4 px-4">
-					<hr />
-					{#if oauthError}
-						<p class="text-red-400">{oauthError}</p>
-					{/if}
-					<a href={oauthConfig.url} class="flex w-full">
-						<button
-							type="button"
-							disabled={loading}
-							class="bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
-							>{oauthConfig.buttonText || 'Login with OAuth'}</button
-						>
-					</a>
+		{#if oauthConfig.passwordLoginEnabled}
+			<form on:submit|preventDefault={login} autocomplete="off">
+				<div class="m-4 flex flex-col gap-2">
+					<label class="immich-form-label" for="email">Email</label>
+					<input
+						class="immich-form-input"
+						id="email"
+						name="email"
+						type="email"
+						bind:value={email}
+						required
+					/>
 				</div>
-			{/if}
-		</form>
+
+				<div class="m-4 flex flex-col gap-2">
+					<label class="immich-form-label" for="password">Password</label>
+					<input
+						class="immich-form-input"
+						id="password"
+						name="password"
+						type="password"
+						bind:value={password}
+						required
+					/>
+				</div>
+
+				{#if error}
+					<p class="text-red-400 pl-4">{error}</p>
+				{/if}
+
+				<div class="flex w-full">
+					<button
+						type="submit"
+						disabled={loading}
+						class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
+						>Login</button
+					>
+				</div>
+			</form>
+		{/if}
+
+		{#if oauthConfig.enabled}
+			<div class="flex flex-col gap-4 px-4">
+				{#if oauthConfig.passwordLoginEnabled}
+					<hr />
+				{/if}
+				{#if oauthError}
+					<p class="text-red-400">{oauthError}</p>
+				{/if}
+				<a href={oauthConfig.url} class="flex w-full">
+					<button
+						type="button"
+						disabled={loading}
+						class="bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
+						>{oauthConfig.buttonText || 'Login with OAuth'}</button
+					>
+				</a>
+			</div>
+		{/if}
+
+		{#if !oauthConfig.enabled && !oauthConfig.passwordLoginEnabled}
+			<p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
+		{/if}
 	{/if}
 </div>

web/src/lib/components/shared-components/confirm-dialogue.svelte

@@ -2,8 +2,8 @@
 	import { createEventDispatcher } from 'svelte';
 	import FullScreenModal from './full-screen-modal.svelte';
 
-	export let title = 'Confirm Delete';
-	export let prompt = 'Are you sure you want to delete this item?';
+	export let title = 'Confirm';
+	export let prompt = 'Are you sure you want to do this?';
 	export let confirmText = 'Confirm';
 	export let cancelText = 'Cancel';
 
@@ -19,12 +19,14 @@
 		<div
 			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 		>
-			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
+			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium pb-2">
 				{title}
 			</h1>
 		</div>
 		<div>
-			<p class="ml-4 text-md py-5 text-center">{prompt}</p>
+			<slot name="prompt">
+				<p class="ml-4 text-md py-5 text-center">{prompt}</p>
+			</slot>
 
 			<div class="flex w-full px-4 gap-4 mt-4">
 				<button

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -15,7 +15,6 @@
 	export let album: AlbumResponseDto | undefined;
 	export let editingLink: SharedLinkResponseDto | undefined = undefined;
 
-	let isLoading = false;
 	let isShowSharedLink = false;
 	let expirationTime = '';
 	let isAllowUpload = false;
@@ -40,7 +39,6 @@
 
 	const createAlbumSharedLink = async () => {
 		if (album) {
-			isLoading = true;
 			try {
 				const expirationTime = getExpirationTimeInMillisecond();
 				const currentTime = new Date().getTime();
@@ -56,7 +54,6 @@
 				});
 
 				buildSharedLink(data);
-				isLoading = false;
 				isShowSharedLink = true;
 			} catch (e) {
 				console.error('[createAlbumSharedLink] Error: ', e);
@@ -64,7 +61,6 @@
 					type: NotificationType.Error,
 					message: 'Failed to create shared link'
 				});
-				isLoading = false;
 			}
 		}
 	};

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -34,9 +34,9 @@
 	const logOut = async () => {
 		const { data } = await api.authenticationApi.logout();
 
-		await fetch('auth/logout', { method: 'POST' });
+		await fetch('/auth/logout', { method: 'POST' });
 
-		goto(data.redirectUri || '/auth/login');
+		goto(data.redirectUri || '/auth/login?autoLaunch=0');
 	};
 </script>
 

web/src/lib/components/shared-components/portal/portal.svelte

@@ -47,9 +47,8 @@
 <script lang="ts">
 	/**
 	 * DOM Element or CSS Selector
-	 * @type { HTMLElement|string}
 	 */
-	export let target = 'body';
+	export let target: HTMLElement | string = 'body';
 </script>
 
 <div use:portal={target} hidden>

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -21,7 +21,7 @@
 		if (link.album?.albumThumbnailAssetId) {
 			assetId = link.album.albumThumbnailAssetId;
 		} else if (link.assets.length > 0) {
-			assetId = link.assets[0];
+			assetId = link.assets[0].id;
 		}
 
 		const { data } = await api.assetApi.getAssetById(assetId);

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

@@ -12,7 +12,7 @@
 
 	export let user: UserResponseDto;
 
-	let config: OAuthConfigResponseDto = { enabled: false };
+	let config: OAuthConfigResponseDto = { enabled: false, passwordLoginEnabled: true };
 	let loading = true;
 
 	onMount(async () => {

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

@@ -7,7 +7,7 @@
 	import { handleError } from '../../utils/handle-error';
 	import APIKeyForm from '../forms/api-key-form.svelte';
 	import APIKeySecret from '../forms/api-key-secret.svelte';
-	import DeleteConfirmDialogue from '../shared-components/delete-confirm-dialogue.svelte';
+	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
 	import {
 		notificationController,
 		NotificationType
@@ -114,7 +114,7 @@
 {/if}
 
 {#if deleteKey}
-	<DeleteConfirmDialogue
+	<ConfirmDialogue
 		prompt="Are you sure you want to delete this API Key?"
 		on:confirm={() => handleDelete()}
 		on:cancel={() => (deleteKey = null)}