From e4c54df362d208ea6c0a58f514cb770b887acd2f Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 16 Jul 2022 17:41:07 +1000
Subject: [PATCH] formatted additional details as table

---
 src/lib/devices/CreateDevice.svelte | 22 +++++++++++-----------
 src/lib/devices/DeviceCard.svelte   | 29 +++++++++++++++++++++++++----
 src/lib/index/UserCard.svelte       | 11 ++++++++++-
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/lib/devices/CreateDevice.svelte b/src/lib/devices/CreateDevice.svelte
index d85e03d..47eecfe 100644
--- a/src/lib/devices/CreateDevice.svelte
+++ b/src/lib/devices/CreateDevice.svelte
@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { headscaleUserStore, headscaleDeviceStore } from '$lib/common/stores';
 	import { getDevices, newDevice } from '$lib/common/apiFunctions.svelte';
-	import { alertStore } from '$lib/common/stores.js'
+	import { alertStore } from '$lib/common/stores.js';
 
 	// whether the new card html element is visible
 	let newDeviceCardVisible = false;
@@ -35,7 +35,6 @@
 			$alertStore = 'provide a valid key';
 		}
 	}
-
 </script>
 
 <!-- html -->
@@ -49,7 +48,6 @@
 </div>
 
 {#if newDeviceCardVisible == true}
-
 	<div in:fade out:fade={{ duration: newDeviceCardVisible ? 0 : 500 }} class="p-2 max-w-screen-lg border border-dashed border-base-content mx-4 rounded-md text-sm text-base-content shadow mb-10">
 		<div class="tabs">
 			{#each tabs as tab, index}
@@ -59,19 +57,16 @@
 		<!-- Default Configuration -->
 		{#if activeTab == 0}
 			<div in:fade class="m-2">
-				<p>Install Tailscale with the client pointing to your domain (see <a target="_blank" class="link link-primary" href="https://github.com/juanfont/headscale/tree/main/docs">headscale client documentation</a>). Log in using the tray icon, and your browser should give you instructions with a key. Copy the key below:</p>
-				<div class="mockup-code m-2">
-					<pre><code>headscale -n NAMESPACE nodes register --key &lt;your device key&gt;</code></pre>
-				</div>
+				<p>Install Tailscale with the client pointing to your domain (see <a target="_blank" class="link link-primary" href="https://github.com/juanfont/headscale/tree/main/docs">headscale client documentation</a>). Log in using the tray icon, and your browser should give you instructions with a key.</p>
+				<div class="m-2"><code>headscale -n NAMESPACE nodes register --key &lt;your device key&gt;</code></div>
+				<div class = "my-2"><p>Copy the key below:</p></div>
 				<form class="flex flex-wrap" bind:this={newDeviceForm} on:submit|preventDefault={newDeviceAction}>
 					<div class="flex-none mr-4">
 						<label class="block text-secondary text-sm font-bold mb-2" for="text">Device Key</label>
 						<input bind:value={newDeviceKey} minlength="54" class="card-input" type="text" required placeholder="******************" />
 					</div>
 					<div class="flex-none">
-						<label class="block text-secondary text-sm font-bold mb-2" for="select"
-							>Select User</label
-						>
+						<label class="block text-secondary text-sm font-bold mb-2" for="select">Select User</label>
 						<select class="card-select mr-3" required bind:value={selectedUser}>
 							{#each $headscaleUserStore as user}
 								<option>{user.name}</option>
@@ -84,7 +79,12 @@
 								<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
 						>
-						<button on:click={() => {newDeviceCardVisible = false; newDeviceKey = ''}} type="button"
+						<button
+							on:click={() => {
+								newDeviceCardVisible = false;
+								newDeviceKey = '';
+							}}
+							type="button"
 							><svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-1 inline rounded-full hover:bg-gray-300" 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
diff --git a/src/lib/devices/DeviceCard.svelte b/src/lib/devices/DeviceCard.svelte
index 2942ab4..8458fe7 100644
--- a/src/lib/devices/DeviceCard.svelte
+++ b/src/lib/devices/DeviceCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Device } from '$lib/common/classes';
 	import { fade, slide } from 'svelte/transition';
-	
+
 	export let device = new Device();
 	let cardExpanded = false;
 </script>
@@ -24,9 +24,30 @@
 	{#if cardExpanded}
 		<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->
 		<div in:slide out:slide={{ duration: cardExpanded ? 0 : 500 }} class="pt-2 pl-2">
-			<p><span class="font-bold">Device Last Seen: </span><span class="font-normal">{new Date(device.lastSeen)}</span></p>
-			<p><span class="font-bold">IP Addresses: </span><span class="font-normal">{device.ipAddresses}</span></p>
-			<p><span class="font-bold">Assigned User: </span><span class="font-normal">{device.namespace.name}</span></p>
+			<div class="overflow-x-auto">
+				<table class="table table-compact w-full">
+					<tbody>
+						<tr>
+							<th>Device Last Seen</th>
+							<td>{new Date(device.lastSeen)}</td>
+						</tr>
+						<tr>
+							<th>IP Addresses</th>
+							<td>
+								<ul>
+									{#each device.ipAddresses as address}
+										<li>{address}</li>
+									{/each}
+								</ul>
+							</td>
+						</tr>
+						<tr>
+							<th>Assigned User</th>
+							<td>{device.namespace.name}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
 		</div>
 	{/if}
 </div>
diff --git a/src/lib/index/UserCard.svelte b/src/lib/index/UserCard.svelte
index e45d6fa..4dce694 100644
--- a/src/lib/index/UserCard.svelte
+++ b/src/lib/index/UserCard.svelte
@@ -135,7 +135,16 @@
 	{#if cardExpanded}
 		<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->
 		<div in:slide out:slide={{ duration: cardExpanded ? 0 : 500 }} class="pt-2 pl-2">
-			<span class="font-bold">User Created: </span><span class="font-normal">{new Date(user.createdAt)}</span>
+			<div class="overflow-x-auto">
+				<table class="table table-compact w-full">
+					<tbody>
+						<tr>
+							<th>User Creation Date</th>
+							<td>{new Date(user.createdAt)}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
 		</div>
 	{/if}
 </div>