From 932aff93a96fff5fb2d1e1dc264f944cc78b3f83 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Thu, 26 Aug 2021 14:06:49 -0500
Subject: 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
---
 src/views/ChangePassword/ChangePassword.vue | 130 ++++++++++++++--------------
 1 file changed, 67 insertions(+), 63 deletions(-)

(limited to 'src/views/ChangePassword')

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>
-- 
cgit v1.2.3