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

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

Hide file tree

Showing 12 changed files with 299 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": "^0.7.0",
     "@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>