mirror of
https://github.com/immich-app/immich.git
synced 2025-02-11 01:18:24 -05:00
fix(web): auth page padding (#15569)
This commit is contained in:
Jason Rasmussen
GitHub
parent
071b271484
commit
a1691ddc0f
4 changed files with 60 additions and 70 deletions
|
|
@ -19,10 +19,8 @@
|
|||
</VStack>
|
||||
</CardHeader>
|
||||
|
||||
<div class="pb-4">
|
||||
<CardBody>
|
||||
{@render children?.()}
|
||||
</CardBody>
|
||||
</div>
|
||||
<CardBody class="p-8">
|
||||
{@render children?.()}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -34,29 +34,25 @@
|
|||
</script>
|
||||
|
||||
<AuthPageLayout title={data.meta.title}>
|
||||
<div class="m-4">
|
||||
<Alert color="primary" size="small">
|
||||
<form onsubmit={onSubmit} method="post" class="flex flex-col gap-4">
|
||||
<Alert color="primary" size="small" class="mb-2">
|
||||
<Stack gap={4}>
|
||||
<Text>{$t('hi_user', { values: { name: $user.name, email: $user.email } })}</Text>
|
||||
<Text>{$t('change_password_description')}</Text>
|
||||
</Stack>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<form onsubmit={onSubmit} method="post" class="mx-4 mt-6">
|
||||
<Stack gap={4} class="mt-4">
|
||||
<Field label={$t('new_password')} required>
|
||||
<PasswordInput bind:value={password} autocomplete="new-password" />
|
||||
</Field>
|
||||
<Field label={$t('new_password')} required>
|
||||
<PasswordInput bind:value={password} autocomplete="new-password" />
|
||||
</Field>
|
||||
|
||||
<Field label={$t('confirm_password')} required>
|
||||
<PasswordInput bind:value={passwordConfirm} autocomplete="new-password" />
|
||||
<HelperText color="danger">{errorMessage}</HelperText>
|
||||
</Field>
|
||||
<Field label={$t('confirm_password')} required>
|
||||
<PasswordInput bind:value={passwordConfirm} autocomplete="new-password" />
|
||||
<HelperText color="danger">{errorMessage}</HelperText>
|
||||
</Field>
|
||||
|
||||
<div class="my-5 flex w-full">
|
||||
<Button type="submit" size="large" shape="round" fullWidth disabled={!valid}>{$t('to_change_password')}</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
<Button class="mt-2" type="submit" size="large" shape="round" fullWidth disabled={!valid}
|
||||
>{$t('to_change_password')}</Button
|
||||
>
|
||||
</form>
|
||||
</AuthPageLayout>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import { oauth } from '$lib/utils';
|
||||
import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
|
||||
import { login } from '@immich/sdk';
|
||||
import { Alert, Button, Field, Input, PasswordInput } from '@immich/ui';
|
||||
import { Alert, Button, Field, Input, PasswordInput, Stack } from '@immich/ui';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { PageData } from './$types';
|
||||
|
|
@ -101,43 +101,43 @@
|
|||
|
||||
{#if $featureFlags.loaded}
|
||||
<AuthPageLayout title={data.meta.title}>
|
||||
{#if $serverConfig.loginPageMessage}
|
||||
<Alert color="primary">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html $serverConfig.loginPageMessage}
|
||||
</Alert>
|
||||
{/if}
|
||||
|
||||
{#if !oauthLoading && $featureFlags.passwordLogin}
|
||||
<form {onsubmit} class="mt-5 flex flex-col gap-5 text-dark mx-4">
|
||||
{#if errorMessage}
|
||||
<Alert color="danger" title={errorMessage} closable />
|
||||
{/if}
|
||||
|
||||
<Field label={$t('email')}>
|
||||
<Input name="email" type="email" autocomplete="email" bind:value={email} />
|
||||
</Field>
|
||||
|
||||
<Field label={$t('password')}>
|
||||
<PasswordInput bind:value={password} autocomplete="current-password" />
|
||||
</Field>
|
||||
|
||||
<Button type="submit" size="large" shape="round" fullWidth {loading} class="mt-6">{$t('to_login')}</Button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if $featureFlags.oauth}
|
||||
{#if $featureFlags.passwordLogin}
|
||||
<div class="inline-flex w-full items-center justify-center mt-4">
|
||||
<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-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white"
|
||||
>
|
||||
{$t('or').toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<Stack gap={4}>
|
||||
{#if $serverConfig.loginPageMessage}
|
||||
<Alert color="primary" class="mb-6">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html $serverConfig.loginPageMessage}
|
||||
</Alert>
|
||||
{/if}
|
||||
<div class="my-5 flex flex-col gap-5 mx-4">
|
||||
|
||||
{#if !oauthLoading && $featureFlags.passwordLogin}
|
||||
<form {onsubmit} class="flex flex-col gap-4">
|
||||
{#if errorMessage}
|
||||
<Alert color="danger" title={errorMessage} closable />
|
||||
{/if}
|
||||
|
||||
<Field label={$t('email')}>
|
||||
<Input name="email" type="email" autocomplete="email" bind:value={email} />
|
||||
</Field>
|
||||
|
||||
<Field label={$t('password')}>
|
||||
<PasswordInput bind:value={password} autocomplete="current-password" />
|
||||
</Field>
|
||||
|
||||
<Button type="submit" size="large" shape="round" fullWidth {loading} class="mt-6">{$t('to_login')}</Button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if $featureFlags.oauth}
|
||||
{#if $featureFlags.passwordLogin}
|
||||
<div class="inline-flex w-full items-center justify-center my-4">
|
||||
<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-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white"
|
||||
>
|
||||
{$t('or').toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if oauthError}
|
||||
<Alert color="danger" title={oauthError} closable />
|
||||
{/if}
|
||||
|
|
@ -152,11 +152,11 @@
|
|||
>
|
||||
{$serverConfig.oauthButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
|
||||
<Alert color="warning" title={$t('login_has_been_disabled')} />
|
||||
{/if}
|
||||
{#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
|
||||
<Alert color="warning" title={$t('login_has_been_disabled')} />
|
||||
{/if}
|
||||
</Stack>
|
||||
</AuthPageLayout>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -47,13 +47,11 @@
|
|||
</script>
|
||||
|
||||
<AuthPageLayout title={data.meta.title}>
|
||||
<div class="mx-4 mt-4">
|
||||
<Alert color="primary">
|
||||
<form onsubmit={onSubmit} method="post" class="flex flex-col gap-4">
|
||||
<Alert color="primary" class="mb-2">
|
||||
<Text>{$t('admin.registration_description')}</Text>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<form onsubmit={onSubmit} method="post" class="mt-5 flex flex-col gap-5 text-dark p-4">
|
||||
<Field label={$t('admin_email')} required>
|
||||
<Input bind:value={email} type="email" autocomplete="email" />
|
||||
</Field>
|
||||
|
|
@ -74,8 +72,6 @@
|
|||
<Alert color="danger" title={errorMessage} size="medium" class="mt-4" />
|
||||
{/if}
|
||||
|
||||
<div class="my-5 flex w-full">
|
||||
<Button type="submit" size="giant" shape="round" fullWidth disabled={!valid}>{$t('sign_up')}</Button>
|
||||
</div>
|
||||
<Button class="mt-4" type="submit" size="giant" shape="round" fullWidth disabled={!valid}>{$t('sign_up')}</Button>
|
||||
</form>
|
||||
</AuthPageLayout>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue