From 053b5415eea3bef744359526ef62a73264df0aa2 Mon Sep 17 00:00:00 2001
From: "M. Weber" <m.weber@ewerk.com>
Date: Thu, 29 Aug 2019 12:31:13 +0200
Subject: [PATCH] Refactor login layout and styles (#29)

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/layouts/UserLayout.vue | 126 ++++-------------
 ui/src/views/user/Login.vue              | 171 ++++++++++++-----------
 2 files changed, 117 insertions(+), 180 deletions(-)

diff --git a/ui/src/components/layouts/UserLayout.vue b/ui/src/components/layouts/UserLayout.vue
index 0cbe3390d4c..441f5631ca4 100644
--- a/ui/src/components/layouts/UserLayout.vue
+++ b/ui/src/components/layouts/UserLayout.vue
@@ -1,10 +1,8 @@
 <template>
-  <div id="userLayout" :class="['user-layout-wrapper', device]">
-    <div class="container">
-      <div class="top">
-        <div class="header">
-          <img src="~@/assets/banner.svg" class="logo" alt="logo">
-        </div>
+  <div id="userLayout" :class="['user-layout', device]">
+    <div class="user-layout-container">
+      <div class="user-layout-header">
+        <img src="~@/assets/banner.svg" class="user-layout-logo" alt="logo">
       </div>
       <route-view></route-view>
     </div>
@@ -32,100 +30,34 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  #userLayout.user-layout-wrapper {
-    height: 100%;
+.user-layout {
+  height: 100%;
+  background: #fff;
 
-    &.mobile {
-      .container {
-        padding-top: 50px;
+  &-container {
+    padding: 3rem 0;
+    width: 100%;
 
-        .main {
-          max-width: 368px;
-          width: 98%;
-        }
-      }
-    }
-
-    .container {
-      width: 100%;
-      min-height: 100%;
-      background: rgb(255,255,255);
-      padding-top: 75px;
+    @media (min-height:600px) {
+      padding: 0;
       position: relative;
-
-      a {
-        text-decoration: none;
-      }
-
-      .top {
-        text-align: center;
-
-        .header {
-
-          .badge {
-            position: absolute;
-            display: inline-block;
-            line-height: 1;
-            vertical-align: middle;
-            margin-left: -12px;
-            margin-top: -10px;
-            opacity: 0.8;
-          }
-
-          .logo {
-            width: 100%;
-            max-width: 450px;
-            vertical-align: top;
-            border-style: none;
-          }
-
-          .title {
-            font-size: 33px;
-            color: rgba(0, 0, 0, .85);
-            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-            font-weight: 600;
-            position: relative;
-            top: 2px;
-          }
-        }
-        .desc {
-          font-size: 14px;
-          color: rgba(0, 0, 0, 0.45);
-          margin-top: 12px;
-          margin-bottom: 40px;
-        }
-      }
-
-      .main {
-        min-width: 260px;
-        width: 368px;
-        margin: 0 auto;
-      }
-
-      .footer {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        padding: 0 16px;
-        margin: 48px 0 24px;
-        text-align: center;
-
-        .links {
-          margin-bottom: 8px;
-          font-size: 14px;
-          a {
-            color: rgba(0, 0, 0, 0.45);
-            transition: all 0.3s;
-            &:not(:last-child) {
-              margin-right: 40px;
-            }
-          }
-        }
-        .copyright {
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 14px;
-        }
-      }
+      top: 50%;
+      transform: translateY(-50%);
+      margin-top: -50px;
     }
   }
+
+  &-logo {
+    width: 95%;
+    max-width: 450px;
+    border-style: none;
+    margin: 0 auto 2rem;
+    display: block;
+
+    .mobile & {
+      max-width: 300px;
+      margin-bottom: 1rem;
+    }
+  }
+}
 </style>
diff --git a/ui/src/views/user/Login.vue b/ui/src/views/user/Login.vue
index 0088af292d9..f6f69c54f1d 100644
--- a/ui/src/views/user/Login.vue
+++ b/ui/src/views/user/Login.vue
@@ -1,89 +1,85 @@
 <template>
-  <div class="main">
-    <a-form
-      id="formLogin"
-      class="user-layout-login"
-      ref="formLogin"
-      :form="form"
-      @submit="handleSubmit"
+  <a-form
+    id="formLogin"
+    class="user-layout-login"
+    ref="formLogin"
+    :form="form"
+    @submit="handleSubmit"
+  >
+    <a-tabs
+      :activeKey="customActiveKey"
+      size="large"
+      :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
+      @change="handleTabClick"
     >
-      <a-tabs
-        :activeKey="customActiveKey"
+      <a-tab-pane key="tab1">
+        <span slot="tab">
+          <a-icon type="safety" />
+          <b>CloudStack Login</b>
+        </span>
+        <a-form-item>
+          <a-input
+            size="large"
+            type="text"
+            placeholder="Username"
+            v-decorator="[
+              'username',
+              {rules: [{ required: true, message: 'Enter your username' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
+            ]"
+          >
+            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item>
+          <a-input
+            size="large"
+            type="password"
+            autocomplete="false"
+            placeholder="Password"
+            v-decorator="[
+              'password',
+              {rules: [{ required: true, message: 'Enter your password' }], validateTrigger: 'blur'}
+            ]"
+          >
+            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item>
+          <a-input
+            size="large"
+            type="text"
+            placeholder="Domain"
+            v-decorator="[
+              'domain',
+              {rules: [{ required: false, message: 'Enter your domain, leave empty for ROOT domain' }], validateTrigger: 'change'}
+            ]"
+          >
+            <a-icon slot="prefix" type="block" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+      </a-tab-pane>
+      <a-tab-pane key="tab2" disabled>
+        <span slot="tab">
+          <a-icon type="audit" />
+          <b>SAML</b>
+        </span>
+      </a-tab-pane>
+    </a-tabs>
+
+    <a-form-item>
+      <a-button
         size="large"
-        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
-        @change="handleTabClick"
-      >
-        <a-tab-pane key="tab1">
-          <span slot="tab">
-            <a-icon type="safety" />
-            <b>CloudStack Login</b>
-          </span>
-          <a-form-item>
-            <a-input
-              size="large"
-              type="text"
-              placeholder="Username"
-              v-decorator="[
-                'username',
-                {rules: [{ required: true, message: 'Enter your username' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
-              ]"
-            >
-              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
-            </a-input>
-          </a-form-item>
-
-          <a-form-item>
-            <a-input
-              size="large"
-              type="password"
-              autocomplete="false"
-              placeholder="Password"
-              v-decorator="[
-                'password',
-                {rules: [{ required: true, message: 'Enter your password' }], validateTrigger: 'blur'}
-              ]"
-            >
-              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
-            </a-input>
-          </a-form-item>
-
-          <a-form-item>
-            <a-input
-              size="large"
-              type="text"
-              placeholder="Domain"
-              v-decorator="[
-                'domain',
-                {rules: [{ required: false, message: 'Enter your domain, leave empty for ROOT domain' }], validateTrigger: 'change'}
-              ]"
-            >
-              <a-icon slot="prefix" type="block" :style="{ color: 'rgba(0,0,0,.25)' }"/>
-            </a-input>
-          </a-form-item>
-
-        </a-tab-pane>
-        <a-tab-pane key="tab2" disabled>
-          <span slot="tab">
-            <a-icon type="audit" />
-            <b>SAML</b>
-          </span>
-        </a-tab-pane>
-      </a-tabs>
-
-      <a-form-item>
-        <a-button
-          size="large"
-          type="primary"
-          htmlType="submit"
-          class="login-button"
-          :loading="state.loginBtn"
-          :disabled="state.loginBtn"
-        >Log In</a-button>
-      </a-form-item>
-
-    </a-form>
-
-  </div>
+        type="primary"
+        htmlType="submit"
+        class="login-button"
+        :loading="state.loginBtn"
+        :disabled="state.loginBtn"
+      >Log In</a-button>
+    </a-form-item>
+  </a-form>
 </template>
 
 <script>
@@ -177,6 +173,15 @@ export default {
 
 <style lang="less" scoped>
 .user-layout-login {
+  min-width: 260px;
+  width: 368px;
+  margin: 0 auto;
+
+  .mobile & {
+    max-width: 368px;
+    width: 98%;
+  }
+
   label {
     font-size: 14px;
   }