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
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index e431930..2440ace 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 @@
</script>
<style lang="scss" scoped>
-.change-password-container {
- max-width: 360px;
+.change-password__form-container {
+ @include media-breakpoint-up('md') {
+ max-width: 360px;
+ }
}
</style>