move api credentials to pinia store

ui/src/App.vue

@@ -8,7 +8,7 @@
 
   <section class="section">
     <div class="container">
-      <AdminView v-if="is_admin" />
+      <AdminView v-if="store.is_admin" />
       <UserView v-else />
     </div>
   </section>
@@ -22,10 +22,7 @@
       </div>
       <div class="level-right">
         <TouchButton class="level-item tag is-warning" />
-        <AdminButton
+        <AdminButton class="level-item tag is-link is-outlined" />
-          class="level-item tag is-link is-outlined"
-          v-model="is_admin"
-        />
       </div>
     </div>
   </footer>
@@ -33,6 +30,7 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
+import { advent22Store } from "./plugins/store";
 
 import AdminView from "./components/admin/AdminView.vue";
 import AdminButton from "./components/AdminButton.vue";
@@ -48,10 +46,10 @@ import UserView from "./components/UserView.vue";
   },
 })
 export default class extends Vue {
-  public is_admin = false;
   public title = "Adventskalender";
   public subtitle = "Lorem Ipsum";
   public footer = "";
+  public readonly store = advent22Store();
 
   public mounted(): void {
     Promise.all([

ui/src/components/AdminButton.vue

@@ -3,7 +3,7 @@
 
   <BulmaButton
     v-bind="$attrs"
-    :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
+    :icon="'fa-solid fa-toggle-' + (store.is_admin ? 'on' : 'off')"
     :busy="is_busy"
     text="Admin"
     @click.left="on_click"
@@ -12,6 +12,7 @@
 
 <script lang="ts">
 import { Credentials } from "@/lib/api";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaButton from "./bulma/Button.vue";
@@ -22,23 +23,15 @@ import LoginModal from "./LoginModal.vue";
     BulmaButton,
     LoginModal,
   },
-  props: {
-    modelValue: Boolean,
-  },
-  emits: ["update:modelValue"],
 })
 export default class extends Vue {
-  // true, iff Benutzer Admin ist
-  public modelValue!: boolean;
-
   public modal_visible = false;
   public is_busy = false;
+  public readonly store = advent22Store();
 
   public on_click() {
-    if (this.modelValue) {
+    if (this.store.is_admin) {
-      // logout
+      this.store.logout();
-      this.$advent22.clear_api_auth();
-      this.$emit("update:modelValue", false);
     } else {
       // show login modal
       this.is_busy = true;
@@ -48,18 +41,11 @@ export default class extends Vue {
 
   public on_submit(creds: Credentials) {
     this.modal_visible = false;
-    this.$advent22.api_auth = creds;
 
-    this.$advent22
+    this.store
-      .api_get<boolean>("admin/is_admin")
+      .login(creds)
-      .then((is_admin) => {
+      .catch((error) => alert(this.$advent22.format_user_error(error)))
-        this.$emit("update:modelValue", is_admin);
+      .finally(() => (this.is_busy = false));
-        this.is_busy = false;
-      })
-      .catch((error) => {
-        alert(this.$advent22.format_user_error(error));
-        this.is_busy = false;
-      });
   }
 
   public on_cancel() {

ui/src/plugins/advent22.ts

@@ -1,15 +1,9 @@
-import { Credentials } from "@/lib/api";
+import axios, { AxiosError, AxiosInstance, ResponseType } from "axios";
-import axios, {
-  AxiosBasicCredentials,
-  AxiosError,
-  AxiosInstance,
-  ResponseType,
-} from "axios";
 import { App, Plugin } from "vue";
+import { advent22Store } from "./store";
 
 export class Advent22 {
   private axios: AxiosInstance;
-  private _api_auth: Credentials = ["", ""];
 
   public constructor() {
     this.axios = axios.create({
@@ -83,25 +77,6 @@ export class Advent22 {
     return result();
   }
 
-  public get api_auth(): AxiosBasicCredentials {
-    const [username, password] = this._api_auth;
-    return { username: username, password: password };
-  }
-
-  public set_api_auth(): void;
-  public set_api_auth(creds: Credentials): void;
-  public set_api_auth(creds: Credentials = ["", ""]): void {
-    this._api_auth = creds;
-  }
-
-  public clear_api_auth(): void {
-    this.set_api_auth();
-  }
-
-  public set api_auth(creds: Credentials) {
-    this.set_api_auth(creds);
-  }
-
   public api_url(): string;
   public api_url(endpoint: string): string;
   public api_url(endpoint?: string): string {
@@ -123,7 +98,7 @@ export class Advent22 {
     responseType: ResponseType = "json",
   ): Promise<T> {
     const req_config = {
-      auth: this.api_auth,
+      auth: advent22Store().axios_creds,
       responseType: responseType,
     };
 
@@ -162,7 +137,7 @@ export class Advent22 {
 
   public api_put(endpoint: string, data: unknown): Promise<void> {
     const req_config = {
-      auth: this.api_auth,
+      auth: advent22Store().axios_creds,
     };
 
     return new Promise<void>((resolve, reject) => {
@@ -177,8 +152,10 @@ export class Advent22 {
   }
 }
 
+export const ADVENT22 = new Advent22();
+
 export const Advent22Plugin: Plugin = {
   install(app: App) {
-    app.config.globalProperties.$advent22 = new Advent22();
+    app.config.globalProperties.$advent22 = ADVENT22;
   },
 };

ui/src/plugins/store.ts

@@ -1,29 +1,44 @@
-// import { Credentials } from "@/lib/api";
+import { Credentials } from "@/lib/api";
-// import { AxiosBasicCredentials } from "axios";
+import { ADVENT22 } from "@/plugins/advent22";
+import { AxiosBasicCredentials } from "axios";
 import { acceptHMRUpdate, defineStore } from "pinia";
 
 const check_touch_device = () => window.matchMedia("(any-hover: none)").matches;
-// const empty_creds = () => ["", ""] as Credentials;
+const empty_creds = () => ["", ""] as Credentials;
 
 export const advent22Store = defineStore({
   id: "advent22",
 
   state: () => ({
-    // api_creds: empty_creds(),
+    api_creds: empty_creds(),
+    is_admin: false,
     is_touch_device: check_touch_device(),
   }),
 
-  // getters: {
+  getters: {
-  //   axios_creds: (state): AxiosBasicCredentials => {
+    axios_creds: (state): AxiosBasicCredentials => {
-  //     const [username, password] = state.api_creds;
+      const [username, password] = state.api_creds;
-  //     return { username: username, password: password };
+      return { username: username, password: password };
-  //   },
+    },
-  // },
+  },
 
   actions: {
-    // set_api_creds(creds: Credentials = empty_creds()): void {
+    login(creds: Credentials = empty_creds()): Promise<boolean> {
-    //   this.api_creds = creds;
+      this.api_creds = creds;
-    // },
+
+      return new Promise<boolean>((resolve, reject) => {
+        ADVENT22.api_get<boolean>("admin/is_admin")
+          .then((is_admin) => {
+            this.is_admin = is_admin;
+            resolve(is_admin);
+          })
+          .catch(reject);
+      });
+    },
+
+    logout(): Promise<boolean> {
+      return this.login();
+    },
 
     set_touch_device(state: boolean = check_touch_device()): void {
       this.is_touch_device = state;