ui: add page for add new Users
This commit is contained in:
parent
30a6ade9f6
commit
9ab79b2778
@ -10,19 +10,19 @@
|
||||
@apply text-base text-black;
|
||||
}
|
||||
.h1 {
|
||||
@apply text-4xl font-semibold;
|
||||
@apply text-3xl xl:text-4xl font-semibold;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
@apply text-3xl font-semibold;
|
||||
@apply text-2xl xl:text-3xl font-semibold;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@apply text-2xl font-medium;
|
||||
@apply text-xl xl:text-2xl font-medium;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
@apply text-xl font-medium;
|
||||
@apply text-lg xl:text-xl font-medium;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
@ -45,7 +45,7 @@
|
||||
@layer components {
|
||||
.btn {
|
||||
@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;
|
||||
}
|
||||
|
||||
|
@ -35,13 +35,13 @@
|
||||
|
||||
|
||||
<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">
|
||||
Users & Access Management
|
||||
</h1>
|
||||
|
||||
<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>
|
||||
|
||||
@ -63,7 +63,11 @@
|
||||
<tbody class="divide-y divide-gray-200 bg-white text-gray-500">
|
||||
{#each users as user}
|
||||
<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">
|
||||
{#if user.role.toLowerCase() === "administrator"}
|
||||
|
70
apps/front/src/routes/admin/1/add/+page.svelte
Normal file
70
apps/front/src/routes/admin/1/add/+page.svelte
Normal 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>
|
@ -25,8 +25,8 @@
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 bg-white text-gray-500">
|
||||
<tr>
|
||||
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
|
||||
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
||||
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 sm:pl-6">
|
||||
<a href="/schedule/1/edit/" class="text-black hover:underline">South entrance weekends</a>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4">
|
||||
17:00
|
||||
|
Loading…
Reference in New Issue
Block a user