auteração na tela de login e registro

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vue-material-kit",
+  "name": "Task Managers",
-  "author": "Creative Tim https://www.creative-tim.com/",
+  "author": "King of Development",
-  "description": "Vue Material Kit",
+  "description": "IT management task and control system",
   "version": "1.2.2",
   "private": true,
   "scripts": {

src/components/cards/RegisterCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <md-card class="md-card-login" :class="{ 'md-card-hidden': cardHidden }">
+    <md-card-header :class="getClass(headerColor)">
+      <slot name="title"></slot>
+      <div class="social-line">
+        <slot name="buttons"></slot>
+      </div>
+    </md-card-header>
+
+    <md-card-content>
+      <slot name="description"></slot>
+      <slot name="inputs"></slot>
+    </md-card-content>
+
+    <md-card-actions>
+      <slot name="footer"></slot>
+    </md-card-actions>
+  </md-card>
+</template>
+
+<script>
+export default {
+  name: "register-card",
+  props: {
+    headerColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      cardHidden: true
+    };
+  },
+  beforeMount() {
+    setTimeout(this.showCard, 400);
+  },
+  methods: {
+    showCard: function() {
+      this.cardHidden = false;
+    },
+    getClass: function(headerColor) {
+      return "md-card-header-" + headerColor + "";
+    }
+  }
+};
+</script>
+
+<style lang="css"></style>

src/components/index.js

@@ -5,6 +5,7 @@ import Slider from "./Slider.vue";
 import Badge from "./Badge.vue";
 import NavTabsCard from "./cards/NavTabsCard.vue";
 import LoginCard from "./cards/LoginCard.vue";
+import RegisterCard from "./cards/RegisterCard.vue";
 import Tabs from "./Tabs.vue";
 import Modal from "./Modal.vue";
 
@@ -16,6 +17,7 @@ export {
   Badge,
   NavTabsCard,
   LoginCard,
+  RegisterCard,
   Tabs,
   Modal
 };

src/main.js

@@ -1,17 +1,3 @@
-// =========================================================
-// * Vue Material Kit - v1.2.2
-// =========================================================
-//
-// * Product Page: https://www.creative-tim.com/product/vue-material-kit
-// * Copyright 2019 Creative Tim (https://www.creative-tim.com)
-// * Licensed under MIT (https://github.com/creativetimofficial/vue-material-kit/blob/master/LICENSE.md)
-//
-// * Coded by Creative Tim
-//
-// =========================================================
-//
-// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";

src/router.js

@@ -3,6 +3,7 @@ import Router from "vue-router";
 import Index from "./views/Index.vue";
 import Landing from "./views/Landing.vue";
 import Login from "./views/Login.vue";
+import Register from "./views/Register.vue";
 import Profile from "./views/Profile.vue";
 import MainNavbar from "./layout/MainNavbar.vue";
 import MainFooter from "./layout/MainFooter.vue";
@@ -12,7 +13,7 @@ Vue.use(Router);
 export default new Router({
   routes: [
     {
-      path: "/",
+      path: "/index",
       name: "index",
       components: { default: Index, header: MainNavbar, footer: MainFooter },
       props: {
@@ -37,6 +38,18 @@ export default new Router({
         header: { colorOnScroll: 400 }
       }
     },
+    {
+      path: "/",
+      name: "register",
+      components: {
+        default: Register,
+        header: MainNavbar,
+        footer: MainFooter
+      },
+      props: {
+        header: { colorOnScroll: 400 }
+      }
+    },
     {
       path: "/profile",
       name: "profile",

src/views/Login.vue

@@ -29,24 +29,19 @@
               >
                 <i class="fab fa-google-plus-g"></i>
               </md-button>
-              <p slot="description" class="description">Or Be Classical</p>
+              <p slot="description" class="description">Acesse sua conta</p>
-              <md-field class="md-form-group" slot="inputs">
-                <md-icon>face</md-icon>
-                <label>First Name...</label>
-                <md-input v-model="firstname"></md-input>
-              </md-field>
               <md-field class="md-form-group" slot="inputs">
                 <md-icon>email</md-icon>
-                <label>Email...</label>
+                <label>Email</label>
                 <md-input v-model="email" type="email"></md-input>
               </md-field>
               <md-field class="md-form-group" slot="inputs">
                 <md-icon>lock_outline</md-icon>
-                <label>Password...</label>
+                <label>Senha</label>
-                <md-input v-model="password"></md-input>
+                <md-input v-model="password" type="password"></md-input>
               </md-field>
               <md-button slot="footer" class="md-simple md-success md-lg">
-                Get Started
+                Acessar
               </md-button>
             </login-card>
           </div>

src/views/Register.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="wrapper">
+    <div class="section page-header header-filter" :style="headerStyle">
+      <div class="container">
+        <div class="md-layout">
+          <div
+            class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto"
+          >
+            <register-card header-color="green">
+              <h4 slot="title" class="card-title">Cadastro</h4>
+              <md-button
+                slot="buttons"
+                href="javascript:void(0)"
+                class="md-just-icon md-simple md-white"
+              >
+                <i class="fab fa-facebook-square"></i>
+              </md-button>
+              <md-button
+                slot="buttons"
+                href="javascript:void(0)"
+                class="md-just-icon md-simple md-white"
+              >
+                <i class="fab fa-twitter"></i>
+              </md-button>
+              <md-button
+                slot="buttons"
+                href="javascript:void(0)"
+                class="md-just-icon md-simple md-white"
+              >
+                <i class="fab fa-google-plus-g"></i>
+              </md-button>
+              <p slot="description" class="description">Cadastre com seus dados</p>
+              <md-field class="md-form-group" slot="inputs">
+                <md-icon>face</md-icon>
+                <label>Primeiro nome</label>
+                <md-input v-model="firstname"></md-input>
+              </md-field>
+              <md-field class="md-form-group" slot="inputs">
+                <md-icon>face</md-icon>
+                <label>Segundo nome</label>
+                <md-input v-model="firstname"></md-input>
+              </md-field>
+              <md-field class="md-form-group" slot="inputs">
+                <md-icon>email</md-icon>
+                <label>Email</label>
+                <md-input v-model="email" type="email"></md-input>
+              </md-field>
+              <md-field class="md-form-group" slot="inputs">
+                <md-icon>lock_outline</md-icon>
+                <label>Senha</label>
+                <md-input v-model="password" type="password"></md-input>
+              </md-field>
+              <md-button slot="footer" class="md-simple md-success md-lg">
+                Acessar
+              </md-button>
+            </register-card>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { RegisterCard } from "@/components";
+
+export default {
+  components: {
+    RegisterCard
+  },
+  bodyClass: "login-page",
+  data() {
+    return {
+      firstname: null,
+      email: null,
+      password: null
+    };
+  },
+  props: {
+    header: {
+      type: String,
+      default: require("@/assets/img/profile_city.jpg")
+    }
+  },
+  computed: {
+    headerStyle() {
+      return {
+        backgroundImage: `url(${this.header})`
+      };
+    }
+  }
+};
+</script>
+
+<style lang="css"></style>