mirror of https://github.com/apache/cloudstack.git
424 lines
16 KiB
Vue
424 lines
16 KiB
Vue
// Licensed to the Apache Software Foundation (ASF) under one
|
|
// or more contributor license agreements. See the NOTICE file
|
|
// distributed with this work for additional information
|
|
// regarding copyright ownership. The ASF licenses this file
|
|
// to you under the Apache License, Version 2.0 (the
|
|
// "License"); you may not use this file except in compliance
|
|
// with the License. You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing,
|
|
// software distributed under the License is distributed on an
|
|
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
// KIND, either express or implied. See the License for the
|
|
// specific language governing permissions and limitations
|
|
// under the License.
|
|
|
|
<template>
|
|
<div class="form-layout" v-ctrl-enter="handleSubmit">
|
|
<a-spin :spinning="loading">
|
|
<a-form
|
|
:ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
:loading="loading"
|
|
layout="vertical"
|
|
@finish="handleSubmit">
|
|
<a-form-item ref="roleid" name="roleid">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.role')" :tooltip="apiParams.roleid.description"/>
|
|
</template>
|
|
<a-select
|
|
v-model:value="form.roleid"
|
|
:loading="roleLoading"
|
|
:placeholder="apiParams.roleid.description"
|
|
v-focus="true"
|
|
showSearch
|
|
optionFilterProp="label"
|
|
:filterOption="(input, option) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}">
|
|
<a-select-option v-for="role in roles" :key="role.id" :label="role.name + ' (' + role.type + ')'">
|
|
{{ role.name + ' (' + role.type + ')' }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item ref="username" name="username">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.username')" :tooltip="apiParams.username.description"/>
|
|
</template>
|
|
<a-input
|
|
v-model:value="form.username"
|
|
:placeholder="apiParams.username.description" />
|
|
</a-form-item>
|
|
<a-row :gutter="12">
|
|
<a-col :md="24" :lg="12">
|
|
<a-form-item ref="password" name="password">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.password')" :tooltip="apiParams.password.description"/>
|
|
</template>
|
|
<a-input-password
|
|
v-model:value="form.password"
|
|
:placeholder="apiParams.password.description"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="24" :lg="12">
|
|
<a-form-item ref="confirmpassword" name="confirmpassword">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.confirmpassword')" :tooltip="apiParams.password.description"/>
|
|
</template>
|
|
<a-input-password
|
|
v-model:value="form.confirmpassword"
|
|
:placeholder="apiParams.password.description"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-form-item ref="email" name="email">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.email')" :tooltip="apiParams.email.description"/>
|
|
</template>
|
|
<a-input
|
|
v-model:value="form.email"
|
|
:placeholder="apiParams.email.description" />
|
|
</a-form-item>
|
|
<a-row :gutter="12">
|
|
<a-col :md="24" :lg="12">
|
|
<a-form-item ref="firstname" name="firstname">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.firstname')" :tooltip="apiParams.firstname.description"/>
|
|
</template>
|
|
<a-input
|
|
v-model:value="form.firstname"
|
|
:placeholder="apiParams.firstname.description" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="24" :lg="12">
|
|
<a-form-item ref="lastname" name="lastname">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.lastname')" :tooltip="apiParams.lastname.description"/>
|
|
</template>
|
|
<a-input
|
|
v-model:value="form.lastname"
|
|
:placeholder="apiParams.lastname.description" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-form-item v-if="isAdminOrDomainAdmin()" ref="domainid" name="domainid">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
|
</template>
|
|
<a-select
|
|
:loading="domain.loading"
|
|
v-model:value="form.domainid"
|
|
:placeholder="apiParams.domainid.description"
|
|
showSearch
|
|
optionFilterProp="label"
|
|
:filterOption="(input, option) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}" >
|
|
<a-select-option v-for="domain in domainsList" :key="domain.id" :label="domain.path || domain.name || domain.description">
|
|
<span>
|
|
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
|
|
<block-outlined v-else style="margin-right: 5px"/>
|
|
{{ domain.path || domain.name || domain.description }}
|
|
</span>
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item ref="account" name="account">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
|
|
</template>
|
|
<a-input v-model:value="form.account" :placeholder="apiParams.account.description" />
|
|
</a-form-item>
|
|
<a-form-item ref="timezone" name="timezone">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
|
|
</template>
|
|
<a-select
|
|
v-model:value="form.timezone"
|
|
:loading="timeZoneLoading"
|
|
:placeholder="apiParams.timezone.description"
|
|
showSearch
|
|
optionFilterProp="label"
|
|
:filterOption="(input, option) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}">
|
|
<a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
|
|
{{ opt.name || opt.description }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item ref="networkdomain" name="networkdomain">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
|
|
</template>
|
|
<a-input
|
|
v-model:value="form.networkdomain"
|
|
:placeholder="apiParams.networkdomain.description" />
|
|
</a-form-item>
|
|
<div v-if="samlAllowed">
|
|
<a-form-item :label="$t('label.samlenable')" ref="samlenable" name="samlenable">
|
|
<a-switch v-model:checked="form.samlenable" />
|
|
</a-form-item>
|
|
<a-form-item v-if="form.samlenable" ref="samlentity" name="samlentity">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.samlentity')" :tooltip="apiParams.entityid.description"/>
|
|
</template>
|
|
<a-select
|
|
v-model:value="form.samlentity"
|
|
:loading="idpLoading"
|
|
:placeholder="apiParams.entityid.description"
|
|
showSearch
|
|
optionFilterProp="label"
|
|
:filterOption="(input, option) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}">
|
|
<a-select-option v-for="idp in idps" :key="idp.id" :label="idp.orgName">
|
|
{{ idp.orgName }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</div>
|
|
<div :span="24" class="action-button">
|
|
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
|
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
|
</div>
|
|
</a-form>
|
|
</a-spin>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref, reactive, toRaw } from 'vue'
|
|
import { api } from '@/api'
|
|
import { timeZone } from '@/utils/timezone'
|
|
import debounce from 'lodash/debounce'
|
|
import ResourceIcon from '@/components/view/ResourceIcon'
|
|
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
|
|
|
export default {
|
|
name: 'AddAccountForm',
|
|
components: {
|
|
TooltipLabel,
|
|
ResourceIcon
|
|
},
|
|
data () {
|
|
this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
|
|
return {
|
|
loading: false,
|
|
domain: { loading: false },
|
|
domainsList: [],
|
|
roleLoading: false,
|
|
roles: [],
|
|
timeZoneLoading: false,
|
|
timeZoneMap: [],
|
|
idpLoading: false,
|
|
idps: []
|
|
}
|
|
},
|
|
beforeCreate () {
|
|
this.apiParams = this.$getApiParams('createAccount', 'authorizeSamlSso')
|
|
},
|
|
created () {
|
|
this.initForm()
|
|
this.fetchData()
|
|
},
|
|
computed: {
|
|
samlAllowed () {
|
|
return 'authorizeSamlSso' in this.$store.getters.apis
|
|
}
|
|
},
|
|
methods: {
|
|
initForm () {
|
|
this.formRef = ref()
|
|
this.form = reactive({
|
|
domainid: this.$store.getters.userInfo.domainid
|
|
})
|
|
this.rules = reactive({
|
|
roleid: [{ required: true, message: this.$t('message.error.select') }],
|
|
username: [{ required: true, message: this.$t('message.error.required.input') }],
|
|
password: [{ required: true, message: this.$t('message.error.required.input') }],
|
|
confirmpassword: [
|
|
{ required: true, message: this.$t('message.error.required.input') },
|
|
{ validator: this.validateConfirmPassword }
|
|
],
|
|
email: [{ required: true, message: this.$t('message.error.required.input') }],
|
|
firstname: [{ required: true, message: this.$t('message.error.required.input') }],
|
|
lastname: [{ required: true, message: this.$t('message.error.required.input') }],
|
|
domain: [{ required: true, message: this.$t('message.error.select') }]
|
|
})
|
|
},
|
|
fetchData () {
|
|
this.fetchDomains()
|
|
this.fetchRoles()
|
|
this.fetchTimeZone()
|
|
if (this.samlAllowed) {
|
|
this.fetchIdps()
|
|
}
|
|
},
|
|
isAdminOrDomainAdmin () {
|
|
return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
|
|
},
|
|
isDomainAdmin () {
|
|
return this.$store.getters.userInfo.roletype === 'DomainAdmin'
|
|
},
|
|
isValidValueForKey (obj, key) {
|
|
return key in obj && obj[key] != null
|
|
},
|
|
async validateConfirmPassword (rule, value) {
|
|
if (!value || value.length === 0) {
|
|
return Promise.resolve()
|
|
} else if (rule.field === 'confirmpassword') {
|
|
const messageConfirm = this.$t('error.password.not.match')
|
|
const passwordVal = this.form.password
|
|
if (passwordVal && passwordVal !== value) {
|
|
return Promise.reject(messageConfirm)
|
|
} else {
|
|
return Promise.resolve()
|
|
}
|
|
} else {
|
|
return Promise.resolve()
|
|
}
|
|
},
|
|
fetchDomains () {
|
|
this.domain.loading = true
|
|
this.loadMore('listDomains', 1, this.domain)
|
|
},
|
|
loadMore (apiToCall, page, sema) {
|
|
console.log('sema.loading ' + sema.loading)
|
|
const params = {}
|
|
params.listAll = true
|
|
params.details = 'min'
|
|
params.pagesize = 100
|
|
params.page = page
|
|
var count
|
|
api(apiToCall, params).then(json => {
|
|
const listDomains = json.listdomainsresponse.domain
|
|
count = json.listdomainsresponse.count
|
|
this.domainsList = this.domainsList.concat(listDomains)
|
|
}).finally(() => {
|
|
if (count <= this.domainsList.length) {
|
|
sema.loading = false
|
|
} else {
|
|
this.loadMore(apiToCall, page + 1, sema)
|
|
}
|
|
})
|
|
},
|
|
fetchRoles () {
|
|
this.roleLoading = true
|
|
const params = {}
|
|
params.state = 'enabled'
|
|
api('listRoles', params).then(response => {
|
|
this.roles = response.listrolesresponse.role || []
|
|
this.form.roleid = this.roles[0].id
|
|
if (this.isDomainAdmin()) {
|
|
const userRole = this.roles.filter(role => role.type === 'User')
|
|
if (userRole.length > 0) {
|
|
this.form.roleid = userRole[0].id
|
|
}
|
|
}
|
|
}).finally(() => {
|
|
this.roleLoading = false
|
|
})
|
|
},
|
|
fetchTimeZone (value) {
|
|
this.timeZoneMap = []
|
|
this.timeZoneLoading = true
|
|
|
|
timeZone(value).then(json => {
|
|
this.timeZoneMap = json
|
|
this.timeZoneLoading = false
|
|
})
|
|
},
|
|
fetchIdps () {
|
|
this.idpLoading = true
|
|
api('listIdps').then(response => {
|
|
this.idps = response.listidpsresponse.idp || []
|
|
this.form.samlentity = this.idps[0].id || ''
|
|
}).finally(() => {
|
|
this.idpLoading = false
|
|
})
|
|
},
|
|
handleSubmit (e) {
|
|
e.preventDefault()
|
|
if (this.loading) return
|
|
this.formRef.value.validate().then(() => {
|
|
const values = toRaw(this.form)
|
|
|
|
this.loading = true
|
|
const params = {
|
|
roleid: values.roleid,
|
|
username: values.username,
|
|
password: values.password,
|
|
email: values.email,
|
|
firstname: values.firstname,
|
|
lastname: values.lastname,
|
|
domainid: values.domainid
|
|
}
|
|
if (this.isValidValueForKey(values, 'account') && values.account.length > 0) {
|
|
params.account = values.account
|
|
}
|
|
if (this.isValidValueForKey(values, 'timezone') && values.timezone.length > 0) {
|
|
params.timezone = values.timezone
|
|
}
|
|
if (this.isValidValueForKey(values, 'networkdomain') && values.networkdomain.length > 0) {
|
|
params.networkdomain = values.networkdomain
|
|
}
|
|
|
|
api('createAccount', {}, 'POST', params).then(response => {
|
|
this.$emit('refresh-data')
|
|
this.$notification.success({
|
|
message: this.$t('label.create.account'),
|
|
description: `${this.$t('message.success.create.account')} ${params.username}`
|
|
})
|
|
const users = response.createaccountresponse.account.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
|
|
})
|
|
})
|
|
}
|
|
}
|
|
this.closeAction()
|
|
}).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
|
|
})
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}).catch(error => {
|
|
this.formRef.value.scrollToField(error.errorFields[0].name)
|
|
})
|
|
},
|
|
closeAction () {
|
|
this.$emit('close-action')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.form-layout {
|
|
width: 80vw;
|
|
@media (min-width: 600px) {
|
|
width: 450px;
|
|
}
|
|
}
|
|
</style>
|