mirror of
https://github.com/immich-app/immich.git
synced 2025-01-23 20:22:45 +01:00
refactor: auth pages (#15328)
This commit is contained in:
parent
9e1651ef66
commit
f70ee3f350
10 changed files with 294 additions and 362 deletions
web
|
@ -81,6 +81,7 @@ export default [
|
|||
'unicorn/prevent-abbreviations': 'off',
|
||||
'unicorn/no-nested-ternary': 'off',
|
||||
'unicorn/consistent-function-scoping': 'off',
|
||||
'unicorn/filename-case': 'off',
|
||||
'unicorn/prefer-top-level-await': 'off',
|
||||
'unicorn/import-style': 'off',
|
||||
'svelte/button-has-type': 'error',
|
||||
|
|
|
@ -101,6 +101,12 @@
|
|||
<link rel="stylesheet" href="/custom.css" />
|
||||
</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">
|
||||
<div id="stencil">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792">
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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}
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import ImmichLogo from './immich-logo.svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
|
@ -1,30 +1,26 @@
|
|||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
import { afterNavigate, beforeNavigate } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { shortcut } from '$lib/actions/shortcut';
|
||||
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 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 NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
|
||||
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
|
||||
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
|
||||
import { Theme } from '$lib/constants';
|
||||
import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
|
||||
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
|
||||
import { copyToClipboard, setKey } from '$lib/utils';
|
||||
import { onDestroy, onMount, type Snippet } from 'svelte';
|
||||
import '../app.css';
|
||||
import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
|
||||
import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import Error from '$lib/components/error.svelte';
|
||||
import { shortcut } from '$lib/actions/shortcut';
|
||||
import { onDestroy, onMount, type Snippet } from 'svelte';
|
||||
import { run } from 'svelte/legacy';
|
||||
import '../app.css';
|
||||
|
||||
interface Props {
|
||||
children?: Snippet;
|
||||
}
|
||||
|
@ -127,14 +123,6 @@
|
|||
{/if}
|
||||
</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
|
||||
use:shortcut={{
|
||||
shortcut: { ctrl: true, shift: true, key: 'm' },
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
|
||||
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.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 { resetSavedUser, user } from '$lib/stores/user.store';
|
||||
import { logout } from '@immich/sdk';
|
||||
import type { PageData } from './$types';
|
||||
import { logout, updateMyUser } from '@immich/sdk';
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
interface Props {
|
||||
data: PageData;
|
||||
|
@ -14,14 +15,26 @@
|
|||
|
||||
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);
|
||||
resetSavedUser();
|
||||
await logout();
|
||||
};
|
||||
</script>
|
||||
|
||||
<FullscreenContainer title={data.meta.title}>
|
||||
<AuthPageLayout title={data.meta.title}>
|
||||
{#snippet message()}
|
||||
<p>
|
||||
{$t('hi_user', { values: { name: $user.name, email: $user.email } })}
|
||||
|
@ -31,5 +44,23 @@
|
|||
</p>
|
||||
{/snippet}
|
||||
|
||||
<ChangePasswordForm {onSuccess} />
|
||||
</FullscreenContainer>
|
||||
<form onsubmit={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 disabled={!valid}>{$t('to_change_password')}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AuthPageLayout>
|
||||
|
|
|
@ -1,9 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import LoginForm from '$lib/components/forms/login-form.svelte';
|
||||
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.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 { 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';
|
||||
|
||||
interface Props {
|
||||
|
@ -11,10 +19,91 @@
|
|||
}
|
||||
|
||||
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>
|
||||
|
||||
{#if $featureFlags.loaded}
|
||||
<FullscreenContainer title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}>
|
||||
<AuthPageLayout title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}>
|
||||
{#snippet message()}
|
||||
<p>
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
|
@ -22,10 +111,82 @@
|
|||
</p>
|
||||
{/snippet}
|
||||
|
||||
<LoginForm
|
||||
onSuccess={async () => await goto(AppRoute.PHOTOS, { invalidateAll: true })}
|
||||
onFirstLogin={async () => await goto(AppRoute.AUTH_CHANGE_PASSWORD)}
|
||||
onOnboarding={async () => await goto(AppRoute.AUTH_ONBOARDING)}
|
||||
/>
|
||||
</FullscreenContainer>
|
||||
{#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}
|
||||
</AuthPageLayout>
|
||||
{/if}
|
||||
|
|
|
@ -1,22 +1,86 @@
|
|||
<script lang="ts">
|
||||
import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
|
||||
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { goto } from '$app/navigation';
|
||||
import Button from '$lib/components/elements/buttons/button.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 { 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 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 {
|
||||
data: PageData;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<FullscreenContainer title={data.meta.title}>
|
||||
<AuthPageLayout title={data.meta.title}>
|
||||
{#snippet message()}
|
||||
<p>
|
||||
{$t('admin.registration_description')}
|
||||
</p>
|
||||
{/snippet}
|
||||
|
||||
<AdminRegistrationForm />
|
||||
</FullscreenContainer>
|
||||
<form onsubmit={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 disabled={!valid}>{$t('sign_up')}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AuthPageLayout>
|
||||
|
|
Loading…
Reference in a new issue