Fixed error handling with catch block
This commit is contained in:
Alex Tran
parent
a388c5a642
commit
87d2a954a3
1 changed files with 101 additions and 83 deletions
|
|
@ -1,103 +1,121 @@
|
|||
<script lang="ts">
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let user: UserResponseDto;
|
||||
|
||||
let error: string;
|
||||
let success: string;
|
||||
let error: string;
|
||||
let success: string;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const editUser = async (event: SubmitEvent) => {
|
||||
// eslint-disable-next-line no-undef
|
||||
const editUser = async (event: SubmitEvent) => {
|
||||
try {
|
||||
const formElement = event.target as HTMLFormElement;
|
||||
const form = new FormData(formElement);
|
||||
|
||||
const formElement = event.target as HTMLFormElement;
|
||||
const form = new FormData(formElement);
|
||||
const firstName = form.get('firstName');
|
||||
const lastName = form.get('lastName');
|
||||
|
||||
const firstName = form.get('firstName');
|
||||
const lastName = form.get('lastName');
|
||||
const { status } = await api.userApi.updateUser({
|
||||
id: user.id,
|
||||
firstName: firstName!.toString(),
|
||||
lastName: lastName!.toString()
|
||||
});
|
||||
|
||||
if (status == 200) {
|
||||
dispatch('edit-success');
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Error updating user ', e);
|
||||
}
|
||||
};
|
||||
|
||||
const {status} = await api.userApi.updateUser({
|
||||
id: user.id,
|
||||
firstName: firstName.toString(),
|
||||
lastName: lastName.toString()
|
||||
}).catch(e => console.log("Error updating user ", e));
|
||||
const resetPassword = async () => {
|
||||
try {
|
||||
if (window.confirm('Do you want to reset the user password?')) {
|
||||
const defaultPassword = 'password';
|
||||
|
||||
if (status == 200) {
|
||||
dispatch('edit-success');
|
||||
}
|
||||
}
|
||||
const { status } = await api.userApi.updateUser({
|
||||
id: user.id,
|
||||
password: defaultPassword,
|
||||
shouldChangePassword: true
|
||||
});
|
||||
|
||||
const resetPassword = async () => {
|
||||
const defaultPassword = 'password'
|
||||
|
||||
const {status} = await api.userApi.updateUser({
|
||||
id: user.id,
|
||||
password: defaultPassword,
|
||||
shouldChangePassword: true,
|
||||
|
||||
}).catch(e => console.log("Error updating user ", e));
|
||||
|
||||
if (status == 200) {
|
||||
dispatch('reset-password-success');
|
||||
}
|
||||
}
|
||||
if (status == 200) {
|
||||
dispatch('reset-password-success');
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Error reseting user password', e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<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"/>-->
|
||||
<AccountEditOutline size="4em" color="#4250affe"/>
|
||||
<h1 class="text-2xl text-immich-primary font-medium">Edit user</h1>
|
||||
</div>
|
||||
<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"/>-->
|
||||
<AccountEditOutline size="4em" color="#4250affe" />
|
||||
<h1 class="text-2xl text-immich-primary font-medium">Edit user</h1>
|
||||
</div>
|
||||
|
||||
<form on:submit|preventDefault={editUser} autocomplete="off">
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="email">Email
|
||||
(cannot change)</label>
|
||||
<input class="immich-form-input disabled:bg-gray-200 hover:cursor-not-allowed"
|
||||
id="email" name="email"
|
||||
type="email" disabled
|
||||
bind:value={user.email}/>
|
||||
</div>
|
||||
<form on:submit|preventDefault={editUser} autocomplete="off">
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="email">Email (cannot change)</label>
|
||||
<input
|
||||
class="immich-form-input disabled:bg-gray-200 hover:cursor-not-allowed"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
disabled
|
||||
bind:value={user.email}
|
||||
/>
|
||||
</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
|
||||
bind:value={user.firstName}
|
||||
/>
|
||||
</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
|
||||
bind:value={user.firstName}/>
|
||||
</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
|
||||
bind:value={user.lastName}
|
||||
/>
|
||||
</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
|
||||
bind:value={user.lastName}/>
|
||||
</div>
|
||||
{#if error}
|
||||
<p class="text-red-400 ml-4 text-sm">{error}</p>
|
||||
{/if}
|
||||
|
||||
|
||||
{#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 px-4 gap-4 mt-8">
|
||||
<button on:click={resetPassword}
|
||||
class="flex-1 transition-colors bg-[#F9DEDC] hover:bg-red-50 text-[#410E0B] px-6 py-3 rounded-full w-full font-medium"
|
||||
|
||||
>Reset password
|
||||
</button
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="flex-1 transition-colors bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
|
||||
>Confirm
|
||||
</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
{#if success}
|
||||
<p class="text-immich-primary ml-4 text-sm">{success}</p>
|
||||
{/if}
|
||||
<div class="flex w-full px-4 gap-4 mt-8">
|
||||
<button
|
||||
on:click={resetPassword}
|
||||
class="flex-1 transition-colors bg-[#F9DEDC] hover:bg-red-50 text-[#410E0B] px-6 py-3 rounded-full w-full font-medium"
|
||||
>Reset password
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="flex-1 transition-colors bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
|
||||
>Confirm
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue