ui: fix create account/user with saml (#5481)

Fixes #5477
Fixes #5478

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

ui/src/views/iam/AddAccount.vue

@@ -149,7 +149,7 @@
             v-decorator="['networkdomain']"
             :placeholder="apiParams.networkdomain.description" />
         </a-form-item>
-        <div v-if="'authorizeSamlSso' in $store.getters.apis">
+        <div v-if="samlAllowed">
           <a-form-item :label="$t('label.samlenable')">
             <a-switch v-decorator="['samlenable']" @change="checked => { this.samlEnable = checked }" />
           </a-form-item>
@@ -165,7 +165,7 @@
               :filterOption="(input, option) => {
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option v-for="(idp, idx) in idps" :key="idx">
+              <a-select-option v-for="idp in idps" :key="idp.id">
                 {{ idp.orgName }}
               </a-select-option>
             </a-select>
@@ -217,12 +217,17 @@ export default {
   created () {
     this.fetchData()
   },
+  computed: {
+    samlAllowed () {
+      return 'authorizeSamlSso' in this.$store.getters.apis
+    }
+  },
   methods: {
     fetchData () {
       this.fetchDomains()
       this.fetchRoles()
       this.fetchTimeZone()
-      if ('listIdps' in this.$store.getters.apis) {
+      if (this.samlAllowed) {
         this.fetchIdps()
       }
     },
@@ -344,7 +349,7 @@ export default {
                 userid: users[i].id
               }).then(response => {
                 this.$notification.success({
-                  message: this.$t('samlenable'),
+                  message: this.$t('label.samlenable'),
                   description: this.$t('message.success.enable.saml.auth')
                 })
               }).catch(error => {

ui/src/views/iam/AddUser.vue

@@ -140,7 +140,7 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <div v-if="'authorizeSamlSso' in $store.getters.apis">
+        <div v-if="samlAllowed">
           <a-form-item :label="$t('label.samlenable')">
             <a-switch v-decorator="['samlenable']" @change="checked => { this.samlEnable = checked }" />
           </a-form-item>
@@ -156,7 +156,7 @@
               :filterOption="(input, option) => {
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option v-for="(idp, idx) in idps" :key="idx">
+              <a-select-option v-for="idp in idps" :key="idp.id">
                 {{ idp.orgName }}
               </a-select-option>
             </a-select>
@@ -208,6 +208,11 @@ export default {
     this.apiParams = this.$getApiParams('createUser', 'authorizeSamlSso')
     this.fetchData()
   },
+  computed: {
+    samlAllowed () {
+      return 'authorizeSamlSso' in this.$store.getters.apis
+    }
+  },
   methods: {
     fetchData () {
       this.account = this.$route.query && this.$route.query.account ? this.$route.query.account : null
@@ -219,7 +224,7 @@ export default {
         this.fetchAccount()
       }
       this.fetchTimeZone()
-      if ('listIdps' in this.$store.getters.apis) {
+      if (this.samlAllowed) {
         this.fetchIdps()
       }
     },
@@ -318,26 +323,24 @@ export default {
             message: this.$t('label.create.user'),
             description: `${this.$t('message.success.create.user')} ${params.username}`
           })
-          const users = response.createuserresponse.user.user
-          if (values.samlenable && users) {
-            for (var i = 0; i < users.length; i++) {
-              api('authorizeSamlSso', {
-                enable: values.samlenable,
-                entityid: values.samlentity,
-                userid: users[i].id
-              }).then(response => {
-                this.$notification.success({
-                  message: this.$t('label.samlenable'),
-                  description: this.$t('message.success.enable.saml.auth')
-                })
-              }).catch(error => {
-                this.$notification.error({
-                  message: this.$t('message.request.failed'),
-                  description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
-                  duration: 0
-                })
+          const user = response.createuserresponse.user
+          if (values.samlenable && user) {
+            api('authorizeSamlSso', {
+              enable: values.samlenable,
+              entityid: values.samlentity,
+              userid: user.id
+            }).then(response => {
+              this.$notification.success({
+                message: this.$t('label.samlenable'),
+                description: this.$t('message.success.enable.saml.auth')
               })
-            }
+            }).catch(error => {
+              this.$notification.error({
+                message: this.$t('message.request.failed'),
+                description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+                duration: 0
+              })
+            })
           }
           this.closeAction()
         }).catch(error => {

ui/src/views/iam/ConfigureSamlSsoAuth.vue

@@ -31,14 +31,14 @@
       <a-form-item :label="$t('label.samlentity')">
         <a-select
           v-decorator="['samlEntity', {
-            initialValue: selectedIdp,
+            initialValue: selectedIdp
           }]"
           showSearch
           optionFilterProp="children"
           :filterOption="(input, option) => {
             return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }" >
-          <a-select-option v-for="(idp, idx) in idps" :key="idx">
+          <a-select-option v-for="idp in idps" :key="idp.id">
             {{ idp.orgName }}
           </a-select-option>
         </a-select>