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
---
 .env.ibm                                        |   1 +
 src/assets/images/built-on-openbmc-logo.svg     |  13 +++
 src/assets/images/login-company-logo.svg        |   1 +
 src/assets/images/logo-login.svg                |   1 -
 src/components/AppHeader/AppHeader.vue          |   2 +-
 src/layouts/LoginLayout.vue                     | 108 +++++++++++++++-----
 src/views/ChangePassword/ChangePassword.vue     | 130 ++++++++++++------------
 src/views/Login/Login.vue                       |  41 ++++----
 tests/unit/__snapshots__/AppHeader.spec.js.snap |   2 +-
 9 files changed, 182 insertions(+), 117 deletions(-)
 create mode 100644 src/assets/images/built-on-openbmc-logo.svg
 create mode 100644 src/assets/images/login-company-logo.svg
 delete mode 100644 src/assets/images/logo-login.svg

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/login-company-logo.svg b/src/assets/images/login-company-logo.svg
new file mode 100644
index 00000000..d0fa158c
--- /dev/null
+++ b/src/assets/images/login-company-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}.cls-6{fill:#626366;}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23,205.77a18.66,18.66,0,1,0-.24,16L237.26,220a14.51,14.51,0,1,1,.21-12.46Z"/><path class="cls-2" d="M65.85,81.86a53.68,53.68,0,0,0,11.61,33.41c-.1.29-.15.6-.22.9a10.81,10.81,0,0,0-.34,2.57,11,11,0,1,0,11-11,10.75,10.75,0,0,0-1.2.07c-.31,0-.61.08-.91.13A42.82,42.82,0,0,1,99.95,43.86h0V2.07l-.77.21q-3.63.94-7.12,2.2c-1.29.47-2.58,1-3.84,1.48h0V38.19l-.13.1A53.79,53.79,0,0,0,65.85,81.86Z"/><path class="cls-3" d="M120.28,96.58a14.54,14.54,0,0,1-14.55-14.37H93.59v0a26.29,26.29,0,0,0,21,25.65v45.35A71.13,71.13,0,0,1,63.9,38.1c.31.06.63.1,1,.13s.64,0,1,0a10.83,10.83,0,1,0-10.25-7.41,82.23,82.23,0,0,0,64.18,133.6c1.41,0,2.81-.06,4.2-.14l1.63-.09h0V95.57A14.47,14.47,0,0,1,120.28,96.58Z"/><path class="cls-4" d="M171.95,68.54a53.78,53.78,0,0,0-9.85-19.71,11.31,11.31,0,0,0,.32-1.3,10.78,10.78,0,0,0,.24-2.17,11,11,0,1,0-8.89,10.8,42.83,42.83,0,0,1-14.17,64.08V162c1.08-.27,2.14-.56,3.2-.87a82.35,82.35,0,0,0,8.53-3V125.91a53.91,53.91,0,0,0,20.6-57.37Z"/><path class="cls-5" d="M184.63,132.75A82.21,82.21,0,0,0,119.79,0c-1.64,0-3.26.06-4.87.16h-.11V68.55h0A14.53,14.53,0,0,1,120,67.48h.27A14.56,14.56,0,0,1,134.87,82s0,.07,0,.11,0,.08,0,.13h11.08A26.21,26.21,0,0,0,125.81,56.8V11.3A71.14,71.14,0,0,1,176,125.83h-.07a11,11,0,0,0-12.58,10.88,11,11,0,0,0,11,11h0a11,11,0,0,0,10.54-14.13C184.82,133.3,184.73,133,184.63,132.75Z"/><polygon class="cls-1" points="201.22 231.42 201.22 195.65 196.53 195.65 182 225.14 167.47 195.65 162.72 195.65 162.72 231.42 166.89 231.42 166.89 204.21 180.33 231.42 183.67 231.42 197.1 204.21 197.1 231.42 201.22 231.42"/><path class="cls-6" d="M119.82,208.4a10.6,10.6,0,0,0-7.9-3.34,10.15,10.15,0,0,0-4.16.83,15.94,15.94,0,0,0-3.62,2.24v-2.7H99.91v26h4.23V216.64a7.74,7.74,0,0,1,2.08-5.5,7.48,7.48,0,0,1,10.66,0,7.76,7.76,0,0,1,2.08,5.48v14.78h4.11v-15a11.12,11.12,0,0,0-3.24-8"/><path class="cls-6" d="M63.68,224.4a12.41,12.41,0,0,1-4.86,5.17,13.54,13.54,0,0,1-7,1.85H45.54V240h-4V205.43H51.64a13.41,13.41,0,0,1,9.57,3.76,12.73,12.73,0,0,1,2.47,15.21m-18.14,3.24h5.77A9.48,9.48,0,0,0,58.05,225a8.59,8.59,0,0,0,2.76-6.54,8.38,8.38,0,0,0-2.7-6.41,9.43,9.43,0,0,0-6.68-2.51H45.54Z"/><path class="cls-6" d="M96.44,219.75a4.56,4.56,0,0,0,.14-1.36c0-7.38-6.27-13.36-14-13.36s-14,6-14,13.36,6.27,13.36,14,13.36a14,14,0,0,0,11.93-6.52l-3.25-2.45a9.89,9.89,0,0,1-8.68,5,9.43,9.43,0,1,1,0-18.83,9.8,9.8,0,0,1,9.35,6.54c0,.07.15.63.17.7H76.59v3.52Z"/><path class="cls-6" d="M33.19,213.53A14.53,14.53,0,1,1,18.66,199a14.53,14.53,0,0,1,14.53,14.53m4.12,0a18.66,18.66,0,1,0-18.66,18.66,18.66,18.66,0,0,0,18.66-18.66"/><path class="cls-1" d="M154.37,220.69a6.77,6.77,0,0,1-6.75,6.79H132.14V213.9h15.49a6.78,6.78,0,0,1,6.75,6.79m-2.29-15.93a5.08,5.08,0,0,1-5.05,5.08l-14.89,0V199.67H147a5.07,5.07,0,0,1,5.05,5.08m.94,6.7a9,9,0,0,0-5.69-15.75H128v35.75h20.14l.28,0v0A10.73,10.73,0,0,0,153,211.46"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/logo-login.svg b/src/assets/images/logo-login.svg
deleted file mode 100644
index d0fa158c..00000000
--- a/src/assets/images/logo-login.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}.cls-6{fill:#626366;}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23,205.77a18.66,18.66,0,1,0-.24,16L237.26,220a14.51,14.51,0,1,1,.21-12.46Z"/><path class="cls-2" d="M65.85,81.86a53.68,53.68,0,0,0,11.61,33.41c-.1.29-.15.6-.22.9a10.81,10.81,0,0,0-.34,2.57,11,11,0,1,0,11-11,10.75,10.75,0,0,0-1.2.07c-.31,0-.61.08-.91.13A42.82,42.82,0,0,1,99.95,43.86h0V2.07l-.77.21q-3.63.94-7.12,2.2c-1.29.47-2.58,1-3.84,1.48h0V38.19l-.13.1A53.79,53.79,0,0,0,65.85,81.86Z"/><path class="cls-3" d="M120.28,96.58a14.54,14.54,0,0,1-14.55-14.37H93.59v0a26.29,26.29,0,0,0,21,25.65v45.35A71.13,71.13,0,0,1,63.9,38.1c.31.06.63.1,1,.13s.64,0,1,0a10.83,10.83,0,1,0-10.25-7.41,82.23,82.23,0,0,0,64.18,133.6c1.41,0,2.81-.06,4.2-.14l1.63-.09h0V95.57A14.47,14.47,0,0,1,120.28,96.58Z"/><path class="cls-4" d="M171.95,68.54a53.78,53.78,0,0,0-9.85-19.71,11.31,11.31,0,0,0,.32-1.3,10.78,10.78,0,0,0,.24-2.17,11,11,0,1,0-8.89,10.8,42.83,42.83,0,0,1-14.17,64.08V162c1.08-.27,2.14-.56,3.2-.87a82.35,82.35,0,0,0,8.53-3V125.91a53.91,53.91,0,0,0,20.6-57.37Z"/><path class="cls-5" d="M184.63,132.75A82.21,82.21,0,0,0,119.79,0c-1.64,0-3.26.06-4.87.16h-.11V68.55h0A14.53,14.53,0,0,1,120,67.48h.27A14.56,14.56,0,0,1,134.87,82s0,.07,0,.11,0,.08,0,.13h11.08A26.21,26.21,0,0,0,125.81,56.8V11.3A71.14,71.14,0,0,1,176,125.83h-.07a11,11,0,0,0-12.58,10.88,11,11,0,0,0,11,11h0a11,11,0,0,0,10.54-14.13C184.82,133.3,184.73,133,184.63,132.75Z"/><polygon class="cls-1" points="201.22 231.42 201.22 195.65 196.53 195.65 182 225.14 167.47 195.65 162.72 195.65 162.72 231.42 166.89 231.42 166.89 204.21 180.33 231.42 183.67 231.42 197.1 204.21 197.1 231.42 201.22 231.42"/><path class="cls-6" d="M119.82,208.4a10.6,10.6,0,0,0-7.9-3.34,10.15,10.15,0,0,0-4.16.83,15.94,15.94,0,0,0-3.62,2.24v-2.7H99.91v26h4.23V216.64a7.74,7.74,0,0,1,2.08-5.5,7.48,7.48,0,0,1,10.66,0,7.76,7.76,0,0,1,2.08,5.48v14.78h4.11v-15a11.12,11.12,0,0,0-3.24-8"/><path class="cls-6" d="M63.68,224.4a12.41,12.41,0,0,1-4.86,5.17,13.54,13.54,0,0,1-7,1.85H45.54V240h-4V205.43H51.64a13.41,13.41,0,0,1,9.57,3.76,12.73,12.73,0,0,1,2.47,15.21m-18.14,3.24h5.77A9.48,9.48,0,0,0,58.05,225a8.59,8.59,0,0,0,2.76-6.54,8.38,8.38,0,0,0-2.7-6.41,9.43,9.43,0,0,0-6.68-2.51H45.54Z"/><path class="cls-6" d="M96.44,219.75a4.56,4.56,0,0,0,.14-1.36c0-7.38-6.27-13.36-14-13.36s-14,6-14,13.36,6.27,13.36,14,13.36a14,14,0,0,0,11.93-6.52l-3.25-2.45a9.89,9.89,0,0,1-8.68,5,9.43,9.43,0,1,1,0-18.83,9.8,9.8,0,0,1,9.35,6.54c0,.07.15.63.17.7H76.59v3.52Z"/><path class="cls-6" d="M33.19,213.53A14.53,14.53,0,1,1,18.66,199a14.53,14.53,0,0,1,14.53,14.53m4.12,0a18.66,18.66,0,1,0-18.66,18.66,18.66,18.66,0,0,0,18.66-18.66"/><path class="cls-1" d="M154.37,220.69a6.77,6.77,0,0,1-6.75,6.79H132.14V213.9h15.49a6.78,6.78,0,0,1,6.75,6.79m-2.29-15.93a5.08,5.08,0,0,1-5.05,5.08l-14.89,0V199.67H147a5.07,5.07,0,0,1,5.05,5.08m.94,6.7a9,9,0,0,0-5.69-15.75H128v35.75h20.14l.28,0v0A10.73,10.73,0,0,0,153,211.46"/></g></g></svg>
\ No newline at end of file
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"
           />
-- 
cgit v1.2.3