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 class="pl-3 mb-4">
13      <li
14        v-for="(item, index) in $t(
15          `pageFactoryReset.modal.${resetType}SettingsList`
16        )"
17        :key="index"
18        class="mt-1 mb-1"
19      >
20        {{ $t(item) }}
21      </li>
22    </ul>
23
24    <!-- Warning message -->
25    <template v-if="!isServerOff">
26      <p class="d-flex mb-2">
27        <status-icon status="danger" />
28        <span id="reset-to-default-warning" class="ml-1">
29          {{ $t(`pageFactoryReset.modal.resetWarningMessage`) }}
30        </span>
31      </p>
32      <b-form-checkbox
33        v-model="confirm"
34        aria-describedby="reset-to-default-warning"
35        @input="$v.confirm.$touch()"
36      >
37        {{ $t(`pageFactoryReset.modal.resetWarningCheckLabel`) }}
38      </b-form-checkbox>
39      <b-form-invalid-feedback
40        role="alert"
41        :state="getValidationState($v.confirm)"
42      >
43        {{ $t('global.form.fieldRequired') }}
44      </b-form-invalid-feedback>
45    </template>
46
47    <template #modal-footer="{ cancel }">
48      <b-button
49        variant="secondary"
50        data-test-id="factoryReset-button-cancel"
51        @click="cancel()"
52      >
53        {{ $t('global.action.cancel') }}
54      </b-button>
55      <b-button
56        type="sumbit"
57        variant="primary"
58        data-test-id="factoryReset-button-confirm"
59        @click="handleConfirm"
60      >
61        {{ $t(`pageFactoryReset.modal.${resetType}SubmitText`) }}
62      </b-button>
63    </template>
64  </b-modal>
65</template>
66<script>
67import StatusIcon from '@/components/Global/StatusIcon';
68import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
69
70export default {
71  components: { StatusIcon },
72  mixins: [VuelidateMixin],
73  props: {
74    resetType: {
75      type: String,
76      default: null,
77    },
78  },
79  data() {
80    return {
81      confirm: false,
82    };
83  },
84  computed: {
85    serverStatus() {
86      return this.$store.getters['global/serverStatus'];
87    },
88    isServerOff() {
89      return this.serverStatus === 'off' ? true : false;
90    },
91  },
92  validations: {
93    confirm: {
94      mustBeTrue: function (value) {
95        return this.isServerOff || value === true;
96      },
97    },
98  },
99  methods: {
100    handleConfirm() {
101      this.$v.$touch();
102      if (this.$v.$invalid) return;
103      this.$emit('okConfirm');
104      this.$nextTick(() => this.$refs.modal.hide());
105      this.resetConfirm();
106    },
107    resetConfirm() {
108      this.confirm = false;
109      this.$v.$reset();
110    },
111  },
112};
113</script>
114