Refactor settings management to use useSettings composable and enhance API auth header with decrypted credentials

src/composables/useApi.ts

@@ -1,17 +1,40 @@
 import { fetch } from '@tauri-apps/plugin-http';
+import { useStore } from './useStore.ts';
+import { useCrypto } from './useCrypto.ts';
 
 const BASE_URL = 'https://automation.deep-node.de/webhook';
-const AUTH_HEADER = '';
+
+type Settings = {
+  username: string;
+  password: string;
+};
+
+async function buildAuthHeader(): Promise<string | undefined> {
+  const {decrypt} = useCrypto();
+  const { getValue } = useStore();
+  const settings = await getValue<Settings>('settings');
+  if (!settings) return undefined;
+  let {username, password} = settings;
+  password = decrypt(password) as string;
+
+  if (username && password) {
+    const token = btoa(`${username}:${password}`);
+    return `Basic ${token}`;
+  }
+  return undefined;
+}
 
 export function useApi() {
   const apiFetch = async (endpoint: string, options: RequestInit = {}) => {
     const url = endpoint.startsWith('http') ? endpoint : `${BASE_URL}/${endpoint}`;
 
+    const authHeader = await buildAuthHeader();
+    console.log('authHeader',authHeader);
     const headers = {
       'Content-Type': 'application/json',
-      'Authorization': AUTH_HEADER,
+      ...(authHeader ? { Authorization: authHeader } : {}),
       ...options.headers,
-    };
+    } as Record<string, string>;
 
     const response = await fetch(url, {
       ...options,
@@ -28,10 +51,10 @@ export function useApi() {
   const get = (endpoint: string, options: RequestInit = {}) =>
     apiFetch(endpoint, { ...options, method: 'GET' });
 
-  const post = (endpoint: string, body: any, options: RequestInit = {}) =>
+  const post = (endpoint: string, body: BodyInit | null, options: RequestInit = {}) =>
     apiFetch(endpoint, { ...options, method: 'POST', body: JSON.stringify(body) });
 
-  const put = (endpoint: string, body: any, options: RequestInit = {}) =>
+  const put = (endpoint: string, body: BodyInit | null, options: RequestInit = {}) =>
     apiFetch(endpoint, { ...options, method: 'PUT', body: JSON.stringify(body) });
 
   return {

src/screens/SettingsScreen.vue

@@ -1,48 +1,20 @@
 <script setup lang="ts">
-import { useStore } from '../composables/useStore.ts';
+import { useSettings } from '../composables/useSettings.ts';
-import { onMounted, ref } from 'vue';
 
-type Settings = {
+const { settings } = useSettings();
-  username: string,
-  password: string
-}
-
-const { setValue, getValue } = useStore();
-
-const settingsDefault: Settings = {
-  username: '',
-  password: '',
-}
-const settings = ref<Settings>({...settingsDefault});
-
-const initData = async () => {
-  const readSettings = await getValue<Settings>('settings');
-  settings.value = readSettings ?? {...settingsDefault};
-}
-
-const handleSubmit = async (e: Event) => {
-  const data = Object.fromEntries(new FormData(e.target as HTMLFormElement)) as Settings
-  setValue<Settings>('settings', {
-    username: data.username,
-    password: data.password,
-  });
-  await initData();
-}
-onMounted(initData);
 </script>
 
 <template>
 <div>
-  <form @submit.prevent="handleSubmit">
+  <form>
     <fieldset class="fieldset">
       <legend class="fieldset-legend">Username</legend>
-      <input :value="settings.username" type="text" class="input" name="username" />
+      <input v-model="settings.username" type="text" class="input" name="username" />
     </fieldset>
     <fieldset class="fieldset">
       <legend class="fieldset-legend">Password</legend>
-      <input type="password" :value="settings.password" class="input" name="password" />
+      <input v-model="settings.password" type="text" class="input" name="password" />
     </fieldset>
-    <button class="btn btn-primary" type="submit">Submit</button>
   </form>
 </div>
 </template>