From 86b3d6e12ea6d791239d468e4dbde75317ed68b5 Mon Sep 17 00:00:00 2001
From: Nicolas Bonamy <nicolas@bonamy.fr>
Date: Sun, 12 May 2024 12:59:46 -0500
Subject: [PATCH] api key fields obfuscation

---
 src/components/InputObfuscated.vue | 64 ++++++++++++++++++++++++++++++
 src/settings/SettingsAnthropic.vue |  3 +-
 src/settings/SettingsGroq.vue      |  3 +-
 src/settings/SettingsMistralAI.vue |  3 +-
 src/settings/SettingsOpenAI.vue    |  3 +-
 src/settings/SettingsTavily.vue    |  3 +-
 6 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 src/components/InputObfuscated.vue

diff --git a/src/components/InputObfuscated.vue b/src/components/InputObfuscated.vue
new file mode 100644
index 0000000..3e73207
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/settings/SettingsAnthropic.vue b/src/settings/SettingsAnthropic.vue
index 703f71d..d04fc2b 100644
--- a/src/settings/SettingsAnthropic.vue
+++ b/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')
diff --git a/src/settings/SettingsGroq.vue b/src/settings/SettingsGroq.vue
index 3824dff..84e4a5d 100644
--- a/src/settings/SettingsGroq.vue
+++ b/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')
diff --git a/src/settings/SettingsMistralAI.vue b/src/settings/SettingsMistralAI.vue
index 6edae15..d415fc3 100644
--- a/src/settings/SettingsMistralAI.vue
+++ b/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')
diff --git a/src/settings/SettingsOpenAI.vue b/src/settings/SettingsOpenAI.vue
index d0353b2..042dda0 100644
--- a/src/settings/SettingsOpenAI.vue
+++ b/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')
diff --git a/src/settings/SettingsTavily.vue b/src/settings/SettingsTavily.vue
index 481ab6c..17a2989 100644
--- a/src/settings/SettingsTavily.vue
+++ b/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)