1<template>
2  <b-modal
3    id="modal-reset"
4    ref="modal"
5    :title="$t(`pageFactoryReset.modal.${resetType}Title`)"
6    title-tag="h2"
7    @hidden="resetConfirm"
8  >
9    <p class="mb-2">
10      <strong>{{ $t(`pageFactoryReset.modal.${resetType}Header`) }}</strong>
11    </p>
12    <ul v-if="resetType == 'resetBios'" class="pl-3 mb-4">
13      <li class="mt-1 mb-1">
14        {{ $t('pageFactoryReset.modal.resetBiosSettingsList.item1') }}
15      </li>
16      <li class="mt-1 mb-1">
17        {{ $t('pageFactoryReset.modal.resetBiosSettingsList.item2') }}
18      </li>
19    </ul>
20    <ul v-else-if="resetType == 'resetToDefaults'" class="pl-3 mb-4">
21      <li class="mt-1 mb-1">
22        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item1') }}
23      </li>
24      <li class="mt-1 mb-1">
25        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item2') }}
26      </li>
27      <li class="mt-1 mb-1">
28        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item3') }}
29      </li>
30      <li class="mt-1 mb-1">
31        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item4') }}
32      </li>
33    </ul>
34
35    <!-- Warning message -->
36    <template v-if="!isServerOff">
37      <p class="d-flex mb-2">
38        <status-icon status="danger" />
39        <span id="reset-to-default-warning" class="ml-1">
40          {{ $t(`pageFactoryReset.modal.resetWarningMessage`) }}
41        </span>
42      </p>
43      <b-form-checkbox
44        v-model="confirm"
45        aria-describedby="reset-to-default-warning"
46        @input="v$.confirm.$touch()"
47      >
48        {{ $t(`pageFactoryReset.modal.resetWarningCheckLabel`) }}
49      </b-form-checkbox>
50      <b-form-invalid-feedback
51        role="alert"
52        :state="getValidationState(v$.confirm)"
53      >
54        {{ $t('global.form.fieldRequired') }}
55      </b-form-invalid-feedback>
56    </template>
57
58    <template #modal-footer="{ cancel }">
59      <b-button
60        variant="secondary"
61        data-test-id="factoryReset-button-cancel"
62        @click="cancel()"
63      >
64        {{ $t('global.action.cancel') }}
65      </b-button>
66      <b-button
67        type="sumbit"
68        variant="primary"
69        data-test-id="factoryReset-button-confirm"
70        @click="handleConfirm"
71      >
72        {{ $t(`pageFactoryReset.modal.${resetType}SubmitText`) }}
73      </b-button>
74    </template>
75  </b-modal>
76</template>
77<script>
78import StatusIcon from '@/components/Global/StatusIcon';
79import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
80import { useVuelidate } from '@vuelidate/core';
81import { useI18n } from 'vue-i18n';
82
83export default {
84  components: { StatusIcon },
85  mixins: [VuelidateMixin],
86  props: {
87    resetType: {
88      type: String,
89      default: null,
90    },
91  },
92  setup() {
93    return {
94      v$: useVuelidate(),
95    };
96  },
97  data() {
98    return {
99      $t: useI18n().t,
100      confirm: false,
101    };
102  },
103  computed: {
104    serverStatus() {
105      return this.$store.getters['global/serverStatus'];
106    },
107    isServerOff() {
108      return this.serverStatus === 'off' ? true : false;
109    },
110  },
111  validations: {
112    confirm: {
113      mustBeTrue: function (value) {
114        return this.isServerOff || value === true;
115      },
116    },
117  },
118  methods: {
119    handleConfirm() {
120      this.v$.$touch();
121      if (this.v$.$invalid) return;
122      this.$emit('okConfirm');
123      this.$nextTick(() => this.$refs.modal.hide());
124      this.resetConfirm();
125    },
126    resetConfirm() {
127      this.confirm = false;
128      this.v$.$reset();
129    },
130  },
131};
132</script>
133