From 87d2a954a31975a192970aa507e300b159a6aa54 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Fri, 12 Aug 2022 22:29:24 -0500
Subject: [PATCH] Fixed error handling with catch block

---
 .../components/forms/edit-user-form.svelte    | 184 ++++++++++--------
 1 file changed, 101 insertions(+), 83 deletions(-)

diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index 83b2a4ba7..d881e3570 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -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>