immich/web/src/lib/components/forms/create-user-form.svelte

<script lang="ts">
  import { serverInfo } from '$lib/stores/server-info.store';
  import { convertToBytes } from '$lib/utils/byte-converter';
  import { handleError } from '$lib/utils/handle-error';
  import { createUser } from '@immich/sdk';
  import { createEventDispatcher } from 'svelte';
  import Button from '../elements/buttons/button.svelte';
  import ImmichLogo from '../shared-components/immich-logo.svelte';
  import PasswordField from '../shared-components/password-field.svelte';
  import Slider from '../elements/slider.svelte';

  let error: string;
  let success: string;

  let email = '';
  let password = '';
  let confirmPassword = '';
  let name = '';
  let shouldChangePassword = true;

  let canCreateUser = false;
  let quotaSize: number | undefined;
  let isCreatingUser = false;

  $: quotaSizeInBytes = quotaSize ? convertToBytes(quotaSize, 'GiB') : null;
  $: quotaSizeWarning = quotaSizeInBytes && quotaSizeInBytes > $serverInfo.diskSizeRaw;

  $: {
    if (password !== confirmPassword && confirmPassword.length > 0) {
      error = 'Password does not match';
      canCreateUser = false;
    } else {
      error = '';
      canCreateUser = true;
    }
  }
  const dispatch = createEventDispatcher<{
    submit: void;
    cancel: void;
  }>();

  async function registerUser() {
    if (canCreateUser && !isCreatingUser) {
      isCreatingUser = true;
      error = '';

      try {
        await createUser({
          createUserDto: {
            email,
            password,
            shouldChangePassword,
            name,
            quotaSizeInBytes,
          },
        });

        success = 'New user created';

        dispatch('submit');

        return;
      } catch (error) {
        handleError(error, 'Unable to create user');
      } finally {
        isCreatingUser = false;
      }
    }
  }
</script>

<div
  class="max-h-screen w-[500px] max-w-[95vw] overflow-y-auto immich-scrollbar rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
  <div class="flex flex-col place-content-center place-items-center gap-4 px-4">
    <ImmichLogo noText class="text-center" height="75" width="75" />
    <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Create new user</h1>
  </div>

  <form on:submit|preventDefault={registerUser} autocomplete="off">
    <div class="m-4 flex flex-col gap-2">
      <label class="immich-form-label" for="email">Email</label>
      <input class="immich-form-input" id="email" bind:value={email} type="email" required />
    </div>

    <div class="m-4 flex flex-col gap-2">
      <label class="immich-form-label" for="password">Password</label>
      <PasswordField id="password" bind:password autocomplete="new-password" />
    </div>

    <div class="m-4 flex flex-col gap-2">
      <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
      <PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
    </div>

    <div class="m-4 flex place-items-center justify-between gap-2">
      <label class="text-sm dark:text-immich-dark-fg" for="Require user to change password on first login">
        Require user to change password on first login
      </label>
      <Slider bind:checked={shouldChangePassword} />
    </div>

    <div class="m-4 flex flex-col gap-2">
      <label class="immich-form-label" for="name">Name</label>
      <input class="immich-form-input" id="name" bind:value={name} type="text" required />
    </div>

    <div class="m-4 flex flex-col gap-2">
      <label class="flex items-center gap-2 immich-form-label" for="quotaSize">
        Quota Size (GiB)
        {#if quotaSizeWarning}
          <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
        {/if}
      </label>
      <input class="immich-form-input" id="quotaSize" type="number" min="0" bind:value={quotaSize} />
    </div>

    {#if error}
      <p class="ml-4 text-sm text-red-400">{error}</p>
    {/if}

    {#if success}
      <p class="ml-4 text-sm text-immich-primary">{success}</p>
    {/if}
    <div class="flex w-full gap-4 p-4">
      <Button color="gray" fullwidth on:click={() => dispatch('cancel')}>Cancel</Button>
      <Button type="submit" disabled={isCreatingUser} fullwidth>Create</Button>
    </div>
  </form>
</div>