Skip to content

Commit

Permalink
feat(web): improve login screen (immich-app#1754)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelheusschen
michelheusschen authored Feb 15, 2023
1 parent e1c520b commit d31b358
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 74 deletions.
8 changes: 8 additions & 0 deletions web/src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
146 changes: 79 additions & 67 deletions web/src/lib/components/forms/login-form.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>

Expand All @@ -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>
15 changes: 8 additions & 7 deletions web/src/routes/auth/login/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit d31b358

Please sign in to comment.