xref: /openbmc/webui-vue/src/views/Logs/Dumps/DumpsModalConfirmation.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <b-modal
3    id="modal-confirmation"
4    ref="modal"
5    :title="$t('pageDumps.modal.initiateSystemDump')"
6    @hidden="resetForm"
7  >
8    <p>
9      <strong>
10        {{ $t('pageDumps.modal.initiateSystemDumpMessage1') }}
11      </strong>
12    </p>
13    <p>
14      {{ $t('pageDumps.modal.initiateSystemDumpMessage2') }}
15    </p>
16    <p>
17      <status-icon status="danger" />
18      {{ $t('pageDumps.modal.initiateSystemDumpMessage3') }}
19    </p>
20    <b-form-checkbox v-model="confirmed" @input="v$.confirmed.$touch()">
21      {{ $t('pageDumps.modal.initiateSystemDumpMessage4') }}
22    </b-form-checkbox>
23    <b-form-invalid-feedback
24      :state="getValidationState(v$.confirmed)"
25      role="alert"
26    >
27      {{ $t('global.form.required') }}
28    </b-form-invalid-feedback>
29    <template #footer="{ cancel }">
30      <b-button variant="secondary" @click="cancel()">
31        {{ $t('global.action.cancel') }}
32      </b-button>
33      <b-button variant="danger" @click="handleSubmit">
34        {{ $t('pageDumps.form.initiateDump') }}
35      </b-button>
36    </template>
37  </b-modal>
38</template>
39
40<script>
41import StatusIcon from '@/components/Global/StatusIcon';
42import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
43import { useVuelidate } from '@vuelidate/core';
44import { useI18n } from 'vue-i18n';
45
46export default {
47  components: { StatusIcon },
48  mixins: [VuelidateMixin],
49  props: {
50    requireConfirmation: {
51      type: Boolean,
52      default: false,
53    },
54  },
55  emits: ['ok'],
56  setup() {
57    return {
58      v$: useVuelidate(),
59    };
60  },
61  data() {
62    return {
63      $t: useI18n().t,
64      confirmed: false,
65      isOpen: this.requireConfirmation,
66    };
67  },
68  validations() {
69    return this.isOpen
70      ? {
71          confirmed: {
72            mustBeTrue: (value) => value === true,
73          },
74        }
75      : {};
76  },
77  methods: {
78    closeModal() {
79      this.$nextTick(() => {
80        this.$refs.modal.hide();
81      });
82    },
83    handleSubmit() {
84      this.v$.$touch();
85      if (this.v$.$invalid) return;
86      this.$emit('ok');
87      this.closeModal();
88    },
89    resetForm() {
90      this.confirmed = false;
91      this.isOpen = false;
92      this.v$.$reset();
93    },
94  },
95};
96</script>
97