Create separate LoginLayout component

Create a separate layout for the login page so it can be reused
for first time password reset form.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ia2da0e8d29f7d6ad77c5277193c7535f2d00a97d

1 files changed, 64 insertions, 124 deletions

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 730c7a91..369c56dd 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,89 +1,68 @@
 <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" md="6">
-          <div class="login-branding__container">
-            <img
-              class="logo"
-              width="200px"
-              src="@/assets/images/openbmc-logo.svg"
-              alt=""
-            />
-            <h1>OpenBMC</h1>
-          </div>
-        </b-col>
-        <b-col md="6">
-          <b-form class="login-form" novalidate @submit.prevent="login">
-            <alert class="login-error" :show="authError" variant="danger">
-              <p id="login-error-alert">
-                {{ $t('pageLogin.alert.message') }}
-              </p>
-            </alert>
-            <b-form-group
-              label-for="language"
-              :label="$t('pageLogin.language')"
-            >
-              <b-form-select
-                id="language"
-                v-model="$i18n.locale"
-                :options="languages"
-                data-test-id="login-select-language"
-              ></b-form-select>
-            </b-form-group>
-            <b-form-group
-              label-for="username"
-              :label="$t('pageLogin.username')"
-            >
-              <b-form-input
-                id="username"
-                v-model="userInfo.username"
-                aria-describedby="login-error-alert username-required"
-                :state="getValidationState($v.userInfo.username)"
-                type="text"
-                autofocus="autofocus"
-                data-test-id="login-input-username"
-                @input="$v.userInfo.username.$touch()"
-              >
-              </b-form-input>
-              <b-form-invalid-feedback id="username-required" role="alert">
-                <template v-if="!$v.userInfo.username.required">
-                  {{ $t('global.form.fieldRequired') }}
-                </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-            <div class="login-form__section">
-              <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>
-              <b-form-invalid-feedback id="password-required" role="alert">
-                <template v-if="!$v.userInfo.password.required">
-                  {{ $t('global.form.fieldRequired') }}
-                </template>
-              </b-form-invalid-feedback>
-            </div>
-            <b-button
-              block
-              class="mt-5"
-              type="submit"
-              variant="primary"
-              data-test-id="login-button-submit"
-              :disabled="disableSubmitButton"
-              >{{ $t('pageLogin.logIn') }}</b-button
-            >
-          </b-form>
-        </b-col>
-      </b-row>
-    </b-container>
-  </main>
+  <b-form
+    class="login-form  mx-auto ml-md-5 mb-3"
+    novalidate
+    @submit.prevent="login"
+  >
+    <alert class="login-error mb-4" :show="authError" variant="danger">
+      <p id="login-error-alert">
+        {{ $t('pageLogin.alert.message') }}
+      </p>
+    </alert>
+    <b-form-group label-for="language" :label="$t('pageLogin.language')">
+      <b-form-select
+        id="language"
+        v-model="$i18n.locale"
+        :options="languages"
+        data-test-id="login-select-language"
+      ></b-form-select>
+    </b-form-group>
+    <b-form-group label-for="username" :label="$t('pageLogin.username')">
+      <b-form-input
+        id="username"
+        v-model="userInfo.username"
+        aria-describedby="login-error-alert username-required"
+        :state="getValidationState($v.userInfo.username)"
+        type="text"
+        autofocus="autofocus"
+        data-test-id="login-input-username"
+        @input="$v.userInfo.username.$touch()"
+      >
+      </b-form-input>
+      <b-form-invalid-feedback id="username-required" role="alert">
+        <template v-if="!$v.userInfo.username.required">
+          {{ $t('global.form.fieldRequired') }}
+        </template>
+      </b-form-invalid-feedback>
+    </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>
+      <b-form-invalid-feedback id="password-required" role="alert">
+        <template v-if="!$v.userInfo.password.required">
+          {{ $t('global.form.fieldRequired') }}
+        </template>
+      </b-form-invalid-feedback>
+    </div>
+    <b-button
+      block
+      class="mt-5"
+      type="submit"
+      variant="primary"
+      data-test-id="login-button-submit"
+      :disabled="disableSubmitButton"
+      >{{ $t('pageLogin.logIn') }}</b-button
+    >
+  </b-form>
 </template>
 
 <script>
@@ -154,46 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
-.login-container {
-  @include media-breakpoint-up(md) {
-    background: linear-gradient(to right, $light 50%, $container-bgd 50%);
-  }
-}
-
-.login-row {
-  @include media-breakpoint-up(md) {
-    min-height: 100vh;
-  }
-}
-
-.login-branding__container {
-  @include media-breakpoint-up(md) {
-    float: right;
-    margin-right: 4rem;
-  }
-}
-
 .login-form {
   max-width: 360px;
-  margin-right: auto;
-  margin-left: auto;
-
-  @include media-breakpoint-up(md) {
-    margin-left: 4rem;
-  }
-}
-
-.login-form__section {
-  margin-bottom: $spacer;
-}
-
-.alert.login-error {
-  margin-bottom: $spacer * 2;
-}
-
-.login-branding {
-  text-align: center;
 }
 </style>