Make setup simple

Author: vanarok

views/Settings.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import {computed, ref} from "vue";
-import {useQuery} from "@tanstack/vue-query";
-import {getTaskStatuses} from "@/api";
-import {capitalizeFirstLetter} from "../helpers";
+import {computed, ref} from 'vue'
+import {useQuery} from '@tanstack/vue-query'
+import {getTaskStatuses} from '@/api'
+import {capitalizeFirstLetter} from '../helpers'
 
 const invoiceNinjaURL = ref(localStorage.getItem('invoiceNinjaURL') || 'https://invoicing.co/api/v1')
 const invoiceNinjaAPIToken = ref(localStorage.getItem('invoiceNinjaAPIToken') || '')
@@ -23,7 +23,11 @@ const saveStatuses = () => {
 const {statuses, isComplete} = useSettings()
 
 const enabled = computed(() => !!(localStorage.getItem('invoiceNinjaAPIToken') && localStorage.getItem('invoiceNinjaURL')))
-const {data: options, isPending, isError} = useQuery({
+const {
+    data: options,
+    isPending,
+    isError
+} = useQuery({
     enabled,
     queryKey: ['task-statuses'],
     queryFn: getTaskStatuses
@@ -38,24 +42,27 @@ const updateStatus = (value: string | null, key: 'beginning' | 'running' | 'fini
     <div class="container">
         <h2>{{ isComplete ? 'Settings' : 'Setup' }}</h2>
         <form class="connect-invoice-ninja" @submit.prevent="saveAPI">
-            <h3 for="token">1. Connect to Invoice Ninja</h3>
-            <label for="token">API Token (get from <a
-                href="https://app.invoicing.co/#/settings/task_settings">settings</a> invoice ninja)</label>
+            <h3 for="token">
+                1. Get token from
+                <a href="https://app.invoicing.co/?#/settings/integrations/api_tokens/create">Invoice Ninja</a>
+            </h3>
 
-            <input v-model="invoiceNinjaAPIToken" placeholder="Example: bXlfbXlfbXlfbXlfbXlfbXlfbXlfbXlf" required
-                   type="text"/>
+            <input v-model="invoiceNinjaAPIToken" placeholder="xxxxxxxxxxxxxx" required type="text" />
             <details class="extends-settings">
-                <summary>Extend settings</summary>
+                <summary class="extends-settings-button">Extend settings</summary>
                 <label for="url">Invoice Ninja API URL (optional)</label>
-                <input v-model="invoiceNinjaURL" placeholder="Example: https://invoicing.co/api/v1" type="text"/>
+                <input v-model="invoiceNinjaURL" placeholder="Example: https://invoicing.co/api/v1" type="text" />
             </details>
             <button type="submit">Save</button>
         </form>
         <Transition mode="out-in">
             <form v-if="enabled" class="select-statuses" @submit.prevent="saveStatuses">
-                <h3>2. Select statuses for task</h3>
-                <template v-for="(value, key) in statuses"
-                          style="width: 100%; display: flex; align-items: start; flex-direction: column; gap: 0.5em">
+                <h3>
+                    2. Select
+                    <a href="https://app.invoicing.co/?#/settings/task_settings">statuses</a>
+                    for task
+                </h3>
+                <template v-for="(value, key) in statuses" style="width: 100%; display: flex; align-items: start; flex-direction: column; gap: 0.5em">
                     <label :for="value || key">{{ capitalizeFirstLetter(key) }} status</label>
                     <template v-if="isError">
                         <select :id="value || key" disabled required>
@@ -69,10 +76,11 @@ const updateStatus = (value: string | null, key: 'beginning' | 'running' | 'fini
                     </template>
 
                     <template v-else>
-                        <select :id="value || key" :value="value" required
-                                @change="updateStatus($event.target.value, key)">
+                        <select :id="value || key" :value="value" required @change="updateStatus($event.target.value, key)">
                             <option disabled selected value="">Please select one</option>
-                            <option v-for="{id, name} in options.data" :value="id">{{ name }}</option>
+                            <option v-for="{id, name} in options.data" :value="id">
+                                {{ name }}
+                            </option>
                         </select>
                     </template>
                 </template>
@@ -97,7 +105,7 @@ const updateStatus = (value: string | null, key: 'beginning' | 'running' | 'fini
     flex-direction: column;
     gap: 0.5em;
     width: 20em;
-    margin-bottom: 3em
+    margin-bottom: 3em;
 }
 
 .select-statuses {
@@ -108,12 +116,22 @@ const updateStatus = (value: string | null, key: 'beginning' | 'running' | 'fini
 }
 
 button {
-    margin-top: 1em
+    margin-top: 1em;
 }
 
 .extends-settings {
     width: 100%;
     text-align: start;
     margin: 1em 0;
 }
+
+.extends-settings-button {
+    filter: brightness(0.5);
+    color: ghostwhite;
+    margin-bottom: 1em;
+}
+
+.extends-settings-button::marker {
+    content: '';
+}
 </style>