Update PR#5684: add radio group on UI

Author: weizhouapache

ui/public/locales/en.json

@@ -468,6 +468,8 @@
 "label.associatednetworkid": "Associated Network ID",
 "label.associatednetworkname": "Network Name",
 "label.asyncbackup": "Async Backup",
+"label.authentication.method": "Authentication Method",
+"label.authentication.sshkey": "System SSH Key",
 "label.author.email": "Author e-mail",
 "label.author.name": "Author name",
 "label.auto.assign.diskoffering.disk.size": "Automatically assign offering matching the disk size",
@@ -2588,6 +2590,7 @@
 "message.add.firewall.rule.processing": "Adding new Firewall rule...",
 "message.add.guest.network": "Please confirm that you would like to add a guest network",
 "message.add.host": "Please specify the following parameters to add a new host",
+"message.add.host.sshkey": "WARNING: In order to add a host with SSH key, you must ensure your hypervisor host has been configured correctly.",
 "message.add.ip.range": "Add an IP range to public network in zone",
 "message.add.ip.range.direct.network": "Add an IP range to direct network <b><span id=\"directnetwork_name\"></span></b> in zone <b><span id=\"zone_name\"></span></b>",
 "message.add.ip.range.to.pod": "<p>Add an IP range to pod: <b><span id=\"pod_name_label\"></span></b></p>",

ui/src/views/infra/HostAdd.vue

@@ -95,7 +95,31 @@
       </div>
 
       <div class="form__item" v-if="selectedClusterHyperVisorType !== 'VMware'">
-        <div class="form__label">{{ $t('label.password') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.authentication.method') }}</div>
+        <a-radio-group
+          v-decorator="['authmethod', {
+            initialValue: authMethod
+          }]"
+          buttonStyle="solid"
+          :defaultValue="authMethod"
+          @change="selected => { handleAuthMethodChange(selected.target.value) }">
+          <a-radio-button value="password">
+            {{ $t('label.password') }}
+          </a-radio-button>
+          <a-radio-button value="sshkey" v-if="selectedClusterHyperVisorType === 'KVM'">
+            {{ $t('label.authentication.sshkey') }}
+          </a-radio-button>
+        </a-radio-group>
+        <span v-if="authMethod === 'sshkey'">
+          <a-alert type="warning">
+            <span style="display:block;width:300px;word-wrap:break-word;" slot="message" v-html="$t('message.add.host.sshkey')" />
+          </a-alert>
+        </span>
+      </div>
+
+      <div class="form__item required-field" v-if="selectedClusterHyperVisorType !== 'VMware' && authMethod === 'password'">
+        <div class="form__label"><span class="required">* </span>{{ $t('label.password') }}</div>
+        <span class="required required-label">{{ $t('label.required') }}</span>
         <a-input :placeholder="placeholder.password" type="password" v-model="password"></a-input>
       </div>
 
@@ -189,6 +213,7 @@ export default {
       agentusername: null,
       agentpassword: null,
       agentport: null,
+      authMethod: 'password',
       selectedCluster: null,
       selectedClusterHyperVisorType: null,
       showDedicated: false,
@@ -279,6 +304,9 @@ export default {
       this.dedicatedAccount = null
       this.showDedicated = !this.showDedicated
     },
+    handleAuthMethodChange (val) {
+      this.authMethod = val
+    },
     handleSubmitForm () {
       if (this.loading) return
       const requiredFields = document.querySelectorAll('.required-field')
@@ -305,6 +333,10 @@ export default {
         this.url = this.hostname
       }
 
+      if (this.authMethod !== 'password') {
+        this.password = ''
+      }
+
       const args = {
         zoneid: this.zoneId,
         podid: this.podId,