feat(openiddict): 增加applications密钥管理.

apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationSecretModal.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { OpenIddictApplicationDto } from '../../types';
+
+import { ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { getApi, updateApi } from '../../api/applications';
+
+defineOptions({
+  name: 'ApplicationSecretModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: OpenIddictApplicationDto): void;
+}>();
+
+const applicationModel = ref<OpenIddictApplicationDto>();
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'InputPassword',
+      fieldName: 'clientSecret',
+      label: $t('AbpOpenIddict.DisplayName:ClientSecret'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange: async (isOpen) => {
+    if (isOpen) {
+      try {
+        modalApi.setState({ loading: true });
+        const { id } = modalApi.getData<OpenIddictApplicationDto>();
+        await onGet(id);
+      } finally {
+        modalApi.setState({ loading: false });
+      }
+    }
+  },
+  title: $t('AbpOpenIddict.ManageSecret'),
+});
+async function onGet(id: string) {
+  const dto = await getApi(id);
+  applicationModel.value = dto;
+}
+async function onSubmit(input: Record<string, any>) {
+  const dto = await updateApi(applicationModel.value!.id, {
+    ...applicationModel.value!,
+    clientSecret: input.clientSecret,
+  });
+  message.success($t('AbpUi.SavedSuccessfully'));
+  emits('change', dto);
+  modalApi.close();
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>

apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue

@@ -31,6 +31,7 @@ defineOptions({
 const MenuItem = Menu.Item;
 const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
+const SecretIcon = createIconifyIcon('codicon:gist-secret');
 const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
 
 const { hasAccessByCodes } = useAccess();
@@ -138,6 +139,11 @@ const [ApplicationModal, modalApi] = useVbenModal({
     () => import('./ApplicationModal.vue'),
   ),
 });
+const [ApplicationSecretModal, secretModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./ApplicationSecretModal.vue'),
+  ),
+});
 const [ApplicationPermissionModal, permissionModalApi] = useVbenModal({
   connectedComponent: PermissionModal,
 });
@@ -182,6 +188,11 @@ const onMenuClick = (row: OpenIddictApplicationDto, info: MenuInfo) => {
       permissionModalApi.open();
       break;
     }
+    case 'secret': {
+      secretModalApi.setData(row);
+      secretModalApi.open();
+      break;
+    }
   }
 };
 </script>
@@ -239,6 +250,16 @@ const onMenuClick = (row: OpenIddictApplicationDto, info: MenuInfo) => {
           <Dropdown>
             <template #overlay>
               <Menu @click="(info) => onMenuClick(row, info)">
+                <MenuItem
+                  v-if="
+                    row.clientType === 'confidential' &&
+                    hasAccessByCodes([ApplicationsPermissions.ManageSecret])
+                  "
+                  key="secret"
+                  :icon="h(SecretIcon)"
+                >
+                  {{ $t('AbpOpenIddict.GenerateSecret') }}
+                </MenuItem>
                 <MenuItem
                   v-if="
                     hasAccessByCodes([
@@ -259,6 +280,7 @@ const onMenuClick = (row: OpenIddictApplicationDto, info: MenuInfo) => {
     </template>
   </Grid>
   <ApplicationModal @change="() => query()" />
+  <ApplicationSecretModal @change="() => query()" />
   <ApplicationPermissionModal />
 </template>