diff options
author | Derick Montague <derick.montague@ibm.com> | 2021-08-26 22:06:49 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-09-03 01:08:05 +0300 |
commit | 932aff93a96fff5fb2d1e1dc264f944cc78b3f83 (patch) | |
tree | 6de440eb3f9ced0f5774f9e03e3c119a2f651c42 /src/views/Login/Login.vue | |
parent | 1908ac90fb2ec4849a71678543e0ed11af014256 (diff) | |
download | webui-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
Diffstat (limited to 'src/views/Login/Login.vue')
-rw-r--r-- | src/views/Login/Login.vue | 41 |
1 files changed, 17 insertions, 24 deletions
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> |