api key fields obfuscation

src/components/InputObfuscated.vue

@@ -0,0 +1,64 @@
+
+<template>
+  <div class="wrapper">
+    <input :type="type" v-model="value" @keyup="onKeyUp" />
+    <component :is="icon" class="icon" @click="onToggleView" />
+  </div>
+</template>
+
+<script setup>
+
+import { ref, computed } from 'vue'
+
+const type = ref('password')
+
+const value = defineModel()
+
+const emit = defineEmits(['change']);
+
+const icon = computed(() => {
+  return type.value === 'password' ? 'BIconEye' : 'BIconEyeSlash'
+})
+
+const onToggleView = () => {
+  if (type.value === 'password') {
+    type.value = 'text'
+  } else {
+    type.value = 'password'
+  }
+}
+
+const onKeyUp = (event) => {
+  emit('change')
+}
+
+</script>
+
+<style scoped>
+@import '../../css/form.css';
+</style>
+
+<style scoped>
+
+.wrapper {
+  flex: 1;
+  position: relative;
+}
+
+form .group .wrapper input {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 6px;
+  padding-right: 26px;
+  font-family: monospace;
+  font-size: calc(var(--form-font-size) - 0.5px) !important;
+}
+
+.icon {
+  cursor: pointer;
+  position: absolute;
+  top: 4px;
+  right: 6px;
+}
+
+</style>

src/settings/SettingsAnthropic.vue

@@ -4,7 +4,7 @@
     <div class="group">
       <label>API key</label>
       <div class="subgroup">
-        <input type="text" v-model="apiKey" @blur="onKeyChange" /><br />
+        <InputObfuscated v-model="apiKey" @blur="onKeyChange" /><br />
         <a href="https://console.anthropic.com/settings/keys" target="_blank">Get your API key</a>
       </div>
     </div>
@@ -25,6 +25,7 @@
 import { ref } from 'vue'
 import { store } from '../services/store'
 import { loadAnthropicModels } from '../services/llm'
+import InputObfuscated from '../components/InputObfuscated.vue'
 
 const apiKey = ref(null)
 const refreshLabel = ref('Refresh')

src/settings/SettingsGroq.vue

@@ -4,7 +4,7 @@
     <div class="group">
       <label>API key</label>
       <div class="subgroup">
-        <input type="text" v-model="apiKey" @blur="onKeyChange" /><br />
+        <InputObfuscated v-model="apiKey" @blur="onKeyChange" /><br />
         <a href="https://console.groq.com/keys" target="_blank">Get your API key</a>
       </div>
     </div>
@@ -25,6 +25,7 @@
 import { ref } from 'vue'
 import { store } from '../services/store'
 import { loadGroqModels } from '../services/llm'
+import InputObfuscated from '../components/InputObfuscated.vue'
 
 const apiKey = ref(null)
 const refreshLabel = ref('Refresh')

src/settings/SettingsMistralAI.vue

@@ -4,7 +4,7 @@
     <div class="group">
       <label>API key</label>
       <div class="subgroup">
-        <input type="text" v-model="apiKey" @blur="onKeyChange" /><br />
+        <InputObfuscated v-model="apiKey" @blur="onKeyChange" /><br />
         <a href="https://console.mistral.ai/api-keys/" target="_blank">Get your API key</a>
       </div>
     </div>
@@ -25,6 +25,7 @@
 import { ref } from 'vue'
 import { store } from '../services/store'
 import { loadMistralAIModels } from '../services/llm'
+import InputObfuscated from '../components/InputObfuscated.vue'
 
 const apiKey = ref(null)
 const refreshLabel = ref('Refresh')

src/settings/SettingsOpenAI.vue

@@ -3,7 +3,7 @@
     <div class="group">
       <label>API key</label>
       <div class="subgroup">
-        <input type="text" v-model="apiKey" @blur="onKeyChange" /><br />
+        <InputObfuscated v-model="apiKey" @blur="onKeyChange" /><br />
         <a href="https://platform.openai.com/api-keys" target="_blank">Get your API key</a>
       </div>
     </div>
@@ -36,6 +36,7 @@
 import { ref } from 'vue'
 import { store } from '../services/store'
 import { loadOpenAIModels } from '../services/llm'
+import InputObfuscated from '../components/InputObfuscated.vue'
 
 const apiKey = ref(null)
 const refreshLabel = ref('Refresh')

src/settings/SettingsTavily.vue

@@ -12,7 +12,7 @@
     <div class="group">
       <label>Tavily API Key</label>
       <div class="subgroup">
-        <input type="text" v-model="apiKey" @change="save">
+        <InputObfuscated v-model="apiKey" @change="save" />
         <a href="https://app.tavily.com/home" target="_blank">Get your API key</a>
       </div>
     </div>
@@ -23,6 +23,7 @@
 
 import { ref } from 'vue'
 import { store } from '../services/store'
+import InputObfuscated from '../components/InputObfuscated.vue'
 
 const enabled = ref(false)
 const apiKey = ref(null)