Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-01-23 02:34:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add ability to edit username

Browse source
This commit is contained in:
Chris Bisset 2025-07-12 01:14:06 +00:00
parent 29ea542ec8
commit bb830156f3
5 changed files with 678 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

1029
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -13,10 +13,10 @@
"stage": "/usr/bin/caddy run --adapter caddyfile --config ./caddyfile"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^5",
"@sveltejs/adapter-auto": "^6",
"@sveltejs/adapter-static": "^3.0.6",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@sveltejs/vite-plugin-svelte": "^6",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/postcss": "^4.0.15",
"@tailwindcss/typography": "^0.5.16",
@ -29,6 +29,6 @@
"svelte-check": "^4.0.0",
"tailwindcss": "^4.0.15",
"typescript": "^5.0.0",
"vite": "^6.0.3"
"vite": "^7"
}
}

14
src/lib/components/users/user-cards-functions.svelte
View file

@ -1,6 +1,6 @@
<script module lang="ts">
import { persistentAppSettings, appSettings } from '../common/state.svelte';
import { newToastAlert } from '../layout/toast-functions.svelte';
import { persistentAppSettings, appSettings } from '$lib/components/common/state.svelte';
import { newToastAlert } from '$lib/components/layout/toast-functions.svelte';
export async function getUsers() {
try {
@ -12,12 +12,12 @@
}
});
if (!response.ok) {
newToastAlert(`API test failed (check your server settings): ${response.status}`);
appSettings.apiTested = false;
} else {
appSettings.users = (await response.json()).users;
if (response.ok) {
appSettings.users = (await response.json()).users;
appSettings.apiTested = true;
} else {
newToastAlert(`API test failed (check your server settings): ${response.status}`);
appSettings.apiTested = false;
}
} catch (error) {
let message: string;

35
src/lib/components/users/user-cards/user-card/username-functions.svelte
View file

@ -0,0 +1,35 @@
<script module lang="ts">
import { persistentAppSettings, appSettings } from '$lib/components/common/state.svelte';
import { newToastAlert } from '$lib/components/layout/toast-functions.svelte';
import type { user } from '$lib/components/common/classes.svelte';
import { getUsers } from '../../user-cards-functions.svelte';
export async function setUsername(user: user, newName: string) {
try {
const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/user/${user.id}/rename/${newName}`, {
method: 'POST',
headers: {
Authorization: `Bearer ${persistentAppSettings.headscaleAPIKey}`,
'Content-Type': 'application/json'
}
// body: JSON.stringify({
// })
});
if (response.ok) {
getUsers();
} else {
newToastAlert(`${response.status}`);
}
} catch (error) {
let message: string;
if (error instanceof Error) {
message = error.message;
} else {
message = String(error);
}
newToastAlert(`API test failed (check your server settings): ${message}`);
appSettings.apiTested = false;
}
}
</script>

50
src/lib/components/users/user-cards/user-card/username.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import type { user } from '$lib/components/common/classes.svelte';
import { user } from '$lib/components/common/classes.svelte';
import { setUsername } from './username-functions.svelte';
interface Props {
userCard: user;
@ -12,11 +13,12 @@
<strong class="flex">
{#if !editUsername}
<span class="mt-0.5">{userCard.name}</span>
<span class="mt-0.5">{userCard.name}</span>
<button
class="btn btn-ghost btn-xs btn-square ml-2"
onclick={() => {
editUsername = true;
newUsername = userCard.name;
}}
>
<!-- edit icon -->
@ -25,24 +27,32 @@
</svg>
</button>
{:else}
<input class="input input-sm lowercase" placeholder="name" bind:value={newUsername} />
<button class="btn btn-ghost btn-sm btn-square ml-2">
<!-- confirm icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
<form class="flex">
<input class="input input-sm lowercase" placeholder="name" bind:value={newUsername} />
<button
class="btn btn-ghost btn-sm btn-square ml-2"
onclick={() => {
editUsername = false;
setUsername(userCard, newUsername);
}}
>
<!-- confirm icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
<button
class="btn btn-ghost btn-sm btn-square"
onclick={() => {
editUsername = false;
}}
>
<!-- cancel icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
<button
class="btn btn-ghost btn-sm btn-square"
onclick={() => {
editUsername = false;
}}
>
<!-- cancel icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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}
</strong>