IBS: _sila UI theme

3 files changed, 232 insertions, 0 deletions

diff --git a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
new file mode 100644
index 00000000..897348fc
--- /dev/null
+++ b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
@@ -0,0 +1,117 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pageFactoryReset.description')" />
+
+    <!-- Reset Form -->
+    <b-form id="factory-reset" @submit.prevent="onResetSubmit">
+      <b-row>
+        <b-col md="8">
+          <b-form-group :label="$t('pageFactoryReset.form.resetOptionsLabel')">
+            <b-form-radio-group
+              id="factory-reset-options"
+              v-model="resetOption"
+              stacked
+            >
+              <b-form-radio
+                class="mb-1"
+                value="resetBios"
+                aria-describedby="reset-bios"
+                data-test-id="factoryReset-radio-resetBios"
+              >
+                {{ $t('pageFactoryReset.form.resetBiosOptionLabel') }}
+              </b-form-radio>
+              <b-form-text id="reset-bios" class="ml-4 mb-3">
+                {{ $t('pageFactoryReset.form.resetBiosOptionHelperText') }}
+              </b-form-text>
+
+              <b-form-radio
+                class="mb-1"
+                value="resetToDefaults"
+                aria-describedby="reset-to-defaults"
+                data-test-id="factoryReset-radio-resetToDefaults"
+              >
+                {{ $t('pageFactoryReset.form.resetToDefaultsOptionLabel') }}
+              </b-form-radio>
+              <b-form-text id="reset-to-defaults" class="ml-4 mb-3">
+                {{
+                  $t('pageFactoryReset.form.resetToDefaultsOptionHelperText')
+                }}
+              </b-form-text>
+            </b-form-radio-group>
+          </b-form-group>
+          <b-button
+            type="submit"
+            variant="primary"
+            data-test-id="factoryReset-button-submit"
+          >
+            {{ $t('global.action.reset') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </b-form>
+
+    <!-- Modals -->
+    <modal-reset :reset-type="resetOption" @okConfirm="onOkConfirm" />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import ModalReset from './FactoryResetModal';
+
+export default {
+  name: 'FactoryReset',
+  components: { PageTitle, ModalReset },
+  mixins: [LoadingBarMixin, BVToastMixin],
+  data() {
+    return {
+      resetOption: 'resetBios',
+    };
+  },
+  created() {
+    this.hideLoader();
+  },
+  methods: {
+    onResetSubmit() {
+      this.$bvModal.show('modal-reset');
+    },
+    onOkConfirm() {
+      if (this.resetOption == 'resetBios') {
+        this.onResetBiosConfirm();
+      } else {
+        this.onResetToDefaultsConfirm();
+      }
+    },
+    onResetBiosConfirm() {
+      this.$store
+        .dispatch('factoryReset/resetBios')
+        .then((title) => {
+          this.successToast('', {
+            title,
+          });
+        })
+        .catch(({ message }) => {
+          this.errorToast('', {
+            title: message,
+          });
+        });
+    },
+    onResetToDefaultsConfirm() {
+      this.$store
+        .dispatch('factoryReset/resetToDefaults')
+        .then((title) => {
+          this.successToast('', {
+            title,
+          });
+        })
+        .catch(({ message }) => {
+          this.errorToast('', {
+            title: message,
+          });
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
new file mode 100644
index 00000000..170bf284
--- /dev/null
+++ b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
@@ -0,0 +1,113 @@
+<template>
+  <b-modal
+    id="modal-reset"
+    ref="modal"
+    :title="$t(`pageFactoryReset.modal.${resetType}Title`)"
+    title-tag="h2"
+    @hidden="resetConfirm"
+  >
+    <p class="mb-2">
+      <strong>{{ $t(`pageFactoryReset.modal.${resetType}Header`) }}</strong>
+    </p>
+    <ul class="pl-3 mb-4">
+      <li
+        v-for="(item, index) in $t(
+          `pageFactoryReset.modal.${resetType}SettingsList`
+        )"
+        :key="index"
+        class="mt-1 mb-1"
+      >
+        {{ $t(item) }}
+      </li>
+    </ul>
+
+    <!-- Warning message -->
+    <template v-if="!isServerOff">
+      <p class="d-flex mb-2">
+        <status-icon status="danger" />
+        <span id="reset-to-default-warning" class="ml-1">
+          {{ $t(`pageFactoryReset.modal.resetWarningMessage`) }}
+        </span>
+      </p>
+      <b-form-checkbox
+        v-model="confirm"
+        aria-describedby="reset-to-default-warning"
+        @input="$v.confirm.$touch()"
+      >
+        {{ $t(`pageFactoryReset.modal.resetWarningCheckLabel`) }}
+      </b-form-checkbox>
+      <b-form-invalid-feedback
+        role="alert"
+        :state="getValidationState($v.confirm)"
+      >
+        {{ $t('global.form.fieldRequired') }}
+      </b-form-invalid-feedback>
+    </template>
+
+    <template #modal-footer="{ cancel }">
+      <b-button
+        variant="secondary"
+        data-test-id="factoryReset-button-cancel"
+        @click="cancel()"
+      >
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        type="sumbit"
+        variant="primary"
+        data-test-id="factoryReset-button-confirm"
+        @click="handleConfirm"
+      >
+        {{ $t(`pageFactoryReset.modal.${resetType}SubmitText`) }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+<script>
+import StatusIcon from '@/components/Global/StatusIcon';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
+
+export default {
+  components: { StatusIcon },
+  mixins: [VuelidateMixin],
+  props: {
+    resetType: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      confirm: false,
+    };
+  },
+  computed: {
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    isServerOff() {
+      return this.serverStatus === 'off' ? true : false;
+    },
+  },
+  validations: {
+    confirm: {
+      mustBeTrue: function (value) {
+        return this.isServerOff || value === true;
+      },
+    },
+  },
+  methods: {
+    handleConfirm() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('okConfirm');
+      this.$nextTick(() => this.$refs.modal.hide());
+      this.resetConfirm();
+    },
+    resetConfirm() {
+      this.confirm = false;
+      this.$v.$reset();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/FactoryReset/index.js b/src/views/_sila/Operations/FactoryReset/index.js
new file mode 100644
index 00000000..eae747e0
--- /dev/null
+++ b/src/views/_sila/Operations/FactoryReset/index.js
@@ -0,0 +1,2 @@
+import FactoryReset from './FactoryReset.vue';
+export default FactoryReset;