Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-07-18 00:46:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #60 from gurucomputing/42-acl-work-create-group-page

Browse source 
42 acl work create group page
This commit is contained in:
routerino 2022-09-10 13:28:29 +10:00 • committed by GitHub
commit c8fdafe323
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 92 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/lib/common/Stores.svelte
View file

@ -1,6 +1,6 @@
<script>
import { onMount } from 'svelte';
import { deviceSortStore, deviceSortDirectionStore, userSortStore, sortDirectionStore, themeStore } from '$lib/common/stores.js';
import { deviceSortStore, deviceSortDirectionStore, userSortStore, sortDirectionStore, themeStore, showACLPagesStore } from '$lib/common/stores.js';
import { URLStore } from '$lib/common/stores.js';
import { APIKeyStore } from '$lib/common/stores.js';
import { preAuthHideStore } from '$lib/common/stores.js';
@ -24,6 +24,7 @@
// stores URL and API key
URLStore.set(localStorage.getItem('headscaleURL') || '');
// remove trailing slashes when storing the URL
URLStore.subscribe((val) => localStorage.setItem('headscaleURL', val.replace(/\/+$/, '')));
APIKeyStore.set(localStorage.getItem('headscaleAPIKey') || '');
APIKeyStore.subscribe((val) => localStorage.setItem('headscaleAPIKey', val));
@ -32,5 +33,9 @@
preAuthHideStore.set((localStorage.getItem('headscalePreAuthHide') || 'false') == 'true');
preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val ? 'true' : 'false'));
// dev setting stores
showACLPagesStore.set((localStorage.getItem('showACLPages') || 'false') == 'true');
showACLPagesStore.subscribe((val) => localStorage.setItem('showACLPages', val ? 'true' : 'false'));
});
</script>

8
src/lib/common/classes.ts
View file

@ -14,6 +14,14 @@ export class Device {
}
}
export class ACL {
public groups: {[key: string]: [string]} = {}
public constructor(init?: Partial<Route>) {
Object.assign(this, init);
}
}
export class Route {
advertisedRoutes: string[] = [];
enabledRoutes: string[] = [];

13
src/lib/common/nav.svelte
View file

@ -3,6 +3,7 @@
import { fade } from 'svelte/transition';
import { writable } from 'svelte/store';
import { base } from '$app/paths';
import { showACLPagesStore } from './stores';
// navigation bar variables
let navExpanded = writable('');
@ -46,6 +47,18 @@
</svg>
<span class="indent-4">User View</span>
</a>
{#if $showACLPagesStore}
<a href="{base}/groups.html" class="nav-item">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
/>
</svg>
<span class="indent-4">Group View</span>
</a>
{/if}
<a href="{base}/devices.html" class="nav-item">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />

37
src/lib/common/stores.js
View file

@ -1,27 +1,42 @@
import { writable } from 'svelte/store';
import { Device, User } from '$lib/common/classes';
import { Device, User, ACL } from '$lib/common/classes';
//
// localStorage Stores (global scope, saves to the browser)
//
// used to store the value of an alert across all components
export const alertStore = writable('');
// used to determine if the API is functioning
export const apiTestStore = writable('');
// stores the theme
export const themeStore = writable('');
// stores URL and API Key
export const URLStore = writable('');
export const APIKeyStore = writable('');
// stores sorting preferences
export const deviceSortStore = writable('id');
export const deviceSortDirectionStore = writable('ascending');
export const userSortStore = writable('id');
export const sortDirectionStore = writable('ascending');
// stores preauth key preference
export const preAuthHideStore = writable(false);
// Dev Setting Stores
// Shows or Hides ACL Settings
export const showACLPagesStore = writable(false);
//
// Normal Stores (global scope, saves until refresh)
//
// stores user and device data
export const userStore = writable([new User()]);
export const userFilterStore = writable([new User()]);
export const deviceStore = writable([new Device()]);
export const deviceFilterStore = writable([new Device()]);
// stores ACL object
export const aclStore = writable(new ACL());
// used to store the value of an alert across all components
export const alertStore = writable('');
// used to determine if the API is functioning
export const apiTestStore = writable('');
// stores search state
export const userSearchStore = writable('');
export const deviceSearchStore = writable('');
// stores sorting preferences
export const deviceSortStore = writable('id');
export const deviceSortDirectionStore = writable('ascending');
export const userSortStore = writable('id');
export const sortDirectionStore = writable('ascending');
export const deviceSearchStore = writable('');

13
src/lib/settings/DevSettings.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import { showACLPagesStore } from '$lib/common/stores';
import { fade } from 'svelte/transition';
let showDevSettings = false;
</script>
<div class="inline-block"><h1 class="text-2xl bold text-primary mb-4">Developer Flags<input type="checkbox" class="toggle toggle-sm tooltip ml-2 align-middle" data-tip="To enable development features. Only check this if you're a developer or like being confused" bind:checked={showDevSettings} /></h1></div>
{#if showDevSettings}
<div in:fade>
<h2 class="text-xl bold text-secondary mb-2 ml-2">ACL Pages <input bind:checked={$showACLPagesStore} type="checkbox" class="toggle toggle-sm ml-2 align-middle" /></h2>
</div>
{/if}

23
src/routes/groups.html/+page.svelte Normal file
View file

@ -0,0 +1,23 @@
<script lang="ts">
//
// Imports
//
import { showACLPagesStore } from '$lib/common/stores';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
// Set to true once component is initialized
let componentLoaded = false;
onMount(async () => {
componentLoaded = true;
});
</script>
<body>
{#if showACLPagesStore}
<div hidden={!componentLoaded} in:fade class="px-4 py-4 w-4/5 max-w-screen-lg">
<h1 class="text-2xl bold text-primary">Group View</h1>
</div>
{/if}
</body>

3
src/routes/settings.html/+page.svelte
View file

@ -2,6 +2,7 @@
//
// Imports
//
import DevSettings from '$lib/settings/DevSettings.svelte';
import ServerSettings from '$lib/settings/ServerSettings.svelte';
import ThemeSettings from '$lib/settings/ThemeSettings.svelte';
import { onMount } from 'svelte';
@ -26,5 +27,7 @@
<div class="p-4" />
<h1 class="text-2xl bold text-primary mb-4">Version</h1>
<b>insert-version</b>
<div class ="p-4"></div>
<DevSettings></DevSettings>
</div>
</body>