cKey
5 years ago
49 changed files with 1827 additions and 2159 deletions
@ -1,13 +1,22 @@ |
|||||
using Volo.Abp.Application.Services; |
using System.Threading.Tasks; |
||||
|
using Volo.Abp.Application.Services; |
||||
|
using Volo.Abp.Authorization.Permissions; |
||||
using Volo.Abp.IdentityServer.Localization; |
using Volo.Abp.IdentityServer.Localization; |
||||
|
|
||||
namespace LINGYUN.Abp.IdentityServer |
namespace LINGYUN.Abp.IdentityServer |
||||
{ |
{ |
||||
public abstract class AbpIdentityServerAppServiceBase : ApplicationService |
public abstract class AbpIdentityServerAppServiceBase : ApplicationService |
||||
{ |
{ |
||||
|
private IPermissionChecker _permissionChecker; |
||||
|
protected IPermissionChecker PermissionChecker => LazyGetRequiredService(ref _permissionChecker); |
||||
protected AbpIdentityServerAppServiceBase() |
protected AbpIdentityServerAppServiceBase() |
||||
{ |
{ |
||||
LocalizationResource = typeof(AbpIdentityServerResource); |
LocalizationResource = typeof(AbpIdentityServerResource); |
||||
} |
} |
||||
|
|
||||
|
protected virtual async Task<bool> IsGrantAsync(string policy) |
||||
|
{ |
||||
|
return await PermissionChecker.IsGrantedAsync(policy); |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,11 @@ |
|||||
|
using System.Collections.Generic; |
||||
|
using System.Threading; |
||||
|
using System.Threading.Tasks; |
||||
|
|
||||
|
namespace LINGYUN.Abp.IdentityServer.ApiResources |
||||
|
{ |
||||
|
public interface IApiResourceRepository : Volo.Abp.IdentityServer.ApiResources.IApiResourceRepository |
||||
|
{ |
||||
|
Task<List<string>> GetNamesAsync(CancellationToken cancellationToken = default); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
using System.Collections.Generic; |
||||
|
using System.Threading; |
||||
|
using System.Threading.Tasks; |
||||
|
|
||||
|
namespace LINGYUN.Abp.IdentityServer.IdentityResources |
||||
|
{ |
||||
|
public interface IIdentityResourceRepository : Volo.Abp.IdentityServer.IdentityResources.IIdentityResourceRepository |
||||
|
{ |
||||
|
Task<List<string>> GetNamesAsync(CancellationToken cancellationToken = default); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
using Microsoft.EntityFrameworkCore; |
||||
|
using Microsoft.Extensions.DependencyInjection; |
||||
|
using System.Collections.Generic; |
||||
|
using System.Linq; |
||||
|
using System.Threading; |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.EntityFrameworkCore; |
||||
|
using Volo.Abp.IdentityServer.ApiResources; |
||||
|
using Volo.Abp.IdentityServer.EntityFrameworkCore; |
||||
|
|
||||
|
namespace LINGYUN.Abp.IdentityServer.ApiResources |
||||
|
{ |
||||
|
[Dependency(ServiceLifetime.Transient)] |
||||
|
[ExposeServices( |
||||
|
typeof(IApiResourceRepository), |
||||
|
typeof(ApiResourceRepository), |
||||
|
typeof(Volo.Abp.IdentityServer.ApiResources.IApiResourceRepository))] |
||||
|
public class EfCoreApiResourceRepository : ApiResourceRepository, IApiResourceRepository |
||||
|
{ |
||||
|
public EfCoreApiResourceRepository( |
||||
|
IDbContextProvider<IIdentityServerDbContext> dbContextProvider) |
||||
|
: base(dbContextProvider) |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
public virtual async Task<List<string>> GetNamesAsync(CancellationToken cancellationToken = default) |
||||
|
{ |
||||
|
return await DbSet |
||||
|
.Select(x => x.Name) |
||||
|
.Distinct() |
||||
|
.ToListAsync(GetCancellationToken(cancellationToken)); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
using Microsoft.EntityFrameworkCore; |
||||
|
using Microsoft.Extensions.DependencyInjection; |
||||
|
using System.Collections.Generic; |
||||
|
using System.Linq; |
||||
|
using System.Threading; |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.EntityFrameworkCore; |
||||
|
using Volo.Abp.IdentityServer.EntityFrameworkCore; |
||||
|
using Volo.Abp.IdentityServer.IdentityResources; |
||||
|
|
||||
|
namespace LINGYUN.Abp.IdentityServer.IdentityResources |
||||
|
{ |
||||
|
[Dependency(ServiceLifetime.Transient)] |
||||
|
[ExposeServices( |
||||
|
typeof(IIdentityResourceRepository), |
||||
|
typeof(IdentityResourceRepository), |
||||
|
typeof(Volo.Abp.IdentityServer.IdentityResources.IIdentityResourceRepository))] |
||||
|
public class EfCoreIdentityResourceRepository : IdentityResourceRepository, IIdentityResourceRepository |
||||
|
{ |
||||
|
public EfCoreIdentityResourceRepository( |
||||
|
IDbContextProvider<IIdentityServerDbContext> dbContextProvider) |
||||
|
: base(dbContextProvider) |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
public virtual async Task<List<string>> GetNamesAsync(CancellationToken cancellationToken = default) |
||||
|
{ |
||||
|
return await DbSet |
||||
|
.Select(x => x.Name) |
||||
|
.Distinct() |
||||
|
.ToListAsync(GetCancellationToken(cancellationToken)); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Binary file not shown.
@ -0,0 +1,36 @@ |
|||||
|
import ApiService from './serviceBase' |
||||
|
|
||||
|
const openIdConfigurationUrl = '/.well-known/openid-configuration' |
||||
|
|
||||
|
export default class IdentityServer4Service { |
||||
|
public static getOpenIdConfiguration() { |
||||
|
return ApiService.Get<OpenIdConfiguration>(openIdConfigurationUrl) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export class OpenIdConfiguration { |
||||
|
issuer!: string |
||||
|
jwks_uri!: string |
||||
|
authorization_endpoint!: string |
||||
|
token_endpoint!: string |
||||
|
userinfo_endpoint!: string |
||||
|
end_session_endpoint!: string |
||||
|
check_session_iframe!: string |
||||
|
revocation_endpoint!: string |
||||
|
introspection_endpoint!: string |
||||
|
device_authorization_endpoint!: string |
||||
|
frontchannel_logout_supported!: boolean |
||||
|
frontchannel_logout_session_supported!: boolean |
||||
|
backchannel_logout_supported!: boolean |
||||
|
backchannel_logout_session_supported!: boolean |
||||
|
scopes_supported = new Array<string>() |
||||
|
claims_supported = new Array<string>() |
||||
|
grant_types_supported = new Array<string>() |
||||
|
response_types_supported = new Array<string>() |
||||
|
response_modes_supported = new Array<string>() |
||||
|
token_endpoint_auth_methods_supported = new Array<string>() |
||||
|
id_token_signing_alg_values_supported = new Array<string>() |
||||
|
subject_types_supported = new Array<string>() |
||||
|
code_challenge_methods_supported = new Array<string>() |
||||
|
request_parameter_supported!: boolean |
||||
|
} |
||||
@ -1,250 +0,0 @@ |
|||||
<template> |
|
||||
<el-form |
|
||||
ref="apiResourceSecretEditForm" |
|
||||
:model="apiResourceSecret" |
|
||||
label-width="80px" |
|
||||
:rules="apiResourceSecretRules" |
|
||||
> |
|
||||
<el-row> |
|
||||
<el-col :span="12"> |
|
||||
<el-form-item |
|
||||
prop="type" |
|
||||
:label="$t('AbpIdentityServer.Secret:Type')" |
|
||||
> |
|
||||
<el-select |
|
||||
v-model="apiResourceSecret.type" |
|
||||
class="full-select" |
|
||||
:placeholder="$t('pleaseSelectBy', {key: $t('AbpIdentityServer.Secret:Type')})" |
|
||||
> |
|
||||
<el-option |
|
||||
key="JWK" |
|
||||
label="JsonWebKey" |
|
||||
value="JWK" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="SharedSecret" |
|
||||
label="SharedSecret" |
|
||||
value="SharedSecret" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="X509Name" |
|
||||
label="X509CertificateName" |
|
||||
value="X509Name" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="X509CertificateBase64" |
|
||||
label="X509CertificateBase64" |
|
||||
value="X509CertificateBase64" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="X509Thumbprint" |
|
||||
label="X509CertificateThumbprint" |
|
||||
value="X509Thumbprint" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<el-form-item |
|
||||
prop="hashType" |
|
||||
:label="$t('AbpIdentityServer.Secret:HashType')" |
|
||||
> |
|
||||
<el-popover |
|
||||
ref="popHashType" |
|
||||
placement="top-start" |
|
||||
trigger="hover" |
|
||||
:content="$t('identityServer.hashOnlySharedSecret')" |
|
||||
/> |
|
||||
<el-select |
|
||||
v-model="apiResourceSecret.hashType" |
|
||||
v-popover:popHashType |
|
||||
:disabled="apiResourceSecret.type !== 'SharedSecret'" |
|
||||
class="full-select" |
|
||||
:placeholder="$t('pleaseSelectBy', {key: $t('AbpIdentityServer.Secret:HashType')})" |
|
||||
> |
|
||||
<el-option |
|
||||
:key="0" |
|
||||
label="Sha256" |
|
||||
:value="0" |
|
||||
/> |
|
||||
<el-option |
|
||||
:key="1" |
|
||||
label="Sha512" |
|
||||
:value="1" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-form-item |
|
||||
prop="value" |
|
||||
:label="$t('AbpIdentityServer.Secret:Value')" |
|
||||
> |
|
||||
<el-input |
|
||||
v-model="apiResourceSecret.value" |
|
||||
:placeholder="$t('pleaseInputBy', {key: $t('AbpIdentityServer.Secret:Value')})" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="description" |
|
||||
:label="$t('AbpIdentityServer.Description')" |
|
||||
> |
|
||||
<el-input |
|
||||
v-model="apiResourceSecret.description" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="expiration" |
|
||||
:label="$t('AbpIdentityServer.Expiration')" |
|
||||
> |
|
||||
<el-date-picker |
|
||||
v-model="apiResourceSecret.expiration" |
|
||||
class="full-select" |
|
||||
type="datetime" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item |
|
||||
style="text-align: center;" |
|
||||
label-width="0px" |
|
||||
> |
|
||||
<el-button |
|
||||
type="primary" |
|
||||
style="width:180px" |
|
||||
@click="onSave" |
|
||||
> |
|
||||
{{ $t('AbpIdentityServer.Secret:New') }} |
|
||||
</el-button> |
|
||||
</el-form-item> |
|
||||
<el-table |
|
||||
row-key="value" |
|
||||
:data="apiResourceSecrets" |
|
||||
border |
|
||||
fit |
|
||||
highlight-current-row |
|
||||
style="width: 100%;" |
|
||||
> |
|
||||
<el-table-column |
|
||||
:label="$t('AbpIdentityServer.Secret:Type')" |
|
||||
prop="type" |
|
||||
sortable |
|
||||
width="170px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.type }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('AbpIdentityServer.Secret:Value')" |
|
||||
prop="value" |
|
||||
sortable |
|
||||
width="200px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.value }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('AbpIdentityServer.Description')" |
|
||||
prop="description" |
|
||||
width="120px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.description }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('AbpIdentityServer.Expiration')" |
|
||||
prop="expiration" |
|
||||
width="170px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.expiration | dateTimeFilter }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
align="center" |
|
||||
width="80px" |
|
||||
fixed="right" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<el-button |
|
||||
:disabled="!checkPermission(['IdentityServer.ApiResources.Secrets.Delete'])" |
|
||||
type="danger" |
|
||||
icon="el-icon-delete" |
|
||||
size="mini" |
|
||||
@click="handleDeleteApiSecret(row.type, row.value)" |
|
||||
/> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-form> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { ApiSecretCreateOrUpdate, ApiSecret } from '@/api/api-resources' |
|
||||
import { Component, Vue, Prop } from 'vue-property-decorator' |
|
||||
import { dateFormat } from '@/utils/index' |
|
||||
import { checkPermission } from '@/utils/permission' |
|
||||
import { Form } from 'element-ui' |
|
||||
|
|
||||
@Component({ |
|
||||
name: 'ApiResourceSecretEditForm', |
|
||||
filters: { |
|
||||
dateTimeFilter(datetime: string) { |
|
||||
if (datetime) { |
|
||||
const date = new Date(datetime) |
|
||||
return dateFormat(date, 'YYYY-mm-dd HH:MM:SS') |
|
||||
} |
|
||||
return '' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
checkPermission |
|
||||
} |
|
||||
}) |
|
||||
export default class ApiResourceSecretEditForm extends Vue { |
|
||||
@Prop({ default: () => { return new Array<ApiSecret>() } }) |
|
||||
private apiResourceSecrets!: ApiSecret[] |
|
||||
|
|
||||
private apiResourceSecret = new ApiSecretCreateOrUpdate() |
|
||||
private apiResourceSecretRules = { |
|
||||
type: [ |
|
||||
{ required: true, message: this.l('pleaseSelectBy', { key: this.l('AbpIdentityServer.Secret:Type') }), trigger: 'blur' } |
|
||||
], |
|
||||
value: [ |
|
||||
{ required: true, message: this.l('pleaseInputBy', { key: this.l('AbpIdentityServer.Secret:Value') }), trigger: 'blur' } |
|
||||
] |
|
||||
} |
|
||||
|
|
||||
private onSave() { |
|
||||
const apiResourceSecretEditForm = this.$refs.apiResourceSecretEditForm as Form |
|
||||
apiResourceSecretEditForm.validate(valid => { |
|
||||
if (valid) { |
|
||||
this.$emit('apiResourceSecretCreated', |
|
||||
this.apiResourceSecret.hashType, this.apiResourceSecret.type, this.apiResourceSecret.value, |
|
||||
this.apiResourceSecret.description, this.apiResourceSecret.expiration) |
|
||||
apiResourceSecretEditForm.resetFields() |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
private handleDeleteApiSecret(type: string, value: string) { |
|
||||
this.$emit('apiResourceSecretDeleted', type, value) |
|
||||
} |
|
||||
|
|
||||
private l(name: string, values?: any[] | { [key: string]: any }) { |
|
||||
return this.$t(name, values).toString() |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.full-select { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,147 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
v-el-draggable-dialog |
|
||||
width="800px" |
|
||||
:visible="showDialog" |
|
||||
:title="$t('identityServer.clientPermission')" |
|
||||
custom-class="modal-form" |
|
||||
:show-close="false" |
|
||||
@close="onFormClosed" |
|
||||
> |
|
||||
<el-form |
|
||||
ref="formClient" |
|
||||
label-width="100px" |
|
||||
:model="clientPermission" |
|
||||
label-position="top" |
|
||||
> |
|
||||
<el-form-item v-if="hasLoadPermission"> |
|
||||
<permission-tree |
|
||||
ref="PermissionTree" |
|
||||
:expanded="false" |
|
||||
:readonly="!checkPermission(['IdentityServer.Clients.ManagePermissions'])" |
|
||||
:permission="clientPermission" |
|
||||
@onPermissionChanged="onPermissionChanged" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button |
|
||||
class="cancel" |
|
||||
style="width:100px" |
|
||||
@click="onCancel" |
|
||||
> |
|
||||
{{ $t('table.cancel') }} |
|
||||
</el-button> |
|
||||
<el-button |
|
||||
class="confirm" |
|
||||
type="primary" |
|
||||
style="width:100px" |
|
||||
:disabled="!checkPermission(['IdentityServer.Clients.ManagePermissions'])" |
|
||||
@click="onSaveClientPemissions" |
|
||||
> |
|
||||
{{ $t('table.confirm') }} |
|
||||
</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { IPermission } from '@/api/types' |
|
||||
import { checkPermission } from '@/utils/permission' |
|
||||
import PermissionTree from '@/components/PermissionTree/index.vue' |
|
||||
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
|
||||
import PermissionService, { PermissionDto, UpdatePermissionsDto } from '@/api/permission' |
|
||||
|
|
||||
@Component({ |
|
||||
name: 'ClientPermissionEditForm', |
|
||||
components: { |
|
||||
PermissionTree |
|
||||
}, |
|
||||
methods: { |
|
||||
checkPermission |
|
||||
} |
|
||||
}) |
|
||||
export default class extends Vue { |
|
||||
@Prop({ default: false }) |
|
||||
private showDialog!: boolean |
|
||||
|
|
||||
/** 客户端标识 */ |
|
||||
@Prop({ default: '' }) |
|
||||
private clientId!: string |
|
||||
|
|
||||
/** 客户端权限 */ |
|
||||
private clientPermission: PermissionDto |
|
||||
/** 是否已加载权限 */ |
|
||||
private hasLoadPermission: boolean |
|
||||
/** 客户端权限已变更 */ |
|
||||
private clientPermissionChanged: boolean |
|
||||
/** 变更客户端权限数据 */ |
|
||||
private editClientPermissions: IPermission[] |
|
||||
|
|
||||
constructor() { |
|
||||
super() |
|
||||
this.hasLoadPermission = false |
|
||||
this.clientPermissionChanged = false |
|
||||
this.clientPermission = new PermissionDto() |
|
||||
this.editClientPermissions = new Array<IPermission>() |
|
||||
} |
|
||||
|
|
||||
/** 监听客户端标识变更事件,刷新客户端权限数据 */ |
|
||||
@Watch('clientId') |
|
||||
private onClientIdChanged() { |
|
||||
this.handledGetClientPermissions() |
|
||||
} |
|
||||
|
|
||||
mounted() { |
|
||||
this.handledGetClientPermissions() |
|
||||
} |
|
||||
|
|
||||
private handledGetClientPermissions() { |
|
||||
if (this.showDialog && this.clientId) { |
|
||||
PermissionService.getPermissionsByKey('C', this.clientId).then(permission => { |
|
||||
this.clientPermission = permission |
|
||||
this.hasLoadPermission = true |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** 客户端权限树变更事件 |
|
||||
* @param permissions 变更权限数据 |
|
||||
*/ |
|
||||
private onPermissionChanged(permissions: IPermission[]) { |
|
||||
this.clientPermissionChanged = true |
|
||||
this.editClientPermissions = permissions |
|
||||
} |
|
||||
|
|
||||
/** 保存客户端权限 */ |
|
||||
private onSaveClientPemissions() { |
|
||||
if (this.clientPermissionChanged) { |
|
||||
const setClientPermissions = new UpdatePermissionsDto() |
|
||||
setClientPermissions.permissions = this.editClientPermissions |
|
||||
PermissionService.setPermissionsByKey('C', this.clientId, setClientPermissions).then(() => { |
|
||||
this.onFormClosed() |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private onFormClosed() { |
|
||||
this.$emit('closed') |
|
||||
} |
|
||||
|
|
||||
/** 取消操作 */ |
|
||||
private onCancel() { |
|
||||
this.onFormClosed() |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.confirm { |
|
||||
position: absolute; |
|
||||
right: 10px; |
|
||||
} |
|
||||
.cancel { |
|
||||
position: absolute; |
|
||||
right: 120px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,199 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
v-el-draggable-dialog |
|
||||
width="800px" |
|
||||
:visible="showDialog" |
|
||||
:title="$t('identityServer.clientProperty')" |
|
||||
custom-class="modal-form" |
|
||||
:show-close="false" |
|
||||
@close="onFormClosed" |
|
||||
> |
|
||||
<div class="app-container"> |
|
||||
<el-form |
|
||||
ref="formClientProperty" |
|
||||
label-width="100px" |
|
||||
:model="clientProperty" |
|
||||
:rules="clientPropertyRules" |
|
||||
> |
|
||||
<el-form-item |
|
||||
prop="key" |
|
||||
:label="$t('identityServer.propertyKey')" |
|
||||
> |
|
||||
<el-input |
|
||||
v-model="clientProperty.key" |
|
||||
:placeholder="$t('pleaseInputBy', {key: $t('identityServer.propertyKey')})" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="value" |
|
||||
:label="$t('identityServer.propertyValue')" |
|
||||
> |
|
||||
<el-input |
|
||||
v-model="clientProperty.value" |
|
||||
:placeholder="$t('pleaseInputBy', {key: $t('identityServer.propertyValue')})" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item |
|
||||
style="text-align: center;" |
|
||||
label-width="0px" |
|
||||
> |
|
||||
<el-button |
|
||||
type="primary" |
|
||||
style="width:180px" |
|
||||
:disabled="!checkPermission(['IdentityServer.Clients.Properties.Create'])" |
|
||||
@click="onSaveClientProperty" |
|
||||
> |
|
||||
{{ $t('identityServer.createClientProperty') }} |
|
||||
</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
|
|
||||
<el-divider /> |
|
||||
|
|
||||
<el-table |
|
||||
row-key="key" |
|
||||
:data="clientProperties" |
|
||||
border |
|
||||
fit |
|
||||
highlight-current-row |
|
||||
style="width: 100%;" |
|
||||
> |
|
||||
<el-table-column |
|
||||
:label="$t('identityServer.propertyKey')" |
|
||||
prop="key" |
|
||||
sortable |
|
||||
width="200px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.key }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('identityServer.propertyValue')" |
|
||||
prop="value" |
|
||||
sortable |
|
||||
min-width="400px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.value }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('operaActions')" |
|
||||
align="center" |
|
||||
width="150px" |
|
||||
fixed="right" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<el-button |
|
||||
:disabled="!checkPermission(['IdentityServer.Clients.Properties.Delete'])" |
|
||||
size="mini" |
|
||||
type="primary" |
|
||||
@click="handleDeleteClientProperty(row.key, row.value)" |
|
||||
> |
|
||||
{{ $t('identityServer.deleteProperty') }} |
|
||||
</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import ClientService, { ClientProperty, ClientPropertyCreate } from '@/api/clients' |
|
||||
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
|
||||
import { checkPermission } from '@/utils/permission' |
|
||||
|
|
||||
@Component({ |
|
||||
name: 'ClientPropertyEditForm', |
|
||||
methods: { |
|
||||
checkPermission |
|
||||
} |
|
||||
}) |
|
||||
export default class extends Vue { |
|
||||
@Prop({ default: false }) |
|
||||
private showDialog!: boolean |
|
||||
|
|
||||
@Prop({ default: '' }) |
|
||||
private clientId!: string |
|
||||
|
|
||||
@Prop({ default: () => new Array<ClientProperty>() }) |
|
||||
private clientProperties!: ClientProperty[] |
|
||||
|
|
||||
private clientProperty: ClientPropertyCreate |
|
||||
private clientPropertyRules = { |
|
||||
key: [ |
|
||||
{ required: true, message: this.l('pleaseInputBy', { key: this.l('identityServer.propertyKey') }), trigger: 'change' } |
|
||||
], |
|
||||
value: [ |
|
||||
{ required: true, message: this.l('pleaseInputBy', { key: this.l('identityServer.propertyValue') }), trigger: 'blur' } |
|
||||
] |
|
||||
} |
|
||||
|
|
||||
constructor() { |
|
||||
super() |
|
||||
this.clientProperty = new ClientPropertyCreate() |
|
||||
} |
|
||||
|
|
||||
@Watch('clientId', { immediate: true }) |
|
||||
private onClientIdChanged() { |
|
||||
this.clientProperty.clientId = this.clientId |
|
||||
} |
|
||||
|
|
||||
private handleDeleteClientProperty(key: string, value: string) { |
|
||||
this.$confirm(this.l('identityServer.deletePropertyByType', { key: key }), |
|
||||
this.l('identityServer.deleteProperty'), { |
|
||||
callback: (action) => { |
|
||||
if (action === 'confirm') { |
|
||||
ClientService.deleteClientProperty(this.clientId, key, value).then(() => { |
|
||||
const deletePropertyIndex = this.clientProperties.findIndex(p => p.key === key && p.value === value) |
|
||||
this.clientProperties.splice(deletePropertyIndex, 1) |
|
||||
this.$message.success(this.l('identityServer.deletePropertySuccess', { type: value })) |
|
||||
this.$emit('clientPropertyChanged') |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
private onSaveClientProperty() { |
|
||||
const frmClientProperty = this.$refs.formClientProperty as any |
|
||||
frmClientProperty.validate((valid: boolean) => { |
|
||||
if (valid) { |
|
||||
this.clientProperty.clientId = this.clientId |
|
||||
ClientService.addClientProperty(this.clientProperty).then(property => { |
|
||||
this.clientProperties.push(property) |
|
||||
const successMessage = this.l('identityServer.createPropertySuccess', { type: this.clientProperty.key }) |
|
||||
this.$message.success(successMessage) |
|
||||
this.$emit('clientPropertyChanged') |
|
||||
this.onFormClosed() |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
private onFormClosed() { |
|
||||
this.resetFields() |
|
||||
this.$emit('closed') |
|
||||
} |
|
||||
|
|
||||
public resetFields() { |
|
||||
const frmClientProperty = this.$refs.formClientProperty as any |
|
||||
frmClientProperty.resetFields() |
|
||||
} |
|
||||
|
|
||||
private l(name: string, values?: any[] | { [key: string]: any }) { |
|
||||
return this.$t(name, values).toString() |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.full-select { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,305 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
v-el-draggable-dialog |
|
||||
width="800px" |
|
||||
:visible="showDialog" |
|
||||
:title="$t('identityServer.clientSecret')" |
|
||||
custom-class="modal-form" |
|
||||
:show-close="false" |
|
||||
@close="onFormClosed" |
|
||||
> |
|
||||
<div class="app-container"> |
|
||||
<el-form |
|
||||
ref="formClientSecret" |
|
||||
label-width="100px" |
|
||||
:model="clientSecret" |
|
||||
:rules="clientSecretRules" |
|
||||
> |
|
||||
<el-form-item |
|
||||
prop="type" |
|
||||
:label="$t('identityServer.secretType')" |
|
||||
> |
|
||||
<el-select |
|
||||
v-model="clientSecret.type" |
|
||||
class="full-select" |
|
||||
:placeholder="$t('pleaseSelectBy', {key: $t('identityServer.secretType')})" |
|
||||
> |
|
||||
<el-option |
|
||||
key="JWK" |
|
||||
label="JsonWebKey" |
|
||||
value="JWK" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="SharedSecret" |
|
||||
label="SharedSecret" |
|
||||
value="SharedSecret" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="X509Name" |
|
||||
label="X509CertificateName" |
|
||||
value="X509Name" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="X509CertificateBase64" |
|
||||
label="X509CertificateBase64" |
|
||||
value="X509CertificateBase64" |
|
||||
/> |
|
||||
<el-option |
|
||||
key="X509Thumbprint" |
|
||||
label="X509CertificateThumbprint" |
|
||||
value="X509Thumbprint" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="hashType" |
|
||||
:label="$t('identityServer.secretHashType')" |
|
||||
> |
|
||||
<el-popover |
|
||||
ref="popHashType" |
|
||||
placement="top-start" |
|
||||
trigger="hover" |
|
||||
:content="$t('identityServer.hashOnlySharedSecret')" |
|
||||
/> |
|
||||
<el-select |
|
||||
v-model="clientSecret.hashType" |
|
||||
v-popover:popHashType |
|
||||
:disabled="clientSecret.type !== 'SharedSecret'" |
|
||||
class="full-select" |
|
||||
:placeholder="$t('pleaseSelectBy', {key: $t('identityServer.secretHashType')})" |
|
||||
> |
|
||||
<el-option |
|
||||
:key="0" |
|
||||
label="Sha256" |
|
||||
:value="0" |
|
||||
/> |
|
||||
<el-option |
|
||||
:key="1" |
|
||||
label="Sha512" |
|
||||
:value="1" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="value" |
|
||||
:label="$t('identityServer.secretValue')" |
|
||||
> |
|
||||
<el-input |
|
||||
v-model="clientSecret.value" |
|
||||
:placeholder="$t('pleaseInputBy', {key: $t('identityServer.secretValue')})" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="description" |
|
||||
:label="$t('identityServer.secretDescription')" |
|
||||
> |
|
||||
<el-input |
|
||||
v-model="clientSecret.description" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="expiration" |
|
||||
:label="$t('identityServer.expiration')" |
|
||||
> |
|
||||
<el-date-picker |
|
||||
v-model="clientSecret.expiration" |
|
||||
class="full-select" |
|
||||
type="datetime" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item |
|
||||
style="text-align: center;" |
|
||||
label-width="0px" |
|
||||
> |
|
||||
<el-button |
|
||||
type="primary" |
|
||||
style="width:180px" |
|
||||
:disabled="!checkPermission(['IdentityServer.Clients.Secrets.Create'])" |
|
||||
@click="onSaveClientSecret" |
|
||||
> |
|
||||
{{ $t('identityServer.createSecret') }} |
|
||||
</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
|
|
||||
<el-divider /> |
|
||||
|
|
||||
<el-table |
|
||||
row-key="clientId" |
|
||||
:data="clientSecrets" |
|
||||
border |
|
||||
fit |
|
||||
highlight-current-row |
|
||||
style="width: 100%;" |
|
||||
> |
|
||||
<el-table-column |
|
||||
:label="$t('identityServer.secretType')" |
|
||||
prop="type" |
|
||||
sortable |
|
||||
width="150px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.type }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('identityServer.secretValue')" |
|
||||
prop="value" |
|
||||
sortable |
|
||||
width="200px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.value }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('identityServer.secretDescription')" |
|
||||
prop="description" |
|
||||
width="170px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.description }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('identityServer.expiration')" |
|
||||
prop="expiration" |
|
||||
width="170px" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<span>{{ row.expiration | dateTimeFilter }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
:label="$t('operaActions')" |
|
||||
align="center" |
|
||||
width="150px" |
|
||||
fixed="right" |
|
||||
> |
|
||||
<template slot-scope="{row}"> |
|
||||
<el-button |
|
||||
:disabled="!checkPermission(['IdentityServer.Clients.Secrets.Delete'])" |
|
||||
size="mini" |
|
||||
type="primary" |
|
||||
@click="handleDeleteClientSecret(row.type, row.value)" |
|
||||
> |
|
||||
{{ $t('identityServer.deleteSecret') }} |
|
||||
</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import ClientService, { ClientSecret, ClientSecretCreate } from '@/api/clients' |
|
||||
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
|
||||
import { dateFormat } from '@/utils/index' |
|
||||
import { checkPermission } from '@/utils/permission' |
|
||||
|
|
||||
@Component({ |
|
||||
name: 'ClientSecretEditForm', |
|
||||
filters: { |
|
||||
dateTimeFilter(datetime: string) { |
|
||||
if (datetime) { |
|
||||
const date = new Date(datetime) |
|
||||
return dateFormat(date, 'YYYY-mm-dd HH:MM') |
|
||||
} |
|
||||
return '' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
checkPermission |
|
||||
} |
|
||||
}) |
|
||||
export default class extends Vue { |
|
||||
@Prop({ default: false }) |
|
||||
private showDialog!: boolean |
|
||||
|
|
||||
@Prop({ default: '' }) |
|
||||
private clientId!: string |
|
||||
|
|
||||
@Prop({ default: () => new Array<ClientSecret>() }) |
|
||||
private clientSecrets!: ClientSecret[] |
|
||||
|
|
||||
private clientSecretChanged: boolean |
|
||||
private clientSecret: ClientSecretCreate |
|
||||
private clientSecretRules = { |
|
||||
type: [ |
|
||||
{ required: true, message: this.l('pleaseSelectBy', { key: this.l('identityServer.secretType') }), trigger: 'change' } |
|
||||
], |
|
||||
value: [ |
|
||||
{ required: true, message: this.l('pleaseInputBy', { key: this.l('identityServer.secretValue') }), trigger: 'blur' } |
|
||||
] |
|
||||
} |
|
||||
|
|
||||
constructor() { |
|
||||
super() |
|
||||
this.clientSecretChanged = false |
|
||||
this.clientSecret = new ClientSecretCreate() |
|
||||
} |
|
||||
|
|
||||
@Watch('clientId', { immediate: true }) |
|
||||
private onClientIdChanged() { |
|
||||
this.clientSecret.clientId = this.clientId |
|
||||
} |
|
||||
|
|
||||
private handleDeleteClientSecret(type: string, value: string) { |
|
||||
this.$confirm(this.l('identityServer.deleteSecretByType', { type: value }), |
|
||||
this.l('identityServer.deleteSecret'), { |
|
||||
callback: (action) => { |
|
||||
if (action === 'confirm') { |
|
||||
ClientService.deleteClientSecret(this.clientId, type, value).then(() => { |
|
||||
const deleteSecretIndex = this.clientSecrets.findIndex(secret => secret.type === type) |
|
||||
this.clientSecrets.splice(deleteSecretIndex, 1) |
|
||||
this.$message.success(this.l('identityServer.deleteSecretSuccess', { type: value })) |
|
||||
this.$emit('clientSecretChanged') |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
private onSaveClientSecret() { |
|
||||
const frmClientSecret = this.$refs.formClientSecret as any |
|
||||
frmClientSecret.validate((valid: boolean) => { |
|
||||
if (valid) { |
|
||||
this.clientSecret.clientId = this.clientId |
|
||||
ClientService.addClientSecret(this.clientSecret).then(secret => { |
|
||||
this.clientSecrets.push(secret) |
|
||||
const successMessage = this.l('identityServer.createSecretSuccess', { type: this.clientSecret.type }) |
|
||||
this.$message.success(successMessage) |
|
||||
this.$emit('clientSecretChanged') |
|
||||
this.onFormClosed() |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
private onFormClosed() { |
|
||||
this.resetFields() |
|
||||
this.$emit('closed') |
|
||||
} |
|
||||
|
|
||||
public resetFields() { |
|
||||
const frmClientSecret = this.$refs.formClientSecret as any |
|
||||
frmClientSecret.resetFields() |
|
||||
} |
|
||||
|
|
||||
private l(name: string, values?: any[] | { [key: string]: any }) { |
|
||||
return this.$t(name, values).toString() |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.full-select { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,169 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-form |
||||
|
v-if="allowedCreate" |
||||
|
ref="propertyEditForm" |
||||
|
label-width="100px" |
||||
|
:model="property" |
||||
|
> |
||||
|
<el-form-item |
||||
|
prop="key" |
||||
|
:label="$t('AbpIdentityServer.Propertites:Key')" |
||||
|
:rules="{ |
||||
|
required: true, |
||||
|
message: $t('pleaseInputBy', {key: $t('AbpIdentityServer.Propertites:Key')}), |
||||
|
trigger: 'blur' |
||||
|
}" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="property.key" |
||||
|
:placeholder="$t('pleaseInputBy', {key: $t('AbpIdentityServer.Propertites:Key')})" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="value" |
||||
|
:label="$t('AbpIdentityServer.Propertites:Value')" |
||||
|
:rules="{ |
||||
|
required: true, |
||||
|
message: $t('pleaseInputBy', {key: $t('AbpIdentityServer.Propertites:Value')}), |
||||
|
trigger: 'blur' |
||||
|
}" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="property.value" |
||||
|
:placeholder="$t('pleaseInputBy', {key: $t('AbpIdentityServer.Propertites:Value')})" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
style="text-align: center;" |
||||
|
label-width="0px" |
||||
|
> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
style="width:180px" |
||||
|
@click="onSave" |
||||
|
> |
||||
|
{{ $t('AbpIdentityServer.Propertites:New') }} |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table |
||||
|
row-key="key" |
||||
|
:data="editProperties" |
||||
|
border |
||||
|
fit |
||||
|
highlight-current-row |
||||
|
style="width: 100%;" |
||||
|
> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Propertites:Key')" |
||||
|
prop="key" |
||||
|
sortable |
||||
|
width="200px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.key }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Propertites:Value')" |
||||
|
prop="value" |
||||
|
sortable |
||||
|
min-width="300px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.value }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Actions')" |
||||
|
align="center" |
||||
|
width="80px" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
type="danger" |
||||
|
:disabled="!allowedDelete" |
||||
|
icon="el-icon-delete" |
||||
|
@click="onDelete(row.key)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
||||
|
import { Form } from 'element-ui' |
||||
|
|
||||
|
class Property { |
||||
|
key = '' |
||||
|
value = '' |
||||
|
|
||||
|
constructor( |
||||
|
key: string, |
||||
|
value: string |
||||
|
) { |
||||
|
this.key = key |
||||
|
this.value = value |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
name: 'PropertiesEditForm' |
||||
|
}) |
||||
|
export default class PropertiesEditForm extends Vue { |
||||
|
@Prop({ default: () => { return {} } }) |
||||
|
private properties!: {[key: string]: string} |
||||
|
|
||||
|
@Prop({ default: false }) |
||||
|
private allowedCreate!: boolean |
||||
|
|
||||
|
@Prop({ default: false }) |
||||
|
private allowedDelete!: boolean |
||||
|
|
||||
|
private editProperties = new Array<Property>() |
||||
|
private property = new Property('', '') |
||||
|
|
||||
|
@Watch('properties', { immediate: true, deep: true }) |
||||
|
private onPropertiesChanged() { |
||||
|
this.editProperties = new Array<Property>() |
||||
|
Object.keys(this.properties) |
||||
|
.forEach(key => { |
||||
|
this.editProperties.push(new Property(key, this.properties[key])) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private validateInput() { |
||||
|
return !this.editProperties.some(prop => prop.key === this.property.key) |
||||
|
} |
||||
|
|
||||
|
private onSave() { |
||||
|
const propertyEditForm = this.$refs.propertyEditForm as Form |
||||
|
propertyEditForm.validate(valid => { |
||||
|
if (valid) { |
||||
|
if (this.validateInput()) { |
||||
|
this.$emit('onCreated', this.property.key, this.property.value) |
||||
|
propertyEditForm.resetFields() |
||||
|
} else { |
||||
|
this.$message.warning(this.l('AbpIdentityServer.Propertites:DuplicateKey')) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private onDelete(key: string) { |
||||
|
this.$emit('onDeleted', key) |
||||
|
} |
||||
|
|
||||
|
private l(name: string, values?: any[] | { [key: string]: any }) { |
||||
|
return this.$t(name, values).toString() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -1,190 +0,0 @@ |
|||||
<template> |
|
||||
<div style="width:auto; height:auto;"> |
|
||||
<div |
|
||||
class="el-input-tag input-tag-wrapper" |
|
||||
:class="[size ? 'el-input-tag--' + size : '']" |
|
||||
@click="foucusTagInput" |
|
||||
> |
|
||||
<span v-if="scopes.length>0"> |
|
||||
<el-tag |
|
||||
v-for="(scope, idx) in scopes" |
|
||||
:key="idx" |
|
||||
:size="size" |
|
||||
:closable="!readOnly" |
|
||||
:disable-transitions="false" |
|
||||
@close="remove(idx)" |
|
||||
> |
|
||||
{{ scope[key] }} |
|
||||
</el-tag> |
|
||||
</span> |
|
||||
<input |
|
||||
v-if="!readOnly" |
|
||||
v-model="newTag" |
|
||||
:size="size" |
|
||||
:class="[size ? 'tag-input--' + size : 'tag-input']" |
|
||||
@keydown="addNew" |
|
||||
@blur="addNew" |
|
||||
> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue, Prop } from 'vue-property-decorator' |
|
||||
import { AppModule } from '@/store/modules/app' |
|
||||
import { IScope } from '@/api/types' |
|
||||
|
|
||||
@Component({ |
|
||||
name: 'ScopeInput' |
|
||||
}) |
|
||||
export default class extends Vue { |
|
||||
@Prop({ default: () => new Array<IScope>() }) |
|
||||
private scopes!: IScope[] |
|
||||
|
|
||||
@Prop({ default: 'scope' }) |
|
||||
private key!: string |
|
||||
|
|
||||
@Prop({ default: () => [13, 188, 9] }) |
|
||||
private addTagOnKeys!: Array<number> |
|
||||
|
|
||||
@Prop({ default: false }) |
|
||||
private readOnly!: boolean |
|
||||
|
|
||||
private size = AppModule.size |
|
||||
public newTag: string |
|
||||
|
|
||||
constructor() { |
|
||||
super() |
|
||||
this.newTag = '' |
|
||||
} |
|
||||
|
|
||||
private foucusTagInput() { |
|
||||
const tagInputClass = this.size ? '.tag-input--' + this.size : '.tag-input' |
|
||||
if (this.readOnly || !this.$el.querySelector(tagInputClass)) { |
|
||||
|
|
||||
} else { |
|
||||
const tagInput = this.$el.querySelector(tagInputClass) as any |
|
||||
tagInput.focus() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private addNew(e: any) { |
|
||||
if (e && (!this.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) { |
|
||||
return false |
|
||||
} |
|
||||
if (e) { |
|
||||
e.stopPropagation() |
|
||||
e.preventDefault() |
|
||||
} |
|
||||
let addSuucess = false |
|
||||
if (this.newTag.includes(',')) { |
|
||||
this.newTag.split(',').forEach(item => { |
|
||||
if (this.addTag(item.trim())) { |
|
||||
addSuucess = true |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
if (this.addTag(this.newTag.trim())) { |
|
||||
addSuucess = true |
|
||||
} |
|
||||
} |
|
||||
if (addSuucess) { |
|
||||
this.tagChange() |
|
||||
this.newTag = '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private addTag(tag: any) { |
|
||||
if (!tag) { |
|
||||
return false |
|
||||
} |
|
||||
tag = tag.trim() |
|
||||
if (!this.scopes.every(scope => scope.scope === tag)) { |
|
||||
this.scopes.push({ scope: tag }) |
|
||||
return true |
|
||||
} |
|
||||
return false |
|
||||
} |
|
||||
|
|
||||
private remove(index: number) { |
|
||||
this.scopes.splice(index, 1) |
|
||||
this.tagChange() |
|
||||
} |
|
||||
|
|
||||
private removeLastTa() { |
|
||||
if (this.newTag) { |
|
||||
return false |
|
||||
} |
|
||||
this.scopes.pop() |
|
||||
this.tagChange() |
|
||||
} |
|
||||
|
|
||||
private tagChange() { |
|
||||
this.$emit('input', this.scopes) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.input-tag-wrapper { |
|
||||
position: relative; |
|
||||
font-size: 14px; |
|
||||
background-color: #fff; |
|
||||
background-image: none; |
|
||||
border-radius: 4px; |
|
||||
border: 1px solid #dcdfe6; |
|
||||
box-sizing: border-box; |
|
||||
color: #606266; |
|
||||
display: inline-block; |
|
||||
outline: none; |
|
||||
padding: 0 5px 0 5px; |
|
||||
transition: border-color .2s cubic-bezier(.645,.045,.355,1); |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.el-tag { |
|
||||
margin-right: 4px; |
|
||||
margin-top: 4px; |
|
||||
} |
|
||||
|
|
||||
.tag-input--default { |
|
||||
background: transparent; |
|
||||
border: 0; |
|
||||
font-size: 14px; |
|
||||
height: 38px; |
|
||||
outline: none; |
|
||||
padding-left: 0; |
|
||||
width: 150px; |
|
||||
} |
|
||||
|
|
||||
.tag-input--mini{ |
|
||||
background: transparent; |
|
||||
border: 0; |
|
||||
font-size: 14px; |
|
||||
height: 26px; |
|
||||
outline: none; |
|
||||
padding-left: 0; |
|
||||
width: 150px; |
|
||||
} |
|
||||
|
|
||||
.tag-input--small{ |
|
||||
background: transparent; |
|
||||
border: 0; |
|
||||
font-size: 14px; |
|
||||
height: 30px; |
|
||||
outline: none; |
|
||||
padding-left: 0; |
|
||||
width: 150px; |
|
||||
} |
|
||||
|
|
||||
.tag-input--medium{ |
|
||||
background: transparent; |
|
||||
border: 0; |
|
||||
font-size: 14px; |
|
||||
height: 34px; |
|
||||
outline: none; |
|
||||
padding-left: 0; |
|
||||
width: 150px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,257 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-form |
||||
|
v-if="allowedCreateSecret" |
||||
|
ref="secretEditForm" |
||||
|
:model="secret" |
||||
|
label-width="80px" |
||||
|
> |
||||
|
<el-form-item |
||||
|
prop="type" |
||||
|
:label="$t('AbpIdentityServer.Secret:Type')" |
||||
|
:rules="{ |
||||
|
required: true, |
||||
|
message: $t('pleaseSelectBy', {key: $t('AbpIdentityServer.Secret:Type')}), |
||||
|
trigger: 'blur' |
||||
|
}" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="secret.type" |
||||
|
class="full-select" |
||||
|
:placeholder="$t('pleaseSelectBy', {key: $t('AbpIdentityServer.Secret:Type')})" |
||||
|
> |
||||
|
<el-option |
||||
|
key="JWK" |
||||
|
label="JsonWebKey" |
||||
|
value="JWK" |
||||
|
/> |
||||
|
<el-option |
||||
|
key="SharedSecret" |
||||
|
label="SharedSecret" |
||||
|
value="SharedSecret" |
||||
|
/> |
||||
|
<el-option |
||||
|
key="X509Name" |
||||
|
label="X509CertificateName" |
||||
|
value="X509Name" |
||||
|
/> |
||||
|
<el-option |
||||
|
key="X509CertificateBase64" |
||||
|
label="X509CertificateBase64" |
||||
|
value="X509CertificateBase64" |
||||
|
/> |
||||
|
<el-option |
||||
|
key="X509Thumbprint" |
||||
|
label="X509CertificateThumbprint" |
||||
|
value="X509Thumbprint" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="hashType" |
||||
|
:label="$t('AbpIdentityServer.Secret:HashType')" |
||||
|
> |
||||
|
<el-popover |
||||
|
ref="popHashType" |
||||
|
placement="top-start" |
||||
|
trigger="hover" |
||||
|
:content="$t('AbpIdentityServer.Secret:HashTypeOnlySharedSecret')" |
||||
|
/> |
||||
|
<el-select |
||||
|
v-model="secret.hashType" |
||||
|
v-popover:popHashType |
||||
|
:disabled="secret.type !== 'SharedSecret'" |
||||
|
class="full-select" |
||||
|
:placeholder="$t('pleaseSelectBy', {key: $t('AbpIdentityServer.Secret:HashType')})" |
||||
|
> |
||||
|
<el-option |
||||
|
:key="0" |
||||
|
label="Sha256" |
||||
|
:value="0" |
||||
|
/> |
||||
|
<el-option |
||||
|
:key="1" |
||||
|
label="Sha512" |
||||
|
:value="1" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="value" |
||||
|
:label="$t('AbpIdentityServer.Secret:Value')" |
||||
|
:rules="{ |
||||
|
required: true, |
||||
|
message: $t('pleaseInputBy', {key: $t('AbpIdentityServer.Secret:Value')}), |
||||
|
trigger: 'blur' |
||||
|
}" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="secret.value" |
||||
|
:placeholder="$t('pleaseInputBy', {key: $t('AbpIdentityServer.Secret:Value')})" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="description" |
||||
|
:label="$t('AbpIdentityServer.Description')" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="secret.description" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="expiration" |
||||
|
:label="$t('AbpIdentityServer.Expiration')" |
||||
|
> |
||||
|
<el-date-picker |
||||
|
v-model="secret.expiration" |
||||
|
class="full-select" |
||||
|
type="datetime" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
style="text-align: center;" |
||||
|
label-width="0px" |
||||
|
> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
style="width:180px" |
||||
|
@click="onSave" |
||||
|
> |
||||
|
{{ $t('AbpIdentityServer.Secret:New') }} |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-table |
||||
|
row-key="value" |
||||
|
:data="secrets" |
||||
|
border |
||||
|
fit |
||||
|
highlight-current-row |
||||
|
style="width: 100%;" |
||||
|
> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Secret:Type')" |
||||
|
prop="type" |
||||
|
sortable |
||||
|
width="170px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.type }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Secret:Value')" |
||||
|
prop="value" |
||||
|
sortable |
||||
|
width="200px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.value }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Description')" |
||||
|
prop="description" |
||||
|
width="120px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.description }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Expiration')" |
||||
|
prop="expiration" |
||||
|
width="170px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.expiration | dateTimeFilter }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:label="$t('AbpIdentityServer.Actions')" |
||||
|
align="center" |
||||
|
width="80px" |
||||
|
fixed="right" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<el-button |
||||
|
:disabled="!allowedDeleteSecret" |
||||
|
type="danger" |
||||
|
icon="el-icon-delete" |
||||
|
size="mini" |
||||
|
@click="handleDeleteApiSecret(row.type, row.value)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { ISecret, HashType } from '@/api/types' |
||||
|
import { Component, Vue, Prop } from 'vue-property-decorator' |
||||
|
import { dateFormat } from '@/utils/index' |
||||
|
import { Form } from 'element-ui' |
||||
|
|
||||
|
class Secret implements ISecret { |
||||
|
type = '' |
||||
|
value = '' |
||||
|
hashType = HashType.Sha256 |
||||
|
description = '' |
||||
|
expiration: Date | undefined = undefined |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
name: 'SecretEditForm', |
||||
|
filters: { |
||||
|
dateTimeFilter(datetime: string) { |
||||
|
if (datetime) { |
||||
|
const date = new Date(datetime) |
||||
|
return dateFormat(date, 'YYYY-mm-dd HH:MM:SS') |
||||
|
} |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
export default class SecretEditForm extends Vue { |
||||
|
@Prop({ default: () => { return new Array<ISecret>() } }) |
||||
|
private secrets!: ISecret[] |
||||
|
|
||||
|
@Prop({ default: false }) |
||||
|
private allowedCreateSecret!: boolean |
||||
|
|
||||
|
@Prop({ default: false }) |
||||
|
private allowedDeleteSecret!: boolean |
||||
|
|
||||
|
private secret = new Secret() |
||||
|
|
||||
|
private onSave() { |
||||
|
const secretEditForm = this.$refs.secretEditForm as Form |
||||
|
secretEditForm.validate(valid => { |
||||
|
if (valid) { |
||||
|
this.$emit('onSecretCreated', this.secret) |
||||
|
secretEditForm.resetFields() |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private handleDeleteApiSecret(type: string, value: string) { |
||||
|
this.$emit('onSecretDeleted', type, value) |
||||
|
} |
||||
|
|
||||
|
private l(name: string, values?: any[] | { [key: string]: any }) { |
||||
|
return this.$t(name, values).toString() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.full-select { |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue