UI: Add authmethod field allowing to choose password or ssh key when adding host (#6525)

* add authmethod to addhost in zone wizard

* add a condition for hiding password field

* set default value when switch hypervisor

* add more value for authmethod

Author: Hoang Nguyen

ui/src/views/infra/zone/StaticInputsForm.vue

@@ -67,6 +67,26 @@
             v-model:value="form[field.key]"
             v-focus="index === 0"
           />
+          <a-radio-group
+            v-else-if="field.radioGroup"
+            v-model:value="form[field.key]"
+            buttonStyle="solid">
+            <span
+              style="margin-right: 5px;"
+               v-for="(radioItem, idx) in field.radioOption"
+              :key="idx">
+              <a-radio-button
+                :value="radioItem.value"
+                v-if="isDisplayItem(radioItem.condition)">
+                {{ $t(radioItem.label) }}
+              </a-radio-button>
+            </span>
+            <a-alert style="margin-top: 5px" type="warning" v-if="field.alert && isDisplayItem(field.alert.display)">
+              <template #message>
+                <span v-html="$t(field.alert.message)" />
+              </template>
+            </a-alert>
+          </a-radio-group>
           <a-input
             v-else
             v-model:value="form[field.key]"
@@ -118,6 +138,11 @@ export default {
   created () {
     this.initForm()
   },
+  computed: {
+    hypervisor () {
+      return this.prefillContent?.hypervisor || null
+    }
+  },
   mounted () {
     this.fillValue()
   },
@@ -152,13 +177,13 @@ export default {
         if (!fieldExists) {
           return
         }
-        if (field.key === 'agentUserName' && !this.getPrefilled(field.key)) {
+        if (field.key === 'agentUserName' && !this.getPrefilled(field)) {
           this.form[field.key] = 'Oracle'
         } else {
           if (field.switch) {
             this.form[field.key] = this.isChecked(field)
           } else {
-            this.form[field.key] = this.getPrefilled(field.key)
+            this.form[field.key] = this.getPrefilled(field)
           }
         }
       })
@@ -179,8 +204,11 @@ export default {
         })
       }
     },
-    getPrefilled (key) {
-      return this.prefillContent?.[key] || null
+    getPrefilled (field) {
+      if (field.key === 'authmethod' && this.hypervisor !== 'KVM') {
+        return field.value || field.defaultValue || 'password'
+      }
+      return this.prefillContent?.[field.key] || field.value || field.defaultValue || null
     },
     handleSubmit () {
       this.formRef.value.validate().then(() => {
@@ -236,6 +264,27 @@ export default {
         return false
       }
       return true
+    },
+    isDisplayItem (conditions) {
+      if (!conditions || Object.keys(conditions).length === 0) {
+        return true
+      }
+      let isShow = true
+      Object.keys(conditions).forEach(key => {
+        if (!isShow) return false
+
+        const condition = conditions[key]
+        const fieldVal = this.form[key]
+          ? this.form[key]
+          : (this.prefillContent?.[key] || null)
+        if (Array.isArray(condition) && !condition.includes(fieldVal)) {
+          isShow = false
+        } else if (!Array.isArray(condition) && fieldVal !== condition) {
+          isShow = false
+        }
+      })
+
+      return isShow
     }
   }
 }

ui/src/views/infra/zone/ZoneWizardAddResources.vue

@@ -284,14 +284,42 @@ export default {
             hypervisor: ['VMware', 'BareMetal', 'Ovm', 'Hyperv', 'KVM', 'XenServer', 'LXC', 'Simulator']
           }
         },
+        {
+          title: 'label.authentication.method',
+          key: 'authmethod',
+          placeHolder: 'message.error.authmethod',
+          required: false,
+          radioGroup: true,
+          defaultValue: 'password',
+          radioOption: [{
+            label: 'label.password',
+            value: 'password'
+          }, {
+            label: 'label.authentication.sshkey',
+            value: 'sshkey',
+            condition: {
+              hypervisor: ['KVM']
+            }
+          }],
+          display: {
+            hypervisor: ['BareMetal', 'Ovm', 'Hyperv', 'KVM', 'XenServer', 'LXC', 'Simulator']
+          },
+          alert: {
+            message: 'message.add.host.sshkey',
+            display: {
+              authmethod: 'sshkey'
+            }
+          }
+        },
         {
           title: 'label.password',
           key: 'hostPassword',
           placeHolder: 'message.error.host.password',
           required: true,
           password: true,
           display: {
-            hypervisor: ['VMware', 'BareMetal', 'Ovm', 'Hyperv', 'KVM', 'XenServer', 'LXC', 'Simulator']
+            hypervisor: ['VMware', 'BareMetal', 'Ovm', 'Hyperv', 'KVM', 'XenServer', 'LXC', 'Simulator'],
+            authmethod: 'password'
           }
         },
         {

ui/src/views/infra/zone/ZoneWizardLaunchZone.vue

@@ -1211,14 +1211,15 @@ export default {
       this.addStep('message.adding.host', 'hostResource')
 
       const hostData = {}
+      const hostPassword = this.prefillContent?.authmethod !== 'password' ? '' : (this.prefillContent?.hostPassword || null)
       hostData.zoneid = this.stepData.zoneReturned.id
       hostData.podid = this.stepData.podReturned.id
       hostData.clusterid = this.stepData.clusterReturned.id
       hostData.hypervisor = this.stepData.clusterReturned.hypervisortype
       hostData.clustertype = this.stepData.clusterReturned.clustertype
       hostData.hosttags = this.prefillContent?.hostTags || null
       hostData.username = this.prefillContent?.hostUserName || null
-      hostData.password = this.prefillContent?.hostPassword || null
+      hostData.password = hostPassword
       const hostname = this.prefillContent?.hostName || null
       let url = null
       if (hostname.indexOf('http://') === -1) {