From 2aff1f3a994a0adbbd9d4327c0a88d371f15e86d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 28 Dec 2025 01:55:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20ui:=20BulmaSecret=20state=20mach?=
 =?UTF-8?q?ine=20rework?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/bulma/Secret.vue | 43 ++++++++++++------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/bulma/Secret.vue b/ui/src/components/bulma/Secret.vue
index a691b54..c51b80e 100644
--- a/ui/src/components/bulma/Secret.vue
+++ b/ui/src/components/bulma/Secret.vue
@@ -1,17 +1,17 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <slot v-if="state === 'show'" name="default" />
+  <slot v-if="state === 'visible'" name="default" />
   <span v-else>***</span>
   <BulmaButton
-    :class="`is-small is-${button_class} ml-2`"
-    :icon="['fas', `${button_icon}`]"
-    :busy="state === 'click'"
+    :class="`is-small is-${record.color} ml-2`"
+    :icon="['fas', `${record.icon}`]"
+    :busy="state === 'clicked'"
     @click="on_click"
   />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import BulmaButton from "./Button.vue";
 
@@ -19,30 +19,21 @@ const emit = defineEmits<{
   (event: "load"): void;
 }>();
 
-const state = ref<"start" | "click" | "show">("start");
-const button_class = ref<"primary" | "warning" | "danger">("primary");
-const button_icon = ref<"eye-slash" | "eye">("eye-slash");
+type State = "hidden" | "clicked" | "visible";
+const state = ref<State>("hidden");
+
+const state_map: Record<State, { color: string; icon: string; next: State }> = {
+  hidden: { color: "primary", icon: "eye-slash", next: "clicked" },
+  clicked: { color: "warning", icon: "eye-slash", next: "visible" },
+  visible: { color: "danger", icon: "eye", next: "hidden" },
+} as const;
+const record = computed(() => state_map[state.value] ?? state_map.hidden);
 
 function on_click(): void {
-  switch (state.value) {
-    case "show":
-      state.value = "start";
-      button_class.value = "primary";
-      button_icon.value = "eye-slash";
-      break;
+  state.value = record.value.next;
 
-    case "start":
-      state.value = "click";
-      button_class.value = "warning";
-      button_icon.value = "eye-slash";
-      break;
-
-    case "click":
-      state.value = "show";
-      button_class.value = "danger";
-      button_icon.value = "eye";
-      emit("load");
-      break;
+  if (state.value === "visible") {
+    emit("load");
   }
 }
 </script>