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/ChangePassword/ChangePassword.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/ChangePassword/ChangePassword.vue')
-rw-r--r-- | src/views/ChangePassword/ChangePassword.vue | 130 |
1 files changed, 67 insertions, 63 deletions
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> |