first commit

frontend/src/App.svelte

@@ -0,0 +1,9 @@
+<script>
+    import Homepage from "./Components/Homepage.svelte";
+    import Login    from "./Components/Login.svelte";
+    import Menu     from "./Components/Menu.svelte";
+</script>
+
+<Menu />
+<Homepage />
+<Login />

frontend/src/Components/Homepage.svelte

@@ -0,0 +1 @@
+<h1>Welcome</h1>

frontend/src/Components/Login.svelte

@@ -0,0 +1,44 @@
+<script>
+    import { onMount } from 'svelte';
+    import { t, loadTranslation } from './translations.js'
+    let ready = false;
+    onMount(async () => {
+        await loadTranslation('en','Login');
+        ready = true;
+    });
+</script>
+<style>
+    label { display: block; margin: 5px; }
+    fieldset {
+        display: block;
+        position: relative;
+        left: 50%;
+        width: 200px;
+        margin-left: -100px;
+        margin-bottom: 30px;
+        text-align: center;
+    }
+</style>
+
+{#if ready}
+<fieldset>
+    <legend>{t('Login','Login')}</legend>
+    <label>
+        <input type="text" />
+        <span>Email/Username</span>
+    </label>
+    <label>
+        <input type="password" />
+        <span>Password</span>
+    </label>
+    <button>Login</button>
+</fieldset>
+
+<fieldset>
+    <legend>OIDC Login</legend>
+    <button>SRSoftware</button>
+    <button>ORC ID</button>
+</fieldset>
+{:else}
+    <p>Loading translations...</p>
+{/if}

frontend/src/Components/Menu.svelte

@@ -0,0 +1,3 @@
+<nav>
+    <a href="/">Home</a>
+</nav>

frontend/src/Components/translations.js

@@ -0,0 +1,17 @@
+const translations = {}
+
+export async function loadTranslation(lang,page){
+    if (!translations[lang]) translations[lang] = {};
+    if (translations[lang][page]) return;
+    var url = `${location.protocol}//${location.host.replace('5173','8080')}/api/translations/${lang}/${page}`;
+    const resp = await fetch(url);
+    const json = await resp.json();
+    translations[lang][page] = json;
+}
+
+export function t(page,key){
+    const lang = 'en';
+    if (!translations[lang]) return key;
+    if (!translations[lang][page]) return key;
+    return translations[lang][page][key] ? translations[lang][page][key] : key;
+}

frontend/src/app.css

@@ -0,0 +1,26 @@
+body {
+    background: black;
+    color: orange;
+}
+
+fieldset {
+    border: 1px solid orange;
+    border-radius: 4px;
+}
+
+input{
+    background: black;
+    border: 1px dotted orange;
+    border-radius: 4px;
+    padding: 3px;
+    margin: 3px;
+}
+
+button{
+    background: orange;
+    border-radius: 5px;
+    padding: 5px 7px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: yellow red red yellow;
+}

frontend/src/main.js

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app'),
+})
+
+export default app

frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />