From 89846426357d8423c0e6f9b3e9bbbaad972b208b Mon Sep 17 00:00:00 2001
From: Beatriz_Alcantara <beatrizalcantara813@gmail.com>
Date: Sat, 5 Sep 2020 11:00:57 -0300
Subject: [PATCH] criando tela de login

---
 src/components/SignUpFirst.vue                | 52 ----------------
 src/css/app.sass                              |  9 ++-
 src/pages/Index.vue                           |  6 +-
 src/pages/Login.vue                           | 48 ++++++++++++++-
 src/pages/SignUp.vue                          | 39 ------------
 src/pages/SignUpFirst.vue                     | 60 +++++++++++++++++++
 src/pages/SignUpSecond.vue                    | 41 +++++++++++++
 src/router/routes.js                          |  3 +-
 src/store/{module-example => User}/actions.js |  0
 src/store/{module-example => User}/getters.js |  0
 src/store/{module-example => User}/index.js   |  0
 .../{module-example => User}/mutations.js     |  0
 src/store/User/state.js                       | 13 ++++
 src/store/index.js                            |  4 +-
 src/store/module-example/state.js             |  5 --
 15 files changed, 172 insertions(+), 108 deletions(-)
 delete mode 100644 src/components/SignUpFirst.vue
 delete mode 100644 src/pages/SignUp.vue
 create mode 100644 src/pages/SignUpFirst.vue
 create mode 100644 src/pages/SignUpSecond.vue
 rename src/store/{module-example => User}/actions.js (100%)
 rename src/store/{module-example => User}/getters.js (100%)
 rename src/store/{module-example => User}/index.js (100%)
 rename src/store/{module-example => User}/mutations.js (100%)
 create mode 100644 src/store/User/state.js
 delete mode 100644 src/store/module-example/state.js

diff --git a/src/components/SignUpFirst.vue b/src/components/SignUpFirst.vue
deleted file mode 100644
index 75330c1..0000000
--- a/src/components/SignUpFirst.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="row justify-center col-12" v-if="show">
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> Nome Completo </span>
-      <q-input dense dark bg-color="secondary" class="borda-arredondada 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="borda-arredondada 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="borda-arredondada 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="borda-arredondada 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="borda-arredondada col-12"/>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      show: true
-    }
-  },
-  methods: {
-    showComponent () {
-      this.show = true
-    },
-    hideComponent () {
-      this.show = false
-    }
-  }
-}
-</script>
-
-<style>
-.btn {
-  height: 35px
-}
-</style>
diff --git a/src/css/app.sass b/src/css/app.sass
index e12c210..41725cd 100644
--- 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
\ No newline at end of file
+    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
index 862e991..f1c69ed 100644
--- 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
index 968e990..d644abf 100644
--- 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
deleted file mode 100644
index b715db7..0000000
--- a/src/pages/SignUp.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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>
-    <sign-up-first ref="SignUpFirst"/>
-    <sign-up-second ref="SignUpSecond"/>
-    <div class="row col-8 borda justify-center q-pt-lg">
-      <q-btn :label="labelButton" color="secondary" dense class="q-px-lg btn" @click="next()"/>
-    </div>
-  </q-page>
-</template>
-
-<script>
-import SignUpFirst from '../components/SignUpFirst'
-import SignUpSecond from '../components/SignUpSecond'
-export default {
-  components: {
-    SignUpFirst,
-    SignUpSecond
-  },
-  data () {
-    return {
-      labelButton: 'Avançar'
-    }
-  },
-  methods: {
-    next () {
-      this.$refs.SignUpFirst.hideComponent()
-      this.$refs.SignUpSecond.showComponent()
-      this.labelButton = 'Criar conta'
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>
diff --git a/src/pages/SignUpFirst.vue b/src/pages/SignUpFirst.vue
new file mode 100644
index 0000000..42473c2
--- /dev/null
+++ 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
new file mode 100644
index 0000000..c772957
--- /dev/null
+++ 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
index be9c584..a506634 100644
--- 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 b/src/store/User/actions.js
similarity index 100%
rename from src/store/module-example/actions.js
rename to src/store/User/actions.js
diff --git a/src/store/module-example/getters.js b/src/store/User/getters.js
similarity index 100%
rename from src/store/module-example/getters.js
rename to src/store/User/getters.js
diff --git a/src/store/module-example/index.js b/src/store/User/index.js
similarity index 100%
rename from src/store/module-example/index.js
rename to src/store/User/index.js
diff --git a/src/store/module-example/mutations.js b/src/store/User/mutations.js
similarity index 100%
rename from src/store/module-example/mutations.js
rename to src/store/User/mutations.js
diff --git a/src/store/User/state.js b/src/store/User/state.js
new file mode 100644
index 0000000..dd32dfc
--- /dev/null
+++ 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
index dc48bd4..ac19b13 100644
--- 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
deleted file mode 100644
index 6fd747c..0000000
--- a/src/store/module-example/state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function () {
-  return {
-    //
-  }
-}