add cluster auth selection

cars10 · Aug 13, 2023 · 09fd7fe · 09fd7fe
1 parent 5a08f70
commit 09fd7fe
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -5,8 +5,8 @@
   },
   "build": {
     "distDir": "../dist",
-    "devPath": "http://localhost:5173",
-    "beforeDevCommand": "npx cross-env VITE_APP_BUILD_MODE=tauri yarn dev",
+    "devPath": "http://localhost:5174",
+    "beforeDevCommand": "npx cross-env VITE_APP_BUILD_MODE=tauri yarn dev --port=5174",
     "beforeBuildCommand": "npx cross-env VITE_APP_BUILD_MODE=tauri yarn build"
   },
   "tauri": {

diff --git a/src/components/setup/ClusterFormFields.vue b/src/components/setup/ClusterFormFields.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="q-mb-md">
+    <div class="q-mb-md">
+      <q-option-group v-model="authorizationType"
+                      inline
+                      :options="authorizationTypes"
+                      color="primary" />
+    </div>
+
     <div class="q-mb-md">
       <q-input v-model="cluster.name"
                required
@@ -10,19 +17,19 @@
                autofocus />
     </div>
 
-    <div class="row q-mb-md">
-      <div class="col-md-6 col-12 q-pr-sm">
+    <div v-if="['basic', 'api'].includes(authorizationType)" class="row q-mb-md">
+      <div v-if="authorizationType === 'basic'" class="col q-pr-md">
         <q-input v-model="cluster.username"
                  outlined
                  :label="t('setup.test_and_connect.form.username.label')"
                  autocomplete="off" />
       </div>
 
-      <div class="col-md-6 col-12 q-pl-sm">
+      <div class="col">
         <q-input v-model="cluster.password"
                  autocomplete="off"
                  outlined
-                 :label="t('setup.test_and_connect.form.password.label')"
+                 :label="authorizationType === 'basic' ? t('setup.test_and_connect.form.password.label') : t('setup.test_and_connect.form.api_key.label')"
                  :type="passwordVisible ? 'text' : 'password'">
           <template #append>
             <q-icon :name="passwordVisible ? 'visibility' : 'visibility_off'"
@@ -65,6 +72,17 @@
   import { buildConfig } from '../../buildConfig.ts'
 
   const props = defineProps<{ modelValue: ElasticsearchCluster, formValid: boolean }>()
+
+  const authorizationType = ref('')
+  if (props.modelValue.username.length > 0 && props.modelValue.password.length > 0) authorizationType.value = 'basic'
+  if (props.modelValue.username.length === 0 && props.modelValue.password.length > 0) authorizationType.value = 'api'
+
+  const authorizationTypes = [
+    { value: '', label: 'No authorization' },
+    { value: 'basic', label: 'Basic auth' },
+    { value: 'api', label: 'API key' },
+  ]
+
   const cluster: Ref<ElasticsearchCluster> = ref(props.modelValue)
   const passwordVisible = ref(false)
   const t = useTranslation()

diff --git a/src/components/welcome/WelcomePage.vue b/src/components/welcome/WelcomePage.vue
@@ -20,7 +20,7 @@
             This seems to be your first time using elasticvue.
           </p>
           <p class="text-center q-ma-md">
-            Start by adding your first cluster or importing a backup of your existing elasticvue configuration.
+            Start by adding your first cluster or by importing a backup of your existing elasticvue configuration.
           </p>
         </q-card-section>
 

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -491,10 +491,13 @@
           "label": "Cluster name"
         },
         "username": {
-          "label": "Username (optional)"
+          "label": "Username"
         },
         "password": {
-          "label": "Password or encoded API key (optional)"
+          "label": "Password"
+        },
+        "api_key": {
+          "label": "Encoded API key"
         },
         "uri": {
           "label": "Uri"