julian/ai-translate-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

add eye to api key

Browse Source
This commit is contained in:
Julian Freeman
2026-03-27 17:50:06 -04:00
parent c719b50285
commit 15626ba9e1
1 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/SettingsView.vue
View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown } from 'lucide-vue-next';
import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff } from 'lucide-vue-next';
import { useSettingsStore, DEFAULT_TEMPLATE, DEFAULT_EVALUATION_TEMPLATE, DEFAULT_REFINEMENT_TEMPLATE, type ApiProfile } from '../stores/settings';
import { cn } from '../lib/utils';
const settings = useSettingsStore();
const settingsCategory = ref<'api' | 'general' | 'prompts'>('api');
const showApiKey = ref(false);
const newProfileName = ref('');
const isSavingProfile = ref(false);
@@ -161,12 +162,22 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
</div>
<div class="space-y-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Key</label>
<input
v-model="settings.apiKey"
type="password"
class="w-full px-4 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
placeholder="sk-..."
/>
<div class="relative">
<input
v-model="settings.apiKey"
:type="showApiKey ? 'text' : 'password'"
class="w-full pl-4 pr-12 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
placeholder="sk-..."
/>
<button
@click="showApiKey = !showApiKey"
type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none"
>
<Eye v-if="showApiKey" class="w-5 h-5" />
<EyeOff v-else class="w-5 h-5" />
</button>
</div>
</div>
<div class="space-y-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">Model Name</label>