summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDerick Montague <derick.montague@ibm.com>2021-08-26 22:06:49 +0300
committerDerick Montague <derick.montague@ibm.com>2021-09-03 01:08:05 +0300
commit932aff93a96fff5fb2d1e1dc264f944cc78b3f83 (patch)
tree6de440eb3f9ced0f5774f9e03e3c119a2f651c42
parent1908ac90fb2ec4849a71678543e0ed11af014256 (diff)
downloadwebui-vue-932aff93a96fff5fb2d1e1dc264f944cc78b3f83.tar.xz
Update login page layout
This update will: - Change the positioning of the form to be on the left - Add the built on OpenBMC logo to the bottom right corner of the screen - Add the ability to include a GUI custom name using a .env variable. If the variable is not present, the login page will not include the <h1> section heading element. - Remove the word "logo" from the alt attribute for the company logo image used in the application header and on the login page. Github story: https://github.com/openbmc/webui-vue/issues/63 Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I83ac5aecff0b3858c3ab5f38ab1aaa603d59acf1
-rw-r--r--.env.ibm1
-rw-r--r--src/assets/images/built-on-openbmc-logo.svg13
-rw-r--r--src/assets/images/login-company-logo.svg (renamed from src/assets/images/logo-login.svg)0
-rw-r--r--src/components/AppHeader/AppHeader.vue2
-rw-r--r--src/layouts/LoginLayout.vue108
-rw-r--r--src/views/ChangePassword/ChangePassword.vue130
-rw-r--r--src/views/Login/Login.vue41
-rw-r--r--tests/unit/__snapshots__/AppHeader.spec.js.snap2
8 files changed, 181 insertions, 116 deletions
diff --git a/.env.ibm b/.env.ibm
index 34204623..97c2afa2 100644
--- a/.env.ibm
+++ b/.env.ibm
@@ -1,6 +1,7 @@
NODE_ENV=production
VUE_APP_ENV_NAME=ibm
VUE_APP_COMPANY_NAME="IBM"
+VUE_APP_GUI_NAME="BMC System Management"
CUSTOM_STYLES=true
CUSTOM_APP_NAV=true
CUSTOM_ROUTER=true
diff --git a/src/assets/images/built-on-openbmc-logo.svg b/src/assets/images/built-on-openbmc-logo.svg
new file mode 100644
index 00000000..53e7fdc5
--- /dev/null
+++ b/src/assets/images/built-on-openbmc-logo.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="615.034" height="606.872" viewBox="88.47 5 615.034 606.872">
+ <path fill="#A7A8AB" d="M703.504 524.604c-10.908-23.902-39.128-34.437-63.03-23.528s-34.437 39.128-23.528 63.03 39.128 34.437 63.031 23.528a47.578 47.578 0 0022.916-22.239l-9.51-4.513c-9.083 18.301-31.281 25.773-49.582 16.69s-25.772-31.282-16.689-49.583c9.083-18.3 31.281-25.772 49.582-16.689a36.994 36.994 0 0117.225 17.816l9.585-4.512z"/>
+ <path fill="#579AC8" d="M256.378 213.7a136.858 136.858 0 0029.599 85.178c-.255.739-.382 1.529-.561 2.294a27.54 27.54 0 00-.867 6.553c0 15.487 12.556 28.044 28.044 28.044s28.044-12.557 28.044-28.044c0-15.489-12.556-28.045-28.044-28.045a27.219 27.219 0 00-3.06.179c-.79 0-1.555.204-2.32.331-36.755-47.793-27.808-116.333 19.986-153.088a109.135 109.135 0 0116.115-10.282V10.277l-1.963.536a204.136 204.136 0 00-18.152 5.609c-3.289 1.198-6.578 2.549-9.79 3.773v82.169l-.332.255A137.14 137.14 0 00256.378 213.7z"/>
+ <path fill="#579AC8" d="M395.146 251.228c-20.315.016-36.857-16.322-37.095-36.636H327.1c.124 31.721 22.467 59.011 53.539 65.394v115.619c-99.899-7.141-175.094-93.913-167.954-193.811a181.344 181.344 0 0138.721-99.659c.791.153 1.606.255 2.55.332.943.076 1.631 0 2.549 0 15.249.036 27.64-12.296 27.676-27.545.037-15.249-12.295-27.64-27.544-27.676-15.249-.037-27.64 12.295-27.677 27.544a27.607 27.607 0 001.413 8.785c-72.331 90.409-57.675 222.336 32.735 294.667a209.641 209.641 0 00130.89 45.941c3.595 0 7.165-.153 10.708-.356l4.156-.229V248.653a36.9 36.9 0 01-13.716 2.575z"/>
+ <path fill="#A3CE4D" d="M526.877 179.741a137.108 137.108 0 00-25.112-50.25c.337-1.088.609-2.194.815-3.314.391-1.819.596-3.672.612-5.532-.006-15.488-12.566-28.04-28.055-28.034-15.488.006-28.04 12.567-28.033 28.055.006 15.488 12.566 28.04 28.055 28.033 1.802 0 3.6-.175 5.368-.521 36.745 47.818 27.769 116.371-20.05 153.116a109.15 109.15 0 01-16.076 10.253v106.466a212.604 212.604 0 008.158-2.218 209.772 209.772 0 0021.747-7.648v-82.144c46.035-33.228 66.902-91.341 52.52-146.263h.051z"/>
+ <path fill="#A3CE4D" d="M559.204 343.442c71.162-91.297 54.84-222.996-36.457-294.157A209.588 209.588 0 00393.896 5c-4.181 0-8.311.153-12.416.408h-.28v174.358a37.046 37.046 0 0113.232-2.728h.688c20.5-.056 37.166 16.517 37.222 37.018V214.668h28.248c-.067-30.889-21.298-57.705-51.347-64.859v-116c99.813 8.435 173.888 96.185 165.453 195.997a181.375 181.375 0 01-37.495 95.994h-.179c-15.327-2.225-29.557 8.397-31.781 23.725a28.227 28.227 0 00-.291 4.014c0 15.488 12.557 28.044 28.045 28.044 15.488-.008 28.038-12.569 28.03-28.058a28.06 28.06 0 00-1.159-7.967 16.997 16.997 0 00-.662-2.116z"/>
+ <path fill="#A7A8AB" d="M601.5 589.998v-91.194h-11.957l-37.044 75.183-37.044-75.183h-12.109v91.194h10.631v-69.371l34.264 69.371h8.516l34.239-69.371v69.371z"/>
+ <path fill="#636567" d="M393.973 531.31a27.02 27.02 0 00-20.141-8.516 25.878 25.878 0 00-10.606 2.116 40.606 40.606 0 00-9.229 5.711v-6.884h-10.784v66.286h10.784v-37.706a19.726 19.726 0 015.303-14.022c7.39-7.505 19.463-7.599 26.968-.209l.209.209a19.783 19.783 0 015.303 13.971v37.682h10.478v-38.242a28.352 28.352 0 00-8.26-20.396M250.846 572.101a31.638 31.638 0 01-12.391 13.181 34.52 34.52 0 01-17.846 4.717h-16.011v21.874H194.4v-88.135h25.75a34.186 34.186 0 0124.398 9.586c10.573 10.042 13.149 25.905 6.298 38.777m-46.247 8.26h14.71a24.178 24.178 0 0017.184-6.73 21.899 21.899 0 007.036-16.674 21.362 21.362 0 00-6.883-16.342 24.037 24.037 0 00-17.03-6.399h-15.017v46.145zM334.367 560.246a11.65 11.65 0 00.357-3.468c0-18.814-15.985-34.061-35.693-34.061-19.707 0-35.692 15.297-35.692 34.061 0 18.765 15.985 34.062 35.692 34.062a35.695 35.695 0 0030.416-16.623l-8.286-6.246a25.215 25.215 0 01-22.129 12.747c-13.256.749-24.61-9.391-25.358-22.647s9.391-24.61 22.647-25.358a23.576 23.576 0 012.711 0 24.985 24.985 0 0123.838 16.673c0 .179.382 1.606.433 1.785H283.76v8.974l50.607.101zM173.113 544.388c0 20.459-16.585 37.044-37.044 37.044-20.458 0-37.044-16.585-37.044-37.044 0-20.458 16.585-37.043 37.044-37.043 20.459 0 37.044 16.585 37.044 37.043m10.504 0c0-26.273-21.299-47.572-47.573-47.572S88.47 518.114 88.47 544.388c0 26.274 21.299 47.573 47.573 47.573s47.574-21.299 47.574-47.573"/>
+ <path fill="#A7A8AB" d="M482.058 562.643c.028 9.532-7.677 17.282-17.209 17.311h-39.466v-34.622h39.491c9.526.042 17.223 7.784 17.209 17.312m-5.839-40.615c.001 7.123-5.752 12.909-12.874 12.951h-37.962v-25.928h37.859c7.129.027 12.889 5.822 12.875 12.951m2.397 17.082c9.51-8.376 10.429-22.875 2.053-32.384a22.952 22.952 0 00-16.56-7.771h-49.204v91.144H466.888c15.067-1.113 26.379-14.229 25.266-29.297a27.357 27.357 0 00-13.589-21.667"/>
+ <g fill="#99C248">
+ <path d="M101.054 479.658l8.647-50.502h14.193c3.789 0 6.487.241 8.095.724 2.503.735 4.432 2.102 5.788 4.1 1.354 1.998 2.032 4.467 2.032 7.406 0 2.963-.654 5.442-1.963 7.44s-3.273 3.515-5.891 4.548c2.044.688 3.68 1.929 4.909 3.721 1.229 1.791 1.843 3.881 1.843 6.27 0 3.261-.74 6.212-2.222 8.853-1.481 2.642-3.411 4.542-5.788 5.702-2.377 1.159-5.748 1.739-10.11 1.739h-19.533zm9.884-8.13h8.215c3.221 0 5.43-.229 6.626-.689 1.197-.459 2.198-1.303 3.003-2.531s1.208-2.612 1.208-4.151c0-1.813-.528-3.238-1.585-4.271s-2.722-1.551-4.996-1.551H113.21l-2.272 13.193zm3.786-21.978h6.513c2.849 0 4.894-.229 6.134-.688a5.744 5.744 0 002.929-2.377c.712-1.125 1.068-2.412 1.068-3.858 0-1.171-.265-2.164-.793-2.979s-1.195-1.361-2-1.637c-.805-.275-2.54-.413-5.207-.413h-6.586l-2.058 11.952zM148.174 443.073h8.144l-3.709 21.592c-.435 2.586-.652 4.206-.652 4.861 0 1.123.324 2.06.972 2.809.648.748 1.438 1.122 2.371 1.122 1.091 0 2.171-.39 3.24-1.171 1.5-1.079 2.694-2.485 3.581-4.22.887-1.734 1.645-4.255 2.273-7.562l3.245-17.432h8.143l-6.788 36.585h-7.618l.905-4.961c-3.299 3.858-6.859 5.788-10.681 5.788-2.411 0-4.328-.845-5.75-2.532-1.422-1.688-2.133-4.014-2.133-6.976 0-1.24.323-3.743.968-7.51l3.489-20.393zM184.179 443.073h8.096l-6.27 36.585h-8.096l6.27-36.585zm2.377-13.917h8.13l-1.55 8.957h-8.096l1.516-8.957zM194.1 479.658l8.647-50.502h8.13l-8.682 50.502H194.1zM211.703 450.411l1.316-7.338h4.193l1.019-5.855 9.445-6.914-2.32 12.77h5.122l-1.245 7.338h-5.202l-2.836 15.281c-.491 2.747-.736 4.343-.736 4.788 0 .82.218 1.43.655 1.828.437.398 1.188.598 2.256.598.339 0 1.273-.08 2.802-.241l-1.346 7.338a19.843 19.843 0 01-4.342.482c-2.824 0-4.936-.644-6.336-1.93s-2.1-3.169-2.1-5.649c0-1.148.369-3.743 1.106-7.785l2.694-14.71h-4.145zM246.634 464.467c0-5.994 1.354-11.093 4.065-15.296 3.008-4.616 7.36-6.924 13.056-6.924 4.271 0 7.676 1.446 10.214 4.341 2.537 2.894 3.807 6.924 3.807 12.091 0 6.063-1.58 11.213-4.737 15.45-3.158 4.237-7.286 6.356-12.384 6.356-4.157 0-7.533-1.436-10.128-4.307-2.596-2.869-3.893-6.774-3.893-11.711zm23.115-7.063c0-2.411-.57-4.306-1.709-5.684-1.139-1.378-2.583-2.067-4.333-2.067-1.473 0-2.854.506-4.144 1.516-1.289 1.011-2.417 2.768-3.383 5.271a21.43 21.43 0 00-1.45 7.786c0 2.732.593 4.856 1.778 6.373 1.186 1.516 2.653 2.273 4.402 2.273 2.21 0 4.085-1.172 5.628-3.514 2.141-3.215 3.211-7.2 3.211-11.954zM287.105 443.073h7.711l-.795 4.754c1.993-2.089 3.819-3.542 5.48-4.357 1.661-.814 3.373-1.223 5.137-1.223 2.405 0 4.329.838 5.771 2.514 1.443 1.676 2.165 3.972 2.165 6.887 0 1.263-.296 3.686-.887 7.269l-3.515 20.742h-8.143l3.56-20.738c.525-3.101.788-4.96.788-5.58 0-1.31-.315-2.313-.944-3.015-.629-.7-1.448-1.051-2.454-1.051-1.098 0-2.219.437-3.364 1.31-1.647 1.239-2.872 2.716-3.672 4.426-.801 1.712-1.604 4.921-2.412 9.629l-2.594 15.02h-8.095l6.263-36.587z"/>
+ </g>
+</svg>
diff --git a/src/assets/images/logo-login.svg b/src/assets/images/login-company-logo.svg
index d0fa158c..d0fa158c 100644
--- a/src/assets/images/logo-login.svg
+++ b/src/assets/images/login-company-logo.svg
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 4e806fb9..7211a598 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -130,7 +130,7 @@ export default {
data() {
return {
isNavigationOpen: false,
- altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
+ altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
};
},
computed: {
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index c2b9af57..cdff2040 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -1,23 +1,34 @@
<template>
<main>
- <b-container class="login-container" fluid>
- <b-row class="login-row" align-v="center">
- <b-col class="login-branding mt-5 mb-5 text-center" md="6">
- <div class="login-branding__container">
+ <div class="login-container">
+ <div class="login-main">
+ <div>
+ <div class="login-brand mb-5">
<img
- class="logo"
- width="200px"
- src="@/assets/images/logo-login.svg"
+ width="90px"
+ src="@/assets/images/login-company-logo.svg"
:alt="altLogo"
/>
- <h1>OpenBMC</h1>
</div>
- </b-col>
- <b-col md="6">
- <router-view />
- </b-col>
- </b-row>
- </b-container>
+ <h1 v-if="customizableGuiName" class="h3 mb-5">
+ {{ customizableGuiName }}
+ </h1>
+ <router-view class="login=form form-background" />
+ </div>
+ </div>
+ <div class="login-aside">
+ <div class="login-aside__logo-brand">
+ <!-- Add Secondary brand logo if needed -->
+ </div>
+ <div class="login-aside__logo-bmc">
+ <img
+ height="60px"
+ src="@/assets/images/built-on-openbmc-logo.svg"
+ alt="Built on OpenBMC"
+ />
+ </div>
+ </div>
+ </div>
</main>
</template>
@@ -26,7 +37,8 @@ export default {
name: 'LoginLayout',
data() {
return {
- altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
+ altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
+ customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
};
},
};
@@ -34,25 +46,67 @@ export default {
<style lang="scss" scoped>
.login-container {
- @include media-breakpoint-up(md) {
- background: linear-gradient(
- to right,
- theme-color('light') 50%,
- gray('200') 50%
- );
+ background: gray('100');
+ display: flex;
+ flex-direction: column;
+ gap: $spacer * 2;
+ max-width: 1400px;
+ min-width: 320px;
+ min-height: 100vh;
+ justify-content: space-around;
+
+ @include media-breakpoint-up('md') {
+ background: $white;
+ flex-direction: row;
+ }
+}
+
+.login-main {
+ min-height: 50vh;
+ padding: $spacer * 3;
+
+ @include media-breakpoint-up('md') {
+ background: gray('100');
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 75%;
+ min-height: 100vh;
+ justify-content: center;
+ align-items: center;
}
}
-.login-row {
- @include media-breakpoint-up(md) {
+.login-form {
+ @include media-breakpoint-up('md') {
+ max-width: 360px;
+ }
+}
+
+.login-aside {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ gap: $spacer * 1.5;
+ margin-right: $spacer * 3;
+ margin-bottom: $spacer;
+
+ @include media-breakpoint-up('md') {
min-height: 100vh;
+ padding-bottom: $spacer;
+ flex: 1 1 25%;
+ margin-bottom: 0;
}
}
-.login-branding__container {
- @include media-breakpoint-up(md) {
- float: right;
- margin-right: 4rem;
+.login-aside__logo-brand:not(:empty) {
+ &::after {
+ content: '';
+ display: inline-block;
+ height: 2.5rem;
+ width: 2px;
+ background-color: gray('200');
+ margin-left: $spacer * 1.5;
+ vertical-align: middle;
}
}
</style>
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index e4319303..2440ace1 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -1,71 +1,73 @@
<template>
- <div class="change-password-container mx-auto ml-md-5 mb-3">
+ <div class="change-password-container">
<alert variant="danger" class="mb-4">
<p v-if="changePasswordError">
{{ $t('pageChangePassword.changePasswordError') }}
</p>
<p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
</alert>
- <dl>
- <dt>{{ $t('pageChangePassword.username') }}</dt>
- <dd>{{ username }}</dd>
- </dl>
- <b-form novalidate @submit.prevent="changePassword">
- <b-form-group
- label-for="password"
- :label="$t('pageChangePassword.newPassword')"
- >
- <input-password-toggle>
- <b-form-input
- id="password"
- v-model="form.password"
- autofocus="autofocus"
- type="password"
- :state="getValidationState($v.form.password)"
- class="form-control-with-button"
- @change="$v.form.password.$touch()"
- >
- </b-form-input>
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.password.required">
- {{ $t('global.form.fieldRequired') }}
- </template>
- </b-form-invalid-feedback>
- </input-password-toggle>
- </b-form-group>
- <b-form-group
- label-for="password-confirm"
- :label="$t('pageChangePassword.confirmNewPassword')"
- >
- <input-password-toggle>
- <b-form-input
- id="password-confirm"
- v-model="form.passwordConfirm"
- type="password"
- :state="getValidationState($v.form.passwordConfirm)"
- class="form-control-with-button"
- @change="$v.form.passwordConfirm.$touch()"
- >
- </b-form-input>
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.passwordConfirm.required">
- {{ $t('global.form.fieldRequired') }}
- </template>
- <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
- {{ $t('global.form.passwordsDoNotMatch') }}
- </template>
- </b-form-invalid-feedback>
- </input-password-toggle>
- </b-form-group>
- <div class="text-right">
- <b-button type="button" variant="link" @click="goBack">
- {{ $t('pageChangePassword.goBack') }}
- </b-button>
- <b-button type="submit" variant="primary">
- {{ $t('pageChangePassword.changePassword') }}
- </b-button>
- </div>
- </b-form>
+ <div class="change-password__form-container">
+ <dl>
+ <dt>{{ $t('pageChangePassword.username') }}</dt>
+ <dd>{{ username }}</dd>
+ </dl>
+ <b-form novalidate @submit.prevent="changePassword">
+ <b-form-group
+ label-for="password"
+ :label="$t('pageChangePassword.newPassword')"
+ >
+ <input-password-toggle>
+ <b-form-input
+ id="password"
+ v-model="form.password"
+ autofocus="autofocus"
+ type="password"
+ :state="getValidationState($v.form.password)"
+ class="form-control-with-button"
+ @change="$v.form.password.$touch()"
+ >
+ </b-form-input>
+ <b-form-invalid-feedback role="alert">
+ <template v-if="!$v.form.password.required">
+ {{ $t('global.form.fieldRequired') }}
+ </template>
+ </b-form-invalid-feedback>
+ </input-password-toggle>
+ </b-form-group>
+ <b-form-group
+ label-for="password-confirm"
+ :label="$t('pageChangePassword.confirmNewPassword')"
+ >
+ <input-password-toggle>
+ <b-form-input
+ id="password-confirm"
+ v-model="form.passwordConfirm"
+ type="password"
+ :state="getValidationState($v.form.passwordConfirm)"
+ class="form-control-with-button"
+ @change="$v.form.passwordConfirm.$touch()"
+ >
+ </b-form-input>
+ <b-form-invalid-feedback role="alert">
+ <template v-if="!$v.form.passwordConfirm.required">
+ {{ $t('global.form.fieldRequired') }}
+ </template>
+ <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
+ {{ $t('global.form.passwordsDoNotMatch') }}
+ </template>
+ </b-form-invalid-feedback>
+ </input-password-toggle>
+ </b-form-group>
+ <div class="text-right">
+ <b-button type="button" variant="link" @click="goBack">
+ {{ $t('pageChangePassword.goBack') }}
+ </b-button>
+ <b-button type="submit" variant="primary">
+ {{ $t('pageChangePassword.changePassword') }}
+ </b-button>
+ </div>
+ </b-form>
+ </div>
</div>
</template>
@@ -124,7 +126,9 @@ export default {
</script>
<style lang="scss" scoped>
-.change-password-container {
- max-width: 360px;
+.change-password__form-container {
+ @include media-breakpoint-up('md') {
+ max-width: 360px;
+ }
}
</style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index fc679361..8d96573a 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,9 +1,5 @@
<template>
- <b-form
- class="login-form mx-auto ml-md-5 mb-3"
- novalidate
- @submit.prevent="login"
- >
+ <b-form class="login-form" novalidate @submit.prevent="login">
<alert class="login-error mb-4" :show="authError" variant="danger">
<p id="login-error-alert">
{{ $t('pageLogin.alert.message') }}
@@ -37,16 +33,19 @@
</b-form-group>
<div class="login-form__section mb-3">
<label for="password">{{ $t('pageLogin.password') }}</label>
- <b-form-input
- id="password"
- v-model="userInfo.password"
- aria-describedby="login-error-alert password-required"
- :state="getValidationState($v.userInfo.password)"
- type="password"
- data-test-id="login-input-password"
- @input="$v.userInfo.password.$touch()"
- >
- </b-form-input>
+ <input-password-toggle>
+ <b-form-input
+ id="password"
+ v-model="userInfo.password"
+ aria-describedby="login-error-alert password-required"
+ :state="getValidationState($v.userInfo.password)"
+ type="password"
+ data-test-id="login-input-password"
+ class="form-control-with-button"
+ @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">
{{ $t('global.form.fieldRequired') }}
@@ -54,8 +53,7 @@
</b-form-invalid-feedback>
</div>
<b-button
- block
- class="mt-5"
+ class="mt-3"
type="submit"
variant="primary"
data-test-id="login-button-submit"
@@ -70,10 +68,11 @@ import { required } from 'vuelidate/lib/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import i18n from '@/i18n';
import Alert from '@/components/Global/Alert';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
export default {
name: 'Login',
- components: { Alert },
+ components: { Alert, InputPasswordToggle },
mixins: [VuelidateMixin],
data() {
return {
@@ -145,9 +144,3 @@ export default {
},
};
</script>
-
-<style lang="scss" scoped>
-.login-form {
- max-width: 360px;
-}
-</style>
diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap
index b9e3bf71..1ad2b3d6 100644
--- a/tests/unit/__snapshots__/AppHeader.spec.js.snap
+++ b/tests/unit/__snapshots__/AppHeader.spec.js.snap
@@ -54,7 +54,7 @@ exports[`AppHeader.vue should render correctly 1`] = `
to="/"
>
<img
- alt="undefined logo"
+ alt="Built on OpenBMC"
class="header-logo"
src="@/assets/images/logo-header.svg"
/>