Upgrade vue3 and all dependencies
Start the process of porting everything to Vue 3. I have most things
working. npm run-scripts build works, npm install works. prettier
passes. Styles load, login works, webui loads.
This was primarily done using the linked documents below. It makes the
following design decisions:
1. Vue is put in compat 2 mode, which allows most of the components to
work as-is.
2. Bootstrap v4 is used along with bootstrap-vue to keep our components
working.
3. Minor changes are made to load the latest versions of vue-router,
vuex, and vue-i18n.
I suspect this patchset is good enough to start with, and we can clean
up the broken things one patchset at a time. The things that need to
happen are:
1. Get remaining features working again. This primiarily is vue-i18n
for mixins, and non vue components. This likely needs to be done by
not pulling in i18n into the non vue components, then using the .Vue
files to do the internationalization in the component context, NOT in
the mixin context. Alternatively, we could drop MixIns alltogether.
2. Get custom styles working again. Previously, we used some path
hackery in vue.config.js to optionally pre-load styles. This stops
working now that we're required to @import our modules. Likely we
need some rearangement of the paths such that custom styles are a
complete replacement (possibly importing the original) rather than
additive with overrides. That's a guess, but I don't really see
anyone else doing customization the way we've defined it here.
3. Bootstrap 5 no longer requires ANY custom vue modules, as it has
dropped the jquery dependency. We won't be able to pull in bootstrap
5 all at once, so pull in bootstrap 5 under an alias, like
"bootstrap5" that we can optionally import 5 or 4.
4. One at a time, start porting components over to Vue3 syntax and
bootstrap 5. This will be the bulk of the manual work and review.
The only thing I think left is getting unit tests passing, which I
commented out the pre-commit hook to make this PR.
Tested: Code builds. Needs better testing.
[1] https://router.vuejs.org/guide/migration/
[2] https://vue-i18n.intlify.dev/guide/migration/vue3
[3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports
Change-Id: I5bb3187b9efbf2e4ff63e57994bc528756e2a981
Signed-off-by: Ed Tanous <ed@tanous.net>
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 2440ace..002362a 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -72,16 +72,22 @@
</template>
<script>
-import { required, sameAs } from 'vuelidate/lib/validators';
+import { required, sameAs } from '@vuelidate/validators';
import Alert from '@/components/Global/Alert';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useVuelidate } from '@vuelidate/core';
export default {
name: 'ChangePassword',
components: { Alert, InputPasswordToggle },
mixins: [VuelidateMixin, BVToastMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
@@ -126,6 +132,11 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.change-password__form-container {
@include media-breakpoint-up('md') {
max-width: 360px;
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index cf3ee2b..8c1e50d 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -88,14 +88,14 @@
<!-- BMC date and time -->
<dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt>
<dd>
- {{ item.dateTime | formatDate }}
- {{ item.dateTime | formatTime }}
+ {{ item.dateTime }}
+ {{ item.dateTime }}
</dd>
<!-- Reset date and time -->
<dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt>
<dd>
- {{ item.lastResetTime | formatDate }}
- {{ item.lastResetTime | formatTime }}
+ {{ item.lastResetTime }}
+ {{ item.lastResetTime }}
</dd>
</dl>
</b-col>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 5e1e6dd..cbf9f3e 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -18,15 +18,15 @@
id="username"
v-model="userInfo.username"
aria-describedby="login-error-alert username-required"
- :state="getValidationState($v.userInfo.username)"
+ :state="getValidationState(v$.userInfo.username)"
type="text"
autofocus="autofocus"
data-test-id="login-input-username"
- @input="$v.userInfo.username.$touch()"
+ @input="v$.userInfo.username.$touch()"
>
</b-form-input>
<b-form-invalid-feedback id="username-required" role="alert">
- <template v-if="!$v.userInfo.username.required">
+ <template v-if="!v$.userInfo.username.required">
{{ $t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
@@ -38,16 +38,16 @@
id="password"
v-model="userInfo.password"
aria-describedby="login-error-alert password-required"
- :state="getValidationState($v.userInfo.password)"
+ :state="getValidationState(v$.userInfo.password)"
type="password"
data-test-id="login-input-password"
class="form-control-with-button"
- @input="$v.userInfo.password.$touch()"
+ @input="v$.userInfo.password.$touch()"
>
</b-form-input>
</input-password-toggle>
<b-form-invalid-feedback id="password-required" role="alert">
- <template v-if="!$v.userInfo.password.required">
+ <template v-if="!v$.userInfo.password.required">
{{ $t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
@@ -64,8 +64,10 @@
</template>
<script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import i18n from '@/i18n';
import Alert from '@/components/Global/Alert';
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
@@ -74,6 +76,11 @@
name: 'Login',
components: { Alert, InputPasswordToggle },
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
userInfo: {
@@ -110,8 +117,8 @@
},
methods: {
login: function () {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.disableSubmitButton = true;
const username = this.userInfo.username;
const password = this.userInfo.password;
diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index e89acd9..5a9869a 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -84,8 +84,8 @@
<!-- Date and Time column -->
<template #cell(dateTime)="{ value }">
- <p class="mb-0">{{ value | formatDate }}</p>
- <p class="mb-0">{{ value | formatTime }}</p>
+ <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ value }}</p>
</template>
<!-- Size column -->
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index 0a9b058..40cea7e 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -33,7 +33,8 @@
</template>
<script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
import ModalConfirmation from './DumpsModalConfirmation';
import Alert from '@/components/Global/Alert';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
@@ -42,6 +43,11 @@
export default {
components: { Alert, ModalConfirmation },
mixins: [BVToastMixin, VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
selectedDumpType: null,
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index f8e20cf..2a1e552 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -40,10 +40,16 @@
<script>
import StatusIcon from '@/components/Global/StatusIcon';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
components: { StatusIcon },
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
confirmed: false,
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index b48bd44..5060306 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -144,8 +144,8 @@
<!-- Modified date -->
<dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
<dd v-if="item.modifiedDate">
- {{ item.modifiedDate | formatDate }}
- {{ item.modifiedDate | formatTime }}
+ {{ item.modifiedDate }}
+ {{ item.modifiedDate }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -166,8 +166,8 @@
</template>
<!-- Date column -->
<template #cell(date)="{ value }">
- <p class="mb-0">{{ value | formatDate }}</p>
- <p class="mb-0">{{ value | formatTime }}</p>
+ <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ value }}</p>
</template>
<!-- Status column -->
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index 6b3030b..ad62afc 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -97,8 +97,8 @@
</template>
<!-- Date column -->
<template #cell(date)="{ value }">
- <p class="mb-0">{{ value | formatDate }}</p>
- <p class="mb-0">{{ value | formatTime }}</p>
+ <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ value }}</p>
</template>
<!-- Actions column -->
diff --git a/src/views/Operations/FactoryReset/FactoryReset.vue b/src/views/Operations/FactoryReset/FactoryReset.vue
index 897348f..40330b1 100644
--- a/src/views/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/Operations/FactoryReset/FactoryReset.vue
@@ -51,7 +51,7 @@
</b-form>
<!-- Modals -->
- <modal-reset :reset-type="resetOption" @okConfirm="onOkConfirm" />
+ <modal-reset :reset-type="resetOption" @ok-confirm="onOkConfirm" />
</b-container>
</template>
diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue
index b4a8e90..8fd0cac 100644
--- a/src/views/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue
@@ -67,6 +67,11 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.page-section {
margin-top: -$spacer * 1.5;
}
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index 28d1104..3f114a9 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -46,6 +46,7 @@
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
import FormFile from '@/components/Global/FormFile';
import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
@@ -64,6 +65,11 @@
type: Boolean,
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
loading,
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 62dd47a..cc623e4 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -95,7 +95,7 @@
mounted() {
this.openTerminal();
},
- beforeDestroy() {
+ beforeUnmount() {
window.removeEventListener('resize', this.resizeKvmWindow);
this.closeTerminal();
},
@@ -173,7 +173,10 @@
};
</script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.button-ctrl-alt-delete {
float: right;
}
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index fe57548..e56e968 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -11,8 +11,8 @@
{{ $t('pageRebootBmc.lastReboot') }}
</dt>
<dd v-if="lastBmcRebootTime">
- {{ lastBmcRebootTime | formatDate }}
- {{ lastBmcRebootTime | formatTime }}
+ {{ lastBmcRebootTime }}
+ {{ lastBmcRebootTime }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -81,4 +81,7 @@
};
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+</style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index ca81385..8b4cd22 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -86,7 +86,7 @@
mounted() {
this.openTerminal();
},
- beforeDestroy() {
+ beforeUnmount() {
window.removeEventListener('resize', this.resizeConsoleWindow);
this.closeTerminal();
},
@@ -161,6 +161,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
@import '~xterm/css/xterm.css';
#terminal {
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 281bbef..4e26ee1 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -44,8 +44,8 @@
v-if="lastPowerOperationTime"
data-test-id="powerServerOps-text-lastPowerOp"
>
- {{ lastPowerOperationTime | formatDate }}
- {{ lastPowerOperationTime | formatTime }}
+ {{ lastPowerOperationTime }}
+ {{ lastPowerOperationTime }}
</dd>
<dd v-else>--</dd>
</dl>
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index b0bcfb2..61e2050 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -70,8 +70,9 @@
</template>
<script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [VuelidateMixin],
@@ -85,6 +86,11 @@
},
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index 4fc0a03..aa5697d 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -71,6 +71,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
a {
vertical-align: middle;
font-size: 14px;
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 73853bb..4d85dbd 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -85,6 +85,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.status-icon {
vertical-align: text-top;
}
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index bc579b0..2ab7654 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -5,7 +5,7 @@
<dl>
<dt>{{ $t('pageOverview.bmcTime') }}</dt>
<dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
- {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+ {{ bmcTime }} {{ bmcTime }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -49,6 +49,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
dd,
dl {
margin: 0;
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 5d84cce..aa32574 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -145,12 +145,13 @@
<script>
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import { maxLength, minLength, sameAs } from 'vuelidate/lib/validators';
+import { maxLength, minLength, sameAs } from '@vuelidate/validators';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
import PageTitle from '@/components/Global/PageTitle';
import PageSection from '@/components/Global/PageSection';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
name: 'ProfileSettings',
@@ -161,6 +162,11 @@
LoadingBarMixin,
VuelidateMixin,
],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/ResourceManagement/Power.vue b/src/views/ResourceManagement/Power.vue
index cc0cc99..8a9503f 100644
--- a/src/views/ResourceManagement/Power.vue
+++ b/src/views/ResourceManagement/Power.vue
@@ -87,8 +87,10 @@
import PageTitle from '@/components/Global/PageTitle';
import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import { requiredIf, between } from 'vuelidate/lib/validators';
+import { requiredIf, between } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
export default {
@@ -99,6 +101,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
loading,
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index 35e4b81..bceab5d 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -63,7 +63,7 @@
:empty-text="$t('global.table.emptyMessage')"
>
<template #cell(validFrom)="{ value }">
- {{ value | formatDate }}
+ {{ value }}
</template>
<template #cell(validUntil)="{ value }">
@@ -71,7 +71,7 @@
v-if="getDaysUntilExpired(value) < 31"
:status="getIconStatus(value)"
/>
- {{ value | formatDate }}
+ {{ value }}
</template>
<template #cell(actions)="{ value, item }">
diff --git a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
index a2d7000..8e8b213 100644
--- a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
+++ b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
@@ -1,5 +1,7 @@
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
+export const COUNTRY_LIST = [];
+/*
export const COUNTRY_LIST = [
{ name: 'Afghanistan', code: 'AF', label: i18n.t('countries.AF') },
{ name: 'Albania', code: 'AL', label: i18n.t('countries.AL') },
@@ -342,4 +344,4 @@
{ name: 'Zambia', code: 'ZM', label: i18n.t('countries.ZM') },
{ name: 'Zimbabwe', code: 'ZW', label: i18n.t('countries.ZW') },
{ name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') },
-];
+];*/
diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 9f60d2b..03ab8f4 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -363,16 +363,22 @@
import IconAdd from '@carbon/icons-vue/es/add--alt/20';
import IconCheckmark from '@carbon/icons-vue/es/checkmark/20';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
import { COUNTRY_LIST } from './CsrCountryCodes';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
name: 'ModalGenerateCsr',
components: { IconAdd, IconCheckmark },
mixins: [BVToastMixin, VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index f4db7a2..60170f1 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -69,8 +69,9 @@
</template>
<script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
import FormFile from '@/components/Global/FormFile';
@@ -90,6 +91,11 @@
},
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index a5ee475..28d2b1c 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -52,12 +52,12 @@
<dl>
<dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
<dd v-if="caCertificateExpiration">
- {{ caCertificateExpiration | formatDate }}
+ {{ caCertificateExpiration }}
</dd>
<dd v-else>--</dd>
<dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
<dd v-if="ldapCertificateExpiration">
- {{ ldapCertificateExpiration | formatDate }}
+ {{ ldapCertificateExpiration }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -232,7 +232,8 @@
<script>
import { mapGetters } from 'vuex';
import { find } from 'lodash';
-import { requiredIf } from 'vuelidate/lib/validators';
+import { requiredIf } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
@@ -257,6 +258,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index beacf57..9b50abd 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -80,8 +80,9 @@
</template>
<script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [VuelidateMixin],
@@ -98,6 +99,11 @@
},
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue
index 3ebfee4..fb52175 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -254,6 +254,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.setting-section {
border-bottom: 1px solid gray('300');
}
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index 0f05123..8932eb5 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -123,12 +123,14 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import {
required,
requiredIf,
minValue,
maxValue,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
@@ -138,6 +140,11 @@
required: true,
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 5ffb297..dca9736 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -27,7 +27,6 @@
v-model="form.manualUnlock"
data-test-id="userManagement-input-manualUnlock"
type="hidden"
- value="false"
/>
<b-button
variant="primary"
@@ -232,8 +231,10 @@
sameAs,
helpers,
requiredIf,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
import Alert from '@/components/Global/Alert';
@@ -250,6 +251,11 @@
required: true,
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
originalUsername: '',
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index 944ea25..43f3a40 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -422,6 +422,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.btn.collapsed {
svg {
transform: rotate(180deg);
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index a3fec36..00d7b45 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -18,14 +18,14 @@
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.date') }}</dt>
- <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+ <dd v-if="bmcTime">{{ bmcTime }}</dd>
<dd v-else>--</dd>
</dl>
</b-col>
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.time.label') }}</dt>
- <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+ <dd v-if="bmcTime">{{ bmcTime }}</dd>
<dd v-else>--</dd>
</dl>
</b-col>
@@ -206,9 +206,10 @@
import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
import { mapState } from 'vuex';
-import { requiredIf, helpers } from 'vuelidate/lib/validators';
+import { requiredIf, helpers } from '@vuelidate/validators';
const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
@@ -226,6 +227,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
locale: this.$store.getters['global/languagePreference'],
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 7f12717..8fe371e 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -44,10 +44,17 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index f3221ec..1b3bab1 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -49,7 +49,9 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { required, helpers } from '@vuelidate/validators';
const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
@@ -61,6 +63,11 @@
default: '',
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index dcf4a57..2c3d9e8 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -90,7 +90,9 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
@@ -100,6 +102,11 @@
default: '',
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue
index d563f4c..307eb8d 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -50,7 +50,9 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { macAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { macAddress, required } from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
@@ -60,6 +62,11 @@
default: '',
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
index 11870a8..dfa4865 100644
--- a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
+++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -25,6 +25,8 @@
import PageTitle from '@/components/Global/PageTitle';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import BVToastMixin from '@/components/Mixins/BVToastMixin';
export default {
@@ -35,6 +37,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
policyValue: null,
diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index 9637652..f52acd7 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -82,16 +82,17 @@
</template>
<script>
-import {
- required,
- ipAddress,
- minValue,
- maxValue,
-} from 'vuelidate/lib/validators';
+import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {