feat(web): immich-ui components (#14263)

* feat: add immich-ui to auth pages * fix: welcome icon * styling * fix: mobile padding --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-11-14 17:36:12 +00:00 · 2025-01-14 14:53:33 -05:00 · 2025-01-14 14:53:33 -05:00 · b9000d8770
commit b9000d8770
parent 073fccb517
13 changed files with 345 additions and 262 deletions
--- a/web/src/app.css
+++ b/web/src/app.css
@ -22,6 +22,30 @@
    --immich-dark-success: 56 142 60;
    --immich-dark-warning: 245 124 0;
  }
+
+  :root {
+    /* light */
+    --immich-ui-primary: 66 80 175;
+    --immich-ui-dark: 0 0 0;
+    --immich-ui-light: 255 255 255;
+    --immich-ui-success: 34 197 94;
+    --immich-ui-danger: 180 0 0;
+    --immich-ui-warning: 255 170 0;
+    --immich-ui-info: 14 165 233;
+    --immich-ui-default-border: 209 213 219;
+  }
+
+  .dark {
+    /* dark */
+    --immich-ui-primary: 172 203 250;
+    --immich-ui-light: 0 0 0;
+    --immich-ui-dark: 229 231 235;
+    /* --immich-success: 56 142 60; */
+    --immich-ui-danger: 239 68 68;
+    --immich-ui-warning: 255 170 0;
+    --immich-ui-info: 14 165 233;
+    --immich-ui-default-border: 55 65 81;
+  }
 }

@font-face {
--- a/web/src/lib/components/layouts/AuthPageLayout.svelte
+++ b/web/src/lib/components/layouts/AuthPageLayout.svelte
@ -1,36 +1,25 @@
 <script lang="ts">
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import { Card, CardBody, CardHeader, Heading, Logo, VStack } from '@immich/ui';
  import type { Snippet } from 'svelte';

  interface Props {
    title: string;
-    message?: Snippet;
-    showMessage?: boolean;
    children?: Snippet;
  }

-  let { title, message, showMessage = message != undefined, children }: Props = $props();
+  let { title, children }: Props = $props();
 </script>

-<section class="min-w-screen flex min-h-screen place-content-center place-items-center p-4">
-  <div
-    class="flex w-full max-w-lg flex-col gap-4 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-  >
-    <div class="flex flex-col place-content-center place-items-center gap-4 py-4">
-      <ImmichLogo noText class="h-24 w-24" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
-        {title}
-      </h1>
-    </div>
-
-    {#if showMessage}
-      <div
-        class="w-full rounded-xl border-2 border-immich-primary bg-immich-primary/5 p-4 text-sm font-medium text-immich-primary dark:border-immich-dark-bg dark:text-immich-dark-primary"
-      >
-        {@render message?.()}
-      </div>
-    {/if}
-
-    {@render children?.()}
-  </div>
+<section class="min-w-screen flex min-h-screen items-center justify-center">
+  <Card color="secondary" class="w-full max-w-xl border m-2">
+    <CardHeader class="mt-6">
+      <VStack>
+        <Logo variant="icon" size="giant" />
+        <Heading size="large" class="font-semibold" color="primary">{title}</Heading>
+      </VStack>
+    </CardHeader>
+    <CardBody>
+      {@render children?.()}
+    </CardBody>
+  </Card>
 </section>
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@ -19,12 +19,22 @@
  import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
  import { onDestroy, onMount, type Snippet } from 'svelte';
  import { run } from 'svelte/legacy';
+  import { setTranslations } from '@immich/ui';
  import '../app.css';
+  import { t } from 'svelte-i18n';

  interface Props {
    children?: Snippet;
  }

+  $effect(() => {
+    setTranslations({
+      close: $t('close'),
+      showPassword: $t('show_password'),
+      hidePassword: $t('hide_password'),
+    });
+  });
+
  let { children }: Props = $props();

  let showNavigationLoadingBar = $state(false);
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@ -1,17 +1,16 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
  import { AppRoute } from '$lib/constants';
+  import { Heading, Button, Logo } from '@immich/ui';
  import { t } from 'svelte-i18n';
 </script>

 <section class="flex h-screen w-screen place-content-center place-items-center">
-  <div class="flex max-w-[350px] flex-col place-items-center gap-8 text-center">
+  <div class="flex max-w-[350px] flex-col place-items-center gap-10 text-center">
    <div class="flex place-content-center place-items-center">
-      <ImmichLogo noText class="text-center" height="200" width="200" />
+      <Logo variant="icon" class="text-center" size="landing" />
    </div>
-    <h1 class="text-4xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('welcome_to_immich')}</h1>
-    <Button href={AppRoute.AUTH_REGISTER} size="lg" rounded="lg">
+    <Heading size="giant" color="primary">{$t('welcome_to_immich')}</Heading>
+    <Button href={AppRoute.AUTH_REGISTER} size="giant" shape="round">
      <span class="px-2 font-bold">{$t('getting_started')}</span>
    </Button>
  </div>
--- a/web/src/routes/auth/change-password/+page.svelte
+++ b/web/src/routes/auth/change-password/+page.svelte
@ -1,11 +1,10 @@
 <script lang="ts">
  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 { resetSavedUser, user } from '$lib/stores/user.store';
  import { logout, updateMyUser } from '@immich/sdk';
+  import { Alert, Button, Field, HelperText, PasswordInput, Stack, Text } from '@immich/ui';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';

@ -35,32 +34,31 @@
 </script>

 <AuthPageLayout title={data.meta.title}>
-  {#snippet message()}
-    <p>
-      {$t('hi_user', { values: { name: $user.name, email: $user.email } })}
-      <br />
-      <br />
-      {$t('change_password_description')}
-    </p>
-  {/snippet}
+  <div class="m-4">
+    <Alert color="primary" size="small">
+      <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="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>
+  <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>

-    <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>
+      <Field label={$t('confirm_password')} required>
+        <PasswordInput bind:value={passwordConfirm} autocomplete="new-password" />
+        {#if errorMessage}
+          <HelperText color="danger">{errorMessage}</HelperText>
+        {/if}
+      </Field>

-    {#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>
+      <div class="my-5 flex w-full">
+        <Button type="submit" size="large" shape="round" fullWidth disabled={!valid}>{$t('to_change_password')}</Button>
+      </div>
+    </Stack>
  </form>
 </AuthPageLayout>
--- a/web/src/routes/auth/login/+page.svelte
+++ b/web/src/routes/auth/login/+page.svelte
@ -1,17 +1,14 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
-  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 { Alert, Button, Field, Input, PasswordInput } from '@immich/ui';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
  import type { PageData } from './$types';

  interface Props {
@ -103,90 +100,63 @@
 </script>

 {#if $featureFlags.loaded}
-  <AuthPageLayout title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}>
-    {#snippet message()}
-      <p>
+  <AuthPageLayout title={data.meta.title}>
+    {#if $serverConfig.loginPageMessage}
+      <Alert color="primary">
        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
        {@html $serverConfig.loginPageMessage}
-      </p>
-    {/snippet}
+      </Alert>
+    {/if}

    {#if !oauthLoading && $featureFlags.passwordLogin}
-      <form {onsubmit} class="mt-5 flex flex-col gap-5">
+      <form {onsubmit} class="mt-5 flex flex-col gap-5 text-dark mx-4">
        {#if errorMessage}
-          <p class="text-red-400" transition:fade>
-            {errorMessage}
-          </p>
+          <Alert color="danger" title={errorMessage} closable />
        {/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>
+        <Field label={$t('email')}>
+          <Input name="email" type="email" autocomplete="email" bind:value={email} />
+        </Field>

-        <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>
+        <Field label={$t('password')}>
+          <PasswordInput bind:value={password} autocomplete="current-password" />
+        </Field>

-        <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>
+        <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">
+        <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-white px-3 font-medium text-gray-900 dark:bg-immich-dark-gray dark:text-white"
          >
-            {$t('or')}
+            {$t('or').toUpperCase()}
          </span>
        </div>
      {/if}
-      <div class="my-5 flex flex-col gap-5">
+      <div class="my-5 flex flex-col gap-5 mx-4">
        {#if oauthError}
-          <p class="text-center text-red-400" transition:fade>{oauthError}</p>
+          <Alert color="danger" title={oauthError} closable />
        {/if}
        <Button
-          type="button"
+          shape="round"
+          loading={loading || oauthLoading}
          disabled={loading || oauthLoading}
-          size="lg"
-          fullwidth
+          size="large"
+          fullWidth
          color={$featureFlags.passwordLogin ? 'secondary' : 'primary'}
          onclick={handleOAuthLogin}
        >
-          {#if oauthLoading}
-            <span class="h-6">
-              <LoadingSpinner />
-            </span>
-          {:else}
-            {$serverConfig.oauthButtonText}
-          {/if}
+          {$serverConfig.oauthButtonText}
        </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>
+      <Alert color="warning" title={$t('login_has_been_disabled')} />
    {/if}
  </AuthPageLayout>
 {/if}
--- a/web/src/routes/auth/register/+page.svelte
+++ b/web/src/routes/auth/register/+page.svelte
@ -1,12 +1,11 @@
 <script lang="ts">
  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 { Alert, Button, Field, Input, PasswordInput, Text } from '@immich/ui';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';

@ -48,39 +47,35 @@
 </script>

 <AuthPageLayout title={data.meta.title}>
-  {#snippet message()}
-    <p>
-      {$t('admin.registration_description')}
-    </p>
-  {/snippet}
+  <div class="mx-4 mt-4">
+    <Alert color="primary">
+      <Text>{$t('admin.registration_description')}</Text>
+    </Alert>
+  </div>

-  <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>
+  <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>

-    <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>
+    <Field label={$t('admin_password')} required>
+      <PasswordInput bind:value={password} autocomplete="new-password" />
+    </Field>

-    <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>
+    <Field label={$t('confirm_admin_password')} required>
+      <PasswordInput bind:value={confirmPassword} autocomplete="new-password" />
+    </Field>

-    <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>
+    <Field label={$t('name')} required>
+      <Input bind:value={name} type="text" autocomplete="name" />
+    </Field>

    {#if errorMessage}
-      <p class="text-red-400">{errorMessage}</p>
+      <Alert color="danger" title={errorMessage} size="medium" class="mt-4" />
    {/if}

    <div class="my-5 flex w-full">
-      <Button type="submit" size="lg" fullwidth disabled={!valid}>{$t('sign_up')}</Button>
+      <Button type="submit" size="giant" shape="round" fullWidth disabled={!valid}>{$t('sign_up')}</Button>
    </div>
  </form>
 </AuthPageLayout>