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

ui: add page for add new Users

Browse Source
This commit is contained in:
Eirene 2024-07-30 22:36:11 +08:00
parent 30a6ade9f6
commit 9ab79b2778
4 changed files with 84 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,19 +10,19 @@
@apply text-base text-black; @apply text-base text-black;
} }
.h1 { .h1 {
@apply text-4xl font-semibold; @apply text-3xl xl:text-4xl font-semibold;
} }
.h2 { .h2 {
@apply text-3xl font-semibold; @apply text-2xl xl:text-3xl font-semibold;
} }
.h3 { .h3 {
@apply text-2xl font-medium; @apply text-xl xl:text-2xl font-medium;
} }
.h4 { .h4 {
@apply text-xl font-medium; @apply text-lg xl:text-xl font-medium;
} }
.h5 { .h5 {
@ -45,7 +45,7 @@
@layer components { @layer components {
.btn { .btn {
@apply cursor-pointer flex items-center justify-center gap-2; @apply cursor-pointer flex items-center justify-center gap-2;
@apply rounded-primary px-6 h-12 text-white; @apply rounded-primary px-6 h-12 text-white whitespace-nowrap;
@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2; @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
} }

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

@ -35,13 +35,13 @@
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto"> <section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
<div class="flex items-center"> <div class="flex items-center gap-2">
<h1 class="h1"> <h1 class="h1">
Users & Access Management Users & Access Management
</h1> </h1>
<div class="ml-auto"> <div class="ml-auto">
<button type="button" class="btn btn-primary">Add user</button> <a href="/admin/1/add/" class="btn btn-primary">Add user</a>
</div> </div>
</div> </div>
@ -63,7 +63,11 @@
<tbody class="divide-y divide-gray-200 bg-white text-gray-500"> <tbody class="divide-y divide-gray-200 bg-white text-gray-500">
{#each users as user} {#each users as user}
<tr> <tr>
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">{user.name}</td> <td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 sm:pl-6">
<a href="/admin/1/edit/" class="text-black hover:underline">
{user.name}
</a>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm">{user.username}</td> <td class="whitespace-nowrap px-3 py-4 text-sm">{user.username}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm"> <td class="whitespace-nowrap px-3 py-4 text-sm">
{#if user.role.toLowerCase() === "administrator"} {#if user.role.toLowerCase() === "administrator"}

70
apps/front/src/routes/admin/1/add/+page.svelte Normal file
View File

@ -0,0 +1,70 @@
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
<h1 class="h1">
Add new user
</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="">
</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="">
</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="">
</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="">
</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">
<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/+page.svelte
View File

@ -25,8 +25,8 @@
</thead> </thead>
<tbody class="divide-y divide-gray-200 bg-white text-gray-500"> <tbody class="divide-y divide-gray-200 bg-white text-gray-500">
<tr> <tr>
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6"> <td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 sm:pl-6">
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a> <a href="/schedule/1/edit/" class="text-black hover:underline">South entrance weekends</a>
</td> </td>
<td class="whitespace-nowrap px-3 py-4"> <td class="whitespace-nowrap px-3 py-4">
17:00 17:00