bfg-common 1.5.705 → 1.5.707

package/components/common/certificate/Certificate.vue

@@ -0,0 +1,27 @@
+<template>
+  <atoms-loader v-show="props.loading" test-id="certificate-spinner" />
+  <div class="certificate flex flex-col h-full">
+    <common-certificate-tools @renew-certificate="emits('renew-certificate')" />
+
+    <common-certificate-info :certificate-data="props.certificateData" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  certificateData: UI_I_Certificate | {}
+}>()
+
+const emits = defineEmits<{
+  (event: 'renew-certificate'): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.certificate {
+  padding-left: 10px;
+}
+</style>

package/components/common/certificate/CertificateInfo.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="stack-view">
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-subject-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-subject">{{
+            localization.common.subject
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-subject-value">{{
+          props.certificateData.subject
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-issuer-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-issuer">{{
+            localization.common.issuer
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-issuer-value">{{
+          props.certificateData.issuer
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-valid-from-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-valid-from">{{
+            localization.common.validFrom
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-valid-from-value">{{
+          validFrom
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-valid-to-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-valid-to">{{
+            localization.common.validTo
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-valid-to-value">{{
+          validTo
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-status-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-status">{{
+            localization.common.status
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-status-value">{{
+          props.certificateData.status
+        }}</span></template
+      >
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
+
+const props = defineProps<{
+  certificateData: UI_I_Certificate | {}
+}>()
+
+const { $store, $formattedDatetime }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const updateTimeFormatAndInterfaceLang = computed<number>(
+  () => $store.getters['main/getUpdateTimeFormatAndInterfaceLang']
+)
+
+const validFrom = computed<string>(() =>
+  updateTimeFormatAndInterfaceLang.value
+    ? $formattedDatetime(props.certificateData.valid_from, {
+        hasSeconds: true,
+      })
+    : ''
+)
+const validTo = computed<string>(() =>
+  updateTimeFormatAndInterfaceLang.value
+    ? $formattedDatetime(props.certificateData.valid_to, {
+        hasSeconds: true,
+      })
+    : ''
+)
+
+onUnmounted(() => {
+  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', 'hostCertificate')
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.stack-block:hover) {
+  border-bottom: 1px solid #ddd;
+
+  &:last-child {
+    border-bottom: unset;
+  }
+
+  .stack-block-label {
+    background-color: unset;
+  }
+}
+</style>

package/components/common/certificate/Tools.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="certificate-headline">
+    <common-headline :headline="localization.common.certificate">
+      <template #action>
+        <atoms-tabs
+          :items="tabs"
+          test-id="certificate-tabs"
+          size="small"
+          @change="onShowModal"
+        />
+      </template>
+    </common-headline>
+  </div>
+
+  <common-certificate-modals-renew
+    v-if="isShowModal"
+    :mode="mode"
+    @hide="onHideModal"
+    @renew-certificate="emits('renew-certificate')"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+import { certificateTabsFunc } from '~/components/common/certificate/lib/config/tabsPannel'
+
+const emits = defineEmits<{
+  (event: 'renew-certificate'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tabs = computed<UI_I_CollapseNavItem[]>(() =>
+  certificateTabsFunc(localization.value)
+)
+
+const isShowModal = ref<boolean>(false)
+const mode = ref<UI_T_ModeModal>('renew')
+const onShowModal = (value: UI_T_ModeModal): void => {
+  mode.value = value
+  isShowModal.value = true
+}
+const onHideModal = (): void => {
+  isShowModal.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.certificate-headline {
+  :deep(.heading-block__actions) {
+    .nav {
+      margin-top: 0;
+      align-items: flex-start;
+    }
+  }
+}
+</style>

package/components/common/certificate/lib/config/tabsPannel.ts

@@ -0,0 +1,22 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+export const certificateTabsFunc = (
+  localization: UI_I_Localization
+): UI_I_CollapseNavItem[] => {
+  return [
+    {
+      text: localization.common.renew,
+      value: 'renew',
+      disabled: false,
+      testId: 'certificate-renew',
+    },
+    {
+      text: localization.common.certificateRefreshTitle,
+      value: 'refreshCaCertificates',
+      disabled: true,
+      testId: 'certificate-refresh',
+      development: true,
+    },
+  ]
+}

package/components/common/certificate/lib/models/interfaces.ts

@@ -0,0 +1,9 @@
+export interface UI_API_I_Certificate {
+  subject: string
+  issuer: string
+  valid_from: string
+  valid_to: string
+  status: string
+}
+
+export interface UI_I_Certificate extends UI_API_I_Certificate {}

package/components/common/certificate/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_ModeModal = 'renew' | 'refreshCaCertificates'

package/components/common/certificate/modals/renew/New.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="renew-refresh-certificate">
+    <common-modals-confirmation
+      :headline="title"
+      :description="description"
+      :test-id="props.testId"
+      :modal-texts="modalTexts"
+      :loading="props.loading"
+      @hide-modal="emits('hide')"
+      @confirm="emits('submit')"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  mode: UI_T_ModeModal
+  hostName: string
+  testId: string
+  loading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2:
+    localization.value.common[props.mode === 'renew' ? 'renew' : 'refresh'],
+}))
+
+const title = computed<string>(
+  () =>
+    localization.value.inventoryConfigure[
+      props.mode === 'renew'
+        ? 'renewCertificateConfirm'
+        : 'refreshCACertificatesConfirm'
+    ]
+)
+
+const description = computed<string>(() =>
+  localization.value.inventoryConfigure[
+    props.mode === 'renew'
+      ? 'renewCertificateConfirmDesc'
+      : 'refreshCACertificatesConfirmDesc'
+  ].replace('{0}', props.hostName)
+)
+</script>
+
+<style lang="scss" scoped>
+.renew-refresh-certificate {
+  :deep(.confirm-modal__content span:nth-child(2)) {
+    line-height: unset;
+  }
+}
+</style>

package/components/common/certificate/modals/renew/Old.vue

@@ -0,0 +1,122 @@
+<template>
+  <atoms-modal
+    :title="title"
+    :second-title="props.hostName"
+    :test-id="props.testId"
+    class="certificate-modal"
+    show
+    @hide="onHide"
+  >
+    <template #modalBody>
+      <form
+        id="certificate-renew-form"
+        data-id="certificate-renew-form"
+        class="pt-0"
+        @submit.prevent="onHide"
+      >
+        <section class="form-block flex-align-center m-0 flex">
+          <div class="icon-wrap">
+            <atoms-the-icon class="icon-warning" name="warning" />
+          </div>
+          <p>{{ description }}</p>
+        </section>
+      </form>
+    </template>
+    <template #modalFooter>
+      <button
+        id="certificate-renew-modal-close-button"
+        data-id="certificate-renew-modal-close-button"
+        class="btn btn-primary"
+        @click="onHide"
+      >
+        {{ localization.common.no }}
+      </button>
+      <button
+        id="certificate-renew-modal-apply-button"
+        :class="['btn btn-outline', props.loading && 'pending']"
+        data-id="certificate-renew-modal-apply-button"
+        @click="emits('submit')"
+      >
+        <atoms-loader-pre-loader
+          v-if="props.loading"
+          id="loader"
+          :show="props.loading"
+          class="absolute-center btn__loading flex"
+          test-id="certificate-renew-spinner"
+        />
+        <span v-else>
+          {{ localization.common.yes }}
+        </span>
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  mode: UI_T_ModeModal
+  hostName: string
+  testId: string
+  loading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(
+  () =>
+    localization.value.common[
+      props.mode === 'renew'
+        ? 'certificateRenewTitle'
+        : 'certificateRefreshTitle'
+    ]
+)
+
+const description = computed<string>(
+  () =>
+    localization.value.common[
+      props.mode === 'renew'
+        ? 'certificateRenewDescription'
+        : 'certificateRefreshDescription'
+    ]
+)
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped>
+.certificate-modal {
+  form {
+    .form-block {
+      .icon-warning {
+        width: 48px;
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+.btn {
+  &.pending {
+    position: relative;
+    pointer-events: none;
+  }
+  &__loading {
+    :deep(.spinner) {
+      width: 25px;
+      height: 25px;
+      min-width: 25px;
+      min-height: 25px;
+    }
+  }
+}
+</style>

package/components/common/certificate/modals/renew/Renew.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    :is="currentComponent"
+    :mode="props.mode"
+    :host-name="hostName"
+    :test-id="testId"
+    :loading="loading"
+    @hide="onHide"
+    @submit="onSubmit"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  mode: UI_T_ModeModal
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'renew-certificate'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const hostName = location.hostname
+
+const loading = ref<boolean>(false)
+
+const testId = computed<string>(() =>
+  props.mode === 'renew'
+    ? 'certificate-renew-modal'
+    : 'certificate-refresh-modal'
+)
+
+const renewCertificate = (): void => {
+  emits('renew-certificate')
+}
+
+const refreshCertificate = (): void => {
+  console.log('It will be soon')
+}
+
+const onSubmit = (): void => {
+  loading.value = true
+
+  props.mode === 'renew' ? renewCertificate() : refreshCertificate()
+
+  loading.value = false
+
+  onHide()
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped></style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.705",
+  "version": "1.5.707",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",