-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #502 from bcgov/feature/revokeUi
Credential revocation (and exchange delete)
- Loading branch information
Showing
10 changed files
with
345 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -34,6 +34,7 @@ | |
| } | ||
|
|
||
| /* red */ | ||
| &.credential-revoked, | ||
| &.error, | ||
| &.denied, | ||
| &.rejected, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
...t-ui/frontend/src/components/issuance/deleteCredential/DeleteCredentialExchangeButton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <template> | ||
| <Button | ||
| :title="t('issue.delete.removeExchange')" | ||
| icon="pi pi-trash" | ||
| class="p-button-rounded p-button-icon-only p-button-text mr-2" | ||
| @click="deleteCredExchange($event)" | ||
| /> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| // State | ||
| import { useIssuerStore } from '@/store'; | ||
| // PrimeVue/etc | ||
| import Button from 'primevue/button'; | ||
| import { useToast } from 'vue-toastification'; | ||
| import { useConfirm } from 'primevue/useconfirm'; | ||
| import { useI18n } from 'vue-i18n'; | ||
| const toast = useToast(); | ||
| const confirm = useConfirm(); | ||
| const { t } = useI18n(); | ||
| const issuerStore = useIssuerStore(); | ||
| // Props | ||
| const props = defineProps<{ | ||
| credExchId: string; | ||
| }>(); | ||
| // Delete a specific cred excch record | ||
| const deleteCredExchange = (event: any) => { | ||
| confirm.require({ | ||
| target: event.currentTarget, | ||
| message: t('issue.delete.confirm'), | ||
| header: 'Confirmation', | ||
| icon: 'pi pi-exclamation-triangle', | ||
| accept: () => { | ||
| issuerStore | ||
| .deleteCredentialExchange(props.credExchId) | ||
| .then(() => { | ||
| toast.success(t('issue.delete.success')); | ||
| }) | ||
| .catch((err) => { | ||
| console.error(err); | ||
| toast.error(`Failure: ${err}`); | ||
| }); | ||
| }, | ||
| }); | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped></style> |
65 changes: 65 additions & 0 deletions
65
...es/tenant-ui/frontend/src/components/issuance/deleteCredential/RevokeCredentialButton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <template> | ||
| <Button | ||
| v-if="canRevoke" | ||
| :title="t('issue.revoke.revokeCred')" | ||
| icon="pi pi-times-circle" | ||
| class="p-button-rounded p-button-icon-only p-button-text" | ||
| @click="openModal" | ||
| /> | ||
| <Dialog | ||
| v-model:visible="displayModal" | ||
| :style="{ width: '500px' }" | ||
| :header="t('issue.revoke.revokeCred')" | ||
| :modal="true" | ||
| @update:visible="handleClose" | ||
| > | ||
| <RevokeCredentialForm | ||
| :connection-display="props.connectionDisplay" | ||
| :cred-exch-record="props.credExchRecord" | ||
| @success="$emit('success')" | ||
| @closed="handleClose" | ||
| /> | ||
| </Dialog> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| // Types | ||
| import { V10CredentialExchange } from '@/types/acapyApi/acapyInterface'; | ||
| // Vue/State | ||
| import { computed, ref } from 'vue'; | ||
| // PrimeVue/etc | ||
| import Button from 'primevue/button'; | ||
| import Dialog from 'primevue/dialog'; | ||
| import { useI18n } from 'vue-i18n'; | ||
| // Components | ||
| import RevokeCredentialForm from './RevokeCredentialForm.vue'; | ||
| const { t } = useI18n(); | ||
| defineEmits(['success']); | ||
| // Props | ||
| const props = defineProps<{ | ||
| credExchRecord: V10CredentialExchange; | ||
| connectionDisplay: string; | ||
| }>(); | ||
| // Check revocation allowed | ||
| const canRevoke = computed(() => { | ||
| return ( | ||
| props.credExchRecord.state === 'credential_acked' && | ||
| props.credExchRecord.revocation_id && | ||
| props.credExchRecord.revoc_reg_id | ||
| ); | ||
| }); | ||
| // Display form | ||
| const displayModal = ref(false); | ||
| const openModal = async () => { | ||
| displayModal.value = true; | ||
| }; | ||
| const handleClose = async () => { | ||
| displayModal.value = false; | ||
| }; | ||
| </script> |
133 changes: 133 additions & 0 deletions
133
...ices/tenant-ui/frontend/src/components/issuance/deleteCredential/RevokeCredentialForm.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| <template> | ||
| <form @submit.prevent="handleSubmit(!v$.$invalid)"> | ||
| <!-- Comment --> | ||
| <div class="field"> | ||
| <label | ||
| for="comment" | ||
| :class="{ 'p-error': v$.comment.$invalid && submitted }" | ||
| > | ||
| {{ t('issue.revoke.comment') }} | ||
| </label> | ||
| <Textarea | ||
| id="comment" | ||
| v-model="v$.comment.$model" | ||
| class="w-full" | ||
| :class="{ 'p-invalid': v$.comment.$invalid && submitted }" | ||
| :auto-resize="true" | ||
| rows="2" | ||
| /> | ||
| <span v-if="v$.comment.$error && submitted"> | ||
| <span v-for="(error, index) of v$.comment.$errors" :key="index"> | ||
| <small class="p-error block">{{ error.$message }}</small> | ||
| </span> | ||
| </span> | ||
| <small v-else-if="v$.comment.$invalid && submitted" class="p-error">{{ | ||
| v$.comment.required.$message | ||
| }}</small> | ||
| </div> | ||
|
|
||
| <div class="rev-details"> | ||
| <p> | ||
| <small>Connection: {{ props.connectionDisplay }}</small> | ||
| </p> | ||
| <p> | ||
| <small>Revocation ID: {{ props.credExchRecord.revocation_id }}</small> | ||
| </p> | ||
| <p> | ||
| <small> | ||
| Revocation Registry: {{ props.credExchRecord.revoc_reg_id }} | ||
| </small> | ||
| </p> | ||
| </div> | ||
| <Button | ||
| type="submit" | ||
| :label="t('issue.revoke.action')" | ||
| class="mt-5 w-full" | ||
| :disabled="loading" | ||
| :loading="loading" | ||
| /> | ||
| </form> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| // Types | ||
| import { | ||
| RevokeRequest, | ||
| V10CredentialExchange, | ||
| } from '@/types/acapyApi/acapyInterface'; | ||
| // Vue/State | ||
| import { reactive, ref } from 'vue'; | ||
| import { useIssuerStore } from '@/store'; | ||
| import { storeToRefs } from 'pinia'; | ||
| // PrimeVue / Validation | ||
| import Button from 'primevue/button'; | ||
| import Textarea from 'primevue/textarea'; | ||
| import { useVuelidate } from '@vuelidate/core'; | ||
| import { useToast } from 'vue-toastification'; | ||
| import { useI18n } from 'vue-i18n'; | ||
| const issuerStore = useIssuerStore(); | ||
| const { loading } = storeToRefs(useIssuerStore()); | ||
| const toast = useToast(); | ||
| const { t } = useI18n(); | ||
| const emit = defineEmits(['closed', 'success']); | ||
| // Props | ||
| const props = defineProps<{ | ||
| credExchRecord: V10CredentialExchange; | ||
| connectionDisplay: string; | ||
| }>(); | ||
| // Validation | ||
| const formFields = reactive({ | ||
| comment: '', | ||
| }); | ||
| const rules = { | ||
| comment: {}, | ||
| }; | ||
| const v$ = useVuelidate(rules, formFields); | ||
| // Form submission | ||
| const submitted = ref(false); | ||
| const handleSubmit = async (isFormValid: boolean) => { | ||
| submitted.value = true; | ||
| if (!isFormValid) { | ||
| return; | ||
| } | ||
| try { | ||
| const payload: RevokeRequest = { | ||
| comment: formFields.comment, | ||
| connection_id: props.credExchRecord.connection_id, | ||
| rev_reg_id: props.credExchRecord.revoc_reg_id, | ||
| cred_rev_id: props.credExchRecord.revocation_id, | ||
| publish: true, | ||
| notify: true, | ||
| }; | ||
| await issuerStore.revokeCredential(payload); | ||
| emit('success'); | ||
| // close up on success | ||
| emit('closed'); | ||
| toast.success(t('issue.revoke.success')); | ||
| } catch (error) { | ||
| console.error(error); | ||
| toast.error(`Failure: ${error}`); | ||
| } finally { | ||
| submitted.value = false; | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| .rev-details { | ||
| p { | ||
| margin: 0; | ||
| small { | ||
| word-break: break-all; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.