From 6173bc611071be368967afd795be5e84d8b38ee5 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 16 Jun 2020 12:39:07 -0700
Subject: 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
---
 src/layouts/LoginLayout.vue | 51 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/layouts/LoginLayout.vue

(limited to 'src/layouts')

diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
new file mode 100644
index 00000000..bb89f25e
--- /dev/null
+++ b/src/layouts/LoginLayout.vue
@@ -0,0 +1,51 @@
+<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">
+            <img
+              class="logo"
+              width="200px"
+              src="@/assets/images/openbmc-logo.svg"
+              alt=""
+            />
+            <h1>OpenBMC</h1>
+          </div>
+        </b-col>
+        <b-col md="6">
+          <router-view />
+        </b-col>
+      </b-row>
+    </b-container>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'LoginLayout'
+};
+</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;
+  }
+}
+</style>
-- 
cgit v1.2.3