dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

ui: redesign a lot

Browse Source
This commit is contained in:
Andras Bacsai
2022-08-09 15:28:26 +00:00
parent 839e8179fe
commit 4049af6220
46 changed files with 625 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/ui/src/routes/iam/index.svelte
View File

@@ -28,7 +28,7 @@
import { del, get, post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
import { goto } from '$app/navigation';
import Cookies from 'js-cookie';
if (accounts.length === 0) {
@@ -42,7 +42,10 @@
}
try {
await post(`/iam/user/password`, { id });
toast.push('Password reset successfully. Please relogin to reset it.');
return addToast({
message: 'Password reset successfully. Please relogin to reset it.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -54,7 +57,10 @@
}
try {
await del(`/iam/user/remove`, { id });
toast.push('Account deleted.');
addToast({
message: 'Account deleted.',
type: 'success'
});
const data = await get('/iam');
accounts = data.accounts;
} catch (error) {
@@ -104,21 +110,24 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
<div on:click={newTeam} class="add-icon cursor-pointer bg-fuchsia-600 hover:bg-fuchsia-500">
<svg
class="w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
<button
on:click={newTeam}
class="btn btn-square btn-sm bg-iam"
>
</div>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
>
</button>
</div>
{#if invitations.length > 0}
@@ -132,11 +141,11 @@
<span class="font-bold text-rose-600">{invitation.permission}</span> permission.
</div>
<button
class="hover:bg-green-500"
class="btn btn-sm btn-success"
on:click={() => acceptInvitation(invitation.id, invitation.teamId)}>Accept</button
>
<button
class="hover:bg-red-600"
class="btn btn-sm btn-error"
on:click={() => revokeInvitation(invitation.id, invitation.teamId)}>Delete</button
>
</div>
@@ -168,14 +177,14 @@
<td class="flex space-x-2">
<form on:submit|preventDefault={() => resetPassword(account.id)}>
<button
class="mx-auto my-4 w-32 bg-fuchsia-600 hover:bg-fuchsia-500 disabled:bg-coolgray-200"
class="my-4 btn btn-sm bg-iam"
>Reset Password</button
>
</form>
<form on:submit|preventDefault={() => deleteUser(account.id)}>
<button
disabled={account.id === $appSession.userId}
class="mx-auto my-4 w-32 bg-red-600 hover:bg-red-500 disabled:bg-coolgray-200"
class="my-4 btn btn-sm"
type="submit">Delete User</button
>
</form>

14
apps/ui/src/routes/iam/team/[id]/index.svelte
View File

@@ -91,7 +91,7 @@
<form on:submit|preventDefault={handleSubmit} class=" py-4">
<div class="flex space-x-1 pb-5">
<div class="title font-bold">{$t('index.settings')}</div>
<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit">{$t('forms.save')}</button>
<button class="btn btn-sm bg-iam" type="submit">{$t('forms.save')}</button>
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-2">
@@ -130,11 +130,11 @@
{#if $appSession.isAdmin && permission.user.id !== $appSession.userId && permission.permission !== 'owner'}
<td class="flex flex-col items-center justify-center space-y-2 py-4 text-center">
<button
class="w-52 bg-red-600 hover:bg-red-500"
class="btn btn-sm btn-error"
on:click={() => removeFromTeam(permission.user.id)}>{$t('forms.remove')}</button
>
<button
class="w-52"
class="btn btn-sm"
on:click={() =>
changePermission(permission.user.id, permission.id, permission.permission)}
>{$t('team.promote_to', {
@@ -157,7 +157,7 @@
{#if isAdmin(team.permissions[0].permission)}
<td class="flex-col space-y-2 py-4 text-center">
<button
class="w-52 bg-red-600 hover:bg-red-500"
class="btn btn-sm btn-error"
on:click={() => revokeInvitation(invitation.id)}
>{$t('team.revoke_invitation')}</button
>
@@ -174,7 +174,7 @@
<div class="flex space-x-1">
<div class="flex space-x-1">
<div class="title font-bold">{$t('team.invite_new_member')}</div>
<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit"
<button class="btn btn-sm bg-iam" type="submit"
>{$t('team.send_invitation')}</button
>
</div>
@@ -191,14 +191,14 @@
<div class="flex-1" />
<button
on:click={() => (invitation.permission = 'read')}
class="rounded-none rounded-l border border-dashed border-transparent"
class="px-2 rounded-none rounded-l border border-dashed border-transparent"
type="button"
class:border-coolgray-300={invitation.permission !== 'read'}
class:bg-fuchsia-500={invitation.permission === 'read'}>{$t('team.read')}</button
>
<button
on:click={() => (invitation.permission = 'admin')}
class="rounded-none rounded-r border border-dashed border-transparent"
class="px-2 rounded-none rounded-r border border-dashed border-transparent"
type="button"
class:border-coolgray-300={invitation.permission !== 'admin'}
class:bg-red-500={invitation.permission === 'admin'}>{$t('team.admin')}</button