first commit

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;
+}