Login Page

src/components/user/userinfo.vue

@@ -57,6 +57,17 @@
 
       <q-separator spaced />
 
+      <q-item clickable v-ripple v-close-popup>
+        <q-item-section avatar>
+          <q-icon name="mdi-help-box"></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1">
+            Help
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+
       <q-item clickable v-ripple v-close-popup>
         <q-item-section avatar>
           <q-icon name="mdi-logout"></q-icon>

src/layouts/Default.vue → src/layouts/mainlayout.vue

@@ -67,7 +67,7 @@ import UserInfo from '../components/user/userinfo.vue';
 import Messages from '../components/user/messages.vue';
 
 export default {
-  name: 'DashblocksTemplateUxLayout',
+  name: 'MainLayout',
   components: {
     MenuDrawer,
     MenuList,
@@ -117,6 +117,12 @@ export default {
               sideCaption: 'icons'
             }
           ]
+        },
+        {
+          id: 'pages',
+          title: 'Pages',
+          icon: 'mdi-link-box-outline',
+          items: [{ id: '7', title: 'Login', link: '/login', icon: 'mdi-login' }]
         }
 
         /*

src/pages/login.vue

@@ -0,0 +1,66 @@
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="flex flex-center">
+        <q-card class="ub-login-card">
+          <q-card-section class="ub-login-hdr text-white">
+            <q-btn round color="secondary" icon="mdi-google" class="absolute" style="z-index:10; top: 40px; right: 12px; transform: translateY(-50%);">
+              <q-tooltip>Login With Google</q-tooltip>
+            </q-btn>
+            <q-btn round color="secondary" icon="mdi-facebook" class="absolute" style="z-index:10; top: 100px; right: 12px; transform: translateY(-50%);">
+              <q-tooltip>Login With Facebook</q-tooltip>
+            </q-btn>
+            <q-btn round color="secondary" icon="mdi-github" class="absolute" style="z-index:10; top: 160px; right: 12px; transform: translateY(-50%);">
+              <q-tooltip>Login With GitHub</q-tooltip>
+            </q-btn>
+            <div class="text-h5 absolute-bottom text-center" style="margin-bottom: 24px;">dashblocks.io</div>
+          </q-card-section>
+
+          <q-card-section>
+            <q-card-section>
+              <q-input v-model="username" debounce="400" clearable label="Username or Email">
+                <template v-slot:prepend>
+                  <q-icon name="mdi-account" />
+                </template>
+              </q-input>
+              <q-input v-model="password" debounce="400" clearable label="password">
+                <template v-slot:prepend>
+                  <q-icon name="mdi-lock" />
+                </template>
+              </q-input>
+            </q-card-section>
+          </q-card-section>
+
+          <q-card-actions align="right">
+            <q-btn flat>Register</q-btn>
+            <q-btn color="primary" unelevated>Login</q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: ''
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+.ub-login-card {
+  width: 100%;
+  max-width: 400px;
+  .ub-login-hdr {
+    height: 200px;
+    background: #0f2027; /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #2c5364, #203a43, #0f2027); /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #2c5364, #203a43, #0f2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  }
+}
+</style>

src/router.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import DefaultLayout from './layouts/Default.vue';
+import MainLayout from './layouts/mainlayout.vue';
 import Home from './views/Home.vue';
 import About from './views/About.vue';
 import DashblocksShowcase from './views/DashblocksShowcase.vue';
@@ -10,13 +10,15 @@ import ChartJsShowcase from './views/ChartJsShowcase.vue';
 import Dygraphs from './views/Dygraphs.vue';
 import Mdi from './views/mdi.vue';
 
+import Login from './pages/login.vue';
+
 Vue.use(Router);
 
 export default new Router({
   routes: [
     {
       path: '/',
-      component: DefaultLayout,
+      component: MainLayout,
       children: [
         {
           path: '',
@@ -49,6 +51,10 @@ export default new Router({
           component: MaterialIcons
         }
       ]
+    },
+    {
+      path: '/login',
+      component: Login
     }
   ]
 });

src/styles/ubbox.scss

@@ -9,11 +9,6 @@
 
   .ub-row.ub-box-fixed {
     flex: 0 0 auto;
-    /* The above is shorthand for:
-      flex-grow: 0,
-      flex-shrink: 0,
-      flex-basis: auto
-      */
     width: 100%;
   }