criando tela de login

thauska · Sep 5, 2020 · 8984642 · 8984642
1 parent f90ab32
commit 8984642
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 108 deletions.
diff --git a/src/components/SignUpFirst.vue b/src/components/SignUpFirst.vue
diff --git a/src/css/app.sass b/src/css/app.sass
@@ -4,4 +4,11 @@
     border-radius: 0 0 50% 50%
 
 .q-toolbar
-    min-height: 80px
+    min-height: 80px
+
+.logo-ada
+  position: relative
+  top: 24%
+
+.container-logo-bmg
+  height: 50px !important
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
@@ -25,7 +25,7 @@ export default {
       this.$router.push('/login')
     },
     goSignUp () {
-      this.$router.push('/cadastrar')
+      this.$router.push('/cadastrar-primeira-etapa')
     }
   }
 }
@@ -35,10 +35,6 @@ export default {
 /* .borda {
   border: 5px solid red;
 } */
-.logo-ada {
-  position: relative;
-  top: 24%;
-}
 .btn {
   height: 35px;
   padding: 0 20%;

diff --git a/src/pages/Login.vue b/src/pages/Login.vue
@@ -1,13 +1,55 @@
 <template>
-  <q-page></q-page>
+  <q-page class="container">
+    <div class="row justify-center">
+      <img class="logo-ada" src="../../public/ADA2.png" height="100"/>
+    </div>
+    <div class="row align-data">
+      <div class="row col-12">
+        <div class="text-secondary text-body1 text-weight-bold"> Oi, Fulaninha </div>
+      </div>
+      <div class="row col-12">
+        <span class="text-secondary text-body1 text-weight-bold"> Conta: 111111-1 </span>
+      </div>
+    </div>
+    <div class="row col-8 justify-center">
+      <q-input dark filled dense bg-color="secondary" :type="isPwd ? 'password' : 'text'">
+        <template v-slot:append>
+          <q-icon
+            :name="isPwd ? 'visibility_off' : 'visibility'"
+            class="cursor-pointer"
+            color="white"
+            @click="isPwd = !isPwd"
+          />
+        </template>
+      </q-input>
+      <span class="text-secondary"> Esqueci minha senha </span>
+    </div>
+    <div class="row col-12 justify-center">
+      <q-btn label="entrar" color="secondary" dense class="btn"/>
+    </div>
+    <div class="row col-12 justify-center container-logo-bmg">
+      <img src="../../public/banco-bmg-logo.png" height="35px"/>
+    </div>
+  </q-page>
 </template>
 
 <script>
 export default {
-
+  data () {
+    return {
+      isPwd: true
+    }
+  }
 }
 </script>
 
 <style>
-
+.btn {
+  height: 35px;
+  padding: 0 11%;
+  margin: 15% 0 10% 0;
+}
+.align-data {
+  padding: 10% 0 18% 20%
+}
 </style>
diff --git a/src/pages/SignUp.vue b/src/pages/SignUp.vue
diff --git a/src/pages/SignUpFirst.vue b/src/pages/SignUpFirst.vue
@@ -0,0 +1,60 @@
+<template>
+  <q-page class="row justify-center">
+    <div class="row justify-center col-12">
+      <span class="text-h6 text-secondary"> ABRA SUA CONTA </span>
+    </div>
+    <div class="row justify-center col-12">
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> Nome Completo </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> E-mail </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> Senha </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> Insira novamente sua senha </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> CPF </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> RG </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+    </div>
+    <sign-up-second ref="SignUpSecond"/>
+    <div class="row col-8 borda justify-center q-pt-lg">
+      <q-btn label="avançar" color="secondary" dense class="q-px-lg btn" @click="next()"/>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import SignUpSecond from '../components/SignUpSecond'
+export default {
+  components: {
+    SignUpSecond
+  },
+  data () {
+    return {
+      labelButton: 'Avançar'
+    }
+  },
+  methods: {
+    next () {
+      this.$router.push('/cadastrar-segunda-etapa')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/pages/SignUpSecond.vue b/src/pages/SignUpSecond.vue
@@ -0,0 +1,41 @@
+<template>
+  <q-page class="row justify-center">
+    <div class="row justify-center col-12">
+      <span class="text-h6 text-secondary"> ABRA SUA CONTA </span>
+    </div>
+    <div class="row justify-center col-12">
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> Gênero </span>
+        <q-radio dense color="secondary" label="Feminino" class="col-12 text-secondary"/>
+        <q-radio dense color="secondary" label="Outros" class="col-6 text-secondary"/>
+        <q-input class="col-6 q-mb-md" color="secondary" dense label="Qual"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> Data de nascimento </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> Celular </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center">
+        <span class="col-12 text-secondary"> Telefone </span>
+        <q-input dense dark bg-color="secondary" class="col-12"/>
+      </div>
+      <div class="row col-8 justify-center q-pt-sm">
+        <q-radio dense color="secondary" label="Li e concordo com os termos de uso e políticas de privacidade." class="col-12"/>
+      </div>
+    </div>
+    <div class="row col-8 borda justify-center q-pt-lg">
+      <q-btn label="criar Conta" color="secondary" dense class="q-px-lg btn" @click="createCount()"/>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+  methods: {
+    createCount () {}
+  }
+}
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
@@ -5,7 +5,8 @@ const routes = [
     component: () => import('layouts/MainLayout.vue'),
     children: [
       { path: '', component: () => import('pages/Index.vue') },
-      { path: 'cadastrar', component: () => import('pages/SignUp.vue') },
+      { path: 'cadastrar-primeira-etapa', component: () => import('pages/SignUpFirst.vue') },
+      { path: 'cadastrar-segunda-etapa', component: () => import('pages/SignUpSecond.vue') },
       { path: 'login', component: () => import('pages/Login.vue') }
     ]
   },

diff --git a/src/store/module-example/actions.js → src/store/User/actions.js b/src/store/module-example/actions.js → src/store/User/actions.js
diff --git a/src/store/module-example/getters.js → src/store/User/getters.js b/src/store/module-example/getters.js → src/store/User/getters.js
diff --git a/src/store/module-example/index.js → src/store/User/index.js b/src/store/module-example/index.js → src/store/User/index.js
diff --git a/src/store/module-example/mutations.js → src/store/User/mutations.js b/src/store/module-example/mutations.js → src/store/User/mutations.js
diff --git a/src/store/User/state.js b/src/store/User/state.js
@@ -0,0 +1,13 @@
+export default function () {
+  return {
+    form: {
+      name: '',
+      email: '',
+      cpf: '',
+      rg: '',
+      genre: '',
+      birthDate: '',
+      cellphone: ''
+    }
+  }
+}
diff --git a/src/store/index.js b/src/store/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-// import example from './module-example'
+import User from './User'
 
 Vue.use(Vuex)
 
@@ -17,7 +17,7 @@ Vue.use(Vuex)
 export default function (/* { ssrContext } */) {
   const Store = new Vuex.Store({
     modules: {
-      // example
+      User
     },
 
     // enable strict mode (adds overhead!)

diff --git a/src/store/module-example/state.js b/src/store/module-example/state.js