feat(connection): allow revealing saved passwords

apps/desktop/src/components/connection/ConnectionDialog.vue

@@ -3482,7 +3482,7 @@ function openExternalUrl(url: string) {
                   <template v-if="mqAuthKind === 'token'">
                     <div class="grid grid-cols-4 items-center gap-4">
                       <Label :class="connectionLabelClass">Token</Label>
-                      <Input v-model="mqToken" type="password" class="col-span-3" />
+                      <PasswordInput v-model="mqToken" class="col-span-3" />
                     </div>
                   </template>
                   <template v-else-if="mqAuthKind === 'basic'">
@@ -3492,7 +3492,7 @@ function openExternalUrl(url: string) {
                     </div>
                     <div class="grid grid-cols-4 items-center gap-4">
                       <Label :class="connectionLabelClass">{{ t("connection.password") }}</Label>
-                      <Input v-model="mqBasicPassword" type="password" class="col-span-3" />
+                      <PasswordInput v-model="mqBasicPassword" class="col-span-3" />
                     </div>
                     <div v-if="mqSystemKind === 'kafka'" class="grid grid-cols-4 items-center gap-4">
                       <Label :class="connectionLabelClass">SASL Mechanism</Label>
@@ -3515,7 +3515,7 @@ function openExternalUrl(url: string) {
                     </div>
                     <div class="grid grid-cols-4 items-center gap-4">
                       <Label :class="connectionLabelClass">Value</Label>
-                      <Input v-model="mqApiKeyValue" type="password" class="col-span-3" />
+                      <PasswordInput v-model="mqApiKeyValue" class="col-span-3" />
                     </div>
                   </template>
                   <template v-else-if="mqAuthKind === 'oauth2'">
@@ -3529,7 +3529,7 @@ function openExternalUrl(url: string) {
                     </div>
                     <div class="grid grid-cols-4 items-center gap-4">
                       <Label :class="connectionLabelClass">Client Secret</Label>
-                      <Input v-model="mqOauthClientSecret" type="password" class="col-span-3" />
+                      <PasswordInput v-model="mqOauthClientSecret" class="col-span-3" />
                     </div>
                     <div class="grid grid-cols-4 items-center gap-4">
                       <Label :class="connectionLabelClass">Audience</Label>

apps/desktop/src/components/ui/PasswordInput.vue

@@ -1,26 +1,35 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { Eye, EyeOff } from "@lucide/vue";
 import { Input } from "@/components/ui/input";
 
 const model = defineModel<string>();
 
-const props = defineProps<{
-  placeholder?: string;
-  disabled?: boolean;
-  class?: string;
-  inputClass?: string;
-  showToggle?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    inputClass?: string;
+    showToggle?: boolean;
+    showLabel?: string;
+    hideLabel?: string;
+  }>(),
+  {
+    showToggle: true,
+  },
+);
 
 const visible = ref(false);
-const showToggle = computed(() => props.showToggle ?? true);
+const { t } = useI18n();
+const toggleLabel = computed(() => (visible.value ? props.hideLabel || t("common.hidePassword") : props.showLabel || t("common.showPassword")));
 </script>
 
 <template>
   <div :class="props.class" class="relative">
-    <Input v-model="model" :type="visible ? 'text' : 'password'" :placeholder="placeholder" :disabled="disabled" :class="[props.inputClass, showToggle ? 'pr-8' : undefined]" v-bind="$attrs" />
-    <button v-if="showToggle" type="button" :disabled="disabled" class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:pointer-events-none" tabindex="-1" @click="visible = !visible">
+    <Input v-model="model" :type="visible ? 'text' : 'password'" :placeholder="placeholder" :disabled="disabled" :class="[props.inputClass, props.showToggle ? 'pr-8' : undefined]" v-bind="$attrs" />
+    <button v-if="props.showToggle" type="button" :disabled="disabled" class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-50" :aria-label="toggleLabel" :title="toggleLabel" @click="visible = !visible">
       <Eye v-if="!visible" class="size-3.5" />
       <EyeOff v-else class="size-3.5" />
     </button>

apps/desktop/src/i18n/locales/en.ts

@@ -931,6 +931,8 @@ export default {
     more: "More",
     decrease: "Decrease",
     increase: "Increase",
+    showPassword: "Show password",
+    hidePassword: "Hide password",
     done: "Done",
     connection: "Connection",
     database: "Database",

apps/desktop/src/i18n/locales/es.ts

@@ -916,6 +916,8 @@ export default withEnglishFallback({
     remove: "Eliminar",
     retry: "Reintentar",
     more: "Más",
+    showPassword: "Mostrar contraseña",
+    hidePassword: "Ocultar contraseña",
     done: "Listo",
     connection: "Conexión",
     database: "Base de datos",

apps/desktop/src/i18n/locales/it.ts

@@ -932,6 +932,8 @@ export default withEnglishFallback({
     more: "Altro",
     decrease: "Riduci",
     increase: "Aumenta",
+    showPassword: "Mostra password",
+    hidePassword: "Nascondi password",
     done: "Fatto",
     connection: "Connessione",
     database: "Database",

apps/desktop/src/i18n/locales/ja.ts

@@ -914,6 +914,8 @@ export default withEnglishFallback({
     save: "保存",
     retry: "再試行",
     more: "もっと見る",
+    showPassword: "パスワードを表示",
+    hidePassword: "パスワードを隠す",
     done: "完了",
     connection: "接続",
     database: "データベース",

apps/desktop/src/i18n/locales/pt-BR.ts

@@ -925,6 +925,8 @@ export default withEnglishFallback({
     save: "Salvar",
     retry: "Tentar novamente",
     more: "Mais",
+    showPassword: "Mostrar senha",
+    hidePassword: "Ocultar senha",
     done: "Concluído",
     copy: "Copiar",
     import: "Importar",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -934,6 +934,8 @@ export default withEnglishFallback({
     more: "更多",
     decrease: "减小",
     increase: "增大",
+    showPassword: "显示密码",
+    hidePassword: "隐藏密码",
     done: "完成",
     connection: "连接",
     database: "数据库",

apps/desktop/src/i18n/locales/zh-TW.ts

@@ -917,6 +917,8 @@ export default withEnglishFallback({
     remove: "移除",
     retry: "重試",
     more: "更多",
+    showPassword: "顯示密碼",
+    hidePassword: "隱藏密碼",
     done: "完成",
     connection: "連線",
     database: "資料庫",