Merge pull request #13 from paulosouzav/confirma-cadastro

Atualizando telas

src/components/confirmation/Confirmation.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="wrapp">
+    <h2 class="situation-title"> {{ msg }} </h2>
+
+    <div class="weather-image-wrapper">
+      <div class="concluded">
+        <img src="../../assets/images/tick.svg" alt="">
+      </div>
+    </div>
+
+    <router-link :to="{ name: 'Home' }">
+      <vulma-button class="confirm" color='primary'>Ir para Home</vulma-button> 
+    </router-link>
+
+  </div>
+</template>
+<script>
+export default {
+  name: 'done',
+
+  data () {
+    return {
+      msg: 'Cadastro Efetuado com Sucesso!'
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+.wrapp
+  padding 68px
+
+.confirm 
+  font-size: 20px
+  width 100%
+  height: 66px
+  position: absolute
+  bottom: 0
+  left: 50%
+  transform: translate3d(-50%,0,0)
+
+.situation-title
+  padding 30px 0
+  font-size 38px
+  color #fff
+  margin: 20px 0
+
+.concluded
+  width 200px
+  margin 0 auto
+</style>

src/components/map/Map.vue

@@ -1,25 +1,27 @@
 <template>
-  <gmap-map
-    :center="center"
-    :zoom="16"
-    :options="{styles: mapStyles}"
-    class="mapStyle"
-  >
-    <div 
-      :key="index" 
-      v-for="(marker, index) in markers">
-      <gmap-marker
-        :position="marker.position"
-        :clickable="true"
-        :draggable="false"
-        :options="{styles: markerStyles}"
-        :title="'aeho'"
-        :icon="'/static/markers/'+ marker.situacao +'.svg'"
-        @click="center=marker.position"
-      ></gmap-marker>
-    </div>
-
-  </gmap-map>
+  <div class="wrapp">
+    <gmap-map
+        :center="center"
+        :zoom="16"
+        :options="{styles: mapStyles}"
+        class="mapStyle"
+      >
+        <div 
+          :key="index" 
+          v-for="(marker, index) in markers">
+          <gmap-marker
+            :position="marker.position"
+            :clickable="true"
+            :draggable="false"
+            :options="{styles: markerStyles}"
+            :title="'aeho'"
+            :icon="'/static/markers/'+ marker.situacao +'.svg'"
+            @click="center=marker.position"
+          ></gmap-marker>
+        </div>
+
+      </gmap-map>
+  </div>
 
 </template>
 
@@ -37,12 +39,11 @@
 
   export default {
     name: 'map',
-    data () {
-      return {
-        center: {},
-        markers: []
-      }
-    },
+
+    data: () => ({
+      center: {},
+      markers: []
+    }),
 
     computed: {
       mapStyles () {
@@ -122,7 +123,19 @@
 </script> 
 
 <style lang="stylus" scoped>
-  .mapStyle
+.wrapp
+  position relative
+
+.mapStyle
     width 100%
     height calc(100vh - 68px)
+
+.abs 
+  position absolute
+  z-index 100
+  bottom 0
+
+.menu-content.menuable__content__active
+  top -203px !important
+  background #fff !important
 </style>

src/components/menu/Menu.vue

@@ -12,11 +12,12 @@
         <vulma-drawerheader @menu-clicked='$refs.drawer.close()' email='' avatar='/static/robot.svg' color='custom-hulk '></vulma-drawerheader>
       </router-link>
 
-      <vulma-menu class="menu">
-        <vulma-menuitem route='/hello' icon='fa-home' class="align-left">{{ iuvo }}</vulma-menuitem>
-        <vulma-menuitem route='/location' icon='fa-handshake-o' class="align-left">{{ askHelp }}</vulma-menuitem>
-        <vulma-menuitem route='/map' icon='fa-map-marker' class="align-left">{{ map }}</vulma-menuitem>
-        <vulma-menuitem route='/timeline' icon='fa-rss' class="align-left">{{ feed }}</vulma-menuitem>
+      <vulma-menu>
+        <vulma-menuitem route='/hello' icon='fa-home'>{{ iuvo }}</vulma-menuitem>
+        <vulma-menuitem route='/' icon='fa-home'>{{ weather }}</vulma-menuitem>
+        <vulma-menuitem route='/location' icon='fa-handshake-o'>{{ askHelp }}</vulma-menuitem>
+        <vulma-menuitem route='/map' icon='fa-map-marker'>{{ map }}</vulma-menuitem>
+        <vulma-menuitem route='/timeline' icon='fa-rss'>{{ feed }}</vulma-menuitem>
       </vulma-menu>
     </vulma-drawer>
 
@@ -36,6 +37,7 @@ export default {
     return {
       profileTile: 'Iuvo',
       iuvo: 'Iuvo',
+      weather: 'Previsão do Tempo',
       askHelp: 'Pedir Ajuda',
       feed: 'Feed',
       map: 'Mapa Risco',

src/components/signIn/SignIn.vue

@@ -17,13 +17,16 @@
       </v-text-field>
       <v-text-field
         class="color"
+        type="password"
         v-model="pass"
         label="Senha"
         data-vv-name="pass"
         required>
       </v-text-field>
 
-      <v-btn class="btn-color" @click="submit">Entrar</v-btn>
+      <router-link :to="{ name: 'Home' }">
+        <v-btn class="btn-color" @click="submit">Entrar</v-btn>
+      </router-link>
     </form>
   </div>
 </template>
@@ -33,6 +36,7 @@ export default {
 
   data: () => ({
     valid: true,
+    pass: '',
     name: '',
     nameRules: [
       v => !!v || 'Nome é obrigatório',

src/components/signUp/SignUp.vue

@@ -27,6 +27,7 @@
       <v-text-field
         class="color"
         v-model="pass"
+        type="password"
         label="Senha"
         data-vv-name="pass"
         required>
@@ -47,14 +48,17 @@
         type="checkbox">
       </v-checkbox>
 
-      <v-btn class="btn-color" @click="submit">Enviar</v-btn>
+      <router-link :to="{ name: 'Confirmation' }">
+        <v-btn class="btn-color" @click="submit">Enviar</v-btn>
+      </router-link>
+
       <v-btn class="btn-color clear" @click="clear">Limpar</v-btn>
     </form>
   </div>
 </template>
 <script>
 export default {
-  name: 'signUp',
+  name: 'Confirmation',
 
   data: () => ({
     valid: true,

src/router/index.js

@@ -12,6 +12,7 @@ import SeeMore from '@/components/more/SeeMore'
 import Help from '@/components/help/Help'
 import SignIn from '@/components/signIn/SignIn'
 import SignUp from '@/components/signUp/SignUp'
+import Confirmation from '@/components/confirmation/Confirmation'
 import * as VueGoogleMaps from 'vue2-google-maps'
 
 Vue.use(VueGoogleMaps, {
@@ -84,6 +85,11 @@ export default new Router({
       path: '/signUp',
       name: 'SignUp',
       component: SignUp
+    },
+    {
+      path: '/confirmation',
+      name: 'Confirmation',
+      component: Confirmation
     }
   ]
 })