You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-06-26 05:01:05 +02:00
refactor: auth pages (#15328)
This commit is contained in:
Jason Rasmussen
GitHub
@ -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;
|
||||
Reference in New Issue
Block a user