261 lines
8.3 KiB
Vue
261 lines
8.3 KiB
Vue
<script lang="ts" setup>
|
||
import SubmitButton from "@/components/button/SubmitButton.vue";
|
||
import { useRoleTemplateSelection } from "@/composables/use-role";
|
||
import { patAnnotations, rbacAnnotations } from "@/constants/annotations";
|
||
import { roleLabels } from "@/constants/labels";
|
||
import { useRoleStore } from "@/stores/role";
|
||
import { toISOString } from "@/utils/date";
|
||
import type { PatSpec, PersonalAccessToken } from "@halo-dev/api-client";
|
||
import { ucApiClient } from "@halo-dev/api-client";
|
||
import { Dialog, Toast, VButton, VModal, VSpace } from "@halo-dev/components";
|
||
import { useMutation, useQueryClient } from "@tanstack/vue-query";
|
||
import { useClipboard } from "@vueuse/core";
|
||
import { computed, ref } from "vue";
|
||
import { useI18n } from "vue-i18n";
|
||
|
||
const queryClient = useQueryClient();
|
||
const { t } = useI18n();
|
||
|
||
const emit = defineEmits<{
|
||
(event: "close"): void;
|
||
}>();
|
||
|
||
const modal = ref<InstanceType<typeof VModal> | null>(null);
|
||
|
||
const formState = ref<
|
||
Omit<PersonalAccessToken, "spec"> & {
|
||
spec: PatSpec;
|
||
}
|
||
>({
|
||
kind: "PersonalAccessToken",
|
||
apiVersion: "security.halo.run/v1alpha1",
|
||
metadata: {
|
||
generateName: "pat-",
|
||
name: "",
|
||
},
|
||
spec: {
|
||
description: "",
|
||
expiresAt: "",
|
||
name: "",
|
||
roles: [],
|
||
tokenId: "",
|
||
username: "",
|
||
},
|
||
});
|
||
|
||
const { permissions } = useRoleStore();
|
||
|
||
const availableRoleTemplates = computed(() => {
|
||
return permissions.permissions.filter((role) => {
|
||
return (
|
||
role.metadata.labels?.[roleLabels.TEMPLATE] === "true" &&
|
||
role.metadata.labels?.[roleLabels.HIDDEN] !== "true"
|
||
);
|
||
});
|
||
});
|
||
|
||
const { roleTemplateGroups, handleRoleTemplateSelect, selectedRoleTemplates } =
|
||
useRoleTemplateSelection(availableRoleTemplates);
|
||
|
||
const { copy } = useClipboard({
|
||
legacy: true,
|
||
});
|
||
|
||
const { mutate, isLoading } = useMutation({
|
||
mutationKey: ["pat-creation"],
|
||
mutationFn: async () => {
|
||
if (formState.value.spec?.expiresAt) {
|
||
formState.value.spec.expiresAt = toISOString(
|
||
formState.value.spec.expiresAt
|
||
);
|
||
}
|
||
formState.value.spec = {
|
||
...formState.value.spec,
|
||
roles: Array.from(selectedRoleTemplates.value),
|
||
};
|
||
const { data } = await ucApiClient.security.personalAccessToken.generatePat(
|
||
{
|
||
personalAccessToken: formState.value,
|
||
}
|
||
);
|
||
return data;
|
||
},
|
||
onSuccess(data) {
|
||
queryClient.invalidateQueries({ queryKey: ["personal-access-tokens"] });
|
||
emit("close");
|
||
|
||
const token = data.metadata.annotations?.[patAnnotations.ACCESS_TOKEN];
|
||
|
||
setTimeout(() => {
|
||
Dialog.info({
|
||
title: t("core.uc_profile.pat.operations.copy.title"),
|
||
description: token,
|
||
confirmType: "secondary",
|
||
confirmText: t("core.common.buttons.copy"),
|
||
showCancel: false,
|
||
onConfirm: () => {
|
||
copy(token || "");
|
||
Toast.success(t("core.common.toast.copy_success"));
|
||
},
|
||
});
|
||
});
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<VModal
|
||
ref="modal"
|
||
:width="700"
|
||
:title="$t('core.uc_profile.pat.creation_modal.title')"
|
||
@close="emit('close')"
|
||
>
|
||
<div>
|
||
<div class="md:grid md:grid-cols-4 md:gap-6">
|
||
<div class="md:col-span-1">
|
||
<div class="sticky top-0">
|
||
<span class="text-base font-medium text-gray-900">
|
||
{{ $t("core.uc_profile.pat.creation_modal.groups.general") }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
|
||
<FormKit
|
||
id="pat-creation-form"
|
||
v-model="formState.spec"
|
||
type="form"
|
||
name="pat-creation-form"
|
||
@submit="mutate()"
|
||
>
|
||
<FormKit
|
||
validation="required"
|
||
type="text"
|
||
name="name"
|
||
:label="
|
||
$t('core.uc_profile.pat.creation_modal.fields.name.label')
|
||
"
|
||
></FormKit>
|
||
<FormKit
|
||
type="datetime-local"
|
||
name="expiresAt"
|
||
:label="
|
||
$t('core.uc_profile.pat.creation_modal.fields.expiresAt.label')
|
||
"
|
||
:help="
|
||
$t('core.uc_profile.pat.creation_modal.fields.expiresAt.help')
|
||
"
|
||
></FormKit>
|
||
<FormKit
|
||
type="textarea"
|
||
name="description"
|
||
:label="
|
||
$t(
|
||
'core.uc_profile.pat.creation_modal.fields.description.label'
|
||
)
|
||
"
|
||
></FormKit>
|
||
</FormKit>
|
||
</div>
|
||
</div>
|
||
<div v-if="roleTemplateGroups.length" class="py-5">
|
||
<div class="border-t border-gray-200"></div>
|
||
</div>
|
||
<div
|
||
v-if="roleTemplateGroups.length"
|
||
class="md:grid md:grid-cols-4 md:gap-6"
|
||
>
|
||
<div class="md:col-span-1">
|
||
<div class="sticky top-0">
|
||
<span class="text-base font-medium text-gray-900">
|
||
{{ $t("core.uc_profile.pat.creation_modal.groups.permissions") }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
|
||
<dl class="divide-y divide-gray-100">
|
||
<div
|
||
v-for="(group, groupIndex) in roleTemplateGroups"
|
||
:key="groupIndex"
|
||
class="flex flex-col gap-3 bg-white py-5 first:pt-0"
|
||
>
|
||
<dt class="text-sm font-medium text-gray-900">
|
||
<div>
|
||
{{ $t(`core.rbac.${group.module}`, group.module as string) }}
|
||
</div>
|
||
</dt>
|
||
<dd class="text-sm text-gray-900">
|
||
<ul class="space-y-2">
|
||
<li v-for="(roleTemplate, index) in group.roles" :key="index">
|
||
<label
|
||
class="inline-flex w-full cursor-pointer flex-row items-center gap-4 rounded-base border p-5 hover:border-primary"
|
||
>
|
||
<input
|
||
v-model="selectedRoleTemplates"
|
||
:value="roleTemplate.metadata.name"
|
||
type="checkbox"
|
||
@change="handleRoleTemplateSelect"
|
||
/>
|
||
<div class="flex flex-1 flex-col gap-y-3">
|
||
<span class="font-medium text-gray-900">
|
||
{{
|
||
$t(
|
||
`core.rbac.${
|
||
roleTemplate.metadata.annotations?.[
|
||
rbacAnnotations.DISPLAY_NAME
|
||
]
|
||
}`,
|
||
roleTemplate.metadata.annotations?.[
|
||
rbacAnnotations.DISPLAY_NAME
|
||
] as string
|
||
)
|
||
}}
|
||
</span>
|
||
<span
|
||
v-if="
|
||
roleTemplate.metadata.annotations?.[
|
||
rbacAnnotations.DEPENDENCIES
|
||
]
|
||
"
|
||
class="text-xs text-gray-400"
|
||
>
|
||
{{
|
||
$t("core.role.common.text.dependent_on", {
|
||
roles: JSON.parse(
|
||
roleTemplate.metadata.annotations?.[
|
||
rbacAnnotations.DEPENDENCIES
|
||
]
|
||
)
|
||
.map((item: string) =>
|
||
$t(`core.rbac.${item}`, item as string)
|
||
)
|
||
.join("，"),
|
||
})
|
||
}}
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<VSpace>
|
||
<SubmitButton
|
||
:loading="isLoading"
|
||
type="secondary"
|
||
:text="$t('core.common.buttons.submit')"
|
||
@submit="$formkit.submit('pat-creation-form')"
|
||
/>
|
||
<VButton @click="modal?.close()">
|
||
{{ $t("core.common.buttons.cancel_and_shortcut") }}
|
||
</VButton>
|
||
</VSpace>
|
||
</template>
|
||
</VModal>
|
||
</template>
|