(init): Keys and Prefix Management
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import './layout.css';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon} />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
</svelte:head>
|
||||
{@render children()}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { getSettings } from '$lib/server/settings';
|
||||
|
||||
export const load = async ({ fetch }) => {
|
||||
const settings = getSettings();
|
||||
const res = await fetch('/api');
|
||||
const data = await res.json();
|
||||
return { ...data, venueName: settings.venue_name };
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
import { tS, bS } from '$lib/client/styles.js';
|
||||
import { browser } from '$app/environment';
|
||||
import { resolve } from '$app/paths';
|
||||
import hotkeys from 'hotkeys-js';
|
||||
|
||||
const pageTitle = 'Main Menu | TAM'
|
||||
const { data } = $props();
|
||||
let adminMode = $state(false);
|
||||
|
||||
const status = $derived.by(() => {
|
||||
if (data.whoami === 'TAM Server') {
|
||||
return {
|
||||
mode: 'Remote',
|
||||
auth: data.authenticated ? 'green' : 'red',
|
||||
healthy: data.healthy ? 'green' : 'red'
|
||||
};
|
||||
} else if (data.whoami === 'TAM Client') {
|
||||
return {
|
||||
mode: 'Standalone'
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
mode: 'Unknown'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (browser) {
|
||||
hotkeys.filter = () => {return true};
|
||||
hotkeys('alt+a', (event) => {
|
||||
event.preventDefault();
|
||||
adminMode = !adminMode;
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="p-1" id="app_container">
|
||||
<h1 class="text-xl font-bold">{pageTitle}</h1>
|
||||
<p class="text-lg italic">{data.venueName}</p>
|
||||
|
||||
{#if adminMode}
|
||||
<div id="admin_mode">
|
||||
<h2 class="text-lg font-bold">Admin Mode:</h2>
|
||||
<div class="flex flex-row gap-1">
|
||||
<a href={resolve('/settings')} class={bS.gray}>Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div id="footer">
|
||||
<div>Mode: {status.mode}</div>
|
||||
{#if data.authenticated !== undefined}
|
||||
<div>Authenticated: <span class={tS[status.auth]}>{data.authenticated ? 'Yes' : 'No'}</span></div>
|
||||
{/if}
|
||||
{#if data.healthy !== undefined}
|
||||
<div>Server Healthy: <span class={tS[status.healthy]}>{data.healthy ? 'Yes' : 'No'}</span></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { getSettings, getPath } from '$lib/server/settings';
|
||||
import { json, error } from '@sveltejs/kit';
|
||||
|
||||
export const GET = async () => {
|
||||
const s = getSettings();
|
||||
if (s.remote_server) {
|
||||
const connStr = getPath(s);
|
||||
try {
|
||||
const res = await fetch(`${connStr}/api`, {
|
||||
headers: { 'TAM-KEY': s.remote_key }
|
||||
});
|
||||
if (!res.ok) throw error(res.status);
|
||||
const data = await res.json()
|
||||
return json(data);
|
||||
} catch {
|
||||
const data = { whoami: 'TAM Server', authenticated: false, healthy: false };
|
||||
return json(data);
|
||||
}
|
||||
} else {
|
||||
const data = { whoami: 'TAM Client' };
|
||||
return json(data);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
import { getSettings, getPath } from "$lib/server/settings";
|
||||
import { json, error } from "@sveltejs/kit";
|
||||
|
||||
export const GET = async ({ request }) => {
|
||||
const tamPwd = request.headers.get('TAM-PWD');
|
||||
const s = getSettings();
|
||||
if (s.remote_server) {
|
||||
const connStr = getPath(s);
|
||||
try {
|
||||
const res = await fetch(`${connStr}/api/auth`, {
|
||||
headers: { 'TAM-PW': tamPwd }
|
||||
});
|
||||
if (!res.ok) throw error(res.status);
|
||||
const data = await res.json();
|
||||
return json(data);
|
||||
} catch {
|
||||
throw error(502)
|
||||
}
|
||||
} else {
|
||||
throw error(500, 'Not configured.')
|
||||
}
|
||||
}
|
||||
|
||||
export const POST = async ({ request }) => {
|
||||
const tamPwd = request.headers.get('TAM-PWD');
|
||||
const reqBody = await request.json();
|
||||
const s = getSettings();
|
||||
if (s.remote_server) {
|
||||
const connStr = getPath(s);
|
||||
try {
|
||||
const res = await fetch(`${connStr}/api/auth`, {
|
||||
headers: { 'TAM-PW': tamPwd, 'Content-Type': 'application/json' },
|
||||
method: 'POST',
|
||||
body: JSON.stringify(reqBody)
|
||||
});
|
||||
if (!res.ok) throw error(res.status);
|
||||
const data = await res.json();
|
||||
return json(data);
|
||||
} catch {
|
||||
throw error(502);
|
||||
}
|
||||
} else {
|
||||
throw error(500, 'Not configured.')
|
||||
}
|
||||
}
|
||||
|
||||
export const DELETE = async ({ request, url }) => {
|
||||
const tamPwd = request.headers.get('TAM-PWD');
|
||||
const keyToDel = url.searchParams.get('key_to_del');
|
||||
const s = getSettings();
|
||||
if (s.remote_server) {
|
||||
const connStr = getPath(s);
|
||||
try {
|
||||
const res = await fetch(`${connStr}/api/auth?key_to_del=${keyToDel}`, {
|
||||
headers: { 'TAM-PW': tamPwd },
|
||||
method: 'DELETE'
|
||||
})
|
||||
if (!res.ok) throw error(res.status)
|
||||
const data = await res.json();
|
||||
return json(data);
|
||||
} catch {
|
||||
throw error(502);
|
||||
}
|
||||
} else {
|
||||
throw error(500, 'Not configured.')
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { getSettings, getPath } from "$lib/server/settings"
|
||||
import { json, error } from "@sveltejs/kit";
|
||||
import { db } from "$lib/server/db";
|
||||
import { prefixes } from "$lib/server/db/schema";
|
||||
import { sql, eq } from "drizzle-orm";
|
||||
|
||||
export const GET = async () => {
|
||||
const s = getSettings();
|
||||
if (s.remote_server) {
|
||||
const connStr = getPath(s);
|
||||
const res = await fetch(`${connStr}/api/prefixes`, {
|
||||
headers: { 'TAM-KEY': s.remote_key }
|
||||
});
|
||||
if (!res.ok) throw error(res.status);
|
||||
const data = await res.json();
|
||||
return json(data);
|
||||
} else {
|
||||
const data = await db.select().from(prefixes).orderBy(prefixes.weight, prefixes.prefix);
|
||||
return json(data);
|
||||
}
|
||||
}
|
||||
|
||||
export const POST = async ({ request }) => {
|
||||
const reqData = await request.json();
|
||||
const s = getSettings();
|
||||
if (s.remote_server) {
|
||||
const connStr = getPath(s);
|
||||
const res = await fetch(`${connStr}/api/prefixes`, {
|
||||
method: 'POST',
|
||||
headers: { 'TAM-KEY': s.remote_key, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(reqData)
|
||||
})
|
||||
if (!res.ok) throw error(res.status);
|
||||
}
|
||||
await db.insert(prefixes).values(reqData).onConflictDoUpdate({ target: prefixes.prefix, set: { color: sql`EXCLUDED.color`, weight: sql`EXCLUDED.weight` } });
|
||||
return json(reqData);
|
||||
}
|
||||
|
||||
export const DELETE = async ({ url }) => {
|
||||
const p = url.searchParams.get('p');
|
||||
const s = getSettings();
|
||||
if (s.remote_server) {
|
||||
const connStr = getPath(s);
|
||||
const res = await fetch(`${connStr}/api/prefixes?p=${p}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'TAM-KEY': s.remote_key }
|
||||
});
|
||||
if (!res.ok) throw error(res.status);
|
||||
}
|
||||
await db.delete(prefixes).where(eq(prefixes.prefix, p));
|
||||
return json({ message: "Deleted successfully."});
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { setSettings } from "$lib/server/settings";
|
||||
import { json } from "@sveltejs/kit";
|
||||
|
||||
export const POST = async ({ request }) => {
|
||||
const newSettings = await request.json();
|
||||
setSettings(newSettings);
|
||||
return json(newSettings);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import 'tailwindcss';
|
||||
@@ -0,0 +1,6 @@
|
||||
import { getSettings } from "$lib/server/settings";
|
||||
|
||||
export const load = () => {
|
||||
const settings = getSettings();
|
||||
return { settings };
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { resolve } from '$app/paths'
|
||||
import { bS, iS, tS } from '$lib/client/styles';
|
||||
import HeaderBar from '$lib/client/components/HeaderBar.svelte'
|
||||
|
||||
let { data } = $props();
|
||||
let settings = $state({});
|
||||
let status = $state({
|
||||
message: '',
|
||||
color: 'green'
|
||||
})
|
||||
|
||||
const pageTitle = 'Settings | TAM';
|
||||
|
||||
onMount(() => {
|
||||
settings = {...data.settings};
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle}</title>
|
||||
</svelte:head>
|
||||
|
||||
<HeaderBar>
|
||||
<div>Settings Sections:</div>
|
||||
{#if data.settings.remote_server}
|
||||
<a href={resolve('/settings/auth-keys')} class={bS.gray}>Auth Keys</a>
|
||||
{/if}
|
||||
<a href={resolve('/settings/prefixes')} class={bS.gray}>Prefixes</a>
|
||||
</HeaderBar>
|
||||
|
||||
<div id="app_container" class="p-1">
|
||||
<h1 class="text-xl font-bold">{pageTitle}</h1>
|
||||
<div class="flex flex-col gap-1 w-full py-1">
|
||||
<h2 class="text-lg font-bold">Remote Mode:</h2>
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<div>Remote Server:</div>
|
||||
<input type="text" class={iS.normal} bind:value={settings.remote_server}>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<div>Remote Port:</div>
|
||||
<input type="text" class={iS.normal} bind:value={settings.remote_port}>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<div>Remote TLS:</div>
|
||||
<button class={bS.gray} onclick={() => {
|
||||
settings.remote_tls = !settings.remote_tls
|
||||
}}>{settings.remote_tls ? 'Yes' : 'No'}</button>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold">Default Preferences:</h2>
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<div>Contact Preference:</div>
|
||||
<button class={bS.gray} onclick={() => {
|
||||
settings.default_pref === 'CALL' ? settings.default_pref = 'TEXT' : settings.default_pref = 'CALL';
|
||||
}}>{settings.default_pref}</button>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<div>Venue Name:</div>
|
||||
<input type="text" class={iS.normal} bind:value={settings.venue_name}>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<button class={bS.gray} onclick={async () => {
|
||||
const res = await fetch('/api/settings', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(settings),
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
})
|
||||
if (!res.ok) {
|
||||
status.message = `Error Code: ${res.status}`;
|
||||
status.color = 'red';
|
||||
} else {
|
||||
const resData = await res.json();
|
||||
settings = {...resData};
|
||||
status.message = 'Settings saved successfully!';
|
||||
status.color = 'green';
|
||||
}
|
||||
}}>Save</button>
|
||||
<button class={bS.gray}>Cancel</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class={tS[status.color]}>{status.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
import { getSettings } from "$lib/server/settings";
|
||||
|
||||
export const load = () => {
|
||||
const s = getSettings();
|
||||
return { authKey: s.remote_key };
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
<script>
|
||||
import HeaderBar from '$lib/client/components/HeaderBar.svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
import { bS, iS } from '$lib/client/styles';
|
||||
let { data } = $props();
|
||||
|
||||
const pageTitle = 'Auth Keys | TAM';
|
||||
|
||||
let auth = $state({
|
||||
toggle: false,
|
||||
pwd: ''
|
||||
});
|
||||
|
||||
let authKeys = $state([]);
|
||||
let newDesc = $state('');
|
||||
let curKey = $state('');
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle}</title>
|
||||
</svelte:head>
|
||||
|
||||
<HeaderBar>
|
||||
<a href={resolve('/settings')} class={bS.gray}>Back to Settings</a>
|
||||
<div>Other Settings:</div>
|
||||
</HeaderBar>
|
||||
|
||||
<div id="app_container" class="p-1">
|
||||
<h1 class="text-xl font-bold">{pageTitle}</h1>
|
||||
{#if !auth.toggle}
|
||||
<div class="flex flex-row gap-1 items-center py-1">
|
||||
<div>Password:</div>
|
||||
<input type="password" class={iS.normal} bind:value={auth.pwd} />
|
||||
<button
|
||||
class={bS.gray}
|
||||
onclick={async () => {
|
||||
const res = await fetch('/api/auth', {
|
||||
headers: { 'TAM-PWD': auth.pwd }
|
||||
});
|
||||
if (res.ok) {
|
||||
auth.toggle = true;
|
||||
const resData = await res.json();
|
||||
authKeys = [...resData];
|
||||
curKey = data.authKey;
|
||||
} else {
|
||||
auth.pwd = 'Invalid Password!';
|
||||
setTimeout(() => (auth.pwd = ''), 3000);
|
||||
}
|
||||
}}>Login</button
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<table class="w-full my-1">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th>AuthKey</th>
|
||||
<th>Description</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each authKeys as key (key.auth_key)}
|
||||
<tr>
|
||||
<td>{'*'.repeat(key.auth_key.length - 4) + key.auth_key.slice(-4)}</td>
|
||||
<td>{key.description}</td>
|
||||
<td
|
||||
><div class="flex flex-row gap-1 items-center">
|
||||
{#if curKey == key.auth_key}
|
||||
<div>(Cur)</div>
|
||||
{:else}
|
||||
<button
|
||||
class={bS.gray}
|
||||
onclick={async () => {
|
||||
const res = await fetch('/api/settings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ remote_key: key.auth_key })
|
||||
});
|
||||
if (res.ok) {
|
||||
curKey = key.auth_key;
|
||||
}
|
||||
}}>Use</button
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
class={bS.red}
|
||||
onclick={async () => {
|
||||
const res = await fetch(`/api/auth?key_to_del=${key.auth_key}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'TAM-PWD': auth.pwd }
|
||||
});
|
||||
if (res.ok) {
|
||||
setTimeout(() => {
|
||||
const newKeys = authKeys.filter(i => i.auth_key !== key.auth_key);
|
||||
authKeys = [...newKeys];
|
||||
}, 1)
|
||||
}
|
||||
}}>Delete</button
|
||||
>
|
||||
</div></td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
<tr>
|
||||
<td>New</td>
|
||||
<td><input type="text" class="{iS.normal} w-full" bind:value={newDesc} /></td>
|
||||
<td>
|
||||
<button
|
||||
class={bS.gray}
|
||||
onclick={async () => {
|
||||
if (newDesc) {
|
||||
const res = await fetch('/api/auth', {
|
||||
method: 'POST',
|
||||
headers: { 'TAM-PWD': auth.pwd, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ description: newDesc })
|
||||
});
|
||||
if (res.ok) {
|
||||
newDesc = '';
|
||||
const data = await res.json();
|
||||
authKeys = [...authKeys, data];
|
||||
}
|
||||
}
|
||||
}}>New Key</button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
table td,
|
||||
table th {
|
||||
border: solid black 1px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
export const load = async ({ fetch }) => {
|
||||
const res = await fetch('/api/prefixes');
|
||||
const prefixes = await res.json();
|
||||
return { prefixes };
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import HeaderBar from "$lib/client/components/HeaderBar.svelte";
|
||||
import { bS, iS } from "$lib/client/styles";
|
||||
import { resolve } from "$app/paths";
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
const pageTitle = 'Prefixes | TAM';
|
||||
|
||||
let prefixes = $state([]);
|
||||
let editPrefix = $state({prefix: '', color: 'white', weight: 1})
|
||||
|
||||
onMount(() => {
|
||||
prefixes = [...data.prefixes];
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle}</title>
|
||||
</svelte:head>
|
||||
|
||||
<HeaderBar>
|
||||
<a href={resolve('/settings')} class={bS.gray}>Back to Settings</a>
|
||||
</HeaderBar>
|
||||
|
||||
<div id="app_container" class="p-1">
|
||||
<h1 class="text-xl font-bold">{pageTitle}</h1>
|
||||
<div class="flex flex-row gap-1 py-1 items-center">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div>Prefix</div>
|
||||
<input type="text" class={iS.normal} bind:value={editPrefix.prefix}>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div>Color</div>
|
||||
<select name="prefix_color" class={iS.normal} bind:value={editPrefix.color}>
|
||||
<option value="white">White</option>
|
||||
<option value="blue">Blue</option>
|
||||
<option value="yellow">Yellow</option>
|
||||
<option value="green">Green</option>
|
||||
<option value="orange">Orange</option>
|
||||
<option value="red">Red</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div>Weight</div>
|
||||
<input type="number" class={iS.normal} bind:value={editPrefix.weight}>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div>Actions</div>
|
||||
<button class={bS[editPrefix.color]} onclick={async () => {
|
||||
if (editPrefix.prefix) {
|
||||
const req = await fetch('/api/prefixes', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify([editPrefix])
|
||||
});
|
||||
if (req.ok) window.location.reload();
|
||||
}
|
||||
}}>Add/Change</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 py-1 items-center">
|
||||
<div>Colors:</div>
|
||||
<button class={bS.white} onclick={() => editPrefix.color = "white"}>White</button>
|
||||
<button class={bS.blue} onclick={() => editPrefix.color = "blue"}>Blue</button>
|
||||
<button class={bS.yellow} onclick={() => editPrefix.color = "yellow"}>Yellow</button>
|
||||
<button class={bS.green} onclick={() => editPrefix.color = "green"}>Green</button>
|
||||
<button class={bS.orange} onclick={() => editPrefix.color = "orange"}>Orange</button>
|
||||
<button class={bS.red} onclick={() => editPrefix.color = "red"}>Red</button>
|
||||
</div>
|
||||
<table class="w-full">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th>Prefix</th>
|
||||
<th>Color</th>
|
||||
<th>Weight</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each prefixes as prefix (prefix.prefix)}
|
||||
<tr>
|
||||
<td>{prefix.prefix}</td>
|
||||
<td>{prefix.color.charAt(0).toUpperCase() + prefix.color.slice(1)}</td>
|
||||
<td>{prefix.weight}</td>
|
||||
<td>
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<button class={bS[prefix.color]} onclick={() => editPrefix = {...prefix}}>Edit</button>
|
||||
<button class={bS[prefix.color]} onclick={async () => {
|
||||
const res = await fetch(`/api/prefixes?p=${prefix.prefix}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (res.ok) window.location.reload();
|
||||
}}>Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
table td, table th {
|
||||
border: solid black 1px;
|
||||
padding: 0.25rem
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user