Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-25 02:41:37 -05:00
Code Issues Activity

refactor: auth pages (#15328)

Browse source
This commit is contained in:
Jason Rasmussen 2025-01-14 09:14:28 -05:00 • committed by GitHub
parent 9e1651ef66
commit f70ee3f350
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 294 additions and 362 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/eslint.config.mjs
View file

@ -81,6 +81,7 @@ export default [
'unicorn/prevent-abbreviations': 'off', 'unicorn/prevent-abbreviations': 'off',
'unicorn/no-nested-ternary': 'off', 'unicorn/no-nested-ternary': 'off',
'unicorn/consistent-function-scoping': 'off', 'unicorn/consistent-function-scoping': 'off',
'unicorn/filename-case': 'off',
'unicorn/prefer-top-level-await': 'off', 'unicorn/prefer-top-level-await': 'off',
'unicorn/import-style': 'off', 'unicorn/import-style': 'off',
'svelte/button-has-type': 'error', 'svelte/button-has-type': 'error',

6
web/src/app.html
View file

@ -101,6 +101,12 @@
<link rel="stylesheet" href="/custom.css" /> <link rel="stylesheet" href="/custom.css" />
</head> </head>
<noscript
class="absolute z-[1000] flex h-screen w-screen place-content-center place-items-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
>
To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
</noscript>
<body class="bg-immich-bg dark:bg-immich-dark-bg"> <body class="bg-immich-bg dark:bg-immich-dark-bg">
<div id="stencil"> <div id="stencil">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792">

78
web/src/lib/components/forms/admin-registration-form.svelte
View file

@ -1,78 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import { signUpAdmin } from '@immich/sdk';
import { handleError } from '../../utils/handle-error';
import Button from '../elements/buttons/button.svelte';
import PasswordField from '../shared-components/password-field.svelte';
import { t } from 'svelte-i18n';
import { retrieveServerConfig } from '$lib/stores/server-config.store';
let email = $state('');
let password = $state('');
let confirmPassword = $state('');
let name = $state('');
let errorMessage: string = $state('');
let canRegister = $state(false);
$effect(() => {
if (password !== confirmPassword && confirmPassword.length > 0) {
errorMessage = $t('password_does_not_match');
canRegister = false;
} else {
errorMessage = '';
canRegister = true;
}
});
async function registerAdmin() {
if (canRegister) {
errorMessage = '';
try {
await signUpAdmin({ signUpDto: { email, password, name } });
await retrieveServerConfig();
await goto(AppRoute.AUTH_LOGIN);
} catch (error) {
handleError(error, $t('errors.unable_to_create_admin_account'));
errorMessage = $t('errors.unable_to_create_admin_account');
}
}
}
const onsubmit = async (event: Event) => {
event.preventDefault();
await registerAdmin();
};
</script>
<form {onsubmit} method="post" class="mt-5 flex flex-col gap-5">
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="email">{$t('admin_email')}</label>
<input class="immich-form-input" id="email" bind:value={email} type="email" autocomplete="email" required />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="password">{$t('admin_password')}</label>
<PasswordField id="password" bind:password autocomplete="new-password" />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="confirmPassword">{$t('confirm_admin_password')}</label>
<PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="name">{$t('name')}</label>
<input class="immich-form-input" id="name" bind:value={name} type="text" autocomplete="name" required />
</div>
{#if errorMessage}
<p class="text-red-400">{errorMessage}</p>
{/if}
<div class="my-5 flex w-full">
<Button type="submit" size="lg" fullwidth>{$t('sign_up')}</Button>
</div>
</form>

64
web/src/lib/components/forms/change-password-form.svelte
View file

@ -1,64 +0,0 @@
<script lang="ts">
import Button from '../elements/buttons/button.svelte';
import PasswordField from '../shared-components/password-field.svelte';
import { updateMyUser } from '@immich/sdk';
import { t } from 'svelte-i18n';
interface Props {
onSuccess: () => void;
}
let { onSuccess }: Props = $props();
let errorMessage: string = $state('');
let password = $state('');
let passwordConfirm = $state('');
let valid = $state(false);
$effect(() => {
if (password !== passwordConfirm && passwordConfirm.length > 0) {
errorMessage = $t('password_does_not_match');
valid = false;
} else {
errorMessage = '';
valid = true;
}
});
async function changePassword() {
if (valid) {
errorMessage = '';
await updateMyUser({ userUpdateMeDto: { password: String(password) } });
onSuccess();
}
}
const onsubmit = async (event: Event) => {
event.preventDefault();
await changePassword();
};
</script>
<form {onsubmit} method="post" class="mt-5 flex flex-col gap-5">
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="password">{$t('new_password')}</label>
<PasswordField id="password" bind:password autocomplete="new-password" />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="confirmPassword">{$t('confirm_password')}</label>
<PasswordField id="confirmPassword" bind:password={passwordConfirm} autocomplete="new-password" />
</div>
{#if errorMessage}
<p class="text-sm text-red-400">{errorMessage}</p>
{/if}
<div class="my-5 flex w-full">
<Button type="submit" size="lg" fullwidth>{$t('to_change_password')}</Button>
</div>
</form>

177
web/src/lib/components/forms/login-form.svelte
View file

@ -1,177 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { AppRoute } from '$lib/constants';
import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
import { oauth } from '$lib/utils';
import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
import { login } from '@immich/sdk';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import Button from '../elements/buttons/button.svelte';
import PasswordField from '../shared-components/password-field.svelte';
import { t } from 'svelte-i18n';
interface Props {
onSuccess: () => unknown | Promise<unknown>;
onFirstLogin: () => unknown | Promise<unknown>;
onOnboarding: () => unknown | Promise<unknown>;
}
let { onSuccess, onFirstLogin, onOnboarding }: Props = $props();
let errorMessage: string = $state('');
let email = $state('');
let password = $state('');
let oauthError = $state('');
let loading = $state(false);
let oauthLoading = $state(true);
onMount(async () => {
if (!$featureFlags.oauth) {
oauthLoading = false;
return;
}
if (oauth.isCallback(globalThis.location)) {
try {
await oauth.login(globalThis.location);
await onSuccess();
return;
} catch (error) {
console.error('Error [login-form] [oauth.callback]', error);
oauthError = getServerErrorMessage(error) || $t('errors.unable_to_complete_oauth_login');
oauthLoading = false;
}
}
try {
if ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(globalThis.location)) {
await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
await oauth.authorize(globalThis.location);
return;
}
} catch (error) {
handleError(error, $t('errors.unable_to_connect'));
}
oauthLoading = false;
});
const handleLogin = async () => {
try {
errorMessage = '';
loading = true;
const user = await login({ loginCredentialDto: { email, password } });
if (user.isAdmin && !$serverConfig.isOnboarded) {
await onOnboarding();
return;
}
if (!user.isAdmin && user.shouldChangePassword) {
await onFirstLogin();
return;
}
await onSuccess();
return;
} catch (error) {
errorMessage = getServerErrorMessage(error) || $t('errors.incorrect_email_or_password');
loading = false;
return;
}
};
const handleOAuthLogin = async () => {
oauthLoading = true;
oauthError = '';
const success = await oauth.authorize(globalThis.location);
if (!success) {
oauthLoading = false;
oauthError = $t('errors.unable_to_login_with_oauth');
}
};
const onsubmit = async (event: Event) => {
event.preventDefault();
await handleLogin();
};
</script>
{#if !oauthLoading && $featureFlags.passwordLogin}
<form {onsubmit} class="mt-5 flex flex-col gap-5">
{#if errorMessage}
<p class="text-red-400" transition:fade>
{errorMessage}
</p>
{/if}
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="email">{$t('email')}</label>
<input
class="immich-form-input"
id="email"
name="email"
type="email"
autocomplete="email"
bind:value={email}
required
/>
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="password">{$t('password')}</label>
<PasswordField id="password" bind:password autocomplete="current-password" />
</div>
<div class="my-5 flex w-full">
<Button type="submit" size="lg" fullwidth disabled={loading}>
{#if loading}
<span class="h-6">
<LoadingSpinner />
</span>
{:else}
{$t('to_login')}
{/if}
</Button>
</div>
</form>
{/if}
{#if $featureFlags.oauth}
{#if $featureFlags.passwordLogin}
<div class="inline-flex w-full items-center justify-center">
<hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
<span
class="absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-immich-dark-gray dark:text-white"
>
{$t('or')}
</span>
</div>
{/if}
<div class="my-5 flex flex-col gap-5">
{#if oauthError}
<p class="text-center text-red-400" transition:fade>{oauthError}</p>
{/if}
<Button
type="button"
disabled={loading || oauthLoading}
size="lg"
fullwidth
color={$featureFlags.passwordLogin ? 'secondary' : 'primary'}
onclick={handleOAuthLogin}
>
{#if oauthLoading}
<span class="h-6">
<LoadingSpinner />
</span>
{:else}
{$serverConfig.oauthButtonText}
{/if}
</Button>
</div>
{/if}
{#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
<p class="p-4 text-center dark:text-immich-dark-fg">{$t('login_has_been_disabled')}</p>
{/if}

2
web/src/lib/components/shared-components/fullscreen-container.svelte → web/src/lib/components/layouts/AuthPageLayout.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import ImmichLogo from './immich-logo.svelte';
interface Props { interface Props {
title: string; title: string;

26
web/src/routes/+layout.svelte
View file

@ -1,30 +1,26 @@
<script lang="ts"> <script lang="ts">
import { run } from 'svelte/legacy';
import { afterNavigate, beforeNavigate } from '$app/navigation'; import { afterNavigate, beforeNavigate } from '$app/navigation';
import { page } from '$app/state'; import { page } from '$app/state';
import { shortcut } from '$lib/actions/shortcut';
import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte'; import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
import Error from '$lib/components/error.svelte';
import AppleHeader from '$lib/components/shared-components/apple-header.svelte'; import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte'; import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';
import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte'; import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte'; import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte'; import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte'; import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
import { Theme } from '$lib/constants'; import { Theme } from '$lib/constants';
import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store'; import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
import { serverConfig } from '$lib/stores/server-config.store'; import { serverConfig } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store'; import { user } from '$lib/stores/user.store';
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket'; import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
import { copyToClipboard, setKey } from '$lib/utils'; import { copyToClipboard, setKey } from '$lib/utils';
import { onDestroy, onMount, type Snippet } from 'svelte';
import '../app.css';
import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation'; import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte'; import { onDestroy, onMount, type Snippet } from 'svelte';
import { t } from 'svelte-i18n'; import { run } from 'svelte/legacy';
import Error from '$lib/components/error.svelte'; import '../app.css';
import { shortcut } from '$lib/actions/shortcut';
interface Props { interface Props {
children?: Snippet; children?: Snippet;
} }
@ -127,14 +123,6 @@
{/if} {/if}
</svelte:head> </svelte:head>
<noscript
class="absolute z-[1000] flex h-screen w-screen place-content-center place-items-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
>
<FullscreenContainer title={$t('welcome_to_immich')}>
To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
</FullscreenContainer>
</noscript>
<svelte:window <svelte:window
use:shortcut={{ use:shortcut={{
shortcut: { ctrl: true, shift: true, key: 'm' }, shortcut: { ctrl: true, shift: true, key: 'm' },

47
web/src/routes/auth/change-password/+page.svelte
View file

@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte'; import Button from '$lib/components/elements/buttons/button.svelte';
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte'; import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
import PasswordField from '$lib/components/shared-components/password-field.svelte';
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { resetSavedUser, user } from '$lib/stores/user.store'; import { resetSavedUser, user } from '$lib/stores/user.store';
import { logout } from '@immich/sdk'; import { logout, updateMyUser } from '@immich/sdk';
import type { PageData } from './$types';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import type { PageData } from './$types';
interface Props { interface Props {
data: PageData; data: PageData;
@ -14,14 +15,26 @@
let { data }: Props = $props(); let { data }: Props = $props();
const onSuccess = async () => { let password = $state('');
let passwordConfirm = $state('');
const valid = $derived(password === passwordConfirm && passwordConfirm.length > 0);
const errorMessage = $derived(passwordConfirm.length === 0 || valid ? '' : $t('password_does_not_match'));
const onSubmit = async (event: Event) => {
event.preventDefault();
if (!valid) {
return;
}
await updateMyUser({ userUpdateMeDto: { password: String(password) } });
await goto(AppRoute.AUTH_LOGIN); await goto(AppRoute.AUTH_LOGIN);
resetSavedUser(); resetSavedUser();
await logout(); await logout();
}; };
</script> </script>
<FullscreenContainer title={data.meta.title}> <AuthPageLayout title={data.meta.title}>
{#snippet message()} {#snippet message()}
<p> <p>
{$t('hi_user', { values: { name: $user.name, email: $user.email } })} {$t('hi_user', { values: { name: $user.name, email: $user.email } })}
@ -31,5 +44,23 @@
</p> </p>
{/snippet} {/snippet}
<ChangePasswordForm {onSuccess} /> <form onsubmit={onSubmit} method="post" class="mt-5 flex flex-col gap-5">
</FullscreenContainer> <div class="flex flex-col gap-2">
<label class="immich-form-label" for="password">{$t('new_password')}</label>
<PasswordField id="password" bind:password autocomplete="new-password" />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="confirmPassword">{$t('confirm_password')}</label>
<PasswordField id="confirmPassword" bind:password={passwordConfirm} autocomplete="new-password" />
</div>
{#if errorMessage}
<p class="text-sm text-red-400">{errorMessage}</p>
{/if}
<div class="my-5 flex w-full">
<Button type="submit" size="lg" fullwidth disabled={!valid}>{$t('to_change_password')}</Button>
</div>
</form>
</AuthPageLayout>

179
web/src/routes/auth/login/+page.svelte
View file

@ -1,9 +1,17 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import LoginForm from '$lib/components/forms/login-form.svelte'; import Button from '$lib/components/elements/buttons/button.svelte';
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte'; import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import PasswordField from '$lib/components/shared-components/password-field.svelte';
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { featureFlags, serverConfig } from '$lib/stores/server-config.store'; import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
import { oauth } from '$lib/utils';
import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
import { login } from '@immich/sdk';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import type { PageData } from './$types'; import type { PageData } from './$types';
interface Props { interface Props {
@ -11,10 +19,91 @@
} }
let { data }: Props = $props(); let { data }: Props = $props();
let errorMessage: string = $state('');
let email = $state('');
let password = $state('');
let oauthError = $state('');
let loading = $state(false);
let oauthLoading = $state(true);
const onSuccess = async () => await goto(AppRoute.PHOTOS, { invalidateAll: true });
const onFirstLogin = async () => await goto(AppRoute.AUTH_CHANGE_PASSWORD);
const onOnboarding = async () => await goto(AppRoute.AUTH_ONBOARDING);
onMount(async () => {
if (!$featureFlags.oauth) {
oauthLoading = false;
return;
}
if (oauth.isCallback(globalThis.location)) {
try {
await oauth.login(globalThis.location);
await onSuccess();
return;
} catch (error) {
console.error('Error [login-form] [oauth.callback]', error);
oauthError = getServerErrorMessage(error) || $t('errors.unable_to_complete_oauth_login');
oauthLoading = false;
}
}
try {
if ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(globalThis.location)) {
await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
await oauth.authorize(globalThis.location);
return;
}
} catch (error) {
handleError(error, $t('errors.unable_to_connect'));
}
oauthLoading = false;
});
const handleLogin = async () => {
try {
errorMessage = '';
loading = true;
const user = await login({ loginCredentialDto: { email, password } });
if (user.isAdmin && !$serverConfig.isOnboarded) {
await onOnboarding();
return;
}
if (!user.isAdmin && user.shouldChangePassword) {
await onFirstLogin();
return;
}
await onSuccess();
return;
} catch (error) {
errorMessage = getServerErrorMessage(error) || $t('errors.incorrect_email_or_password');
loading = false;
return;
}
};
const handleOAuthLogin = async () => {
oauthLoading = true;
oauthError = '';
const success = await oauth.authorize(globalThis.location);
if (!success) {
oauthLoading = false;
oauthError = $t('errors.unable_to_login_with_oauth');
}
};
const onsubmit = async (event: Event) => {
event.preventDefault();
await handleLogin();
};
</script> </script>
{#if $featureFlags.loaded} {#if $featureFlags.loaded}
<FullscreenContainer title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}> <AuthPageLayout title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}>
{#snippet message()} {#snippet message()}
<p> <p>
<!-- eslint-disable-next-line svelte/no-at-html-tags --> <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@ -22,10 +111,82 @@
</p> </p>
{/snippet} {/snippet}
<LoginForm {#if !oauthLoading && $featureFlags.passwordLogin}
onSuccess={async () => await goto(AppRoute.PHOTOS, { invalidateAll: true })} <form {onsubmit} class="mt-5 flex flex-col gap-5">
onFirstLogin={async () => await goto(AppRoute.AUTH_CHANGE_PASSWORD)} {#if errorMessage}
onOnboarding={async () => await goto(AppRoute.AUTH_ONBOARDING)} <p class="text-red-400" transition:fade>
/> {errorMessage}
</FullscreenContainer> </p>
{/if}
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="email">{$t('email')}</label>
<input
class="immich-form-input"
id="email"
name="email"
type="email"
autocomplete="email"
bind:value={email}
required
/>
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="password">{$t('password')}</label>
<PasswordField id="password" bind:password autocomplete="current-password" />
</div>
<div class="my-5 flex w-full">
<Button type="submit" size="lg" fullwidth disabled={loading}>
{#if loading}
<span class="h-6">
<LoadingSpinner />
</span>
{:else}
{$t('to_login')}
{/if}
</Button>
</div>
</form>
{/if}
{#if $featureFlags.oauth}
{#if $featureFlags.passwordLogin}
<div class="inline-flex w-full items-center justify-center">
<hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
<span
class="absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-immich-dark-gray dark:text-white"
>
{$t('or')}
</span>
</div>
{/if}
<div class="my-5 flex flex-col gap-5">
{#if oauthError}
<p class="text-center text-red-400" transition:fade>{oauthError}</p>
{/if}
<Button
type="button"
disabled={loading || oauthLoading}
size="lg"
fullwidth
color={$featureFlags.passwordLogin ? 'secondary' : 'primary'}
onclick={handleOAuthLogin}
>
{#if oauthLoading}
<span class="h-6">
<LoadingSpinner />
</span>
{:else}
{$serverConfig.oauthButtonText}
{/if}
</Button>
</div>
{/if}
{#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
<p class="p-4 text-center dark:text-immich-dark-fg">{$t('login_has_been_disabled')}</p>
{/if}
</AuthPageLayout>
{/if} {/if}

76
web/src/routes/auth/register/+page.svelte
View file

@ -1,22 +1,86 @@
<script lang="ts"> <script lang="ts">
import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte'; import { goto } from '$app/navigation';
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte'; import Button from '$lib/components/elements/buttons/button.svelte';
import type { PageData } from './$types'; import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
import PasswordField from '$lib/components/shared-components/password-field.svelte';
import { AppRoute } from '$lib/constants';
import { retrieveServerConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import { signUpAdmin } from '@immich/sdk';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import type { PageData } from './$types';
let email = $state('');
let password = $state('');
let confirmPassword = $state('');
let name = $state('');
let errorMessage = $state('');
let valid = $derived(password === confirmPassword && confirmPassword.length > 0);
interface Props { interface Props {
data: PageData; data: PageData;
} }
let { data }: Props = $props(); let { data }: Props = $props();
$effect(() => {
errorMessage = password === confirmPassword || confirmPassword.length === 0 ? '' : $t('password_does_not_match');
});
const onSubmit = async (event: Event) => {
event.preventDefault();
if (!valid) {
return;
}
errorMessage = '';
try {
await signUpAdmin({ signUpDto: { email, password, name } });
await retrieveServerConfig();
await goto(AppRoute.AUTH_LOGIN);
} catch (error) {
handleError(error, $t('errors.unable_to_create_admin_account'));
errorMessage = $t('errors.unable_to_create_admin_account');
}
};
</script> </script>
<FullscreenContainer title={data.meta.title}> <AuthPageLayout title={data.meta.title}>
{#snippet message()} {#snippet message()}
<p> <p>
{$t('admin.registration_description')} {$t('admin.registration_description')}
</p> </p>
{/snippet} {/snippet}
<AdminRegistrationForm /> <form onsubmit={onSubmit} method="post" class="mt-5 flex flex-col gap-5">
</FullscreenContainer> <div class="flex flex-col gap-2">
<label class="immich-form-label" for="email">{$t('admin_email')}</label>
<input class="immich-form-input" id="email" bind:value={email} type="email" autocomplete="email" required />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="password">{$t('admin_password')}</label>
<PasswordField id="password" bind:password autocomplete="new-password" />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="confirmPassword">{$t('confirm_admin_password')}</label>
<PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="name">{$t('name')}</label>
<input class="immich-form-input" id="name" bind:value={name} type="text" autocomplete="name" required />
</div>
{#if errorMessage}
<p class="text-red-400">{errorMessage}</p>
{/if}
<div class="my-5 flex w-full">
<Button type="submit" size="lg" fullwidth disabled={!valid}>{$t('sign_up')}</Button>
</div>
</form>
</AuthPageLayout>