feat(web): improve login screen (#1754)

web/src/app.css

@@ -68,6 +68,14 @@ input:focus-visible {
 		@apply bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-gray-100 border dark:border-immich-dark-gray rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary dark:hover:bg-immich-dark-primary/90 hover:shadow-lg text-sm font-medium;
 	}
 
+	.immich-btn-primary-big {
+		@apply inline-flex justify-center items-center bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-white enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/75 disabled:cursor-not-allowed px-6 py-4 rounded-md shadow-md w-full font-semibold;
+	}
+
+	.immich-btn-secondary-big {
+		@apply inline-flex justify-center items-center bg-gray-500 dark:bg-gray-200 text-white enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 dark:text-immich-dark-gray disabled:cursor-not-allowed px-6 py-4 rounded-md shadow-md w-full font-semibold;
+	}
+
 	.immich-text-button {
 		@apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
 	}

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

@@ -5,6 +5,7 @@
 	import { handleError } from '$lib/utils/handle-error';
 	import { api, oauth, OAuthConfigResponseDto } from '@api';
 	import { createEventDispatcher, onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
 
 	let error: string;
@@ -75,10 +76,10 @@
 </script>
 
 <div
-	class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-md py-8"
+	class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-md"
 >
-	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<ImmichLogo class="text-center" height="100" width="100" />
+	<div class="flex flex-col place-items-center place-content-center gap-4 py-4">
+		<ImmichLogo class="text-center h-24 w-24" />
 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">Login</h1>
 	</div>
 
@@ -90,73 +91,84 @@
 		</p>
 	{/if}
 
-	{#if loading}
-		<div class="flex place-items-center place-content-center">
-			<LoadingSpinner />
-		</div>
-	{:else}
-		{#if authConfig.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>
-
-				<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 authConfig.passwordLoginEnabled}
+		<form on:submit|preventDefault={login} class="flex flex-col gap-5 mt-5">
+			{#if error}
+				<p class="text-red-400" transition:fade>
+					{error}
+				</p>
+			{/if}
+
+			<div class="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 authConfig.enabled}
-			<div class="flex flex-col gap-4 px-4">
-				{#if authConfig.passwordLoginEnabled}
-					<hr />
-				{/if}
-				{#if oauthError}
-					<p class="text-red-400">{oauthError}</p>
-				{/if}
-				<a href={authConfig.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"
-						>{authConfig.buttonText || 'Login with OAuth'}</button
-					>
-				</a>
+			<div class="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}
 
-		{#if !authConfig.enabled && !authConfig.passwordLoginEnabled}
-			<p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
+			<div class="my-5 flex w-full">
+				<button
+					type="submit"
+					class="immich-btn-primary-big inline-flex items-center h-14"
+					disabled={loading}
+				>
+					{#if loading}
+						<LoadingSpinner />
+					{:else}
+						Login
+					{/if}
+				</button>
+			</div>
+		</form>
+	{/if}
+
+	{#if authConfig.enabled}
+		{#if authConfig.passwordLoginEnabled}
+			<div class="inline-flex items-center justify-center w-full">
+				<hr class="w-3/4 h-px my-6 bg-gray-200 border-0 dark:bg-gray-600" />
+				<span
+					class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 left-1/2 dark:text-white bg-white dark:bg-immich-dark-gray"
+				>
+					or
+				</span>
+			</div>
 		{/if}
+		<div class="my-5 flex flex-col gap-5">
+			{#if oauthError}
+				<p class="text-red-400" transition:fade>{oauthError}</p>
+			{/if}
+			<a href={authConfig.url} class="flex w-full">
+				<button
+					type="button"
+					disabled={loading}
+					class={authConfig.passwordLoginEnabled
+						? 'immich-btn-secondary-big'
+						: 'immich-btn-primary-big'}
+				>
+					{authConfig.buttonText || 'Login with OAuth'}
+				</button>
+			</a>
+		</div>
+	{/if}
+
+	{#if !authConfig.enabled && !authConfig.passwordLoginEnabled}
+		<p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
 	{/if}
 </div>

web/src/routes/auth/login/+page.svelte

@@ -5,11 +5,12 @@
 	import LoginForm from '$lib/components/forms/login-form.svelte';
 </script>
 
-<section class="h-screen w-screen flex place-items-center place-content-center">
-	<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
-		<LoginForm
-			on:success={() => goto('/photos')}
-			on:first-login={() => goto('/auth/change-password')}
-		/>
-	</div>
+<section
+	class="min-h-screen w-screen flex place-items-center place-content-center p-4"
+	transition:fade={{ duration: 100 }}
+>
+	<LoginForm
+		on:success={() => goto('/photos')}
+		on:first-login={() => goto('/auth/change-password')}
+	/>
 </section>