c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

Fixed error handling with catch block

Browse source
This commit is contained in:
Alex Tran 2022-08-12 22:29:24 -05:00
parent a388c5a642
commit 87d2a954a3
No known key found for this signature in database
GPG key ID: E4954BC787B85C8A
1 changed files with 101 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

184
web/src/lib/components/forms/edit-user-form.svelte
View file

@ -1,103 +1,121 @@
<script lang="ts"> <script lang="ts">
import { api, UserResponseDto } from '@api'; import { api, UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte'; import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte';
export let user: UserResponseDto; export let user: UserResponseDto;
let error: string; let error: string;
let success: string; let success: string;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const editUser = async (event: SubmitEvent) => { const editUser = async (event: SubmitEvent) => {
try {
const formElement = event.target as HTMLFormElement;
const form = new FormData(formElement);
const formElement = event.target as HTMLFormElement; const firstName = form.get('firstName');
const form = new FormData(formElement); const lastName = form.get('lastName');
const firstName = form.get('firstName'); const { status } = await api.userApi.updateUser({
const lastName = form.get('lastName'); 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({ const resetPassword = async () => {
id: user.id, try {
firstName: firstName.toString(), if (window.confirm('Do you want to reset the user password?')) {
lastName: lastName.toString() const defaultPassword = 'password';
}).catch(e => console.log("Error updating user ", e));
if (status == 200) { const { status } = await api.userApi.updateUser({
dispatch('edit-success'); id: user.id,
} password: defaultPassword,
} shouldChangePassword: true
});
const resetPassword = async () => { if (status == 200) {
const defaultPassword = 'password' dispatch('reset-password-success');
}
const {status} = await api.userApi.updateUser({ }
id: user.id, } catch (e) {
password: defaultPassword, console.log('Error reseting user password', e);
shouldChangePassword: true, }
};
}).catch(e => console.log("Error updating user ", e));
if (status == 200) {
dispatch('reset-password-success');
}
}
</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"> <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"/>--> <!-- <img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo"/>-->
<AccountEditOutline size="4em" color="#4250affe"/> <AccountEditOutline size="4em" color="#4250affe" />
<h1 class="text-2xl text-immich-primary font-medium">Edit user</h1> <h1 class="text-2xl text-immich-primary font-medium">Edit user</h1>
</div> </div>
<form on:submit|preventDefault={editUser} autocomplete="off"> <form on:submit|preventDefault={editUser} autocomplete="off">
<div class="m-4 flex flex-col gap-2"> <div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="email">Email <label class="immich-form-label" for="email">Email (cannot change)</label>
(cannot change)</label> <input
<input class="immich-form-input disabled:bg-gray-200 hover:cursor-not-allowed" class="immich-form-input disabled:bg-gray-200 hover:cursor-not-allowed"
id="email" name="email" id="email"
type="email" disabled name="email"
bind:value={user.email}/> type="email"
</div> 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"> <div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="firstName">First Name</label> <label class="immich-form-label" for="lastName">Last Name</label>
<input class="immich-form-input" id="firstName" name="firstName" type="text" required <input
bind:value={user.firstName}/> class="immich-form-input"
</div> id="lastName"
name="lastName"
type="text"
required
bind:value={user.lastName}
/>
</div>
<div class="m-4 flex flex-col gap-2"> {#if error}
<label class="immich-form-label" for="lastName">Last Name</label> <p class="text-red-400 ml-4 text-sm">{error}</p>
<input class="immich-form-input" id="lastName" name="lastName" type="text" required {/if}
bind:value={user.lastName}/>
</div>
{#if success}
{#if error} <p class="text-immich-primary ml-4 text-sm">{success}</p>
<p class="text-red-400 ml-4 text-sm">{error}</p> {/if}
{/if} <div class="flex w-full px-4 gap-4 mt-8">
<button
{#if success} on:click={resetPassword}
<p class="text-immich-primary ml-4 text-sm">{success}</p> class="flex-1 transition-colors bg-[#F9DEDC] hover:bg-red-50 text-[#410E0B] px-6 py-3 rounded-full w-full font-medium"
{/if} >Reset password
<div class="flex w-full px-4 gap-4 mt-8"> </button>
<button on:click={resetPassword} <button
class="flex-1 transition-colors bg-[#F9DEDC] hover:bg-red-50 text-[#410E0B] px-6 py-3 rounded-full w-full font-medium" 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"
>Reset password >Confirm
</button </button>
> </div>
<button </form>
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> </div>