way better admin login flow

api/advent22_api/routers/admin.py

@@ -7,7 +7,7 @@ from ..core.calendar_config import CalendarConfig, get_calendar_config
 from ..core.config import Config, get_config
 from ..core.depends import shuffle_solution
 from ..core.settings import SETTINGS
-from ._security import user_is_admin
+from ._security import require_admin, user_is_admin
 
 router = APIRouter(prefix="/admin", tags=["admin"])
 

ui/src/components/AdminButton.vue

@@ -1,10 +1,14 @@
 <template>
-  <LoginModal ref="login_modal" @submit="on_login" />
+  <LoginModal
+    v-if="modal_visible"
+    @submit="on_submit"
+    @cancel="modal_visible = false"
+  />
 
   <BulmaButton
     class="button is-light"
-    @click.left="$refs.login_modal.set_active(true)"
+    @click.left="on_click"
-    icon="fa-solid fa-toggle-off"
+    :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
     text="Admin"
   />
 </template>
@@ -28,12 +32,23 @@ import LoginModal from "./LoginModal.vue";
 export default class extends Vue {
   // true, iff Benutzer Admin ist
   public modelValue!: boolean;
+  public modal_visible = false;
 
-  declare $refs: {
+  public on_click() {
-    login_modal: LoginModal;
+    if (this.modelValue) {
-  };
+      // logout
+      this.$advent22.clear_api_auth();
+      this.$emit("update:modelValue", false);
+    } else {
+      // show login modal
+      this.modal_visible = true;
+    }
+  }
+
+  public on_submit(username: string, password: string) {
+    this.modal_visible = false;
+    this.$advent22.set_api_auth(username, password);
 
-  public on_login() {
     this.$advent22
       .api_get<boolean>("admin/is_admin")
       .then((is_admin) => this.$emit("update:modelValue", is_admin));

ui/src/components/LoginModal.vue

@@ -1,50 +1,48 @@
 <template>
-  <div v-show="active" class="modal is-active">
+  <div class="modal is-active">
     <div class="modal-background" />
 
     <div class="modal-card">
-      <form @submit.prevent="submit">
+      <header class="modal-card-head">
-        <header class="modal-card-head">
+        <p class="modal-card-title">Login</p>
-          <p class="modal-card-title">Login</p>
+        <button
-          <button
+          class="delete"
-            class="delete"
+          aria-label="close"
-            aria-label="close"
+          @click.left="$emit('cancel')"
-            @click.left="set_active(false)"
+        />
-          />
+      </header>
-        </header>
 
-        <section class="modal-card-body">
+      <section class="modal-card-body">
-          <div class="field">
+        <div class="field">
-            <label class="label">Username</label>
+          <label class="label">Username</label>
-            <div class="control">
+          <div class="control">
-              <input
+            <input
-                ref="username_input"
+              ref="username_input"
-                class="input"
+              class="input"
-                type="text"
+              type="text"
-                v-model="username"
+              v-model="username"
-              />
+            />
-            </div>
           </div>
+        </div>
 
-          <div class="field">
+        <div class="field">
-            <label class="label">Passwort</label>
+          <label class="label">Passwort</label>
-            <div class="control">
+          <div class="control">
-              <input class="input" type="password" v-model="password" />
+            <input class="input" type="password" v-model="password" />
-            </div>
           </div>
-        </section>
+        </div>
-      </form>
+      </section>
 
       <footer class="modal-card-foot is-flex is-justify-content-space-around">
         <BulmaButton
           class="button is-success"
-          @click.left="submit"
+          @click.left="$emit('submit', username, password)"
           icon="fa-solid fa-unlock"
           text="Login"
         />
         <BulmaButton
           class="button is-danger"
-          @click.left="set_active(false)"
+          @click.left="$emit('cancel')"
           icon="fa-solid fa-circle-xmark"
           text="Abbrechen"
         />
@@ -62,10 +60,12 @@ import BulmaButton from "./bulma/Button.vue";
   components: {
     BulmaButton,
   },
-  emits: ["submit"],
+  props: {
+    visible: Boolean,
+  },
+  emits: ["cancel", "submit"],
 })
 export default class extends Vue {
-  public active = false;
   public username = "";
   public password = "";
 
@@ -73,31 +73,24 @@ export default class extends Vue {
     username_input: HTMLInputElement | null | undefined;
   };
 
-  public created() {
+  private on_keydown(e: KeyboardEvent) {
-    window.addEventListener("keydown", (e) => {
+    if (e.key == "Escape") this.$emit("cancel");
-      if (e.key == "Escape") this.set_active(false);
+    else if (e.key == "Enter")
+      this.$emit("submit", this.username, this.password);
+  }
+
+  public mounted(): void {
+    window.addEventListener("keydown", this.on_keydown);
+
+    this.$nextTick(() => {
+      if (this.$refs.username_input instanceof HTMLInputElement) {
+        this.$refs.username_input.focus();
+      }
     });
   }
 
-  public set_active(state: boolean) {
+  public beforeUnmount(): void {
-    this.active = state;
+    window.removeEventListener("keydown", this.on_keydown);
-
-    if (this.active) {
-      this.username = "";
-      this.password = "";
-
-      this.$nextTick(() => {
-        if (this.$refs.username_input instanceof HTMLInputElement) {
-          this.$refs.username_input?.focus();
-        }
-      });
-    }
-  }
-
-  public submit() {
-    this.$advent22.set_api_auth(this.username, this.password);
-    this.$emit("submit");
-    this.set_active(false);
   }
 }
 </script>

ui/src/plugins/advent22.ts

@@ -38,6 +38,10 @@ export class Advent22 {
     return `${this.api_baseurl}/${endpoint}`;
   }
 
+  public clear_api_auth() {
+    this.api_auth = { username: "", password: "" };
+  }
+
   public set_api_auth(username: string, password: string) {
     this.api_auth = { username: username, password: password };
   }