%sveltekit.body%
@@ -28,4 +94,4 @@
.overlap-children > * {
grid-area: 1/1;
}
-
\ No newline at end of file
+
diff --git a/src/app.postcss b/src/app.postcss
index d6bb6e4..d905e72 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -11,7 +11,7 @@ body {
*/
html,
body {
- @apply overflow-y-scroll;
+ @apply h-full overflow-hidden;
}
/* modern theme */
diff --git a/src/lib/Navigation.svelte b/src/lib/Navigation.svelte
index 772d1de..71f80aa 100644
--- a/src/lib/Navigation.svelte
+++ b/src/lib/Navigation.svelte
@@ -9,11 +9,13 @@
import RawMdiRouter from '~icons/mdi/router';
import RawMdiSecurity from '~icons/mdi/security';
import RawMdiSettings from '~icons/mdi/settings';
+ import RawMdiChartLine from '~icons/mdi/chart-line';
// import { ApiKeyInfoStore, ApiKeyStore, hasValidApi } from './Stores';
import { onMount, type Component } from 'svelte';
import { page } from '$app/state';
import { App } from '$lib/States.svelte';
+ import { _ } from 'svelte-i18n';
type NavigationProps = {
labels?: boolean
@@ -26,7 +28,7 @@
const DrawerStore = getDrawerStore();
function classesActive(href: string): string {
- return href === page.route.id ? 'bg-primary-300 dark:bg-primary-700' : '';
+ return href === page.route.id ? 'variant-filled-primary' : '';
}
let newPath = $state('');
@@ -37,18 +39,18 @@
type Page = {
path: string;
- name: string;
+ nameKey: string;
logo: Component;
};
const allPages: Page[] = [
- { path: '/', name: 'Home', logo: RawMdiHome },
- { path: '/users', name: 'Users', logo: RawMdiPerson },
- { path: '/nodes', name: 'Nodes', logo: RawMdiDevices },
- { path: '/deploy', name: 'Deploy', logo: RawMdiHomeGroupPlus },
- { path: '/routes', name: 'Routes', logo: RawMdiRouter },
- { path: '/acls', name: 'ACLs', logo: RawMdiSecurity },
- { path: '/settings', name: 'Settings', logo: RawMdiSettings },
+ { path: '/', nameKey: 'navigation.home', logo: RawMdiHome },
+ { path: '/users', nameKey: 'navigation.users', logo: RawMdiPerson },
+ { path: '/nodes', nameKey: 'navigation.nodes', logo: RawMdiDevices },
+ { path: '/deploy', nameKey: 'navigation.deploy', logo: RawMdiHomeGroupPlus },
+ { path: '/routes', nameKey: 'navigation.routes', logo: RawMdiRouter },
+ { path: '/acls', nameKey: 'navigation.acls', logo: RawMdiSecurity },
+ { path: '/settings', nameKey: 'navigation.settings', logo: RawMdiSettings },
].filter((p) => p != undefined);
const pages = $derived.by(() => App.hasValidApi ? allPages : allPages.slice(-1));
@@ -70,7 +72,7 @@
{#if labels}
-
{p.name}
+
{$_(p.nameKey)}
{/if}
diff --git a/src/lib/States.svelte.ts b/src/lib/States.svelte.ts
index 022847e..6e357fa 100644
--- a/src/lib/States.svelte.ts
+++ b/src/lib/States.svelte.ts
@@ -5,8 +5,13 @@ import type { User, Node, PreAuthKey, ApiKeyInfo, ApiApiKeys, Deployment } from
import { getUsers, getPreAuthKeys, getNodes } from '$lib/common/api/get';
import type { ToastStore } from '@skeletonlabs/skeleton';
import { apiGet } from './common/api';
+import { setPolicy } from '$lib/common/api/modify';
+import type { ACLBuilder } from '$lib/common/acl.svelte';
import { arraysEqual, clone, toastError, toastWarning } from './common/funcs';
import { debug } from './common/debug';
+import { _ } from 'svelte-i18n';
+import { get } from 'svelte/store';
+import { getInitialLocale, persistLocalePreference, type SupportedLocale } from '$lib/i18n';
export type LayoutStyle = 'tile' | 'list';
@@ -40,12 +45,12 @@ export class State
{
}
-// state that is wrapped in LocalStorage
+// state that is wrapped in LocalStorage or SessionStorage
export class StateLocal {
#key: string;
#value = $state() as T;
#effect?: (value?: T) => void;
- // #saver = $derived(this.save(this.#value))
+ #session: boolean;
get key() {
return this.#key;
@@ -57,33 +62,50 @@ export class StateLocal {
set value(value: T) {
this.#value = value;
- // this.save(this.#value);
if(this.#effect !== undefined) {
this.#effect(value);
}
}
+ get storage(): Storage | null {
+ if (!browser) return null;
+ return this.#session ? sessionStorage : localStorage;
+ }
+
save(value: T) {
- debug(`Saving '${this.#key}' in localStorage...`);
- localStorage.setItem(this.#key, this.serialize(value));
+ debug(`Saving '${this.#key}' in ${this.#session ? 'sessionStorage' : 'localStorage'}...`);
+ this.storage?.setItem(this.#key, this.serialize(value));
}
- constructor(key: string, valueDefault: T, effect?: (value?: T) => void) {
+ constructor(
+ key: string,
+ valueDefault: T,
+ effect?: (value?: T) => void,
+ session: boolean = false,
+ saveDefaultOnInit: boolean = true,
+ ) {
this.#key = key;
this.#effect = effect;
+ this.#value = valueDefault;
+ this.#session = session;
if(browser){
- const storedValue = localStorage.getItem(this.#key);
+ const storedValue = this.storage?.getItem(this.#key);
+ const hasStoredValue = storedValue !== null;
if (storedValue) {
this.#value = this.deserialize(storedValue);
- } else {
- this.#value = valueDefault;
}
-
- // how do I clean this up?
+
+ let initialSaveSkipped = false;
$effect.root(()=>{
$effect(()=>{
+ if (!saveDefaultOnInit && !hasStoredValue && !initialSaveSkipped) {
+ initialSaveSkipped = true;
+ return;
+ }
+
+ initialSaveSkipped = true;
this.save(this.#value);
})
})
@@ -95,7 +117,16 @@ export class StateLocal {
}
deserialize(item: string): T {
- return JSON.parse(item);
+ try {
+ return JSON.parse(item) as T;
+ } catch (error) {
+ if (typeof this.#value === 'string') {
+ return item as T;
+ }
+
+ debug(`Failed to deserialize '${this.#key}', falling back to default value.`, error);
+ return this.#value;
+ }
}
}
@@ -116,10 +147,40 @@ export class HeadscaleAdmin {
}
})
+ // language settings
+ language = new StateLocal(
+ 'locale',
+ getInitialLocale(),
+ (language) => {
+ if (language !== undefined) {
+ persistLocalePreference(language);
+ }
+ },
+ false,
+ false,
+ )
+
// api info
apiValid = $state(false);
apiUrl = new StateLocal('apiUrl', '');
- apiKey = new StateLocal('apiKey', '');
+
+ #apiKey = new StateLocal('apiKey', '');
+ #apiKeySession = new StateLocal('apiKey', '', undefined, true);
+
+ get apiKey(): StateLocal {
+ const key = this.apiRememberMe.value ? this.#apiKey : this.#apiKeySession;
+ // If we switched from remember to not remember, or vice versa, ensure the key is transferred
+ if (this.apiRememberMe.value && !this.#apiKey.value && this.#apiKeySession.value) {
+ this.#apiKey.value = this.#apiKeySession.value;
+ this.#apiKeySession.value = '';
+ } else if (!this.apiRememberMe.value && !this.#apiKeySession.value && this.#apiKey.value) {
+ this.#apiKeySession.value = this.#apiKey.value;
+ this.#apiKey.value = '';
+ }
+ return key;
+ }
+
+ apiRememberMe = new StateLocal('apiRememberMe', false);
apiTtl = new StateLocal('apiTTL', 10000);
apiKeyInfo = new StateLocal('apiKeyInfo', {
authorized: null,
@@ -127,8 +188,8 @@ export class HeadscaleAdmin {
informedUnauthorized: false,
informedExpiringSoon: false,
})
- hasApiKey = $derived(isInitialized() && !!this.apiKey.value)
- hasApiUrl = $derived(isInitialized() && !!this.apiUrl.value)
+ hasApiKey = $derived(isInitialized() && !!this.apiKey.value)
+ hasApiUrl = $derived(isInitialized() && !!this.apiUrl.value)
hasApi = $derived(this.hasApiKey && this.hasApiUrl)
hasValidApi = $derived(this.hasApi && this.apiKeyInfo.value.authorized === true)
@@ -212,6 +273,28 @@ export class HeadscaleAdmin {
if (preAuthKeys === undefined) {
preAuthKeys = await getPreAuthKeys()
}
+
+ // Keep full keys (no asterisks) for a given ID if the new one is masked
+ // This preserves the initially shown full key when API refreshes show masked version
+ preAuthKeys = preAuthKeys.map((newKey) => {
+ const existingKey = this.preAuthKeys.value.find(k => k.id === newKey.id);
+
+ // Safety checks for key field
+ if (existingKey &&
+ newKey.key && existingKey.key &&
+ typeof newKey.key === 'string' &&
+ typeof existingKey.key === 'string') {
+
+ // If new key is masked (has asterisks) and existing is not, keep the full key
+ if (newKey.key.includes('*') && !existingKey.key.includes('*')) {
+ debug('Preserving full key for ID', newKey.id, '- old:', existingKey.key.substring(0, 20), 'new:', newKey.key.substring(0, 20));
+ return existingKey;
+ }
+ }
+
+ return newKey;
+ });
+
if(!arraysEqual(this.preAuthKeys.value, preAuthKeys)){
this.preAuthKeys.value = [...preAuthKeys]
return true
@@ -221,25 +304,46 @@ export class HeadscaleAdmin {
async populateApiKeyInfo(): Promise {
const { apiKeys } = await apiGet(`/api/v1/apikey`);
- const myKey = apiKeys.filter((key) => this.apiKey.value.startsWith(key.prefix))[0];
+ const myKey = apiKeys.find((key) => {
+ const cleanPrefix = key.prefix.replace(/\*+$/, '');
+ return this.apiKey.value.startsWith(cleanPrefix);
+ });
+
const apiKeyInfo = this.apiKeyInfo.value
- apiKeyInfo.expires = myKey.expiration;
apiKeyInfo.authorized = true;
+ if (myKey) {
+ apiKeyInfo.expires = myKey.expiration;
+ }
+
this.apiKeyInfo.value = {...apiKeyInfo};
return true;
}
async populateAll(handler?: (err: unknown) => void, repeat: boolean = true){
- if (this.hasValidApi) {
- const promises = []
- promises.push(this.populateUsers());
- promises.push(this.populateNodes());
- promises.push(this.populatePreAuthKeys());
- // promises.push(this.populateRoutes());
- promises.push(this.populateApiKeyInfo());
- await Promise.allSettled(promises);
- promises.forEach((p) => p.catch(handler));
- debug('Completed all store population requests.');
+ if (this.hasApi) {
+ try {
+ await this.populateApiKeyInfo();
+ } catch (err) {
+ handler?.(err);
+ }
+
+ if (this.hasValidApi) {
+ const results = await Promise.allSettled([
+ this.populateUsers(),
+ this.populateNodes(),
+ this.populatePreAuthKeys(),
+ // this.populateRoutes(),
+ this.populateApiKeyInfo(),
+ ]);
+
+ results.forEach((result) => {
+ if (result.status === 'rejected') {
+ handler?.(result.reason);
+ }
+ });
+
+ debug('Completed all store population requests.');
+ }
}
if (repeat === true) {
@@ -249,6 +353,10 @@ export class HeadscaleAdmin {
}
}
+ async setPolicy(acl: ACLBuilder) {
+ await setPolicy(acl);
+ }
+
toggleLayout(layout?: Valued) {
if (layout) {
layout.value = (layout.value === 'tile' ? 'list' : 'tile');
@@ -267,7 +375,7 @@ export class HeadscaleAdmin {
}
}
-export const App = $state(new HeadscaleAdmin())
+export const App = new HeadscaleAdmin()
function isInitialized(): boolean {
@@ -293,7 +401,7 @@ export function informUserUnauthorized(toastStore: ToastStore) {
}
App.apiKeyInfo.value.informedUnauthorized = true;
App.apiKeyInfo.value.authorized = false;
- toastError('API Key is Unauthorized or Invalid', toastStore);
+ toastError(get(_)( 'settings.unauthorizedMessage' ), toastStore);
});
}
@@ -302,8 +410,7 @@ export function informUserExpiringSoon(toastStore: ToastStore) {
if (App.apiKeyInfo.value.informedExpiringSoon === true) {
return;
}
- App.apiKeyInfo.value.informedUnauthorized = true;
- App.apiKeyInfo.value.authorized = false;
- toastWarning('API Key Expires Soon', toastStore);
+ App.apiKeyInfo.value.informedExpiringSoon = true;
+ toastWarning(get(_)( 'settings.expiringSoonMessage' ), toastStore);
});
-}
\ No newline at end of file
+}
diff --git a/src/lib/cards/CardListContainer.svelte b/src/lib/cards/CardListContainer.svelte
index 2d87118..a3d8c84 100644
--- a/src/lib/cards/CardListContainer.svelte
+++ b/src/lib/cards/CardListContainer.svelte
@@ -2,6 +2,6 @@
let { children } = $props()
-
+
{@render children()}
diff --git a/src/lib/cards/CardListItem.svelte b/src/lib/cards/CardListItem.svelte
index 042104e..6924cae 100644
--- a/src/lib/cards/CardListItem.svelte
+++ b/src/lib/cards/CardListItem.svelte
@@ -13,7 +13,7 @@
diff --git a/src/lib/cards/CardListPage.svelte b/src/lib/cards/CardListPage.svelte
index ac93317..06dc6ca 100644
--- a/src/lib/cards/CardListPage.svelte
+++ b/src/lib/cards/CardListPage.svelte
@@ -7,7 +7,7 @@
let { children }: CardListPageProps = $props()
-
+
{@render children()}
diff --git a/src/lib/cards/CardTileContainer.svelte b/src/lib/cards/CardTileContainer.svelte
index fbcd783..28dfdc8 100644
--- a/src/lib/cards/CardTileContainer.svelte
+++ b/src/lib/cards/CardTileContainer.svelte
@@ -4,24 +4,36 @@
type CardTileContainerProps = {
classes?: string,
- onclick?: MouseEventHandler
,
+ onclick?: MouseEventHandler,
+ href?: string,
children: Snippet,
}
let {
classes = '',
onclick = undefined,
+ href = undefined,
children,
}: CardTileContainerProps = $props()
const classesFinal = $derived(
- 'col-span-12 xs:col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-4 2xl:col-span-3 card ' +
- (onclick === undefined ? '' : 'card-hover ') +
+ 'col-span-12 xs:col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-4 2xl:col-span-3 card transition-all duration-200 ' +
+ (onclick === undefined && href === undefined ? '' : 'card-hover cursor-pointer ') +
classes
);
-
-
- {@render children()}
-
+
+ {#if href}
+
+ {@render children()}
+
+ {:else if onclick}
+
+ {@render children()}
+
+ {:else}
+
+ {@render children()}
+
+ {/if}
\ No newline at end of file
diff --git a/src/lib/cards/CardTilePage.svelte b/src/lib/cards/CardTilePage.svelte
index 1055892..62750fa 100644
--- a/src/lib/cards/CardTilePage.svelte
+++ b/src/lib/cards/CardTilePage.svelte
@@ -6,7 +6,7 @@
}
let { children }: CardTitlePageProps = $props()
-
+
{@render children()}
diff --git a/src/lib/cards/acl/GroupListCard.svelte b/src/lib/cards/acl/GroupListCard.svelte
index c449b04..496ce70 100644
--- a/src/lib/cards/acl/GroupListCard.svelte
+++ b/src/lib/cards/acl/GroupListCard.svelte
@@ -6,11 +6,12 @@
import Delete from '$lib/parts/Delete.svelte';
import MultiSelect from '$lib/parts/MultiSelect.svelte';
import Text from '$lib/parts/Text.svelte';
+ import { _ } from 'svelte-i18n';
import { App } from '$lib/States.svelte';
import { debug } from '$lib/common/debug';
import { getToastStore } from '@skeletonlabs/skeleton';
- import { toastSuccess, toastError } from '$lib/common/funcs';
+ import { toastSuccess, toastError, getUserAclName } from '$lib/common/funcs';
import RawMdiGroup from '~icons/mdi/account-group-outline';
@@ -25,9 +26,7 @@
let {acl = $bindable(), groupName, open = $bindable()}: GroupListCardProps = $props()
const groupMembers = $derived(acl.getGroupMembers(groupName));
- const userNames = $derived(App.users.value.map((u) => {
- return u.email ? u.email : u.name;
- }).toSorted())
+ const userNames = $derived(App.users.value.map(getUserAclName).toSorted())
let group = $state(makeGroup());
let groupNameNew = $state('');
@@ -47,7 +46,7 @@
try {
if (groupName !== groupNameNew) {
acl.renameGroup(groupName, groupNameNew);
- toastSuccess(`Group renamed from '${groupName}' to '${groupNameNew}'`, ToastStore);
+ toastSuccess($_('cards.groupRenamedSuccess', { values: { oldName: groupName, newName: groupNameNew } }), ToastStore);
groupName = groupNameNew;
}
return true;
@@ -63,7 +62,7 @@
deleting = true;
try {
acl.deleteGroup(groupName);
- toastSuccess(`Group '${groupName}' deleted`, ToastStore);
+ toastSuccess($_('cards.groupDeleted', { values: { name: groupName } }), ToastStore);
} catch (e) {
if (e instanceof Error) {
toastError('', ToastStore, e);
@@ -97,7 +96,7 @@
{#snippet children()}
- Members of
+ {$_('cards.membersOf')}
diff --git a/src/lib/cards/acl/HostListCard.svelte b/src/lib/cards/acl/HostListCard.svelte
index 71b1e5c..17875e8 100644
--- a/src/lib/cards/acl/HostListCard.svelte
+++ b/src/lib/cards/acl/HostListCard.svelte
@@ -6,6 +6,7 @@
import Delete from '$lib/parts/Delete.svelte';
import { debug } from '$lib/common/debug';
import Text from '$lib/parts/Text.svelte';
+ import { _ } from 'svelte-i18n';
const ToastStore = getToastStore();
@@ -74,7 +75,7 @@
function deleteHost() {
try {
acl.deleteHost(host.name);
- toastSuccess(`Host '${host.name}' deleted`, ToastStore);
+ toastSuccess($_('cards.hostDeleted', { values: { name: host.name } }), ToastStore);
} catch (e) {
debug(e);
if (e instanceof Error) {
@@ -108,12 +109,12 @@
class="card p-4 variant-filled-warning text-center {popupShow ? '' : 'invisible'}"
data-popup="popupHover-host-{hostName}"
>
-
Host '{hostName}' has the same name as a user.
+
{$_('cards.hostRenameWarning', { values: { hostName } })}
{#if userNames.includes(hostName)}
diff --git a/src/lib/cards/acl/ListEntry.svelte b/src/lib/cards/acl/ListEntry.svelte
index 45762ef..a5f9813 100644
--- a/src/lib/cards/acl/ListEntry.svelte
+++ b/src/lib/cards/acl/ListEntry.svelte
@@ -27,7 +27,7 @@
diff --git a/src/lib/cards/acl/PolicyListCard.svelte b/src/lib/cards/acl/PolicyListCard.svelte
index 82d313b..b59526a 100644
--- a/src/lib/cards/acl/PolicyListCard.svelte
+++ b/src/lib/cards/acl/PolicyListCard.svelte
@@ -1,10 +1,11 @@
-
+
{#snippet children()}
- Sources:
+ {$_('cards.sources')}
- Add
+ {$_('cards.add')}
{#each rule.src as src, i}
@@ -204,7 +218,7 @@
{/each}
- Destinations:
+ {$_('cards.destinations')}
- Add
+ {$_('cards.add')}
{#each rule.dst as dst, i}
@@ -269,7 +283,7 @@
{/each}
- Usernames:
+ {$_('cards.usernames')}
{
- const us = App.users.value.map(u => u.name)
+ const us = App.users.value.map(getUserAclName)
us.sort()
const gs = acl.getGroupNames(true)
@@ -57,7 +58,7 @@
try {
if (tag.name !== tagNameNew) {
acl.renameTag(tag.name, tagNameNew);
- toastSuccess(`Tag renamed from '${tag.name}' to '${tagNameNew}'`, ToastStore);
+ toastSuccess($_('cards.tagRenamedSuccess', { values: { oldName: tag.name, newName: tagNameNew } }), ToastStore);
tagName = tagNameNew;
}
return true;
@@ -76,7 +77,7 @@
loading = true
try{
acl.deleteTag(tag.name);
- toastSuccess(`Tag '${tag.name}' deleted`, ToastStore)
+ toastSuccess($_('cards.tagDeleted', { values: { name: tag.name } }), ToastStore)
}catch(e){
if(e instanceof Error){
toastError('', ToastStore, e);
@@ -101,7 +102,7 @@
{#snippet children()}
- Owners of
+ {$_('cards.ownersOf')}
diff --git a/src/lib/cards/common/ItemCreatedAt.svelte b/src/lib/cards/common/ItemCreatedAt.svelte
index 3a0b36a..9c5a837 100644
--- a/src/lib/cards/common/ItemCreatedAt.svelte
+++ b/src/lib/cards/common/ItemCreatedAt.svelte
@@ -1,6 +1,8 @@
-
- {new Date(item.createdAt).toLocaleString('en-Gb', {
- minute: '2-digit',
- year: 'numeric',
- month: 'short',
- day: '2-digit',
- hour: '2-digit',
- hour12: false,
- })}
+
+ {dateToStr(item.createdAt)}
diff --git a/src/lib/cards/common/ItemDelete.svelte b/src/lib/cards/common/ItemDelete.svelte
index d04f1f0..9ddb826 100644
--- a/src/lib/cards/common/ItemDelete.svelte
+++ b/src/lib/cards/common/ItemDelete.svelte
@@ -9,6 +9,7 @@
import { toastError, toastSuccess } from '$lib/common/funcs';
import Delete from '$lib/parts/Delete.svelte';
import { App } from '$lib/States.svelte';
+ import { _ } from 'svelte-i18n';
type ItemDeleteProps = {
item: Named,
@@ -33,27 +34,27 @@
if (isUser(item)) {
if (await deleteUser(item)) {
- toastSuccess(`Deleted User "${name}" (ID: ${id})`, ToastStore);
+ toastSuccess($_('cards.deletedUser', { values: { name, id } }), ToastStore);
DrawerStore.close()
} else {
- let msg = `Failed to Delete User "${name}" (${id}).`;
+ let msg = $_('cards.failedDeleteUser', { values: { name, id } });
if(App.nodes.value.some((node) => node.user.id === item.id)){
- msg += " Still has nodes."
+ msg += $_('cards.stillHasNodes');
}
toastError(msg, ToastStore);
}
}
if (isNode(item)) {
if (await deleteNode(item)) {
- toastSuccess(`Deleted machine "${name}" (${id})`, ToastStore);
+ toastSuccess($_('cards.deletedMachine', { values: { name, id } }), ToastStore);
DrawerStore.close()
} else {
- toastError(`Failed to Delete Nachine "${name}" (${id})`, ToastStore);
+ toastError($_('cards.failedDeleteMachine', { values: { name, id } }), ToastStore);
}
}
}
-
+
diff --git a/src/lib/cards/common/ItemListName.svelte b/src/lib/cards/common/ItemListName.svelte
index cd4b51e..0a0f561 100644
--- a/src/lib/cards/common/ItemListName.svelte
+++ b/src/lib/cards/common/ItemListName.svelte
@@ -6,6 +6,7 @@
import RawMdiRename from '~icons/mdi/rename';
import RawMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
import RawMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
+ import { _ } from 'svelte-i18n';
import { renameNode, renameUser } from '$lib/common/api';
import { toastError, focus } from '$lib/common/funcs';
import { getToastStore } from '@skeletonlabs/skeleton';
@@ -32,7 +33,7 @@
const ToastStore = getToastStore();
-
+