1<template> 2 <b-modal 3 id="modal-reset" 4 ref="modal" 5 :title="modalTitle" 6 title-tag="h2" 7 @hidden="resetConfirm" 8 > 9 <p class="mb-2"> 10 <strong>{{ modalHeader }}</strong> 11 </p> 12 <ul v-if="resetType == 'resetBios'" class="ps-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="ps-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="ms-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 #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 {{ modalSubmitText }} 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 emits: ['okConfirm'], 93 setup() { 94 return { 95 v$: useVuelidate(), 96 }; 97 }, 98 data() { 99 return { 100 t: useI18n().t, 101 confirm: false, 102 }; 103 }, 104 computed: { 105 serverStatus() { 106 return this.$store.getters['global/serverStatus']; 107 }, 108 isServerOff() { 109 return this.serverStatus === 'off' ? true : false; 110 }, 111 modalTitle() { 112 return this.t(`pageFactoryReset.modal.${this.resetType}Title`); 113 }, 114 modalHeader() { 115 return this.t(`pageFactoryReset.modal.${this.resetType}Header`); 116 }, 117 modalSubmitText() { 118 return this.t(`pageFactoryReset.modal.${this.resetType}SubmitText`); 119 }, 120 }, 121 validations: { 122 confirm: { 123 mustBeTrue: function (value) { 124 return this.isServerOff || value === true; 125 }, 126 }, 127 }, 128 watch: { 129 isServerOff: { 130 handler(newValue) { 131 // Touch validation when server is on to show required message immediately 132 if (!newValue) { 133 this.$nextTick(() => { 134 this.v$.confirm.$touch(); 135 }); 136 } 137 }, 138 immediate: true, 139 }, 140 }, 141 methods: { 142 handleConfirm() { 143 this.v$.$touch(); 144 if (this.v$.$invalid) return; 145 this.$emit('okConfirm'); 146 this.$nextTick(() => this.$refs.modal.hide()); 147 this.resetConfirm(); 148 }, 149 resetConfirm() { 150 this.confirm = false; 151 this.v$.$reset(); 152 }, 153 }, 154}; 155</script> 156