Init

frontend/src/App.vue

@@ -0,0 +1,91 @@
+<template>
+  <Toast style="width: 90vw" position="bottom-right" group="br" />
+  <TheNavigation @logout="logout" />
+  <div class="m-2">
+    <router-view v-slot="{ Component }">
+      <Transition mode="out-in">
+        <component :is="Component" />
+      </Transition>
+    </router-view>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import TheNavigation from "@/components/UI/TheNavigation.vue";
+import Toast from "primevue/toast";
+
+export default defineComponent({
+  name: "App",
+  components: { TheNavigation, Toast },
+  setup() {
+    async function logout() {
+      const response = await fetch("/auth/api/logout", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({}),
+      });
+      const result = await response.json();
+      result.status === "OK" && window.location.reload();
+    }
+    return { logout };
+  },
+});
+</script>
+
+<style lang="less">
+@import "primevue/resources/themes/saga-blue/theme.css";
+@import "primevue/resources/themes/vela-blue/theme.css" screen and (prefers-color-scheme: dark);
+
+@media (prefers-color-scheme: light) {
+  img {
+    content: url(@/assets/logos/logo.png);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  img {
+    content: url(@/assets/logos/logo_white.png);
+  }
+}
+
+@font-face {
+  font-family: "roboto";
+  src: url(@/assets/fonts/roboto.ttf);
+  font-display: swap;
+}
+
+.p-button.p-button-success:enabled:focus,
+.p-button.p-button-danger:enabled:focus,
+.p-button.p-button-success:enabled:active,
+.p-button.p-button-danger:enabled:active {
+  box-shadow: none !important;
+}
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--surface-b);
+}
+html,
+body {
+  font-size: 1.2em;
+  font-family: "roboto", sans-serif;
+}
+.p-component {
+  font-family: "roboto", sans-serif;
+}
+</style>
+
+<style scoped>
+.v-enter-active {
+  transition: opacity 0.2s ease-in;
+}
+.v-leave-active {
+  transition: opacity 0.1s ease-out;
+}
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>