Anmeldungsfeld

ui/src/App.vue

@@ -6,6 +6,7 @@
       </h1>
       <h2 class="subtitle has-text-centered">Der Gelöt</h2>
 
+      <LoginModal ref="login_modal" />
       <ImageModal v-model="modal_visible" :imageUrl="image_url" />
       <CalendarDoor
         v-for="(_, index) in 24"
@@ -19,13 +20,16 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
+
 import CalendarDoor from "./components/CalendarDoor.vue";
 import ImageModal from "./components/ImageModal.vue";
+import LoginModal from "./components/LoginModal.vue";
 
 @Options({
   components: {
     CalendarDoor,
     ImageModal,
+    LoginModal,
   },
 })
 export default class App extends Vue {
@@ -33,10 +37,16 @@ export default class App extends Vue {
   modal_visible = false;
   date = "";
 
+  declare $refs: {
+    login_modal: LoginModal;
+  };
+
   public mounted(): void {
     this.$advent22.api_get_string("days/date", (date: string) => {
       this.date = date;
     });
+
+    this.$refs.login_modal.set_active(true);
   }
 
   private paula(url: string): void {

ui/src/components/LoginModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="modal is-active" v-if="active">
+    <div class="modal-background" />
+
+    <div class="modal-card">
+      <form @submit.prevent="submit">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Login</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+
+        <section class="modal-card-body">
+          <div class="field">
+            <label class="label">Username</label>
+            <div class="control">
+              <input class="input" type="text" v-model="username" />
+            </div>
+          </div>
+
+          <div class="field">
+            <label class="label">Password</label>
+            <div class="control">
+              <input class="input" type="password" v-model="password" />
+            </div>
+          </div>
+        </section>
+
+        <footer class="modal-card-foot">
+          <button class="button is-success" @click="submit">Login</button>
+          <button class="button is-danger" @click="set_active(false)">
+            Cancel
+          </button>
+        </footer>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+
+export default class LoginModal extends Vue {
+  private active = false;
+  private username = "";
+  private password = "";
+
+  public set_active(state: boolean): void {
+    this.active = state;
+
+    this.username = "";
+    this.password = "";
+  }
+
+  private submit(): void {
+    this.$advent22.set_api_auth(this.username, this.password);
+    this.set_active(false);
+  }
+}
+</script>

ui/src/plugins/advent22.ts

@@ -30,7 +30,7 @@ export class Advent22 {
     return `${this.api_baseurl}/${endpoint}`;
   }
 
-  public api_auth_set(username: string, password: string) {
+  public set_api_auth(username: string, password: string) {
     this.api_auth = { username: username, password: password };
   }