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

src/screens/SettingsScreen.vue

@@ -1,48 +1,20 @@
 <script setup lang="ts">
-import { useStore } from '../composables/useStore.ts';
-import { onMounted, ref } from 'vue';
+import { useSettings } from '../composables/useSettings.ts';
 
-type Settings = {
-  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);
+const { settings } = useSettings();
 </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>