feat(web): immich-ui components on auth pages

immich-app · Nov 20, 2024 · bf720fa · bf720fa
1 parent 69e50d0
commit bf720fa
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 119 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -26,6 +26,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
     "@faker-js/faker": "^9.0.0",
+    "@immich/ui": "file:../../ui",
     "@socket.io/component-emitter": "^3.1.0",
     "@sveltejs/adapter-static": "^3.0.5",
     "@sveltejs/enhanced-img": "^0.3.9",

diff --git a/web/src/app.css b/web/src/app.css
@@ -22,6 +22,28 @@
     --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;
+  }
+
+  .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;
+  }
 }
 
 @font-face {

diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte
@@ -2,9 +2,8 @@
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
   import { signUpAdmin } from '@immich/sdk';
+  import { Alert, Button, Field, Input, PasswordInput } from '@immich/ui';
   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';
 
@@ -47,32 +46,28 @@
   };
 </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>
+<form {onsubmit} method="post" class="mt-5 flex flex-col gap-5 text-dark">
+  <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')}>
+    <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')}>
+    <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="email" autocomplete="name" />
+  </Field>
 
   {#if errorMessage}
-    <p class="text-red-400">{errorMessage}</p>
+    <Alert color="danger" title={errorMessage} />
   {/if}
 
   <div class="my-5 flex w-full">
-    <Button type="submit" size="lg" fullwidth>{$t('sign_up')}</Button>
+    <Button type="submit" size="large" fullWidth>{$t('sign_up')}</Button>
   </div>
 </form>
diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte
@@ -1,15 +1,12 @@
 <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 { Alert, Button, Field, Input, PasswordInput } from '@immich/ui';
   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 {
@@ -99,42 +96,25 @@
 </script>
 
 {#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">
     {#if errorMessage}
-      <p class="text-red-400" transition:fade>
-        {errorMessage}
-      </p>
+      <Alert color="danger" title={errorMessage} />
     {/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"
+        showLabel={$t('show_password')}
+        hideLabel={$t('hide_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" fullWidth {loading} class="mt-6">{$t('to_login')}</Button>
   </form>
 {/if}
 
@@ -151,27 +131,20 @@
   {/if}
   <div class="my-5 flex flex-col gap-5">
     {#if oauthError}
-      <p class="text-center text-red-400" transition:fade>{oauthError}</p>
+      <Alert color="danger" title={oauthError} />
     {/if}
     <Button
-      type="button"
-      disabled={loading || oauthLoading}
-      size="lg"
-      fullwidth
+      loading={loading || oauthLoading}
+      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}
diff --git a/web/src/lib/components/shared-components/fullscreen-container.svelte b/web/src/lib/components/shared-components/fullscreen-container.svelte
@@ -1,36 +1,24 @@
 <script lang="ts">
+  import { Heading, Logo } from '@immich/ui';
   import type { Snippet } from 'svelte';
-  import ImmichLogo from './immich-logo.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 class="flex flex-col place-content-center place-items-center">
+      <Logo variant="icon" size="giant" />
+      <Heading size="large" color="primary">{title}</Heading>
     </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>
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -12,14 +12,15 @@
   import { mdiHelpCircleOutline, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import { AppRoute } from '$lib/constants';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import { AppRoute, Theme } from '$lib/constants';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
   import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
   import { onMount } from 'svelte';
+  import { Logo } from '@immich/ui';
+  import { colorTheme } from '$lib/stores/preferences.store';
 
   interface Props {
     showUploadButton?: boolean;
@@ -43,6 +44,8 @@
   onMount(async () => {
     aboutInfo = await getAboutInfo();
   });
+
+  let isDark = $derived($colorTheme.value === Theme.DARK);
 </script>
 
 <svelte:window bind:innerWidth />
@@ -57,7 +60,7 @@
     class="grid h-full grid-cols-[theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
   >
     <a data-sveltekit-preload-data="hover" class="ml-4" href={AppRoute.PHOTOS}>
-      <ImmichLogo width="55%" noText={innerWidth < 768} />
+      <Logo variant={innerWidth < 768 ? 'icon' : 'inline'} theme={isDark ? 'dark' : 'light'} />
     </a>
     <div class="flex justify-between gap-4 lg:gap-8 pr-6">
       <div class="hidden w-full max-w-5xl flex-1 tall:pl-0 sm:block">

diff --git a/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte b/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
+  import { Button } from '@immich/ui';
   import { AssetTypeEnum, type SmartSearchDto, type MetadataSearchDto } from '@immich/sdk';
   import SearchPeopleSection from './search-people-section.svelte';
   import SearchLocationSection from './search-location-section.svelte';
@@ -163,7 +163,7 @@
   </form>
 
   {#snippet stickyBottom()}
-    <Button type="reset" color="gray" fullwidth form={formId}>{$t('clear_all')}</Button>
-    <Button type="submit" fullwidth form={formId}>{$t('search')}</Button>
+    <Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}>{$t('clear_all')}</Button>
+    <Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button>
   {/snippet}
 </FullScreenModal>