rename frontend directory

frontend/src/App.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { ref } from 'vue';
+import { RouterLink, RouterView } from 'vue-router'
+import Sidebar from './components/main/Sidebar.vue'
+import Alerts from './components/main/Alerts.vue'
+import ContextMenu from './components/main/ContextMenu.vue'
+
+import * as ui from './ui';
+import * as backend from './backend';
+
+// possible states: loading, login, signup, logged
+const loginState = ref('loading');
+
+function triggerAlert () {
+  ui.alert("This is an alert");
+}
+
+function handleAuthResult (success) {
+  loginState.value = success ? 'logged' : 'login';
+}
+
+function loginSubmit (formElem) {
+  let username = formElem.username.value;
+  let password = formElem.password.value;
+
+  loginState.value = 'loading';
+  backend.login(username, password).then(handleAuthResult);
+}
+
+function signupSubmit (formElem) {
+  let email = formElem.email.value;
+  let username = formElem.username.value;
+  let password = formElem.password.value;
+  let passwordRepeat = formElem.passwordRepeat.value;
+
+  if (password != passwordRepeat) {
+    ui.alert("Passwords don't match");
+    return;
+  }
+
+  loginState.value = 'loading';
+  backend.signup(username, email, password).then(handleAuthResult);
+}
+
+backend.authResult().then(handleAuthResult);
+</script>
+
+<template>
+  <Alerts />
+  <ContextMenu />
+
+  <div class="container" v-if="loginState=='loading'">
+    <div class="content">
+      Loading...
+    </div>
+  </div>
+
+  <div class="container" v-if="loginState=='login'">
+    <div class="content">
+      <h3>Login</h3>
+
+      <form @submit.prevent="loginSubmit($event.target)">
+        <input name="username" type="text" placeholder="username">
+        <input name="password" type="password" placeholder="password">
+        <button class="button" type="submit">Login</button>
+        <p style="margin-top: 2em;">
+          Don't have a user?
+          <a href="#" @click.prevent="loginState='signup'">Signup</a>.
+        </p>
+      </form>
+    </div>
+  </div>
+
+  <div class="container" v-if="loginState=='signup'">
+    <div class="content">
+      <h3>Login</h3>
+
+      <form @submit.prevent="signupSubmit($event.target)">
+        <input name="email" type="text" placeholder="email">
+        <input name="username" type="text" placeholder="username">
+        <input name="password" type="password" placeholder="password">
+        <input name="passwordRepeat" type="password" placeholder="password">
+        <button class="button" type="submit">Login</button>
+
+        <p style="margin-top: 2em;">
+          Already have a user?
+          <a href="#" @click.prevent="loginState='login'">Login</a>.
+        </p>
+      </form>
+    </div>
+  </div>
+
+  <template v-if="loginState=='logged'">
+    <Sidebar />
+    <RouterView />
+  </template>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.content {
+  flex-grow: 1;
+  text-align: center;
+  max-width: 700px;
+  padding: 2em;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+}
+</style>