|
@@ -1,122 +1,121 @@
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
- import { api } from '@api';
|
|
|
|
- import { createEventDispatcher } from 'svelte';
|
|
|
|
-
|
|
|
|
- let error: string;
|
|
|
|
- let success: string;
|
|
|
|
-
|
|
|
|
- let password = '';
|
|
|
|
- let confirmPassowrd = '';
|
|
|
|
-
|
|
|
|
- let canCreateUser = false;
|
|
|
|
-
|
|
|
|
- $: {
|
|
|
|
- if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
|
|
|
|
- error = 'Password does not match';
|
|
|
|
- canCreateUser = false;
|
|
|
|
- } else {
|
|
|
|
- error = '';
|
|
|
|
- canCreateUser = true;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- const dispatch = createEventDispatcher();
|
|
|
|
-
|
|
|
|
- async function registerUser(event: SubmitEvent) {
|
|
|
|
- if (canCreateUser) {
|
|
|
|
- error = '';
|
|
|
|
-
|
|
|
|
- const formElement = event.target as HTMLFormElement;
|
|
|
|
-
|
|
|
|
- const form = new FormData(formElement);
|
|
|
|
-
|
|
|
|
- const email = form.get('email');
|
|
|
|
- const password = form.get('password');
|
|
|
|
- const firstName = form.get('firstName');
|
|
|
|
- const lastName = form.get('lastName');
|
|
|
|
-
|
|
|
|
- const {status} = await api.userApi.createUser({
|
|
|
|
- email: String(email),
|
|
|
|
- password: String(password),
|
|
|
|
- firstName: String(firstName),
|
|
|
|
- lastName: String(lastName)
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- if (status === 201) {
|
|
|
|
- success = 'New user created';
|
|
|
|
-
|
|
|
|
- dispatch('user-created');
|
|
|
|
- return;
|
|
|
|
- } else {
|
|
|
|
- error = 'Error create user account';
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ import { api } from '@api';
|
|
|
|
+ import { createEventDispatcher } from 'svelte';
|
|
|
|
+
|
|
|
|
+ let error: string;
|
|
|
|
+ let success: string;
|
|
|
|
+
|
|
|
|
+ let password = '';
|
|
|
|
+ let confirmPassowrd = '';
|
|
|
|
+
|
|
|
|
+ let canCreateUser = false;
|
|
|
|
+
|
|
|
|
+ $: {
|
|
|
|
+ if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
|
|
|
|
+ error = 'Password does not match';
|
|
|
|
+ canCreateUser = false;
|
|
|
|
+ } else {
|
|
|
|
+ error = '';
|
|
|
|
+ canCreateUser = true;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ const dispatch = createEventDispatcher();
|
|
|
|
+
|
|
|
|
+ async function registerUser(event: SubmitEvent) {
|
|
|
|
+ if (canCreateUser) {
|
|
|
|
+ error = '';
|
|
|
|
+
|
|
|
|
+ const formElement = event.target as HTMLFormElement;
|
|
|
|
+
|
|
|
|
+ const form = new FormData(formElement);
|
|
|
|
+
|
|
|
|
+ const email = form.get('email');
|
|
|
|
+ const password = form.get('password');
|
|
|
|
+ const firstName = form.get('firstName');
|
|
|
|
+ const lastName = form.get('lastName');
|
|
|
|
+
|
|
|
|
+ const { status } = await api.userApi.createUser({
|
|
|
|
+ email: String(email),
|
|
|
|
+ password: String(password),
|
|
|
|
+ firstName: String(firstName),
|
|
|
|
+ lastName: String(lastName)
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ if (status === 201) {
|
|
|
|
+ success = 'New user created';
|
|
|
|
+
|
|
|
|
+ dispatch('user-created');
|
|
|
|
+ return;
|
|
|
|
+ } else {
|
|
|
|
+ error = 'Error create user account';
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<div class="border bg-white p-4 shadow-sm w-[500px] rounded-3xl py-8">
|
|
<div class="border bg-white p-4 shadow-sm w-[500px] rounded-3xl py-8">
|
|
- <div class="flex flex-col place-items-center place-content-center gap-4 px-4">
|
|
|
|
- <img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo"/>
|
|
|
|
- <h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
|
|
|
|
- <p class="text-sm border rounded-md p-4 font-mono text-gray-600">
|
|
|
|
- Please provide your user with the password, they will have to change it on their first sign
|
|
|
|
- in.
|
|
|
|
- </p>
|
|
|
|
- </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" name="email" type="email" required/>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="m-4 flex flex-col gap-2">
|
|
|
|
- <label class="immich-form-label" for="password">Password</label>
|
|
|
|
- <input
|
|
|
|
- class="immich-form-input"
|
|
|
|
- id="password"
|
|
|
|
- name="password"
|
|
|
|
- type="password"
|
|
|
|
- required
|
|
|
|
- bind:value={password}
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="m-4 flex flex-col gap-2">
|
|
|
|
- <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
|
|
|
|
- <input
|
|
|
|
- class="immich-form-input"
|
|
|
|
- id="confirmPassword"
|
|
|
|
- name="password"
|
|
|
|
- type="password"
|
|
|
|
- required
|
|
|
|
- bind:value={confirmPassowrd}
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="m-4 flex flex-col gap-2">
|
|
|
|
- <label class="immich-form-label" for="firstName">First Name</label>
|
|
|
|
- <input class="immich-form-input" id="firstName" name="firstName" type="text" required/>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="m-4 flex flex-col gap-2">
|
|
|
|
- <label class="immich-form-label" for="lastName">Last Name</label>
|
|
|
|
- <input class="immich-form-input" id="lastName" name="lastName" type="text" required/>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- {#if error}
|
|
|
|
- <p class="text-red-400 ml-4 text-sm">{error}</p>
|
|
|
|
- {/if}
|
|
|
|
-
|
|
|
|
- {#if success}
|
|
|
|
- <p class="text-immich-primary ml-4 text-sm">{success}</p>
|
|
|
|
- {/if}
|
|
|
|
- <div class="flex w-full">
|
|
|
|
- <button
|
|
|
|
- type="submit"
|
|
|
|
- class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
|
|
|
|
- >Create
|
|
|
|
- </button
|
|
|
|
- >
|
|
|
|
- </div>
|
|
|
|
- </form>
|
|
|
|
|
|
+ <div class="flex flex-col place-items-center place-content-center gap-4 px-4">
|
|
|
|
+ <img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
|
|
|
|
+ <h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
|
|
|
|
+ <p class="text-sm border rounded-md p-4 font-mono text-gray-600">
|
|
|
|
+ Please provide your user with the password, they will have to change it on their first sign
|
|
|
|
+ in.
|
|
|
|
+ </p>
|
|
|
|
+ </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" name="email" type="email" required />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="m-4 flex flex-col gap-2">
|
|
|
|
+ <label class="immich-form-label" for="password">Password</label>
|
|
|
|
+ <input
|
|
|
|
+ class="immich-form-input"
|
|
|
|
+ id="password"
|
|
|
|
+ name="password"
|
|
|
|
+ type="password"
|
|
|
|
+ required
|
|
|
|
+ bind:value={password}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="m-4 flex flex-col gap-2">
|
|
|
|
+ <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
|
|
|
|
+ <input
|
|
|
|
+ class="immich-form-input"
|
|
|
|
+ id="confirmPassword"
|
|
|
|
+ name="password"
|
|
|
|
+ type="password"
|
|
|
|
+ required
|
|
|
|
+ bind:value={confirmPassowrd}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="m-4 flex flex-col gap-2">
|
|
|
|
+ <label class="immich-form-label" for="firstName">First Name</label>
|
|
|
|
+ <input class="immich-form-input" id="firstName" name="firstName" type="text" required />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="m-4 flex flex-col gap-2">
|
|
|
|
+ <label class="immich-form-label" for="lastName">Last Name</label>
|
|
|
|
+ <input class="immich-form-input" id="lastName" name="lastName" type="text" required />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {#if error}
|
|
|
|
+ <p class="text-red-400 ml-4 text-sm">{error}</p>
|
|
|
|
+ {/if}
|
|
|
|
+
|
|
|
|
+ {#if success}
|
|
|
|
+ <p class="text-immich-primary ml-4 text-sm">{success}</p>
|
|
|
|
+ {/if}
|
|
|
|
+ <div class="flex w-full">
|
|
|
|
+ <button
|
|
|
|
+ type="submit"
|
|
|
|
+ class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
|
|
|
|
+ >Create
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
+ </form>
|
|
</div>
|
|
</div>
|