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

* feat: add immich-ui to auth pages * fix: welcome icon * styling * fix: mobile padding --------- Co-authored-by: Alex Tran <[email protected]>
paulpham157 · Jan 14, 2025 · b9000d8 · b9000d8
1 parent 073fccb
commit b9000d8
Show file tree

Hide file tree

Showing 13 changed files with 345 additions and 262 deletions.
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
@@ -71,6 +71,7 @@ services:
       - ../web:/usr/src/app
       - ../i18n:/usr/src/i18n
       - ../open-api/:/usr/src/open-api/
+      # - ../../ui:/usr/ui
       - /usr/src/app/node_modules
     ulimits:
       nofile:

diff --git a/docs/docs/developer/setup.md b/docs/docs/developer/setup.md
@@ -63,6 +63,17 @@ If you only want to do web development connected to an existing, remote backend,
 IMMICH_SERVER_URL=https://demo.immich.app/ npm run dev
 ```
 
+#### `@immich/ui`
+
+To see local changes to `@immich/ui` in Immich, do the following:
+
+1. Install `@immich/ui` as a sibling to `immich/`, for example `/home/user/immich` and `/home/user/ui`
+1. Build the `@immich/ui` project via `npm run build`
+1. Uncomment the corresponding volume in web service of the `docker/docker-compose.dev.yaml` file (`../../ui:/usr/ui`)
+1. Uncomment the corresponding alias in the `web/vite.config.js` file (`'@immich/ui': path.resolve(\_\_dirname, '../../ui')`)
+1. Start up the stack via `make dev`
+1. After making changes in `@immich/ui`, rebuild it (`npm run build`)
+
 ### Mobile app
 
 The mobile app `(/mobile)` will required Flutter toolchain 3.13.x to be installed on your system.

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -67,6 +67,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
+    "@immich/ui": "^0.11.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

diff --git 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 {

diff --git 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>
diff --git 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);

diff --git 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>

diff --git 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>
diff --git 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}