From 80c1250ec7e748c784a5fadfaa778305d7ce09e0 Mon Sep 17 00:00:00 2001 From: core Date: Tue, 26 Sep 2023 00:13:00 -0400 Subject: [PATCH] role add, edit, main page --- tfweb/src/components/AdminBar.svelte | 12 -- tfweb/src/components/AdminLayout.svelte | 53 ++++++ tfweb/src/components/LoadingWrapper.svelte | 17 +- tfweb/src/lib/i18n/locales/en.json | 16 +- tfweb/src/routes/+layout.svelte | 6 +- tfweb/src/routes/hosts/+page.svelte | 7 +- tfweb/src/routes/roles/+page.svelte | 70 ++++---- .../routes/roles/[role_id]/edit/+page.svelte | 156 ++++++++++------ tfweb/src/routes/roles/add/+page.svelte | 167 ++++++++++++------ 9 files changed, 336 insertions(+), 168 deletions(-) delete mode 100644 tfweb/src/components/AdminBar.svelte create mode 100644 tfweb/src/components/AdminLayout.svelte diff --git a/tfweb/src/components/AdminBar.svelte b/tfweb/src/components/AdminBar.svelte deleted file mode 100644 index 11c3651..0000000 --- a/tfweb/src/components/AdminBar.svelte +++ /dev/null @@ -1,12 +0,0 @@ - - -
- - - - -
\ No newline at end of file diff --git a/tfweb/src/components/AdminLayout.svelte b/tfweb/src/components/AdminLayout.svelte new file mode 100644 index 0000000..e2d5052 --- /dev/null +++ b/tfweb/src/components/AdminLayout.svelte @@ -0,0 +1,53 @@ + + +
+
+

+ + Trifid +

+
+ + +
+
+ +
+ +
+
+ +
+
diff --git a/tfweb/src/components/LoadingWrapper.svelte b/tfweb/src/components/LoadingWrapper.svelte index 6f61cd6..965c1d9 100644 --- a/tfweb/src/components/LoadingWrapper.svelte +++ b/tfweb/src/components/LoadingWrapper.svelte @@ -1,5 +1,6 @@ {#if isLoading} -

its loading

+
+
+
+

{$t("common.loading")}

+
+
+
{:else} {#if isError} -

error: {error}

+
+
+
+

{error}

+
+
+
{:else} {/if} diff --git a/tfweb/src/lib/i18n/locales/en.json b/tfweb/src/lib/i18n/locales/en.json index d0f5a85..15ec33c 100644 --- a/tfweb/src/lib/i18n/locales/en.json +++ b/tfweb/src/lib/i18n/locales/en.json @@ -91,9 +91,8 @@ "rules": "Rule count", "description": "Description", "actions": "Actions", - "editbtn": "Edit", - "delete": "Delete", "add": { + "title": "Create Role", "any": "Any", "name": "Role name", "desc": "Role description", @@ -105,10 +104,9 @@ "description": "Description", "protocol": "Protocol", "portrange": "Port range", - "allowedrole": "Allowed role" + "allowedrole": "Allowed role", + "actions": "Actions" }, - "ruleremove": "Remove rule", - "ruleedit": "Edit rule", "rulesadd": "Add rule", "editrule": { "protocol": "Protocol", @@ -118,9 +116,13 @@ "add": "Add rule", "edit": "Save edit", "cancel": "Cancel" + }, + "error": { + "needsname": "Role Name is required" } }, "edit": { + "title": "Editing rule {rule}", "any": "Any", "name": "Role name", "desc": "Role description", @@ -162,6 +164,8 @@ "roles": "Roles", "lighthouses": "Lighthouses", "relays": "Relays" - } + }, + "logout": "Log out", + "loading": "Dashboard is loading" } } diff --git a/tfweb/src/routes/+layout.svelte b/tfweb/src/routes/+layout.svelte index 16632dd..c28cee0 100644 --- a/tfweb/src/routes/+layout.svelte +++ b/tfweb/src/routes/+layout.svelte @@ -2,10 +2,14 @@ import "bootswatch/dist/darkly/bootstrap.css"; import "@fortawesome/fontawesome-free/css/all.css"; import "@fortawesome/fontawesome-free/js/all.js"; + import "@popperjs/core"; import {onMount} from "svelte"; onMount(async () => { - await import("bootstrap/dist/js/bootstrap.js"); + const bootstrap = await import("bootstrap/dist/js/bootstrap.js"); + + const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') + const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) }) diff --git a/tfweb/src/routes/hosts/+page.svelte b/tfweb/src/routes/hosts/+page.svelte index df8df94..60c2949 100644 --- a/tfweb/src/routes/hosts/+page.svelte +++ b/tfweb/src/routes/hosts/+page.svelte @@ -7,7 +7,7 @@ import type {APIError} from "$lib/auth.ts"; import {PUBLIC_BASE_URL} from "$env/static/public"; import {Configuration, NetworksApi} from "$lib/api"; - import AdminBar from "$components/AdminBar.svelte"; + import AdminLayout from "$components/AdminLayout.svelte"; let loading = true; let isError = false; @@ -72,6 +72,7 @@ - -

its not loading anymore

+ +

{$t("common.page.hosts")}

+ diff --git a/tfweb/src/routes/roles/+page.svelte b/tfweb/src/routes/roles/+page.svelte index 0cfe0c4..5a18fdd 100644 --- a/tfweb/src/routes/roles/+page.svelte +++ b/tfweb/src/routes/roles/+page.svelte @@ -7,7 +7,7 @@ import type {APIError} from "$lib/auth.ts"; import {PUBLIC_BASE_URL} from "$env/static/public"; import {Configuration, NetworksApi, RolesApi} from "$lib/api"; - import AdminBar from "$components/AdminBar.svelte"; + import AdminLayout from "$components/AdminLayout.svelte"; let loading = true; let isError = false; @@ -100,38 +100,46 @@ - + +
+

{$t("common.page.roles")}

+
-

{$t("common.page.roles")}

- +

{$t("roles.explain")}

-

{$t("roles.explain")}

- - {#if (roles.data.length === 0)} -

{$t("roles.noroles")}

- {:else} - - - - - - - - {#each roles.data as role} + {#if (roles.data.length === 0)} +

{$t("roles.noroles")}

+ {:else} +
{$t("roles.name")}{$t("roles.rules")}{$t("roles.description")}{$t("roles.actions")}
+ - - - - + + + + - {/each} -
- - {role.name} - - {role.firewallRules.length}{role.description} - - - {$t("roles.name")}{$t("roles.rules")}{$t("roles.description")}{$t("roles.actions")}
- {/if} + + + {#each roles.data as role} + + + + {role.name} + + + {role.firewallRules.length} + {role.description} + +
+ + +
+ + + + {/each} + + + {/if} + diff --git a/tfweb/src/routes/roles/[role_id]/edit/+page.svelte b/tfweb/src/routes/roles/[role_id]/edit/+page.svelte index 332b079..1bf8423 100644 --- a/tfweb/src/routes/roles/[role_id]/edit/+page.svelte +++ b/tfweb/src/routes/roles/[role_id]/edit/+page.svelte @@ -8,8 +8,9 @@ import {PUBLIC_BASE_URL} from "$env/static/public"; import {Configuration, NetworksApi, RolesApi, FirewallRuleProtocolEnum} from "$lib/api"; import type {FirewallRule} from "$lib/api"; - import AdminBar from "$components/AdminBar.svelte"; + import AdminBar from "$components/AdminLayout.svelte"; import {page} from "$app/stores"; + import AdminLayout from "$components/AdminLayout.svelte"; let loading = true; let isError = false; @@ -24,6 +25,8 @@ let roleName = ''; let roleDescription = ''; + let formErr = ''; + let hasFormErr = false; enum RuleProtocol { ANY = 0, @@ -211,6 +214,7 @@ } async function roleEdit() { + loading = true; const configuration = new Configuration({ basePath: PUBLIC_BASE_URL, accessToken: window.localStorage.getItem("session") + " " + window.localStorage.getItem("mfa") @@ -346,66 +350,106 @@ - + +

{$t("roles.edit.title", {values: {rule: roleName}})}

+
+ + +
+
{$t("roles.edit.rules")}
+

{$t("roles.edit.rulesexplainer")}

- - - - - -

{$t("roles.edit.rules")}

-

{$t("roles.edit.rulesexplainer")}

- - - - - - - - - - {#each rules as rule} + +
{$t("roles.edit.rulescols.description")}{$t("roles.edit.rulescols.protocol")}{$t("roles.edit.rulescols.portrange")}{$t("roles.edit.rulescols.allowedrole")}
+ - - - - - - + + + + + - {/each} -
{rule.description}{protoToStringName(rule.protocol)}{prettyPortRange(rule.portRange)}{findRole(rule.allowedRole)}{$t("roles.edit.rulescols.description")}{$t("roles.edit.rulescols.protocol")}{$t("roles.edit.rulescols.portrange")}{$t("roles.edit.rulescols.allowedrole")}{$t("roles.edit.rulescols.actions")}
+ + + {#each rules as rule} + + {rule.description} + {protoToStringName(rule.protocol)} + {prettyPortRange(rule.portRange)} + {findRole(rule.allowedRole)} + +
+ + +
+ + + {/each} + - + - {#if isEditingRule} - - - - - - - - - - - -
- {/if} + {#if isEditingRule} +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ {/if} -
+
- - - + + +
+ + {#if loading} + + {:else} + + {/if} + + + {#if hasFormErr} +

{formErr}

+ {/if} + + diff --git a/tfweb/src/routes/roles/add/+page.svelte b/tfweb/src/routes/roles/add/+page.svelte index 2d1d9d4..e0597a6 100644 --- a/tfweb/src/routes/roles/add/+page.svelte +++ b/tfweb/src/routes/roles/add/+page.svelte @@ -8,18 +8,22 @@ import {PUBLIC_BASE_URL} from "$env/static/public"; import {Configuration, NetworksApi, RolesApi, FirewallRuleProtocolEnum} from "$lib/api"; import type {FirewallRule} from "$lib/api"; - import AdminBar from "$components/AdminBar.svelte"; + import AdminBar from "$components/AdminLayout.svelte"; + import AdminLayout from "$components/AdminLayout.svelte"; let loading = true; let isError = false; let error = ''; - $: currentlyLoading = $isLoading || loading; + $: currentlyLoading = $isLoading; logSetup(); let logger = new Logger("roles/add/+page.svelte"); let roles; + let formErr = ''; + let hasFormErr = false; + onMount(async () => { let session_load_info = await isAuthedSession(); if (session_load_info[0] == APIResult.Failed) { @@ -267,6 +271,13 @@ } async function roleAdd() { + hasFormErr = false; + loading = true; + if (roleName == undefined || roleName == "" || roleName == " ") { + hasFormErr = true; + formErr = $t("roles.add.error.needsname"); + } + const configuration = new Configuration({ basePath: PUBLIC_BASE_URL, accessToken: window.localStorage.getItem("session") + " " + window.localStorage.getItem("mfa") @@ -299,66 +310,108 @@ - + +

{$t("roles.add.title")}

+
+ + + + +
+
{$t("roles.add.rules")}
+

{$t("roles.add.rulesexplainer")}

- - - - - -

{$t("roles.add.rules")}

-

{$t("roles.add.rulesexplainer")}

- - - - - - - - - - {#each rules as rule} + +
{$t("roles.add.rulescols.description")}{$t("roles.add.rulescols.protocol")}{$t("roles.add.rulescols.portrange")}{$t("roles.add.rulescols.allowedrole")}
+ - - - - - - + + + + + - {/each} -
{rule.description}{protoToStringName(rule.protocol)}{prettyPortRange(rule.portRange)}{findRole(rule.allowedRole)}{$t("roles.add.rulescols.description")}{$t("roles.add.rulescols.protocol")}{$t("roles.add.rulescols.portrange")}{$t("roles.add.rulescols.allowedrole")}{$t("roles.add.rulescols.actions")}
+ + + {#each rules as rule} + + {rule.description} + {protoToStringName(rule.protocol)} + {prettyPortRange(rule.portRange)} + {findRole(rule.allowedRole)} + +
+ + +
+ + + {/each} + - + - {#if isEditingRule} - - - - - - - - - - - -
- {/if} + {#if isEditingRule} +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ {/if} -
+
- - - + + +
+ + {#if loading} + + {:else} + + {/if} + + + {#if hasFormErr} +

{formErr}

+ {/if} + +