210 feature request show user names not just usernames (#211)

* fix: display email if username is too short

* feat: added email field to expanded cards

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "headscale-ui",
-	"version": "2025.03.21",
+	"version": "2025.07.12",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "headscale-ui",
-			"version": "2025.03.21",
+			"version": "2025.07.12",
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^4",
 				"@sveltejs/adapter-static": "^3",

src/lib/common/classes.ts

@@ -56,6 +56,7 @@ export class PreAuthKey {
 export class User {
 	public id: string = '';
 	public name: string = '';
+	public email: string = '';
 	public createdAt: string = '';
 	public constructor(init?: Partial<User>) {
 		Object.assign(this, init);

src/lib/devices/CreateDevice.svelte

@@ -65,7 +65,7 @@
 						<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 $userStore as user}
-								<option>{user.name}</option>
+								<option>{user.name.length > 1 ? user.name : user.email}</option>
 							{/each}
 						</select>
 					</div>

src/lib/devices/DeviceCard/MoveDevice.svelte

@@ -39,7 +39,7 @@
 		<form on:submit|preventDefault={moveDeviceAction}>
 			<select class="card-select mr-3" required bind:value={selectedUser}>
 				{#each $userStore as user}
-					<option value={user.id}>{user.name}</option>
+					<option value={user.id}>{user.name.length > 1 ? user.name : user.email}</option>
 				{/each}
 			</select>
 			<!-- edit accept symbol -->

src/lib/users/UserCard.svelte

@@ -39,6 +39,10 @@
 			<div class="overflow-x-auto">
 				<table class="table table-compact w-full">
 					<tbody>
+						<tr>
+							<th>Email</th>
+							<td>{user.email}</td>
+						</tr>
 						<tr>
 							<th>User Creation Date</th>
 							<td>{new Date(user.createdAt)}</td>

src/lib/users/UserCard/RenameUser.svelte

@@ -32,7 +32,7 @@
 </script>
 
 {#if !cardEditing}
-	<span class="font-bold">{user.id}: {user.name}</span>
+	<span class="font-bold">{user.id}: {user.name.length > 1 ? user.name : user.email}</span>
   <!-- edit symbol -->
 	<button type="button" on:click|stopPropagation={() => editingUser()} class="ml-2"
 		><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">