diff options
Diffstat (limited to 'src/views/_sila/SecurityAndAccess/Certificates')
| -rw-r--r-- | src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue | 192 | ||||
| -rw-r--r-- | src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue | 167 |
2 files changed, 183 insertions, 176 deletions
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue index 27950b76..8aee85cf 100644 --- a/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue +++ b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue @@ -1,98 +1,101 @@ <template> - <b-container fluid="xl"> + <b-container fluid="pt-0 m-0"> <page-title /> - <b-row> - <b-col xl="11"> - <!-- Expired certificates banner --> - <alert :show="expiredCertificateTypes.length > 0" variant="danger"> - <template v-if="expiredCertificateTypes.length > 1"> - {{ $t('pageCertificates.alert.certificatesExpiredMessage') }} - </template> - <template v-else> - {{ - $t('pageCertificates.alert.certificateExpiredMessage', { - certificate: expiredCertificateTypes[0], - }) - }} - </template> - </alert> - <!-- Expiring certificates banner --> - <alert :show="expiringCertificateTypes.length > 0" variant="warning"> - <template v-if="expiringCertificateTypes.length > 1"> - {{ $t('pageCertificates.alert.certificatesExpiringMessage') }} - </template> - <template v-else> - {{ - $t('pageCertificates.alert.certificateExpiringMessage', { - certificate: expiringCertificateTypes[0], - }) - }} - </template> - </alert> - </b-col> - </b-row> - <b-row> - <b-col xl="11" class="text-right"> - <b-button - v-b-modal.generate-csr - data-test-id="certificates-button-generateCsr" - variant="link" - > - <icon-add /> - {{ $t('pageCertificates.generateCsr') }} - </b-button> - <b-button - variant="primary" - :disabled="certificatesForUpload.length === 0" - @click="initModalUploadCertificate(null)" - > - <icon-add /> - {{ $t('pageCertificates.addNewCertificate') }} - </b-button> - </b-col> - </b-row> - <b-row> - <b-col xl="11"> - <b-table - responsive="md" - show-empty - hover - :busy="isBusy" - :fields="fields" - :items="tableItems" - :empty-text="$t('global.table.emptyMessage')" - > - <template #cell(validFrom)="{ value }"> - {{ value | formatDate }} - </template> + <page-section class="bootstrap-table__section"> + <b-row class="margin-bottom--16px"> + <b-col xl="11"> + <!-- Expired certificates banner --> + <alert :show="expiredCertificateTypes.length > 0" variant="danger"> + <template v-if="expiredCertificateTypes.length > 1"> + {{ $t('pageCertificates.alert.certificatesExpiredMessage') }} + </template> + <template v-else> + {{ + $t('pageCertificates.alert.certificateExpiredMessage', { + certificate: expiredCertificateTypes[0], + }) + }} + </template> + </alert> + <!-- Expiring certificates banner --> + <alert :show="expiringCertificateTypes.length > 0" variant="warning"> + <template v-if="expiringCertificateTypes.length > 1"> + {{ $t('pageCertificates.alert.certificatesExpiringMessage') }} + </template> + <template v-else> + {{ + $t('pageCertificates.alert.certificateExpiringMessage', { + certificate: expiringCertificateTypes[0], + }) + }} + </template> + </alert> + </b-col> + </b-row> + <b-row class="margin-bottom--16px"> + <b-col xl="11" class="text-right"> + <b-button + v-b-modal.generate-csr + data-test-id="certificates-button-generateCsr" + variant="link" + > + <icon-add /> + {{ $t('pageCertificates.generateCsr') }} + </b-button> + <b-button + variant="primary" + :disabled="certificatesForUpload.length === 0" + @click="initModalUploadCertificate(null)" + > + <icon-add /> + {{ $t('pageCertificates.addNewCertificate') }} + </b-button> + </b-col> + </b-row> + <b-row> + <b-col xl="11"> + <b-table + responsive="md" + show-empty + hover + class="table-rounded" + no-border-collapse + :busy="isBusy" + :fields="fields" + :items="tableItems" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(validFrom)="{ value }"> + {{ value | formatDate }} + </template> - <template #cell(validUntil)="{ value }"> - <status-icon - v-if="getDaysUntilExpired(value) < 31" - :status="getIconStatus(value)" - /> - {{ value | formatDate }} - </template> - - <template #cell(actions)="{ value, item }"> - <table-row-action - v-for="(action, index) in value" - :key="index" - :value="action.value" - :title="action.title" - :enabled="action.enabled" - @click-table-action="onTableRowAction($event, item)" - > - <template #icon> - <icon-replace v-if="action.value === 'replace'" /> - <icon-trashcan v-if="action.value === 'delete'" /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> + <template #cell(validUntil)="{ value }"> + <status-icon + v-if="getDaysUntilExpired(value) < 31" + :status="getIconStatus(value)" + /> + {{ value | formatDate }} + </template> + <template #cell(actions)="{ value, item }"> + <table-row-action + v-for="(action, index) in value" + :key="index" + :value="action.value" + :title="action.title" + :enabled="action.enabled" + @click-table-action="onTableRowAction($event, item)" + > + <template #icon> + <icon-replace v-if="action.value === 'replace'" /> + <icon-trashcan v-if="action.value === 'delete'" /> + </template> + </table-row-action> + </template> + </b-table> + </b-col> + </b-row> + </page-section> <!-- Modals --> <modal-upload-certificate :certificate="modalCertificate" @ok="onModalOk" /> <modal-generate-csr /> @@ -107,6 +110,7 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import ModalGenerateCsr from './ModalGenerateCsr'; import ModalUploadCertificate from './ModalUploadCertificate'; import PageTitle from '@/components/_sila/Global/PageTitle'; +import PageSection from '@/components/_sila/Global/PageSection'; import TableRowAction from '@/components/_sila/Global/TableRowAction'; import StatusIcon from '@/components/_sila/Global/StatusIcon'; import Alert from '@/components/_sila/Global/Alert'; @@ -124,6 +128,7 @@ export default { ModalGenerateCsr, ModalUploadCertificate, PageTitle, + PageSection, StatusIcon, TableRowAction, }, @@ -320,3 +325,8 @@ export default { }, }; </script> +<style lang="scss" scoped> +.margin-bottom--16px { + margin-bottom: 16px; +} +</style> diff --git a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue index 5bfb81b4..63258a40 100644 --- a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue +++ b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue @@ -3,7 +3,6 @@ <b-modal id="generate-csr" ref="modal" - size="lg" no-stacking :title="$t('pageCertificates.modal.generateACertificateSigningRequest')" @ok="onOkGenerateCsrModal" @@ -13,7 +12,88 @@ <b-form id="generate-csr-form" novalidate @submit.prevent="handleSubmit"> <b-container fluid> <b-row> - <b-col lg="9"> + <b-col lg="12"> + <b-row> + <b-col lg="12"> + <p class="col-form-label"> + {{ $t('pageCertificates.modal.privateKey') }} + </p> + <b-form-group + :label="$t('pageCertificates.modal.keyPairAlgorithm')" + label-for="key-pair-algorithm" + > + <b-form-select + id="key-pair-algorithm" + v-model="form.keyPairAlgorithm" + data-test-id="modalGenerateCsr-select-keyPairAlgorithm" + :options="keyPairAlgorithmOptions" + :state="getValidationState($v.form.keyPairAlgorithm)" + @input="$v.form.keyPairAlgorithm.$touch()" + > + <template #first> + <b-form-select-option :value="null" disabled> + {{ $t('global.form.selectAnOption') }} + </b-form-select-option> + </template> + </b-form-select> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </b-col> + </b-row> + <b-row> + <b-col lg="12"> + <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'"> + <b-form-group + :label="$t('pageCertificates.modal.keyCurveId')" + label-for="key-curve-id" + > + <b-form-select + id="key-curve-id" + v-model="form.keyCurveId" + data-test-id="modalGenerateCsr-select-keyCurveId" + :options="keyCurveIdOptions" + :state="getValidationState($v.form.keyCurveId)" + @input="$v.form.keyCurveId.$touch()" + > + <template #first> + <b-form-select-option :value="null" disabled> + {{ $t('global.form.selectAnOption') }} + </b-form-select-option> + </template> + </b-form-select> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </template> + <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'"> + <b-form-group + :label="$t('pageCertificates.modal.keyBitLength')" + label-for="key-bit-length" + > + <b-form-select + id="key-bit-length" + v-model="form.keyBitLength" + data-test-id="modalGenerateCsr-select-keyBitLength" + :options="keyBitLengthOptions" + :state="getValidationState($v.form.keyBitLength)" + @input="$v.form.keyBitLength.$touch()" + > + <template #first> + <b-form-select-option :value="null" disabled> + {{ $t('global.form.selectAnOption') }} + </b-form-select-option> + </template> + </b-form-select> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </template> + </b-col> + </b-row> <b-row> <b-col lg="6"> <b-form-group @@ -241,89 +321,6 @@ </b-col> </b-row> </b-col> - <b-col lg="3"> - <b-row> - <b-col lg="12"> - <p class="col-form-label"> - {{ $t('pageCertificates.modal.privateKey') }} - </p> - <b-form-group - :label="$t('pageCertificates.modal.keyPairAlgorithm')" - label-for="key-pair-algorithm" - > - <b-form-select - id="key-pair-algorithm" - v-model="form.keyPairAlgorithm" - data-test-id="modalGenerateCsr-select-keyPairAlgorithm" - :options="keyPairAlgorithmOptions" - :state="getValidationState($v.form.keyPairAlgorithm)" - @input="$v.form.keyPairAlgorithm.$touch()" - > - <template #first> - <b-form-select-option :value="null" disabled> - {{ $t('global.form.selectAnOption') }} - </b-form-select-option> - </template> - </b-form-select> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - <b-row> - <b-col lg="12"> - <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'"> - <b-form-group - :label="$t('pageCertificates.modal.keyCurveId')" - label-for="key-curve-id" - > - <b-form-select - id="key-curve-id" - v-model="form.keyCurveId" - data-test-id="modalGenerateCsr-select-keyCurveId" - :options="keyCurveIdOptions" - :state="getValidationState($v.form.keyCurveId)" - @input="$v.form.keyCurveId.$touch()" - > - <template #first> - <b-form-select-option :value="null" disabled> - {{ $t('global.form.selectAnOption') }} - </b-form-select-option> - </template> - </b-form-select> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </b-form-group> - </template> - <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'"> - <b-form-group - :label="$t('pageCertificates.modal.keyBitLength')" - label-for="key-bit-length" - > - <b-form-select - id="key-bit-length" - v-model="form.keyBitLength" - data-test-id="modalGenerateCsr-select-keyBitLength" - :options="keyBitLengthOptions" - :state="getValidationState($v.form.keyBitLength)" - @input="$v.form.keyBitLength.$touch()" - > - <template #first> - <b-form-select-option :value="null" disabled> - {{ $t('global.form.selectAnOption') }} - </b-form-select-option> - </template> - </b-form-select> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </b-form-group> - </template> - </b-col> - </b-row> - </b-col> </b-row> </b-container> </b-form> |