From f840e0624fa843701e72691b39e98582cd4e3f32 Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 16 Jul 2022 20:13:48 +1000
Subject: [PATCH] refactor: split out edit user component

---
 src/lib/common/apiFunctions.svelte |  24 ++---
 src/lib/index/EditUser.svelte      |  65 +++++++++++++
 src/lib/index/UserCard.svelte      | 141 +++++++++--------------------
 3 files changed, 115 insertions(+), 115 deletions(-)
 create mode 100644 src/lib/index/EditUser.svelte

diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte
index 3d5ad33..592428d 100644
--- a/src/lib/common/apiFunctions.svelte
+++ b/src/lib/common/apiFunctions.svelte
@@ -1,5 +1,6 @@
 <script context="module" lang="ts">
 import { Device, User } from "$lib/common/classes";
+import { alertStore } from "$lib/common/stores.js";
 
 	export async function getUsers(): Promise<any> {
 		// variables in local storage
@@ -25,8 +26,7 @@ import { Device, User } from "$lib/common/classes";
 					// return the api data
 					headscaleUsersResponse = response;
 				} else {
-					response.text().then(text => { console.error(text) })
-					throw new Error(response.status + " when trying to generate user list. " );
+					return response.text().then(text => { throw JSON.parse(text).message });
 				}
 			})
 			.catch((error) => {
@@ -58,8 +58,7 @@ import { Device, User } from "$lib/common/classes";
 				if (response.ok) {
 					return response
 				} else {
-					response.text().then(text => { console.error(text) })
-					throw new Error(response.status + " when trying to edit user. " );
+					return response.text().then(text => { throw JSON.parse(text).message });
 				}
 			})
 			.catch((error) => {
@@ -86,8 +85,7 @@ import { Device, User } from "$lib/common/classes";
 				if (response.ok) {
 					return response
 				} else {
-					response.text().then(text => { console.error(text) })
-					throw new Error(response.status + " when trying to delete user. Are all assoicated devices removed? ");
+					return response.text().then(text => { throw JSON.parse(text).message });
 				}
 			})
 			.catch((error) => {
@@ -117,8 +115,7 @@ import { Device, User } from "$lib/common/classes";
 				if (response.ok) {
 					return response
 				} else {
-					response.text().then(text => { console.error(text) })
-					throw new Error(response.status + " when trying to create user. " );
+					return response.text().then(text => { throw JSON.parse(text).message });
 				}
 			})
 			.catch((error) => {
@@ -150,8 +147,7 @@ import { Device, User } from "$lib/common/classes";
 					// return the api data
 					headscaleDeviceResponse = response;
 				} else {
-					response.text().then(text => { console.error(text) })
-					throw new Error(response.status + " when trying to generate device list. " );
+					return response.text().then(text => { throw JSON.parse(text).message });
 				}
 			})
 			.catch((error) => {
@@ -183,8 +179,7 @@ import { Device, User } from "$lib/common/classes";
 				if (response.ok) {
 					return response
 				} else {
-					response.text().then(text => { console.error(text) })
-					throw new Error(response.status + " when trying to create device. " );
+					return response.text().then(text => { throw JSON.parse(text).message });
 				}
 			})
 			.catch((error) => {
@@ -197,7 +192,7 @@ import { Device, User } from "$lib/common/classes";
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
 
-		// endpoint url for editing users
+		// endpoint url for removing devices
 		let endpointURL = '/api/v1/machine/' + deviceID;
 
 		await fetch(headscaleURL + endpointURL, {
@@ -211,8 +206,7 @@ import { Device, User } from "$lib/common/classes";
 				if (response.ok) {
 					return response
 				} else {
-					response.text().then(text => { console.error(text) })
-					throw new Error(response.status + " when trying to delete machine.");
+					return response.text().then(text => { throw JSON.parse(text).message });
 				}
 			})
 			.catch((error) => {
diff --git a/src/lib/index/EditUser.svelte b/src/lib/index/EditUser.svelte
new file mode 100644
index 0000000..af15466
--- /dev/null
+++ b/src/lib/index/EditUser.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { fade, slide } from 'svelte/transition';
+	import { getUsers, editUser } from '$lib/common/apiFunctions.svelte';
+	import { headscaleUserStore, alertStore } from '$lib/common/stores.js';
+	import { User } from '$lib/common/classes';
+
+	let cardEditing = false;
+	let editUserForm: HTMLFormElement;
+	let newUserName = '';
+	export let user = new User();
+
+	function editingUser() {
+		cardEditing = true;
+		newUserName = user.name;
+	}
+
+	function editUserAction() {
+		if (editUserForm.reportValidity()) {
+			editUser(user.name, newUserName)
+				.then((response) => {
+					cardEditing = false;
+					// refresh users after editing
+					getUsers()
+						.then((users) => {
+							$headscaleUserStore = users;
+						})
+						.catch((error) => {
+							$alertStore = error;
+						});
+				})
+				.catch((error) => {
+					$alertStore = error;
+				});
+		} else {
+			$alertStore = 'Use lower case letters, periods, or dashes only';
+		}
+	}
+</script>
+
+{#if !cardEditing}
+	<span class="font-bold">{user.id}: {user.name}</span>
+  <!-- edit symbol -->
+	<button type="button" on:click|stopPropagation={() => editingUser()} class=""
+		><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+		</svg></button
+	>
+{:else}
+	<form bind:this={editUserForm} on:submit|preventDefault={editUserAction}>
+		<!-- Input has to be lower case, but we will force lower case on submit -->
+		<input in:slide on:click|stopPropagation bind:value={newUserName} class="card-input mb-1 lowercase" required pattern="[a-zA-Z\-\.]+" placeholder="name" />
+    <!-- edit accept symbol -->
+	<button in:fade on:click|stopPropagation={editUserAction} class=""
+  ><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg></button
+>
+<!-- edit cancel symbol -->
+<button type="button" in:fade on:click|stopPropagation={() => (cardEditing = false)} class=""
+  ><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg></button
+>
+	</form>
+{/if}
\ No newline at end of file
diff --git a/src/lib/index/UserCard.svelte b/src/lib/index/UserCard.svelte
index 4dce694..5fc332d 100644
--- a/src/lib/index/UserCard.svelte
+++ b/src/lib/index/UserCard.svelte
@@ -1,44 +1,14 @@
 <script lang="ts">
 	import { fade, slide } from 'svelte/transition';
 	import { headscaleUserStore, alertStore } from '$lib/common/stores.js';
-	import { getUsers, editUser, removeUser } from '$lib/common/apiFunctions.svelte';
+	import { getUsers, removeUser } from '$lib/common/apiFunctions.svelte';
+	import EditUser from '$lib/index/EditUser.svelte';
 	import { User } from '$lib/common/classes';
 
 	// function for refreshing users from parent
 	export let user = new User();
 	let cardExpanded = false;
-	let cardEditing = false;
 	let cardDeleting = false;
-	let editUserForm: HTMLFormElement;
-	let newUserName = '';
-
-	function editingUser() {
-		// cardExpanded = true;
-		cardEditing = true;
-		newUserName = user.name;
-	}
-
-	function editUserAction() {
-		if (editUserForm.reportValidity()) {
-			editUser(user.name, newUserName)
-				.then((response) => {
-					cardEditing = false;
-					// refresh users after editing
-					getUsers()
-						.then((users) => {
-							$headscaleUserStore = users;
-						})
-						.catch((error) => {
-							$alertStore = error;
-						});
-				})
-				.catch((error) => {
-					$alertStore = error;
-				});
-		} else {
-			$alertStore = 'Use lower case letters, periods, or dashes only';
-		}
-	}
 
 	function removeUserAction() {
 		removeUser(user.name)
@@ -61,76 +31,47 @@
 
 <div in:fade class="card-primary">
 	<div on:click={() => (cardExpanded = !cardExpanded)} class="flex justify-between">
-		{#if !cardEditing}
-			<span class="font-bold">{user.id}: {user.name}</span>
-		{:else}
-			<form bind:this={editUserForm} on:submit|preventDefault={editUserAction}>
-				<!-- Input has to be lower case, but we will force lower case on submit -->
-				<input on:click|stopPropagation bind:value={newUserName} class="card-input mb-1 lowercase" required pattern="[a-zA-Z\-\.]+" placeholder="name" />
-			</form>
-		{/if}
 		<div>
-			{#if !cardDeleting}
-				{#if !cardEditing}
-					<!-- edit symbol -->
-					<button on:click|stopPropagation={() => editingUser()} class="mr-4"
-						><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-						</svg></button
-					>
-				{:else}
-					<!-- edit accept symbol -->
-					<button in:fade on:click|stopPropagation={editUserAction} class="mr-4"
-						><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-						</svg></button
-					>
-					<!-- edit cancel symbol -->
-					<button in:fade on:click|stopPropagation={() => (cardEditing = false)} class="mr-4"
-						><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-						</svg></button
-					>
-				{/if}
-			{/if}
-
-			{#if !cardDeleting}
-				<!-- Delete trash symbol -->
-				<button on:click|stopPropagation={() => (cardDeleting = true)} class="mr-4"
-					><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-					</svg></button
-				>
-			{:else}
-				<!-- Delete Warning -->
-				<span in:fade class="font-bold text-red-400">Deleting {user.name}. Confirm </span>
-				<!-- Delete confirm symbol -->
-				<button in:fade on:click|stopPropagation={() => removeUserAction()}
-					><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-					</svg></button
-				>
-				<span in:fade class="font-bold text-red-400">or Cancel </span>
-				<!-- Delete cancel symbol -->
-				<button in:fade on:click|stopPropagation={() => (cardDeleting = false)} class="mr-4"
-					><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-					</svg></button
-				>
-			{/if}
-			<!-- chevron for expanding -->
-			<button>
-				{#if !cardExpanded}
-					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-					</svg>
-				{:else}
-					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
-					</svg>
-				{/if}
-			</button>
+			<EditUser {user} />
 		</div>
+		<div>
+		{#if !cardDeleting}
+			<!-- Delete trash symbol -->
+			<button on:click|stopPropagation={() => (cardDeleting = true)} class="mr-4"
+				><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+				</svg></button
+			>
+		{:else}
+			<!-- Delete Warning -->
+			<span in:fade class="font-bold text-red-400">Deleting {user.name}. Confirm </span>
+			<!-- Delete confirm symbol -->
+			<button in:fade on:click|stopPropagation={() => removeUserAction()}
+				><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+				</svg></button
+			>
+			<span in:fade class="font-bold text-red-400">or Cancel </span>
+			<!-- Delete cancel symbol -->
+			<button in:fade on:click|stopPropagation={() => (cardDeleting = false)} class="mr-4"
+				><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+				</svg></button
+			>
+		{/if}
+		<!-- chevron for expanding -->
+		<button>
+			{#if !cardExpanded}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+				</svg>
+			{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+				</svg>
+			{/if}
+		</button>
+	</div>
 	</div>
 	{#if cardExpanded}
 		<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->