From bd7bc3895404fd53b2668d0af74014a60ea395fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Tue, 12 Sep 2023 22:05:48 +0000
Subject: [PATCH] endpoints "credentials" (routers.admin)

---
 api/advent22_api/routers/admin.py  | 23 +++++++++++
 ui/src/components/ConfigView.vue   | 61 ++++++++++++++++++++++++------
 ui/src/components/bulma/Secret.vue | 55 +++++++++++++++++++++++++++
 3 files changed, 127 insertions(+), 12 deletions(-)
 create mode 100644 ui/src/components/bulma/Secret.vue

diff --git a/api/advent22_api/routers/admin.py b/api/advent22_api/routers/admin.py
index 387a5b0..aabccbf 100644
--- a/api/advent22_api/routers/admin.py
+++ b/api/advent22_api/routers/admin.py
@@ -149,3 +149,26 @@ async def put_doors(
         key=lambda door: door.day,
     )
     await cal_cfg.change(cfg)
+
+
+@router.get("/dav_credentials")
+async def get_dav_credentials(
+    _: None = Depends(require_admin),
+) -> tuple[str, str]:
+    """
+    Zugangsdaten für WebDAV
+    """
+
+    return SETTINGS.webdav.username, SETTINGS.webdav.password
+
+
+@router.get("/ui_credentials")
+async def get_ui_credentials(
+    _: None = Depends(require_admin),
+    cfg: Config = Depends(get_config),
+) -> tuple[str, str]:
+    """
+    Zugangsdaten für Admin-UI
+    """
+
+    return cfg.admin.name, cfg.admin.password
diff --git a/ui/src/components/ConfigView.vue b/ui/src/components/ConfigView.vue
index ec9d336..fb68623 100644
--- a/ui/src/components/ConfigView.vue
+++ b/ui/src/components/ConfigView.vue
@@ -90,12 +90,14 @@
               <dd>{{ config_model.webdav.url }}</dd>
 
               <dt>Zugangsdaten</dt>
-              <!-- TODO -->
-              <dd>
-                <span>***</span>
-                <button class="tag button icon is-primary ml-2">
-                  <font-awesome-icon icon="fa-solid fa-eye" />
-                </button>
+              <dd class="is-family-monospace">
+                <BulmaSecret @load="load_dav_credentials">
+                  <span class="tag is-danger">user</span>
+                  {{ dav_credentials.username }}
+                  <br />
+                  <span class="tag is-danger">pass</span>
+                  {{ dav_credentials.password }}
+                </BulmaSecret>
               </dd>
 
               <dt>Cache-Dauer</dt>
@@ -105,12 +107,14 @@
               <dd>{{ config_model.webdav.config_file }}</dd>
 
               <dt>UI-Admin</dt>
-              <!-- TODO -->
-              <dd>
-                <span>***</span>
-                <button class="tag button icon is-primary ml-2">
-                  <font-awesome-icon icon="fa-solid fa-eye" />
-                </button>
+              <dd class="is-family-monospace">
+                <BulmaSecret @load="load_ui_credentials">
+                  <span class="tag is-danger">user</span>
+                  {{ ui_credentials.username }}
+                  <br />
+                  <span class="tag is-danger">pass</span>
+                  {{ ui_credentials.password }}
+                </BulmaSecret>
               </dd>
             </dl>
           </div>
@@ -125,10 +129,17 @@ import { ConfigModel, DayStrModel, DoorsSaved } from "@/lib/api";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaDrawer from "./bulma/Drawer.vue";
+import BulmaSecret from "./bulma/Secret.vue";
+
+interface Credentials {
+  username: string;
+  password: string;
+}
 
 @Options({
   components: {
     BulmaDrawer,
+    BulmaSecret,
   },
 })
 export default class extends Vue {
@@ -159,6 +170,8 @@ export default class extends Vue {
   };
   public day_parts: DayStrModel[] = [];
   public num_user_doors = 0;
+  public dav_credentials: Credentials = { username: "", password: "" };
+  public ui_credentials: Credentials = { username: "", password: "" };
 
   public on_open(): void {
     this.is_loaded = false;
@@ -177,6 +190,30 @@ export default class extends Vue {
       })
       .catch(console.log);
   }
+
+  public load_dav_credentials(): void {
+    this.$advent22
+      .api_get<string[]>("admin/dav_credentials")
+      .then(([username, password]) => {
+        this.dav_credentials = {
+          username: username,
+          password: password,
+        };
+      })
+      .catch(console.log);
+  }
+
+  public load_ui_credentials(): void {
+    this.$advent22
+      .api_get<string[]>("admin/ui_credentials")
+      .then(([username, password]) => {
+        this.ui_credentials = {
+          username: username,
+          password: password,
+        };
+      })
+      .catch(console.log);
+  }
 }
 </script>
 
diff --git a/ui/src/components/bulma/Secret.vue b/ui/src/components/bulma/Secret.vue
new file mode 100644
index 0000000..e108d4c
--- /dev/null
+++ b/ui/src/components/bulma/Secret.vue
@@ -0,0 +1,55 @@
+<template>
+  <slot v-if="show" name="default" />
+  <span v-else>***</span>
+  <button :class="`tag button icon is-${button_class} ml-2`" @click="on_click">
+    <font-awesome-icon :icon="`fa-solid fa-${button_icon}`" />
+  </button>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+enum ClickState {
+  Green = 0,
+  Yellow = 1,
+  Red = 2,
+}
+
+@Options({
+  emits: ["load"],
+})
+export default class extends Vue {
+  public click_state = ClickState.Green;
+
+  public on_click(): void {
+    this.click_state = (this.click_state + 1) % 3;
+
+    if (this.click_state === ClickState.Red) {
+      this.$emit("load");
+    }
+  }
+
+  public get show(): boolean {
+    return this.click_state === ClickState.Red;
+  }
+
+  public get button_class(): string {
+    switch (this.click_state) {
+      case ClickState.Red:
+        return "danger";
+      case ClickState.Yellow:
+        return "warning";
+      default:
+        return "primary";
+    }
+  }
+
+  public get button_icon(): string {
+    if (this.click_state === ClickState.Red) {
+      return "eye-slash";
+    } else {
+      return "eye";
+    }
+  }
+}
+</script>