mirror of
https://github.com/gurucomputing/headscale-ui.git
synced 2026-07-25 08:54:03 +00:00
refactor: split out edit user component
This commit is contained in:
Christopher Bisset
parent
bf8070789c
commit
f840e0624f
3 changed files with 115 additions and 115 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
65
src/lib/index/EditUser.svelte
Normal file
65
src/lib/index/EditUser.svelte
Normal file
|
|
@ -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}
|
||||
|
|
@ -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 -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue