From 585bec1a2a3d135d5fec4f3fc5881fedf07edeb7 Mon Sep 17 00:00:00 2001 From: core Date: Tue, 10 Oct 2023 14:51:18 -0400 Subject: [PATCH] UI work --- tfweb/src/components/Sidebar.svelte | 2 +- tfweb/src/lib/Tooltips.js | 17 ++ tfweb/src/lib/i18n/locales/en.json | 32 --- tfweb/src/lib/i18n/locales/en/hosts.json | 10 + tfweb/src/lib/i18n/locales/en/roles.json | 2 + tfweb/src/lib/i18n/locales/nl.json | 223 ------------------ tfweb/src/lib/i18n/translations.ts | 12 +- tfweb/src/routes/+layout.svelte | 9 +- tfweb/src/routes/+layout.ts | 14 +- tfweb/src/routes/hosts/+page.svelte | 18 +- .../routes/hosts/[host_id]/block/+page.svelte | 136 +++++++++++ tfweb/src/routes/roles/+page.svelte | 6 +- 12 files changed, 204 insertions(+), 277 deletions(-) create mode 100644 tfweb/src/lib/Tooltips.js delete mode 100644 tfweb/src/lib/i18n/locales/en.json delete mode 100644 tfweb/src/lib/i18n/locales/nl.json create mode 100644 tfweb/src/routes/hosts/[host_id]/block/+page.svelte diff --git a/tfweb/src/components/Sidebar.svelte b/tfweb/src/components/Sidebar.svelte index 2e88804..21d5a23 100644 --- a/tfweb/src/components/Sidebar.svelte +++ b/tfweb/src/components/Sidebar.svelte @@ -39,7 +39,7 @@
- diff --git a/tfweb/src/lib/Tooltips.js b/tfweb/src/lib/Tooltips.js new file mode 100644 index 0000000..1501f7d --- /dev/null +++ b/tfweb/src/lib/Tooltips.js @@ -0,0 +1,17 @@ +import {browser} from "$app/environment"; + +export function updateTooltips() { + if (browser) { + setTimeout(() => { + const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') + const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => { + let tooltip = new document.B.Tooltip(tooltipTriggerEl, {trigger: 'hover'}) + tooltipTriggerEl.addEventListener('click', () => { + tooltip.hide(); + tooltip.dispose(); + }) + }); + console.log(tooltipList); + }); + } +} diff --git a/tfweb/src/lib/i18n/locales/en.json b/tfweb/src/lib/i18n/locales/en.json deleted file mode 100644 index 3239234..0000000 --- a/tfweb/src/lib/i18n/locales/en.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "itworks": { - - }, - "login": { - - }, - "signup": { - - }, - "ml": { - - }, - "2fasetup": { - - }, - "2fa": { - - }, - "networkcreate": { - - }, - "hosts": { - - }, - "roles": { - - }, - "common": { - - } -} diff --git a/tfweb/src/lib/i18n/locales/en/hosts.json b/tfweb/src/lib/i18n/locales/en/hosts.json index 1bd2cd3..8897e3e 100644 --- a/tfweb/src/lib/i18n/locales/en/hosts.json +++ b/tfweb/src/lib/i18n/locales/en/hosts.json @@ -7,6 +7,7 @@ "edit": "Edit", "enrollbtn": "Enroll", "deletehost": "Delete", + "blockhost": "Block", "config": "Configuration", "add": "Add", "create": { @@ -37,5 +38,14 @@ "error": { "ERR_DB_ERROR": "Removal failed" } + }, + "block": { + "title": "Are you sure you want to block the host {{host}}?", + "explainer": "The host will not be able to connect to the network once it is blocked. Re-enroll this host to unblock it.", + "confirm": "I'm sure", + "cancel": "Nevermind", + "error": { + "ERR_DB_ERROR": "Block failed" + } } } diff --git a/tfweb/src/lib/i18n/locales/en/roles.json b/tfweb/src/lib/i18n/locales/en/roles.json index 1772561..4096c34 100644 --- a/tfweb/src/lib/i18n/locales/en/roles.json +++ b/tfweb/src/lib/i18n/locales/en/roles.json @@ -15,6 +15,8 @@ "rules": "Rule count", "description": "Description", "actions": "Actions", + "editrole": "Edit", + "deleterole": "Delete", "add": { "title": "Create Role", "any": "Any", diff --git a/tfweb/src/lib/i18n/locales/nl.json b/tfweb/src/lib/i18n/locales/nl.json deleted file mode 100644 index a0736be..0000000 --- a/tfweb/src/lib/i18n/locales/nl.json +++ /dev/null @@ -1,223 +0,0 @@ -{ - "itworks": { - "header": "Het werkt!", - "body": "Als u deze pagina ziet, is tfweb geïnstalleerd en (waarschijnlijk) correct geconfigureerd.", - "linkbody": "Misschien wilde je het {link0} of {link1}?", - "linkbody.link0": "beheerdersdashboard bezoeken", - "linkbody.link1": "een account aanmaken" - }, - "login": { - "title": "Log in to your account", - "subtitle": "We'll send you an email with a \"magic link\".", - "label": "What is your email?", - "button": "Log in", - "email": "Check your email", - "emailbody": "We sent you an email with a link to complete logging in.", - "emailbody2": "Didn't work? Check your junk inbox or click {link0} to try again.", - "emailbody2.link0": "here", - "error": { - "invalidEmail": "That email address isn't valid. Try again.", - "generic": "There was an error logging you in. Try again or contact support with the error code {err}", - "usermissing": "That user does not exist." - }, - "need": "Don't have an account? {link0}", - "need.link0": "Signup" - }, - "signup": { - "title": "Create an account", - "subtitle": "We'll send you an email with a \"magic link\"", - "label": "What is your email?", - "button": "Create account", - "email": "Check your email", - "emailbody": "We sent you an email with a link to complete signing up.", - "emailbody2": "Didn't work? Check your junk inbox or click {link0} to try again.", - "emailbody2.link0": "here", - "error": { - "invalidEmail": "That email address isn't valid. Try again.", - "generic": "There was an error logging you in. Try again or contact support with the error code {err}", - "userexists": "That user already exists. Try {link0}?", - "userexists.link0": "logging in" - }, - "already": "Already have an account? {link0}", - "already.link0": "Login" - }, - "ml": { - "header": "Authenticated!", - "body": "Redirecting to admin page...", - "error": { - "notoken": "magic link token missing", - "badtoken": "token is invalid or has expired" - } - }, - "2fasetup": { - "title": "Configure two-factor authentication", - "body": "Trifid requires all accounts to use TOTP two-factor authentication to help ensure the security of your network.", - "scan": "Scan this QR code with an authenticator app, like Authy or Google Authenticator.", - "code": "Or, enter the TOTP secret below into an authenticator app.", - "verify": "Verify by entering the 6-digit code shown in your authenticator into the box below.", - "button": "Enable 2FA", - "error": { - "generic": "Unable to enable 2fa: {err}", - "api": "Unable to contact the server. Try again later.", - "ERR_UNAUTHORIZED": "Incorrect 2FA code" - } - }, - "2fa": { - "title": "Authenticate with TOTP", - "subtitle": "Enter the 6-digit code displayed in your authenticator app", - "label": "TOTP Code", - "button": "Verify", - "error": { - "ERR_UNAUTHORIZED": "Invalid 2FA code" - } - }, - "networkcreate": { - "title": "Create your network", - "explain": "This defines what IP addresses will be assigned to your devices. The range you enter below must fall within either the RFC 1918 Private Address Space or the RFC 6598 Shared Address Space. Enter your network via CIDR notation.", - "label": "Network range", - "button": "Create network", - "valid": "Valid - {numIps} addresses ({start} to {end})", - "invalid": "Invalid", - "error": { - "generic": "Unable to create network: {err}", - "api": "Unable to contact the server. Try again later." - } - }, - "hosts": { - "name": "Name", - "role": "Role", - "lastseen": "Last Seen", - "actions": "Actions", - "ipaddr": "IP Address", - "edit": "Edit", - "enrollbtn": "Enroll", - "deletehost": "Delete", - "config": "Configuration", - "add": "Add", - "create": { - "name": "Host name", - "btn": "Add host", - "cancel": "Cancel", - "role": "Role", - "ip": "IP Address", - "error": { - "needsname": "Host name is required.", - "needsrole": "Role is required.", - "invalidip": "Invalid IP address", - "ERR_DUPLICATE_VALUE": "IP address already in use" - } - }, - "enroll": { - "title": "Enrolling host {host}", - "explainer": "Enrolling this host will allow it to communicate on your network. You'll need to have compatible client software installed first.", - "done": "Done, return me to the hosts page", - "cancel": "Nevermind", - "code": "Input {code} as your enrollment code into any trifid-compatible client software to enroll. It will expire in {expires} minutes." - }, - "delete": { - "title": "Are you sure you want to delete the host {host}?", - "explainer": "This action cannot be undone. This host will still be able to connect to the network unless you block it first.", - "confirm": "I'm sure", - "cancel": "Nevermind", - "error": { - "ERR_DB_ERROR": "Removal failed" - } - } - }, - "roles": { - "delete": { - "title": "Are you sure you want to delete the role {rule}?", - "explainer": "This action cannot be undone. This role must be removed from all hosts, lighthouses, and relays prior to deleting it.", - "confirm": "I'm sure", - "cancel": "Nevermind", - "error": { - "ERR_DB_ERROR": "Removal failed (role was probably still attached to a host)" - } - }, - "create": "Add", - "explain": "Roles control how hosts, lighthouses, and relays communicate through firewall rules.", - "noroles": "You don't have any roles. You'll need to add at least one before you can add any hosts.", - "name": "Name", - "rules": "Rule count", - "description": "Description", - "actions": "Actions", - "add": { - "title": "Create Role", - "any": "Any", - "name": "Role name", - "desc": "Role description", - "button": "Create role", - "cancel": "Cancel", - "rules": "Inbound firewall rules", - "rulesexplainer": "Inbound traffic is denied by default. Add rules to allow traffic from hosts belonging to specific roles.", - "rulescols": { - "description": "Description", - "protocol": "Protocol", - "portrange": "Port range", - "allowedrole": "Allowed role", - "actions": "Actions" - }, - "rulesadd": "Add rule", - "editrule": { - "protocol": "Protocol", - "range": "Port or port range", - "role": "Allowed role", - "desc": "Description", - "add": "Add rule", - "edit": "Save edit", - "cancel": "Cancel" - }, - "error": { - "needsname": "Role Name is required" - } - }, - "edit": { - "title": "Editing role {rule}", - "any": "Any", - "name": "Role name", - "desc": "Role description", - "button": "Save", - "cancel": "Cancel", - "rules": "Inbound firewall rules", - "rulesexplainer": "Inbound traffic is denied by default. Add rules to allow traffic from hosts belonging to specific roles.", - "rulescols": { - "description": "Description", - "protocol": "Protocol", - "portrange": "Port range", - "allowedrole": "Allowed role", - "actions": "Actions" - }, - "ruleremove": "Remove rule", - "ruleedit": "Edit rule", - "rulesadd": "Add rule", - "editrule": { - "protocol": "Protocol", - "range": "Port or port range", - "role": "Allowed role", - "desc": "Description", - "add": "Add rule", - "edit": "Save edit", - "cancel": "Cancel" - } - } - }, - "common": { - "title": "{title} | Trifid Web UI", - "page": { - "itworks": "It Works!", - "admin": "Admin Panel", - "login": "Login", - "ml": "Verify Magic Link", - "2fasetup": "Configure TOTP", - "2fa": "2-Factor Authentication", - "networkcreate": "Create Network", - "hosts": "Hosts", - "roles": "Roles", - "lighthouses": "Lighthouses", - "relays": "Relays", - "addhost": "Add Host" - }, - "logout": "Log out", - "loading": "Dashboard is loading" - } -} diff --git a/tfweb/src/lib/i18n/translations.ts b/tfweb/src/lib/i18n/translations.ts index 4371298..5ebf6aa 100644 --- a/tfweb/src/lib/i18n/translations.ts +++ b/tfweb/src/lib/i18n/translations.ts @@ -1,16 +1,9 @@ import i18n from 'sveltekit-i18n'; -import type {Config} from 'sveltekit-i18n'; - -function buildLoader(locale: string, key: string, file: string) { - return { - locale: locale, - key: key, - loader: async () => ( await import (file)).default - } -} +import type {Config} from 'sveltekit-i18n' const config: Config = ({ loaders: [ + // ENGLISH // { locale: 'en', key: '2fa', @@ -61,6 +54,7 @@ const config: Config = ({ key: 'signup', loader: async () => (await import('./locales/en/signup.json')).default }, + // END ENGLISH // ] }) diff --git a/tfweb/src/routes/+layout.svelte b/tfweb/src/routes/+layout.svelte index 410aed6..c6b794d 100644 --- a/tfweb/src/routes/+layout.svelte +++ b/tfweb/src/routes/+layout.svelte @@ -6,12 +6,13 @@ import {onMount} from "svelte"; onMount(async () => { + const popper = await import("@popperjs/core"); const bootstrap = await import("bootstrap/dist/js/bootstrap.js"); - document.onload(() => { - const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') - const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) - }); + document.B = bootstrap; + document.P = popper; + + }) diff --git a/tfweb/src/routes/+layout.ts b/tfweb/src/routes/+layout.ts index 5e907ba..e675e5a 100644 --- a/tfweb/src/routes/+layout.ts +++ b/tfweb/src/routes/+layout.ts @@ -1,9 +1,21 @@ import type { LayoutLoad } from './$types' import {loadTranslations} from "$lib/i18n/translations"; +import {browser} from "$app/environment"; export const load: LayoutLoad = async ({url}) => { const { pathname } = url; - const initLocale = 'en'; + + let locale = 'en'; + + // determine locale + if (browser) { + if (window.localStorage.getItem("locale") != null) { + locale = window.localStorage.getItem("locale"); + } + window.localStorage.setItem("locale", locale); + } + + const initLocale = locale; await loadTranslations(initLocale, pathname); return {}; } diff --git a/tfweb/src/routes/hosts/+page.svelte b/tfweb/src/routes/hosts/+page.svelte index 6068142..89fa2d3 100644 --- a/tfweb/src/routes/hosts/+page.svelte +++ b/tfweb/src/routes/hosts/+page.svelte @@ -10,6 +10,7 @@ import type {Host} from "$lib/api/models/Host.ts"; import type {Role} from "$lib/api/models/Role.ts"; import AdminLayout from "$components/AdminLayout.svelte"; + import {updateTooltips} from "$lib/Tooltips"; let loading = true; let isError = false; @@ -83,6 +84,7 @@ roles = (await rolesApi.rolesList()).data!; loading = false; + updateTooltips(); }); function getRoleName(byId: string): string { @@ -118,16 +120,22 @@ {#each hosts as host} {#if !(host.isLighthouse || host.isRelay)} - {host.name} + + {host.name} + {#if host.isBlocked} + Blocked + {/if} + {host.metadata?.lastSeenAt} {host.ipAddress} {getRoleName(host.roleID)}
- - - - + + + + +
diff --git a/tfweb/src/routes/hosts/[host_id]/block/+page.svelte b/tfweb/src/routes/hosts/[host_id]/block/+page.svelte new file mode 100644 index 0000000..8c0c776 --- /dev/null +++ b/tfweb/src/routes/hosts/[host_id]/block/+page.svelte @@ -0,0 +1,136 @@ + + + + {$t("common.title", {title: $t("common.page.hosts")})} + + + + +

{$t("hosts.block.title", {host: host.data.name})}

+

{$t("hosts.block.explainer")}

+ {#if loading} + + {:else} + + {/if} + + {#if hasFormErr} +

{formErr}

+ {/if} + + diff --git a/tfweb/src/routes/roles/+page.svelte b/tfweb/src/routes/roles/+page.svelte index ad982d2..d7e2cb5 100644 --- a/tfweb/src/routes/roles/+page.svelte +++ b/tfweb/src/routes/roles/+page.svelte @@ -8,6 +8,7 @@ import {PUBLIC_BASE_URL} from "$env/static/public"; import {Configuration, NetworksApi, RolesApi} from "$lib/api"; import AdminLayout from "$components/AdminLayout.svelte"; + import {updateTooltips} from "$lib/Tooltips"; let loading = true; let isError = false; @@ -71,6 +72,7 @@ console.log(roles); loading = false; + updateTooltips(); }) async function roleAdd() { @@ -115,8 +117,8 @@ {role.description}
- - + +