spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: add page for edit Users & Access Management

Browse Source
This commit is contained in:
Eirene 2024-07-30 21:18:35 +08:00
parent 379968156e
commit 30a6ade9f6
4 changed files with 88 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/front/src/app.css
View File

@ -52,6 +52,9 @@
.btn-primary {
@apply bg-primary text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
}
.btn-danger{
@apply border border-red-600 text-red-600 hover:bg-red-700 hover:text-red-50 focus-visible:outline-red-700;
}
.input{
@apply block w-full h-12 rounded-primary border border-gray-300 text-gray-900;
@ -59,6 +62,16 @@
@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
}
.select{
@apply input;
}
.textarea{
@apply block w-full min-h-24 rounded-primary border border-gray-300 text-gray-900;
@apply placeholder:text-gray-500;
@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
}
.label{
@apply block text-black text-sm;
}

2
apps/front/src/routes/admin/+page.svelte
View File

@ -77,7 +77,7 @@
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm"></td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
<a href="/" class="text-primary hover:underline">Edit<span class="sr-only">, {user.name}</span></a>
<a href="/admin/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, {user.name}</span></a>
</td>
</tr>
{/each}

72
apps/front/src/routes/admin/1/edit/+page.svelte Normal file
View File

@ -0,0 +1,72 @@
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
<h1 class="h1">
Edit
</h1>
<div class="space-y-10 divide-y divide-gray-900/10">
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<div class="px-4 py-6 sm:p-8">
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-2">
<label for="first-name" class="label">First Name</label>
<div class="mt-2">
<input type="text" name="name1" id="first-name" autocomplete="given-name"
class="input" value="Lindsay">
</div>
</div>
<div class="sm:col-span-2">
<label for="last-name" class="label">Last Name</label>
<div class="mt-2">
<input type="text" name="name" id="last-name" autocomplete="given-name"
class="input" value="Walton">
</div>
</div>
<div class="sm:col-span-2 sm:col-start-1">
<label for="username" class="label">Username</label>
<div class="mt-2">
<input type="text" name="username" id="username" autocomplete="username"
class="input" value="leslie.alexander">
</div>
</div>
<div class="sm:col-span-2">
<label for="password" class="label">Password</label>
<div class="mt-2">
<input type="password" name="password" id="password" autocomplete="given-name"
class="input" value="slfj832849JSDF!#38">
</div>
</div>
<div class="sm:col-span-4 sm:col-start-1">
<label for="role" class="label">Role</label>
<div class="mt-2">
<select id="role" name="role" class="select">
<option>Administrator</option>
<option>Operator</option>
<option selected>Viewer</option>
<option>User</option>
</select>
</div>
</div>
<div class="sm:col-span-4 sm:col-start-1">
<label for="comment" class="label">Comment</label>
<div class="mt-2">
<textarea id="comment" class="textarea"></textarea>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-end gap-x-4 border-t border-gray-900/10 px-4 py-4 sm:px-8">
<button type="button" class="btn btn-danger mr-auto">Delete</button>
<a href="/admin" class="btn text-purple-600">Cancel</a>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</section>

4
apps/front/src/routes/schedule/1/edit/+page.svelte
View File

@ -9,7 +9,7 @@ const handleToggle = (newStatus: boolean) => {
};
</script>
<section class="space-y-4 lg:space-y-8">
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
<h1 class="h1">
Edit
</h1>
@ -17,7 +17,7 @@ const handleToggle = (newStatus: boolean) => {
<div class="space-y-10 divide-y divide-gray-900/10">
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<div class="px-4 py-6 sm:p-8">
<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-5">
<label for="first-name" class="label">Name</label>
<div class="mt-2">