Iniziato il SignUp

2018-10-13 19:14:58 +02:00
parent a2673c0502
commit 43f2484e54
53 changed files with 3072 additions and 518 deletions
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -5,6 +5,7 @@
                    color="primary"
                    :glossy="$q.theme === 'mat'"
                    :inverted="$q.theme === 'ios'"
+                    class="toolbar"
            >
                <q-btn
                        flat
@@ -22,42 +23,26 @@
                    <div slot="subtitle">{{$t('msg.myDescriz')}}</div>
                </q-toolbar-title>

-                <q-select
-                        stack-label=""
-                        :options="[
-      { label: 'Italian',              value: 'it' },
-      { label: 'English (US)',         value: 'en-us' },
-      { label: 'Spanish',              value: 'es' },
-      { label: 'German',               value: 'de' },
+                <q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>

-    ]"
-                        v-model="lang"
-                />
+                <div class="right-itens">
+                    <!--<message-popover></message-popover>-->
+                    <label>{{ $t('msg.hello') }}</label>
+                </div>


-                <!--{{ $q.i18n.label.close }}-->
-
-                <p>{{ $t('msg.hello') }}</p>
-
            </q-toolbar>

        </q-layout-header>

-        <q-layout-drawer
-                v-model="leftDrawerOpen"
-                :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
+
+        <q-layout-drawer side="left"
+                         v-model="leftDrawerOpen"
+                         :content-class="['bg-grey-3', 'q-pa-sm']"
+                         :content-style="{padding: '0px'}"
        >
-            <q-list
-                    no-border
-                    link
-                    inset-delimiter
-            >
-                <q-list-header>Essential Links</q-list-header>
-                <q-item @click.native="openURL('http://quasar-framework.org')">
-                    <q-item-side icon="school"/>
-                    <q-item-main label="Docs" sublabel="quasar-framework.org"/>
-                </q-item>
-            </q-list>
+            <drawer></drawer>
+
        </q-layout-drawer>
    </div>
 </template>
@@ -67,7 +52,16 @@

  import {Quasar} from 'quasar';

+  import drawer from '../components/layout/drawer/drawer.vue'
+  import messagePopover from '../components/layout/toolbar/messagePopover.vue'
+  import signup from '../components/views/auth/old_signup';
+
  export default {
+    components: {
+      drawer,
+      messagePopover,
+      appsignup: signup,
+    },
    created() {
      //this.$store.dispatch('initStocks');
    },
@@ -76,6 +70,12 @@
    },
    data: function () {
      return {
+        selectOpLang: [
+          {label: 'Italian', icon: 'fa-facebook', value: 'it'},
+          {label: 'English (US)', icon: 'fa-flag-us', value: 'en-us'},
+          {label: 'Spanish', icon: 'fa-flag-es', value: 'es'},
+          {label: 'German', icon: 'fa-flag-de', value: 'de'}
+        ],
        lang: this.$q.i18n.lang,
        leftDrawerOpen: this.$q.platform.is.desktop
      }
@@ -109,3 +109,193 @@
  }

 </script>
+
+<style>
+    .layout-padding {
+        padding: 1em 4em;
+    }
+
+    @media screen and (max-width: 600px) {
+        .layout-padding {
+            padding: 1.5em .5em;
+        }
+    }
+
+    @-webkit-keyframes moveFromLeftFade {
+        from {
+            opacity: 0.3;
+            -webkit-transform: translateX(-100%);
+        }
+    }
+
+    @keyframes moveFromLeftFade {
+        from {
+            opacity: 0.3;
+            -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+        }
+    }
+
+    @-webkit-keyframes moveToRight {
+        from {
+        }
+        to {
+            -webkit-transform: translateX(100%);
+        }
+    }
+
+    @keyframes cartOut {
+        from {
+            transform: translate(0px, 0px);
+        }
+        to {
+            transform: translate(1200px, 0px);
+            animation-timing-function: ease-out;
+        }
+
+    }
+
+    @-webkit-keyframes moveToLeft {
+        from {
+        }
+        to {
+            opacity: .5;
+            -webkit-transform: translateX(-100%);
+        }
+    }
+
+    @keyframes moveToLeft {
+        from {
+        }
+        to {
+            opacity: .5;
+            -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+        }
+    }
+
+    @-webkit-keyframes moveFromRight {
+        from {
+            opacity: .7;
+            -webkit-transform: translateX(100%);
+        }
+    }
+
+    @keyframes moveFromRight {
+        from {
+            opacity: .7;
+            -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+        }
+    }
+
+    .drawer-closer .item-content {
+        margin-left: 50px !important;
+    }
+
+    .drawer-content .list-label {
+        line-height: 45px;
+    }
+
+    .drawer-content .item {
+        height: 45px;
+    }
+
+    .router-link-active .item-primary {
+        color: #027be3;
+    }
+
+    .q-picker-textfield .q-picker-textfield-label {
+        color: inherit !important;
+    }
+
+    .label-success .q-picker-textfield-label {
+        color: #4caf50 !important;
+    }
+
+    .label-error .q-picker-textfield-label {
+        color: #f44336 !important;
+    }
+
+    select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        text-indent: 1px;
+        text-overflow: '';
+    }
+
+    .label-success .q-picker-textfield:after, .label-error .q-picker-textfield:after {
+        content: "" !important;
+    }
+
+    #android-preview iframe {
+        margin-top: 64px;
+        width: 357px;
+        height: 590px;
+        background: #fff;
+    }
+
+    #ios-preview iframe {
+        margin-top: 64px;
+        width: 320px;
+        height: 590px;
+        background: #fff;
+    }
+
+    canvas {
+        width: 270px !important;
+    }
+
+    @media only screen and (min-width: 601px) {
+        .adv-form-one .timeline-badge {
+            right: auto !important;
+            left: auto !important;
+        }
+
+        .adv-form-one .timeline-content {
+            margin-left: 3.9rem;
+        }
+
+        .adv-form-one .timeline-item {
+            width: 100% !important;
+        }
+
+        .adv-form-one .timeline-title {
+            text-align: inherit !important;
+            margin-left: 3.9rem;
+        }
+
+        .timeline:before {
+            left: 1.6rem;
+        }
+    }
+
+    .adv-form-one .timeline-content .group .primary {
+        display: none !important;
+    }
+
+    .underline {
+        text-decoration: underline;
+    }
+
+    .toolbar {
+        min-height: 40px;
+    }
+
+    .right-itens a, .right-itens button {
+        margin-right: 10px;
+    }
+
+    .sel_lang {
+        padding: 5px;
+        color: white;
+    }
+
+    .fa-facebook:before {
+        content: url('../statics/icons/flag_it.svg');
+    }
+
+    .fa-flag-it:before {
+        content: url('../statics/icons/flag_it.svg');
+    }
+</style>
--- a/src/components/layout/content-header.vue
+++ b/src/components/layout/content-header.vue
@@ -27,16 +27,20 @@
  </div>
 </template>
 <script type="text/javascript">
-  import { mapMutations, mapGetters } from 'vuex'
+  import { mapActions, mapGetters } from 'vuex'
+  import * as types from '../../store/mutation-types'
  export default {
    computed: {
-      ...mapGetters(['getLayoutNeeded', 'getIsLoginPage']),
+      ...mapGetters("glob", ['getLayoutNeeded', 'getIsLoginPage']),
      routerTitle () {
        return this.$route.meta.name
      }
    },
    methods: {
-      ...mapMutations(['setLayoutNeeded', 'setMenuCollapse'])
+      ...mapActions("glob", {
+        setLayoutNeeded: types.SET_LAYOUT_NEEDED,
+        setMenuCollapse: types.SET_MENU_COLLAPSED
+      }),
    }
  }
 </script>
--- a/src/components/layout/drawer/drawer.vue
+++ b/src/components/layout/drawer/drawer.vue
@@ -1,37 +1,40 @@
 <template>
-  <q-drawer ref="leftDrawer" v-show="getLayoutNeeded">
-    <div id="profile">
-      <img :src="photo" style='height: 80px' class="inline-block">
-      <!--img src="../img/avatar-1.svg" id="avatar" class="inline-block"-->
-      <div id="user-name">
-        <span class="text-white"> {{ name }} </span>
-        <hr>
-        <span class="text-white"> {{ email }} </span>
-        <hr>
-      </div>
-      <div id="user-actions">
-        <button class="bordered blue small" ><i>person</i></button>
-        <button class="bordered blue small" ><i>lock</i></button>
-        <button class="bordered blue small" @click='logOut'><i>exit_to_app</i></button>
-      </div>
-    </div>
-    <menu-one :links="links"></menu-one>
+    <div>
+        <div id="profile">
+            <img :src="photo" style='height: 80px' class="inline-block">
+            <img src="../img/avatar-1.svg" id="avatar" class="inline-block">
+            <div id="user-name">
+                <span class="text-white"> {{ name }} </span>
+                <hr>
+                <span class="text-white"> {{ email }} </span>
+                <hr>
+            </div>
+            <div id="user-actions">
+                <button class="bordered blue small"><i>person</i></button>
+                <button class="bordered blue small"><i>lock</i></button>
+                <button class="bordered blue small" @click='logOut'><i>exit_to_app</i></button>
+            </div>
+        </div>
+
+        <menu-one v-if="getMenuCollapse" :links="links"></menu-one>
+        <menu-two v-else :links="links"></menu-two>
+
+        <div class="fixed-bottom text-center light text-italic">
+            Powered by
+            <a href="https://vuejs.org/"><img src="../img/vue-logo.png" alt=""></a>
+            <a href="http://quasar-framework.org/"><img src="../img/quasar-logo.png" alt=""></a>
+        </div>

-    <div class="fixed-bottom text-center light text-italic">
-      Powered by
-      <a href="https://vuejs.org/"><img src="../img/vue-logo.png" alt=""></a>
-      <a href="http://quasar-framework.org/"><img src="../img/quasar-logo.png" alt=""></a>
    </div>
-  </q-drawer>
 </template>
 <script type="text/javascript">
-  import { mapGetters } from 'vuex'
+  import {mapGetters} from 'vuex'
  import menuOne from './menuOne.vue'
  import menuTwo from './menuTwo.vue'
  //import firebase from 'firebase'

  export default {
-    data () {
+    data() {
      return {
        photo: '',
        userId: '',
@@ -41,31 +44,34 @@
        links: {
          Dashboard: {
            routes: [
-              { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One' }
+              {route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One'},
+              {route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'SignUp'},
+              {route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'Login'},
            ],
            show: true
          },
          Forms: {
            routes: [
-              { route: '/form', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Form find / edit' },
+              {route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Prec'},
              { route: '/embeeded', faIcon: 'fa fa-check', materialIcon: 'check', name: 'Embeeded validations' },
-              { route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
+              //{ route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
            ],
            show: false
          },
          Pages: {
            routes: [
-              { route: '/login-one', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login One' },
-              { route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
-              { route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
-              { route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
+              {route: '/login', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login'},
+              //{ route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
+              //{ route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
+              //{ route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
            ],
            show: false
          }
        }
      }
    },
-    created () {
+    created() {
+      console.log("CREA DRAWER!!!!!!!!")
      var vm = this
      /*firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
@@ -78,12 +84,12 @@
      })*/
    },
    methods: {
-      logOut () {
+      logOut() {
        //firebase.auth().signOut()
      }
    },
    computed: {
-      ...mapGetters(['getLayoutNeeded', 'getMenuCollapse'])
+      ...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse'])
    },
    components: {
      menuOne,
@@ -92,34 +98,39 @@
  }
 </script>
 <style scoped>
-  .fixed-bottom {
-    margin-bottom: 1%;
-  }
+    .fixed-bottom {
+        margin-bottom: 1%;
+    }

-  .fixed-bottom a img {
-    width: 25px;
-    height: 25px;
-  }
-  #avatar{
-    padding: 20px;
-  }
-  #profile {
-    height: 130px;
-    background-color: #009688;
-  }
-  #user-name {
-    left: 90px;
-    bottom: 77px;
-    position: relative;
-    width: 159px;
-  }
-  #user-actions {
-    left: 90px;
-    bottom: 71px;
-    position: relative;
-    width: 171px;
-  }
-  #menu-collapse {
-    margin-top: 5%;
-  }
+    .fixed-bottom a img {
+        width: 25px;
+        height: 25px;
+    }
+
+    #avatar {
+        padding: 20px;
+    }
+
+    #profile {
+        height: 130px;
+        background-color: #009688;
+    }
+
+    #user-name {
+        left: 90px;
+        bottom: 77px;
+        position: relative;
+        width: 159px;
+    }
+
+    #user-actions {
+        left: 90px;
+        bottom: 71px;
+        position: relative;
+        width: 171px;
+    }
+
+    #menu-collapse {
+        margin-top: 5%;
+    }
 </style>
--- a/src/components/layout/drawer/menuOne.vue
+++ b/src/components/layout/drawer/menuOne.vue
@@ -1,43 +1,47 @@
 <template>
-  <div class="list no-border platform-delimiter light-paragraph">
-    <template v-for="(parent, index) in links">
-      <div class="list-label cursor-pointer underline" @click="parent.show = !parent.show">{{replaceUnderlineToSpace(index)}}</div>
-      <template v-for="child in parent.routes">
-        <transition name="menu">
-          <div v-show="parent.show">
-            <router-link :to="child.route" exact tag="div" class="item item-link drawer-closer cursor-pointer" >
-              <i :class="child.faIcon" class="item-primary"></i>
-              <div class="item-content">{{child.name}}</div>
-            </router-link>
-          </div>
-        </transition>
-      </template>
-      <hr>
-    </template>
-    <div class="list-label cursor-pointer">Quasar Ready UI</div>
-    <a href="http://quasar-framework.org/quasar-play/android/index.html#/showcase" target="_blank"
-       class="item item-link drawer-closer cursor-pointer text-black" >
-      <i class="fa fa-puzzle-piece item-primary" ></i>
-      <div class="item-content">Components (55+)</div>
-    </a>
-  </div>
+    <div class="list no-border platform-delimiter light-paragraph">
+        <q-icon name="action"/>
+        <template v-for="(parent, index) in links">
+            <q-list>
+                <div class="list-label cursor-pointer" @click="parent.show = !parent.show">
+                    {{replaceUnderlineToSpace(index)}}
+                </div>
+                <template v-for="child in parent.routes">
+                    <transition name="menu">
+                        <div v-show="parent.show">
+                                <q-item link :to="child.route" exact class="item item-link drawer-closer cursor-pointer">
+                                    <i :class="child.faIcon" class="item-primary"></i>
+                                    <div class="item-content">{{child.name}}</div>
+                                </q-item>
+                        </div>
+                    </transition>
+                </template>
+            </q-list>
+            <hr>
+        </template>
+    </div>
 </template>

 <script>
  export default {
    props: ['links'],
    watch: {
-      '$route.path' () {
-        Object.keys(this.links).forEach(parentName => { this.setParentVisibilityBasedOnRoute(this.links[parentName]) })
+      '$route.path'() {
+        Object.keys(this.links).forEach(parentName => {
+          this.setParentVisibilityBasedOnRoute(this.links[parentName])
+        })
      }
    },
    computed: {
-      currentRoutePath () {
+      currentRoutePath() {
        return this.$route.path
      }
    },
    methods: {
-      setParentVisibilityBasedOnRoute (parent) {
+      created() {
+        console.log("MENUONE CREATED!");
+      },
+      setParentVisibilityBasedOnRoute(parent) {
        parent.routes.forEach(item => {
          if (this.$route.path === item.route) {
            parent.show = true
@@ -45,7 +49,7 @@
          }
        })
      },
-      replaceUnderlineToSpace (text) {
+      replaceUnderlineToSpace(text) {
        while (text.indexOf('_') !== -1) {
          text = text.replace('_', ' ')
        }
@@ -55,15 +59,36 @@
  }
 </script>
 <style scoped>
-  .list-label:first-child{
-    line-height: 50px;
-  }
-  .router-link-active {
-    color: #027be3;
-    background-color: #dadada !important;
-    border-right: 2px solid #027be3;
-  }
-  .router-link-active .item-primary{
-    color: #027be3;
-  }
+
+    .router-link-active {
+        color: #027be3;
+        background-color: #dadada !important;
+        border-right: 2px solid #027be3;
+    }
+
+    .list-label:first-child {
+        line-height: 20px;
+        padding:5px;
+        margin:1px;
+    }
+
+    .menu-enter-active, .scale-enter {
+        -webkit-animation: moveFromLeftFade .2s ease both;
+        animation: moveFromLeftFade .2s ease both;
+    }
+
+    .menu-leave-to, .scale-leave-active {
+        -webkit-animation: moveToLeft .2s ease both;
+        animation: moveToLeft .2s ease both;
+    }
+
+    .router-link-active {
+        color: #027be3;
+        background-color: #dadada !important;
+        border-right: 2px solid #027be3;
+    }
+
+    .router-link-active .item-primary {
+        color: #027be3;
+    }
 </style>
--- a/src/components/layout/drawer/menuTwo.vue
+++ b/src/components/layout/drawer/menuTwo.vue
@@ -1,45 +1,7 @@
 <template>
-  <div class="list no-border platform-delimiter light-paragraph">
-    <template v-for="(parent, index) in links">
-      <div class="list-label ">{{replaceUnderlineToSpace(index)}}</div>
-      <template v-for="child in parent.routes">
-        <q-drawer-link :icon="child.materialIcon" :to="{path: child.route, exact: true}">
-          {{child.name}}
-        </q-drawer-link>
-      </template>
-    </template>
-    <div class="list-label cursor-pointer">Quasar Ready UI</div>
-    <a href="http://quasar-framework.org/quasar-play/android/index.html#/showcase" target="_blank"
-       class="item item-link drawer-closer cursor-pointer text-black" >
-      <i class="fa fa-puzzle-piece item-primary" ></i>
-      <div class="item-content">Components (55+)</div>
-    </a>
-  </div>
 </template>

 <script>
-export default {
-  props: ['links'],
-  methods: {
-    replaceUnderlineToSpace (text) {
-      while (text.indexOf('_') !== -1) {
-        text = text.replace('_', ' ')
-      }
-      return text
-    }
-  }
-}
 </script>
 <style scoped>
-  .list-label:first-child{
-    line-height: 50px;
-  }
-  .router-link-active {
-    color: #027be3;
-    background-color: #dadada !important;
-    border-right: 2px solid #027be3;
-  }
-  .router-link-active .item-primary{
-    color: #027be3;
-  }
 </style>
--- a/src/components/layout/toolbar/messagePopover.vue
+++ b/src/components/layout/toolbar/messagePopover.vue
@@ -22,7 +22,8 @@
  </button>
 </template>
 <script>
-  import { mapGetters, mapMutations } from 'vuex'
+  import { mapGetters, mapActions } from 'vuex'
+  import * as types from '../../../store/mutation-types'
  export default {
    mounted () {
      if (this.getPosts.length < 1) {
@@ -30,13 +31,15 @@
      }
    },
    computed: {
-      ...mapGetters(['getPosts']),
+      ...mapGetters("glob", ['getPosts']),
      filteredPosts () {
        return this.getPosts.slice(0, 5)
      }
    },
    methods: {
-      ...mapMutations(['setPosts']),
+      ...mapActions("glob", {
+        'setPosts': types.SET_POSTS,
+      }),
      randomDate () {
        return new Date((new Date()) - Math.floor(Math.random() * 10000000000))
      },
--- a/src/components/layout/toolbar/toolbar.vue
+++ b/src/components/layout/toolbar/toolbar.vue
@@ -1,51 +0,0 @@
-<template>
-  <div class="toolbar" v-show="getLayoutNeeded">
-    <q-ajax-bar color="#80cbc4"></q-ajax-bar>
-    <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
-      <button>
-        <i>arrow_back</i>
-      </button>
-    </router-link>
-    <button class="hide-on-drawer-visible" @click="leftDrawer.open()" v-else >
-      <i>menu</i>
-    </button>
-    <q-toolbar-title :padding="1">
-      Quasar Admin App
-    </q-toolbar-title>
-    <div class="right-itens">
-      <message-popover></message-popover>
-      <a @click="setMobileMode(true)" class="text-white gt-sm inline">
-        <i class="fa fa-3x fa-mobile"></i>
-      </a>
-      <a href="https://github.com/odranoelBR/vue-quasar-admin-example" class="text-white">
-        <i class="fa fa-2x fa-github"></i>
-      </a>
-    </div>
-  </div>
-</template>
-<script type="text/javascript">
-  import { mapMutations, mapGetters } from 'vuex'
-  import messagePopover from './messagePopover.vue'
-  export default {
-    computed: {
-      ...mapGetters(['getLayoutNeeded']),
-      leftDrawer () {
-        return this.$parent.$children[1].$refs.leftDrawer
-      }
-    },
-    methods: {
-      ...mapMutations(['setMobileMode'])
-    },
-    components: {
-      messagePopover
-    }
-  }
-</script>
-<style scoped>
-  .toolbar{
-    min-height: 60px;
-  }
-  .right-itens a, .right-itens button{
-    margin-right: 10px;
-  }
-</style>
--- a/src/components/views/Auth.vue
+++ b/src/components/views/Auth.vue
@@ -0,0 +1,24 @@
+<template lang="html">
+  <div id="firebaseui-auth-container"></div>
+</template>
+
+<script>
+  export default {
+    name: 'auth',
+    mounted () {
+      var uiConfig = {
+        signInSuccessUrl: '/success',
+        signInOptions: [
+          //firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+          //firebase.auth.EmailAuthProvider.PROVIDER_ID
+        ]
+      }
+      //var ui = new firebaseui.auth.AuthUI(firebase.auth())
+      //ui.start('#firebaseui-auth-container', uiConfig)
+    }
+  }
+</script>
+
+<style lang="css">
+
+</style>
--- a/src/components/views/AuthSuccess.vue
+++ b/src/components/views/AuthSuccess.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>Signup succeeded</h1>
+    <button @click='logOut'>Log out</button>
+    <hr>
+    <img :src="photo" style='height: 120px'>
+    <br>
+    <p>{{name}}</p>
+    <p>{{email}}</p>
+    <p>{{userId}}</p>
+    <hr>
+    <pre>{{user}}</pre>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        photo: '',
+        userId: '',
+        name: '',
+        email: '',
+        user: {}
+      }
+    },
+    created () {
+
+    },
+    methods: {
+      logOut () {
+      }
+    }
+  }
+</script>
--- a/src/components/views/Error404.vue
+++ b/src/components/views/Error404.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="error-page window-height window-width bg-light column items-center">
+    <div class="error-code bg-primary flex items-center justify-center">
+      404
+    </div>
+    <div>
+      <div class="error-card card bg-white column items-center justify-center">
+        <i class="text-grey-5">error_outline</i>
+        <p class="caption text-center">Oops. Nothing here...</p>
+        <p class="text-center group">
+          <button v-if="canGoBack" class="grey push small" @click="goBack">
+            <i class="on-left">keyboard_arrow_left</i>
+            Go back
+          </button>
+          <router-link to="/">
+            <button class="grey push small">
+              Go home
+              <i class="on-right">home</i>
+            </button>
+          </router-link>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  data () {
+    return {
+      canGoBack: window.history.length > 1
+    }
+  },
+  methods: {
+    goBack () {
+      window.history.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.error-page
+  .error-code
+    height 50vh
+    width 100%
+    padding-top 15vh
+    font-size 30vmax
+    color rgba(255, 255, 255, .2)
+    overflow hidden
+  .error-card
+    margin-top -25px
+    width 90vw
+    max-width 600px
+    padding 50px
+    i
+      font-size 5rem
+</style>
--- a/src/components/views/auth/old_signin.vue
+++ b/src/components/views/auth/old_signin.vue
@@ -0,0 +1,102 @@
+<template>
+  <div id="signin">
+    <div class="signin-form">
+      <form @submit.prevent="onSubmit">
+        <div class="input">
+          <label for="email">Mail</label>
+          <input
+                  type="email"
+                  id="email"
+                  v-model="email">
+        </div>
+        <div class="input">
+          <label for="password">Password</label>
+          <input
+                  type="password"
+                  id="password"
+                  v-model="password">
+        </div>
+        <div class="submit">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        email: '',
+        password: ''
+      }
+    },
+    methods: {
+      onSubmit () {
+        const formData = {
+          email: this.email,
+          password: this.password,
+        }
+        console.log(formData)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .signin-form {
+    width: 400px;
+    margin: 30px auto;
+    border: 1px solid #eee;
+    padding: 20px;
+    box-shadow: 0 2px 3px #ccc;
+  }
+
+  .input {
+    margin: 10px auto;
+  }
+
+  .input label {
+    display: block;
+    color: #4e4e4e;
+    margin-bottom: 6px;
+  }
+
+  .input input {
+    font: inherit;
+    width: 100%;
+    padding: 6px 12px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+  }
+
+  .input input:focus {
+    outline: none;
+    border: 1px solid #521751;
+    background-color: #eee;
+  }
+
+  .submit button {
+    border: 1px solid #521751;
+    color: #521751;
+    padding: 10px 20px;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .submit button:hover,
+  .submit button:active {
+    background-color: #521751;
+    color: white;
+  }
+
+  .submit button[disabled],
+  .submit button[disabled]:hover,
+  .submit button[disabled]:active {
+    border: 1px solid #ccc;
+    background-color: transparent;
+    color: #ccc;
+    cursor: not-allowed;
+  }
+</style>
--- a/src/components/views/auth/old_signup.vue
+++ b/src/components/views/auth/old_signup.vue
@@ -0,0 +1,235 @@
+<template>
+    <div id="signup" class="modal is-active">
+        <div class="modal-background"></div>
+        <div class="modal-content">
+            <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+            <transition name="signup">
+                <div class="signup-form">
+                    <form @submit.prevent="validateBeforeSubmit">
+                        <label class="title">Registrazione</label>
+                        <div class="column is-12">
+                            <label class="label">{{ $t("message.Email") }}</label>
+                            <p class="control has-icon has-icon-right">
+                                <input name="email" v-model="email" v-validate="'required|email'"
+                                       :class="{'input': true, 'is-danger': ('email') }" type="text"
+                                       placeholder="Email">
+                                <i v-show="('email')" class="fa fa-warning"></i>
+                                <span v-show="('email')"
+                                      class="help is-danger">{{ ('email') }}</span>
+                            </p>
+                        </div>
+                        <div class="column is-12">
+                            <label class="label">{{ $t("message.Name") }}</label>
+                            <p class="control has-icon has-icon-right">
+                                <input name="name" v-model="name" v-validate="{required: true, minLength: 5}"
+                                       :class="{'input': true, 'is-danger': ('name') }" type="text"
+                                       v-bind:placeholder="$t('message.Name')">
+                                <i v-show="('name')" class="fa fa-warning"></i>
+                                <span v-show="('name')"
+                                      class="help is-danger">{{ ('name') }}</span>
+                            </p>
+                        </div>
+                        <div class="column is-12">
+                            <label class="label">{{ $t("message.Surname") }}</label>
+                            <p class="control has-icon has-icon-right">
+                                <input name="surname" v-model="surname" v-validate="'required|alpha'"
+                                       :class="{'input': true, 'is-danger': ('surname') }" type="text"
+                                       v-bind:placeholder="$t('message.Surname')">
+                                <i v-show="('surname')" class="fa fa-warning"></i>
+                                <span v-show="('surname')"
+                                      class="help is-danger">{{ ('surname') }}</span>
+                            </p>
+                        </div>
+                        <div class="column is-12">
+                            <label class="label">{{ $t("message.username") }}</label>
+                            <p class="control has-icon has-icon-right">
+                                <input name="name" v-model="username" v-validate="'required|alpha'"
+                                       :class="{'input': true, 'is-danger': ('username') }" type="text"
+                                       v-bind:placeholder="$t('message.username')">
+                                <i v-show="('surname')" class="fa fa-warning"></i>
+                                <span v-show="('username')"
+                                      class="help is-danger">{{ ('username') }}</span>
+                            </p>
+                        </div>
+                        <div class="column is-12">
+                            <label class="label">{{ $t("message.password") }}</label>
+                            <p class="control has-icon has-icon-right">
+                                <input name="name" v-model="password" v-validate="'required|alpha'"
+                                       :class="{'input': true, 'is-danger': ('password') }" type="password"
+                                       v-bind:placeholder="$t('message.password')">
+                                <i v-show="('password')" class="fa fa-warning"></i>
+                                <span v-show="('password')"
+                                      class="help is-danger">{{ ('password') }}</span>
+                            </p>
+                        </div>
+                        <div class="column is-12">
+                            <label class="label">{{ $t("message.repeatpassword") }}</label>
+                            <p class="control has-icon has-icon-right">
+                                <input name="name" v-model="repeatpassword" v-validate="'required|confirmed:password'"
+                                       :class="{'input': true, 'is-danger': ('repeatpassword') }" type="password"
+                                       v-bind:placeholder="$t('message.repeatpassword')">
+                                <i v-show="('repeatpassword')" class="fa fa-warning"></i>
+                                <span v-show="('repeatpassword')"
+                                      class="help is-danger">{{ ('repeatpassword') }}</span>
+                            </p>
+                        </div>
+                        <div class="column is-12">
+                            <label class="label">{{ $t("message.Phone") }}</label>
+                            <p class="control has-icon has-icon-right">
+                                <input name="phone" v-model="phone" v-validate="'required|numeric'"
+                                       :class="{'input': true, 'is-danger': ('phone') }" type="text"
+                                       placeholder="Phone">
+                                <i v-show="('phone')" class="fa fa-warning"></i>
+                                <span v-show="('phone')"
+                                      class="help is-danger">{{ ('phone') }}</span>
+                            </p>
+                        </div>
+                        <div class="column is-12">
+                            <p class="control">
+                                <button class="button is-primary submit" type="submit">Submit</button>
+                            </p>
+                        </div>
+                    </form>
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+  //import axios from '../../axios-auth';
+
+  export default {
+
+    name: 'registrazione',
+    data() {
+      return {
+        email: '',
+        name: '',
+        surname: '',
+        username: '',
+        password: '',
+        repeatpassword: '',
+        phone: '',
+        url: '',
+        terms: false,
+        myshowModal: this.$store.state.myshowModal
+      }
+    },
+    methods: {
+      validateBeforeSubmit() {
+        this.$validator.validateAll().then((result) => {
+          if (result) {
+            // eslint-disable-next-line
+            alert('Form Submitted!');
+            return;
+          }
+
+          alert($t("message.CorrectErrors"));
+        });
+      },
+      onSubmit() {
+        const formData = {
+          email: this.email,
+          age: this.age,
+          password: this.password,
+          confirmPassword: this.confirmPassword,
+          country: this.country,
+          terms: this.terms
+        }
+        console.log(formData);
+        var miaurl = '/signupNewUser?key=AIzaSyCXlVPPWknVGhfc60mt7Jkv0Xzrho7_mwc';
+        miaurl = '/signupNewUser';
+
+        /*
+        axios.post(miaurl, {
+          email: formData.email,
+          password: formData.password,
+          returnSecureToken: true
+        })
+          .then(res => console.log(res))
+          .catch(error => console.log(error))
+          */
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+
+    p{
+        margin-bottom: 5px;
+    }
+
+    .column{
+        padding : .25rem;
+    }
+    .title{
+        color:blue;
+
+    }
+    .signup-form{
+        margin-top: 5px;
+        margin-bottom: 5px;
+        padding: 10px;
+    }
+    .input label {
+        display: block;
+        color: #4e4e4e;
+    }
+
+    .input.inline label {
+        display: inline;
+    }
+
+    .input input {
+        font: inherit;
+        width: 100%;
+        padding: 6px 12px;
+        box-sizing: border-box;
+        border: 1px solid #ccc;
+    }
+
+    .input.inline input {
+        width: auto;
+    }
+
+    .input input:focus {
+        outline: none;
+        border: 1px solid #521751;
+        background-color: #eee;
+    }
+
+    .input select {
+        border: 1px solid #ccc;
+        font: inherit;
+    }
+
+    .submit{
+        font-size: 20px;
+
+    }
+    .submit button {
+        border: 1px solid #521751;
+        color: #521751;
+        padding: 10px 20px;
+        font: inherit;
+        cursor: pointer;
+    }
+
+    .submit button:hover,
+    .submit button:active {
+        background-color: #521751;
+        color: white;
+    }
+
+    .submit button[disabled],
+    .submit button[disabled]:hover,
+    .submit button[disabled]:active {
+        border: 1px solid #ccc;
+        background-color: transparent;
+        color: #ccc;
+        cursor: not-allowed;
+    }
+</style>
--- a/src/components/views/dashboard/one/dashboard.vue
+++ b/src/components/views/dashboard/one/dashboard.vue
@@ -1,4 +1,5 @@
 <template>
+
  <div class="layout-padding ">
    <div class="flex wrap gutter">
      <div class="width-1of3 sm-auto">
@@ -54,7 +55,8 @@
  import cardTotal from './cardTotal.vue'
  import cardTodo from './cardTodo.vue'
  import knobStatistics from './knobStatistics.vue'
-  import { mapMutations } from 'vuex'
+  import { mapActions } from 'vuex'
+  import * as types from '../../../../store/mutation-types'
  export default {
    name: 'Home',
    mounted () {
@@ -77,7 +79,7 @@
      }
    },
    methods: {
-      ...mapMutations(['setPosts'])
+      ...mapActions("glob", {'setPosts': types.SET_POSTS})
    },
    components: {
      cardTotal,
--- a/src/components/views/form/advancedFormOne/advancedFormOne.vue
+++ b/src/components/views/form/advancedFormOne/advancedFormOne.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div class="layout-padding ">
+      <div class="card">
+        <div class="card-title bg-teal text-white">
+          Choose photos to reveal of the user
+        </div>
+        <div class="card-content bg-white adv-form-one">
+          <q-stepper ref="stepper" @step="stepNumber => { currentStep = stepNumber }">
+            <q-step title="Find a user by username">
+              <div class="flex wrap gutter">
+                <div class="width-2of5 sm-width-1of1">
+                  <e-input
+                    label="User Name"
+                    v-model="userName"
+                    :validation="$v.userName"
+                    :validation-messages="validationMessages.userName"
+                    :value="userName"
+                  ></e-input>
+                  <button class="teal raised outline" @click="findUser()">Search</button>
+                </div>
+                <div class="width-1of2 gt-width-3of5">
+                  <card-user-data :user-data="userData" v-model="selectedAlbum"></card-user-data>
+                </div>
+              </div>
+              <div class="flex">
+                <button class="orange" v-if="selectedAlbum" @click="$refs.stepper.nextStep()">Continue</button>
+              </div>
+            </q-step>
+            <q-step title="Choose photos">
+              <card-data-table :selected-album="selectedAlbum" v-on:selectedRows="populatePhotos"></card-data-table>
+
+              <div class="flex wrap gutter">
+                <div class="width-1of4 sm-width-3of3">
+                  <button class="orange fit" @click="$refs.stepper.previousStep()">Back</button>
+                </div>
+                <div class="width-1of4 sm-width-3of3" v-show="selectedPhotos.length > 0">
+                  <button class="green fit" @click="finish()">Preview</button>
+                </div>
+              </div>
+            </q-step>
+          </q-stepper>
+        </div>
+      </div>
+    </div>
+    <q-modal ref="previewModal" class="minimized">
+      <q-gallery-slider :src="photosForGalery" ></q-gallery-slider>
+    </q-modal>
+  </div>
+</template>
+<script type="text/javascript">
+  import { required } from 'vuelidate/lib/validators'
+  import eInput from '../embeeded/eInput.vue'
+  import cardUserData from './cardUserData.vue'
+  //import cardDataTable from './cardDataTable.vue'
+  export default {
+    name: 'AdvancedFormOne',
+    data () {
+      return {
+        userName: 'Bret',
+        userData: {},
+        currentStep: '1',
+        selectedAlbum: '',
+        selectedPhotos: [],
+        validationMessages: {
+          userName: {
+            required: 'Username is required.'
+          }
+        }
+      }
+    },
+    validations: {
+      userName: {
+        required
+      }
+    },
+    computed: {
+      photosForGalery () {
+        let galery = []
+        this.selectedPhotos.forEach(photo => { galery.push(photo.data.thumbnailUrl) })
+        return galery
+      }
+    },
+    components: {
+      eInput,
+      cardUserData,
+      //cardDataTable
+    },
+    methods: {
+      finish () {
+        this.$refs.previewModal.open()
+      },
+      findUser () {
+        this.$http.jsonplaceholder
+          .get(`users?username=${this.userName}`)
+          .then(response => { this.userData = response.data[0] })
+
+        this.$v.$touch()
+      },
+      populatePhotos (photos) {
+        photos.forEach(item => { this.selectedPhotos.push(item) })
+      }
+    }
+  }
+</script>
+<style scoped>
+</style>
--- a/src/components/views/form/advancedFormOne/cardUserData.vue
+++ b/src/components/views/form/advancedFormOne/cardUserData.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="card" v-if="userData.name">
+    <div class="card-content">
+      <h6>{{userData.name}}</h6>
+      {{userData.email}}
+      <p class="caption">Choose one of the user Albums</p>
+      <div class="list">
+        <label class="item two-lines" v-for="album in filteredAlbums">
+          <div class="item-primary">
+            <q-radio @input="change(album)" v-model="selectedAlbum" :val="album.id"></q-radio>
+          </div>
+          <div class="item-content post-data">
+            <div class="ellipsis">{{album.title}}</div>
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+export default {
+  props: {
+    userData: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      userAlbums: [],
+      selectedAlbum: ''
+    }
+  },
+  computed: {
+    filteredAlbums () {
+      return this.userAlbums.slice(0, 3)
+    }
+  },
+  methods: {
+    change (album) {
+      this.$emit('input', album)
+    }
+  },
+  watch: {
+    userData () {
+      this.$http.jsonplaceholder
+        .get(`albums?userId=${this.userData.id}`)
+        .then(response => { this.userAlbums = response.data })
+    }
+  }
+}
+</script>
+<style scoped>
+  @media screen and (min-width: 600px) {
+    .post-data{
+      max-width: 110px;
+    }
+  }
+  @media screen and (min-width: 920px) {
+    .post-data{
+      max-width: 340px;
+    }
+  }
+  @media screen and (min-width: 1280px) {
+    .post-data{
+      max-width: 540px;
+    }
+  }
+
+</style>
--- a/src/components/views/form/embeeded/eDateTime.vue
+++ b/src/components/views/form/embeeded/eDateTime.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div class="floating-label" :class="labelColor">
+      <q-datetime type="datetime"
+                  class="full-width"
+                  :class="borderColor"
+                  :label="label"
+                  :value="value"
+                  :format="format"
+                  @input="change($event)"
+      ></q-datetime>
+      <transition-group name="slide-fade">
+        <span class="label text-red"
+              v-for="(key, index) in messageKeys"
+              v-show="!validation[key] && validation.$dirty"
+              :key="index">
+          {{validationMessages[key]}}
+        </span>
+      </transition-group>
+      <transition name="fade"  mode="out-in">
+        <i v-show="validAndDirty" class="text-green" >check</i>
+      </transition>
+      <transition name="fade"  mode="out-in">
+        <i v-show="invalidAndDirty" class="text-red">clear</i>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    props: {
+      format: {
+        type: String
+      },
+      validation: {
+        type: Object,
+        required: true
+      },
+      value: {
+        required: true
+      },
+      validationMessages: {},
+      label: {}
+    },
+    computed: {
+      messageKeys () {
+        return Object.keys(this.validationMessages)
+      },
+      validAndDirty () {
+        return !this.validation.$invalid && this.validation.$dirty
+      },
+      invalidAndDirty () {
+        return this.validation.$invalid && this.validation.$dirty
+      },
+      labelColor () {
+        return this.validAndDirty ? 'label-success' : '' ||
+          this.invalidAndDirty ? 'label-error animate-pop' : ''
+      },
+      borderColor () {
+        return this.validAndDirty ? 'has-success' : '' ||
+          this.invalidAndDirty ? 'has-error' : ''
+      },
+      shakeDiv () {
+        return this.invalidAndDirty ? 'animate-pop' : ''
+      }
+    },
+    methods: {
+      change (value) {
+        console.log(value)
+        this.validation.$touch()
+        this.$emit('input', value)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .has-success {
+    border-bottom: 2px solid #4caf50 !important;
+  }
+  i {
+    position: absolute;
+    top: 20px;
+    right: 7px;
+    font-size: 22px;
+  }
+  .floating-label {
+    min-height: 81px;
+  }
+  .floating-label span .label{
+    padding: 0 0.3rem 0 0;
+    font-size: 13px;
+  }
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s;
+  }
+  .fade-enter, .fade-leave-to,  .fade-leave-active  {
+    opacity: 0;
+  }
+  .slide-fade-enter-active, .slide-fade-leave-active {
+    transition: all 0.7s ease;
+  }
+  .slide-fade-enter{
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  .slide-fade-leave-active{
+    transform: translateY(-7px);
+    opacity: 0;
+  }
+
+</style>
--- a/src/components/views/form/embeeded/eInput.vue
+++ b/src/components/views/form/embeeded/eInput.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div class="floating-label" :class="shakeDiv">
+      <input required class="full-width" :class="borderColor"
+             :value="value"
+             @input="change($event.target.value)">
+      <label :class="labelColor">{{label}}</label>
+      <transition-group name="slide-fade">
+        <span class="label text-red"
+              v-for="(key, index) in messageKeys"
+              v-show="!validation[key] && validation.$dirty"
+              :key="index">
+
+          {{validationMessages[key]}}
+        </span>
+      </transition-group>
+      <transition name="fade"  mode="out-in">
+        <i v-show="validAndDirty" class="text-green" >check</i>
+      </transition>
+      <transition name="fade"  mode="out-in">
+        <i v-show="invalidAndDirty" class="text-red">clear</i>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    props: {
+      validation: {
+        type: Object,
+        required: true
+      },
+      value: {
+        required: true
+      },
+      validationMessages: {},
+      label: {}
+    },
+    computed: {
+      messageKeys () {
+        return Object.keys(this.validationMessages)
+      },
+      validAndDirty () {
+        return !this.validation.$invalid && this.validation.$dirty
+      },
+      invalidAndDirty () {
+        return this.validation.$invalid && this.validation.$dirty
+      },
+      labelColor () {
+        return this.validAndDirty ? 'text-green' : '' ||
+          this.invalidAndDirty ? 'text-red ' : ''
+      },
+      borderColor () {
+        return this.validAndDirty ? 'has-success' : '' ||
+          this.invalidAndDirty ? 'has-error' : ''
+      },
+      shakeDiv () {
+        return this.invalidAndDirty ? 'animate-pop' : ''
+      }
+    },
+    data () {
+      return {}
+    },
+    methods: {
+      change (value) {
+        this.validation.$touch()
+        this.$emit('input', value)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .has-success {
+    border-bottom: 2px solid #4caf50 !important;
+  }
+  i {
+    position: absolute;
+    top: 20px;
+    right: 7px;
+    font-size: 22px;
+  }
+  .floating-label {
+    min-height: 81px;
+  }
+  .floating-label span .label{
+    padding: 0 0.3rem 0 0;
+    font-size: 13px;
+  }
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s;
+  }
+  .fade-enter, .fade-leave-to,  .fade-leave-active  {
+    opacity: 0;
+  }
+  .slide-fade-enter-active, .slide-fade-leave-active {
+    transition: all 0.7s ease;
+  }
+  .slide-fade-enter{
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  .slide-fade-leave-active{
+    transform: translateY(-7px);
+    opacity: 0;
+  }
+
+</style>
--- a/src/components/views/form/embeeded/eSelect.vue
+++ b/src/components/views/form/embeeded/eSelect.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="floating-label" :class="labelColor">
+      <q-select :type="type"
+                class="full-width"
+                :class="borderColor"
+                :options="options"
+                :label="label"
+                :value="value"
+                @input="change($event)"
+      ></q-select>
+      <transition-group name="slide-fade">
+        <span class="label text-red"
+              v-for="(key, index) in messageKeys"
+              v-show="!validation[key] && validation.$dirty"
+              :key="index">
+          {{validationMessages[key]}}
+        </span>
+      </transition-group>
+      <transition name="fade"  mode="out-in">
+        <i v-show="validAndDirty" class="text-green" >check</i>
+      </transition>
+      <transition name="fade"  mode="out-in">
+        <i v-show="invalidAndDirty" class="text-red">clear</i>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    props: {
+      validation: {
+        type: Object,
+        required: true
+      },
+      value: {
+        required: true
+      },
+      type: {
+        required: true
+      },
+      validationMessages: {},
+      label: {},
+      options: {}
+    },
+    computed: {
+      messageKeys () {
+        return Object.keys(this.validationMessages)
+      },
+      validAndDirty () {
+        return !this.validation.$invalid && this.validation.$dirty
+      },
+      invalidAndDirty () {
+        return this.validation.$invalid && this.validation.$dirty
+      },
+      labelColor () {
+        return this.validAndDirty ? 'label-success' : '' ||
+          this.invalidAndDirty ? 'label-error animate-pop' : ''
+      },
+      borderColor () {
+        return this.validAndDirty ? 'has-success' : '' ||
+          this.invalidAndDirty ? 'has-error' : ''
+      }
+    },
+    data () {
+      return {}
+    },
+    methods: {
+      change (value) {
+        this.validation.$touch()
+        this.$emit('input', value)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .has-success {
+    border-bottom: 2px solid #4caf50 !important;
+  }
+  .label-success .q-picker-textfield-label {
+    color: #4caf50;
+  }
+  i {
+    position: absolute;
+    top: 20px;
+    right: 7px;
+    font-size: 22px;
+  }
+  .floating-label {
+    min-height: 81px;
+  }
+  .floating-label span .label{
+    padding: 0 0.3rem 0 0;
+    font-size: 13px;
+  }
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s;
+  }
+  .fade-enter, .fade-leave-to,  .fade-leave-active  {
+    opacity: 0;
+  }
+  .slide-fade-enter-active, .slide-fade-leave-active {
+    transition: all 0.7s ease;
+  }
+  .slide-fade-enter{
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  .slide-fade-leave-active{
+    transform: translateY(-7px);
+    opacity: 0;
+  }
+
+</style>
--- a/src/components/views/form/embeeded/embeeded.vue
+++ b/src/components/views/form/embeeded/embeeded.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="layout-padding ">
+      <div class="flex wrap gutter">
+        <div class="gt-md-width-1of3 width-1of1">
+          <div class="card">
+            <div class="card-title bg-teal text-white">
+              Input
+            </div>
+            <div class="card-content bg-white">
+              <e-input
+                label="Name"
+                v-model="name"
+                :validation="$v.name"
+                :validation-messages="validationMessages.name"
+                :value="name"
+              ></e-input>
+            </div>
+          </div>
+        </div>
+        <div class="gt-md-width-1of3 width-1of1">
+          <div class="card">
+            <div class="card-title bg-teal text-white">
+              Select
+            </div>
+            <div class="card-content bg-white">
+              <e-select
+                type="list"
+                label="Authentication"
+                v-model="authentication"
+                :validation="$v.authentication"
+                :validation-messages="validationMessages.authentication"
+                :value="authentication"
+                :options="options"
+              ></e-select>
+            </div>
+          </div>
+        </div>
+        <div class="gt-md-width-1of3 width-1of1">
+          <div class="card">
+            <div class="card-title bg-teal text-white">
+              DateTime
+            </div>
+            <div class="card-content bg-white">
+              <e-date-time
+                format="YYYY/MM/DD"
+                label="Date of birth"
+                v-model="dateOfBirth"
+                :validation="$v.dateOfBirth"
+                :validation-messages="validationMessages.dateOfBirth"
+                :value="dateOfBirth"
+              ></e-date-time>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex wrap justify-center">
+        <div class="width-1of3">
+          <button class="teal raised outline fit" @click="$v.$touch()">Try Submit</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  import { required, minLength, alpha } from 'vuelidate/lib/validators'
+  import eInput from './eInput.vue'
+  import eSelect from './eSelect.vue'
+  import eDateTime from './eDateTime.vue'
+  export default {
+    name: 'EmbeededValidationsElements',
+    mounted () {
+    },
+    data () {
+      return {
+        name: '',
+        authentication: '',
+        dateOfBirth: '',
+        validationMessages: {
+          name: {
+            required: 'Name is required.',
+            minLength: 'Minimum 5 characters.',
+            alpha: 'Only letters.'
+          },
+          authentication: {
+            required: 'Authentication is required.'
+          },
+          dateOfBirth: {
+            required: 'Date of birth is required.'
+          }
+        },
+        options: [
+          { label: 'Google', value: 'google' },
+          { label: 'Facebook', value: 'facebook' },
+          { label: '', value: '' }
+        ]
+      }
+    },
+    validations: {
+      name: {
+        required,
+        minLength: minLength(5),
+        alpha
+      },
+      authentication: {
+        required
+      },
+      dateOfBirth: {
+        required
+      }
+    },
+    components: {
+      eInput,
+      eSelect,
+      eDateTime
+    }
+  }
+</script>
+<style scoped></style>
--- a/src/components/views/form/simpleForm/modalAdress.vue
+++ b/src/components/views/form/simpleForm/modalAdress.vue
@@ -0,0 +1,98 @@
+<template>
+  <q-modal ref="modal" @open="startMap()">
+    <div class="card fit">
+      <div class="card-title bg-teal text-white">
+        Adress of {{user.name}}
+      </div>
+      <div class="card-content bg-white">
+        <div id="map"></div>
+        <div class="wrap gutter">
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.street">
+              <label>Street</label>
+            </div>
+          </div>
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.suite">
+              <label>Suite</label>
+            </div>
+          </div>
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.city">
+              <label>City</label>
+            </div>
+          </div>
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.zipcode">
+              <label>Zipcode</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-actions justify-center flex">
+      <div class="width-1of3 sm-width-3of3">
+        <button class="primary outline raised fit" @click="save()">Save</button>
+      </div>
+      <div class="width-1of3 sm-width-3of3">
+        <button class="teal outline raised fit" @click="$refs.modal.close()">Close</button>
+      </div>
+    </div>
+  </q-modal>
+</template>
+
+<script type="text/javascript">
+  /* eslint-disable */
+  //import { Toast } from 'quasar'
+  //import GMaps from 'gmaps'
+
+  export default {
+    data () {
+      return {
+        map: ''
+      }
+    },
+    props: ['user'],
+    methods: {
+      save () {
+        this.$http.jsonplaceholder
+          .patch(`users/${this.user.id}`, {address: this.user.address})
+          .then(response => {
+
+          })
+      },
+      startMap () {
+        let vm = this
+        /*
+        this.map = new GMaps({
+          el: '#map',
+          lat: parseFloat(this.user.address.geo.lat),
+          lng: parseFloat(this.user.address.geo.lng),
+          zoom: 3,
+          dblclick (e) {
+            vm.map.removeMarkers()
+            vm.addMarker(e.latLng.lat(), e.latLng.lng())
+          }
+        })
+        this.addMarker(this.user.address.geo.lat, this.user.address.geo.lng)
+        */
+      },
+      addMarker (lat, lng) {
+        this.map.addMarker({
+          lat: parseFloat(lat),
+          lng: parseFloat(lng)
+        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  #map {
+    width: 300px !important;
+    height: 300px !important;
+  }
+</style>
--- a/src/components/views/form/simpleForm/simpleForm.vue
+++ b/src/components/views/form/simpleForm/simpleForm.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="layout-padding ">
+      <div class="card">
+        <div class="card-title bg-teal text-white">
+          Search Users
+        </div>
+        <div class="card-content bg-white">
+          <div class="flex">
+            <div class="width-2of3 gt-bg-width-1of3 sm-auto">
+              <q-autocomplete v-model="terms" :delay="0" @search="search" :max-results="4" @selected="selected">
+                <q-search v-model="terms" placeholder="Search by name"></q-search>
+              </q-autocomplete>
+            </div>
+          </div>
+          <q-transition name="slide">
+            <user-form :user="selectedUser" v-show="selectedUser.name"></user-form>
+          </q-transition>
+        </div>
+        <q-transition name="slide">
+          <div class="card-actions justify-center flex" v-show="selectedUser.name">
+            <div class="width-1of3 sm-width-3of3">
+              <button class="primary raised outline fit" @click="save()">Save</button>
+            </div>
+            <div class="width-1of3 sm-width-3of3">
+              <button class="teal raised outline fit"  @click="$refs.modal.$children[0].open()">Check Adress</button>
+            </div>
+          </div>
+        </q-transition>
+      </div>
+    </div>
+    <modal-adress :user="selectedUser" ref="modal"></modal-adress>
+  </div>
+</template>
+<script type="text/javascript">
+  import userForm from './userForm.vue'
+  import modalAdress from './modalAdress.vue'
+  export default {
+    name: 'Form',
+    mounted () {
+      this.getUsers()
+    },
+    data () {
+      return {
+        terms: '',
+        users: [],
+        selectedUser: { address: {} }
+      }
+    },
+    computed: {
+      usersParsed () {
+        return this.users.map(user => {
+          return {
+            allData: user,
+            label: user.name,
+            secondLabel: user.email,
+            value: user.name
+          }
+        })
+      }
+    },
+    components: {
+      userForm,
+      modalAdress
+    },
+    methods: {
+      search (terms, done) {
+        setTimeout(() => {
+          done(Utils.filter(terms, {field: 'value', list: this.usersParsed}))
+        }, 500)
+      },
+      getUsers () {
+        this.$http.jsonplaceholder
+          .get('users')
+          .then(response => { this.users = response.data })
+      },
+      selected (user) {
+        this.selectedUser = user.allData
+      },
+      save () {
+        this.$http.jsonplaceholder
+          .put(`users/${this.selectedUser.id}`, this.selectedUser)
+          .then(response => {  })
+      }
+    }
+  }
+</script>
+<style>
+  #map {
+    height: 180px;
+  }
+</style>
--- a/src/components/views/form/simpleForm/userForm.vue
+++ b/src/components/views/form/simpleForm/userForm.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="flex wrap gutter">
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.username">
+          <label>Username</label>
+        </div>
+      </div>
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.phone">
+          <label>Phone</label>
+        </div>
+      </div>
+    </div>
+    <div class="flex wrap gutter">
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.website">
+          <label>Website</label>
+        </div>
+      </div>
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.email">
+          <label>Email</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    data () {
+      return {}
+    },
+    props: ['user']
+  }
+</script>
+<style scoped>
+  .flex {
+    margin-top: 1%;
+  }
+</style>
--- a/src/components/views/login/login.vue
+++ b/src/components/views/login/login.vue
@@ -20,7 +20,7 @@
                </div>
            </div>
            <div class="card-actions inline-block vertical-middle">
-                <button class="teal fit " :class="buttonClass" @click="login()">Login</button>
+                <button class="push" @click="login()">Login</button>
                <button class="red fit" :class="buttonClass" @click="login()">Login Google</button>
                <button class="blue fit" :class="buttonClass" @click="login()">Login Facebook</button>
            </div>
@@ -31,7 +31,8 @@

 <script type="text/javascript">
  /* eslint-disable */
-  import {mapMutations} from 'vuex'
+  import {mapActions} from 'vuex'
+  import * as types from '../../../store/mutation-types'
  import Vivus from 'vivus'
  import logoData from './logoData'
  import { Platform } from 'quasar'
@@ -75,7 +76,10 @@
      }
    },
    methods: {
-      ...mapMutations(['setLayoutNeeded', 'setIsLoginPage']),
+      ...mapActions("glob", {
+        'setLayoutNeeded': types.SET_LAYOUT_NEEDED,
+        'setIsLoginPage': types.SET_LOGIN_PAGE
+      }),
      login () {
        this.setLayoutNeeded(true)
        this.setIsLoginPage(false)
--- a/src/components/views/login/signup.vue
+++ b/src/components/views/login/signup.vue
@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <!--Prova URL :  {{envHelper('PROVA_PAOLO')}}-->
+
+        <q-input
+                v-model="email"
+                @blur="$v.form.email.$touch"
+                :error="$v.form.email.$error"
+                :float-label="getFormSignup.email"
+        />
+        <q-input
+                v-model="form.password"
+                @blur="$v.form.password.$touch"
+                :error="$v.form.password.$error"
+                float-label="Password"
+        />
+
+        <q-btn color="primary" @click="submit">Submit</q-btn>
+    </div>
+</template>
+
+<script>
+  import {required, email} from 'vuelidate/lib/validators'
+
+  import {mapGetters} from 'vuex'
+
+  export default {
+    data() {
+      return {
+        url: process.env.VUE_APP_URL,
+        form: {
+          email: '',
+          username: '',
+          dateOfBirth: '',
+          password: '',
+          terms: false,
+        }
+      }
+    },
+    computed:{
+      ...mapGetters("glob", [
+        'getUsername',
+        'getPassword',
+        'getEmail',
+        'getDateOfBirth',
+      ]),
+      envHelper(){
+        return env
+      }
+    },
+    validations: {
+      form: {
+        email: {required, email},
+        password: {required, minLen: minLength(6)},
+        confirmPassword: {
+          sameAs: sameAs(vm => {
+            return vm.password
+          })
+        },
+        terms: {
+          required: requiredUnless(vm => {
+            return vm.country === 'germany'
+          })
+        },
+
+      }
+    },
+    methods: {
+      submit() {
+        this.$v.form.$touch();
+
+        if (this.$v.form.$error) {
+          this.$q.notify('Please review fields again.')
+          return
+        }
+
+        const formData = {
+          email: this.email,
+          username: this.username,
+          password: this.password,
+          dateOfBirth: this.dateOfBirth,
+          confirmPassword: this.confirmPassword,
+          terms: this.terms,
+        }
+        console.log(formData);
+        this.$store.dispatch('signup', formData)
+
+        // ...
+      }
+    }
+  }
+</script>
--- a/src/components/views/pricing/cardPlanOne.vue
+++ b/src/components/views/pricing/cardPlanOne.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="card text-center">
+    <div class="card-title no-padding ">
+      <span class="label pointing-down text-white fit no-margin" :class="titleClasses">
+        <h5 class="">{{title}}</h5>
+      </span>
+    </div>
+    <div class="card-content bg-white" >
+      <h3>$ {{price}}</h3>
+      <h6 class="text-italic">{{priceSubtitle}}</h6>
+    </div>
+    <div class="card-actions">
+      <slot name="body"></slot>
+    </div>
+    <div class="card-content bg-white">
+      <button :class="buttonClasses" class="outline fit" @click="planSelected()">Choose</button>
+    </div>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
+  data () {
+    return {}
+  },
+  methods: {
+    planSelected () {
+      this.$emit('card-selected', this.cardId)
+    }
+  }
+}
+</script>
+<style scoped>
+  .label{
+    min-height: 50px;
+  }
+  h5{
+    font-weight: 300;
+    flex: 1 1 auto;
+  }
+  h3, h6{
+    font-weight: 300;
+  }
+  .label.pointing-up:before, .label.pointing-right:before, .label.pointing-down:before, .label.pointing-left:before {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+  .card {
+    width: 332px;
+  }
+</style>
--- a/src/components/views/pricing/cardPlanTwo.vue
+++ b/src/components/views/pricing/cardPlanTwo.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="card ">
+    <div class="card-content bg-white text-center" >
+      <h5>{{title}}</h5>
+      <h2 class="inline-block">$ {{price}}</h2> <span>{{priceSubtitle}}</span>
+      <div class="flex wrap gutter ">
+        <div class="auto">
+          <div class="label bg-faded text-white ">
+            Vitamin A
+            <span class="right-detail ">
+                <q-rating :class="buttonClasses" style="font-size: 1.5rem"
+                          :value="randomValueOne" :max="7" icon="thumb_up" readonly></q-rating>
+              </span>
+          </div>
+        </div>
+        <div class="auto">
+          <div class="label bg-faded text-white">
+            Vitamin K
+            <span class="right-detail">
+              <q-rating :class="buttonClasses" style="font-size: 1.5rem"
+                        :value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
+            </span>
+          </div>
+        </div>
+        <div class="auto">
+          <div class="label bg-faded text-white">
+            Vitamin B
+            <span class="right-detail">
+              <q-rating :class="buttonClasses" style="font-size: 1.5rem"
+                        :value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-actions">
+      <div class="list fit">
+        <q-collapsible group="somegroup" icon="format_list_bulleted" label="Check inside for itens" >
+          <slot name="body" ></slot>
+        </q-collapsible>
+      </div>
+    </div>
+    <div class="card-content bg-white">
+      <q-progress-button
+        :class="buttonClasses"
+        class="fit"
+        :percentage="progressBtn"
+        @click.native="workButton()"
+      >
+        Choose
+      </q-progress-button>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
+    data () {
+      return {
+        progressBtn: 0
+      }
+    },
+    computed: {
+      randomValueOne () {
+        return Math.floor((Math.random() * 5) + 1)
+      },
+      randomValueTwo () {
+        return Math.floor((Math.random() * 5) + 1)
+      },
+      randomValueThree () {
+        return Math.floor((Math.random() * 5) + 1)
+      }
+    },
+    methods: {
+      planSelected () {
+        this.$emit('card-selected', this.cardId)
+      },
+      workButton () {
+        this.stopWorkButton()
+        this.progressBtn = 15
+        this.workingButton = setInterval(() => {
+          this.progressBtn += parseInt(Math.random() * 12, 10)
+          if (this.progressBtn >= 100) {
+            this.stopWorkButton()
+          }
+        }, 500)
+      },
+      stopWorkButton (index) {
+        if (this.workingButton) {
+          clearInterval(this.workingButton)
+          this.workingButton = null
+          this.planSelected()
+        }
+        if (typeof index !== 'undefined') {
+          this.progressBtn = index
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  h5{
+    font-weight: 300;
+    text-decoration: underline;
+    margin-bottom: 5%;
+  }
+  .card {
+    min-width: 350px;
+    max-width: 700px;
+  }
+</style>
--- a/src/components/views/pricing/plansBenefits/benefitFour.vue
+++ b/src/components/views/pricing/plansBenefits/benefitFour.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="list striped">
+    <div class="item">
+      <div class="item-content">8 Oranges</div>
+    </div>
+    <div class="item">
+      <div class="item-content">6 Limons</div>
+    </div>
+    <div class="item">
+      <div class="item-content">3 Grapes</div>
+    </div>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style>
+</style>
--- a/src/components/views/pricing/plansBenefits/benefitOne.vue
+++ b/src/components/views/pricing/plansBenefits/benefitOne.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="list ">
+    <q-collapsible icon="shopping_basket" label="Citrus">
+      <div class="item">
+        <div class="item-content">50 Oranges</div>
+      </div>
+      <div class="item" >
+        <div class="item-content">45 Limes</div>
+      </div>
+    </q-collapsible>
+    <q-collapsible icon="favorite" label="Berries">
+      <div class="item">
+        <div class="item-content">43 Blackberries</div>
+      </div>
+      <div class="item">
+        <div class="item-content">22 Grapes</div>
+      </div>
+    </q-collapsible>
+    <q-collapsible icon="opacity" label="Melons">
+      <div class="item" >
+        <div class="item-content">5 Watermelon</div>
+      </div>
+      <div class="item" >
+        <div class="item-content">10 Casaba</div>
+      </div>
+    </q-collapsible>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    data () {
+      return {}
+    }
+  }
+</script>
+
+<style>
+</style>
--- a/src/components/views/pricing/plansBenefits/benefitThree.vue
+++ b/src/components/views/pricing/plansBenefits/benefitThree.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="list">
+    <div class="list-label inset">Citrus</div>
+    <div class="item">
+      <div class="item-content inset">16 Oranges</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">12 Limes</div>
+    </div>
+    <hr class="inset">
+    <div class="list-label inset">Berries</div>
+    <div class="item">
+      <div class="item-content inset">14 Blackberries</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">6 Grapes</div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    data () {
+      return {}
+    }
+  }
+</script>
+<style>
+</style>
--- a/src/components/views/pricing/plansBenefits/benefitTwo.vue
+++ b/src/components/views/pricing/plansBenefits/benefitTwo.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="list">
+    <div class="list-label inset">Citrus</div>
+    <div class="item">
+      <div class="item-content inset">24 Oranges</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">20 Limes</div>
+    </div>
+    <hr class="inset">
+    <div class="list-label inset">Berries</div>
+    <div class="item">
+      <div class="item-content inset">20 Blackberries</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">10 Grapes</div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+export default {
+  data () {
+    return {}
+  }
+}
+</script>
+<style>
+</style>
--- a/src/components/views/pricing/pricing.vue
+++ b/src/components/views/pricing/pricing.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="layout-padding">
+      <div class="label bg-secondary text-white">
+        Plan model type <span class="right-detail"><em>{{cardType}}</em></span>
+      </div>
+      <div class="group inline-block">
+        <label >
+          <q-radio v-model="cardType" val="Vertical One"></q-radio> Vertical One
+        </label>
+        <label>
+          <q-radio v-model="cardType" val="Horizontal One" class="teal"></q-radio> Horizontal One
+        </label>
+      </div>
+
+      <div class="row wrap gutter justify-center">
+        <div class="auto " v-for="planData in plansData">
+          <component :is="componentInstanceBySelectedPlanType"
+                     :title="planData.title"
+                     :title-classes="planData.titleClasses"
+                     :price="planData.price"
+                     :price-subtitle="planData.priceSubtitle"
+                     :button-classes="planData.buttonClasses"
+                     :card-id="planData.cardId"
+                     v-on:card-selected="cardSelected"
+          >
+            <div slot="body" class="fit">
+              <component :is="planData.planBenefitComponent"></component>
+            </div>
+          </component>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  /* eslint-disable */
+  import cardPlanOne from './cardPlanOne.vue'
+  import cardPlanTwo from './cardPlanTwo.vue'
+  import benefitOne from './plansBenefits/benefitOne.vue'
+  import benefitTwo from './plansBenefits/benefitTwo.vue'
+  import benefitThree from './plansBenefits/benefitThree.vue'
+  import benefitFour from './plansBenefits/benefitFour.vue'
+  //import { Toast } from 'quasar'
+  export default {
+    name: 'Pricing',
+    data () {
+      return {
+        cardType: 'Vertical One',
+        plansData: [
+          {
+            title: 'Basket Fruit One',
+            titleClasses: 'bg-primary',
+            price: '59',
+            priceSubtitle: 'per month',
+            buttonClasses: 'primary',
+            cardId: '1',
+            planBenefitComponent: 'benefit-one'
+          },
+          {
+            title: 'Basket Fruit Two',
+            titleClasses: 'bg-teal',
+            price: '39',
+            priceSubtitle: 'per month',
+            buttonClasses: 'teal',
+            cardId: '2',
+            planBenefitComponent: 'benefit-two'
+          },
+          {
+            title: 'Basket Fruit Three',
+            titleClasses: 'bg-red',
+            price: '29',
+            priceSubtitle: 'per month',
+            buttonClasses: 'red',
+            cardId: '3',
+            planBenefitComponent: 'benefit-three'
+          },
+          {
+            title: 'Basket Fruit Four',
+            titleClasses: 'bg-purple',
+            price: '19',
+            priceSubtitle: 'per month',
+            buttonClasses: 'purple',
+            cardId: '4',
+            planBenefitComponent: 'benefit-four'
+          }
+        ]
+      }
+    },
+    components: {
+      cardPlanOne,
+      benefitOne,
+      benefitTwo,
+      benefitThree,
+      benefitFour,
+      cardPlanTwo
+    },
+    computed: {
+      componentInstanceBySelectedPlanType () {
+        return this.cardType === 'Vertical One' ? 'card-plan-one' : 'card-plan-two'
+      }
+    },
+    methods: {
+      cardSelected (cardId) {
+        //Toast.create.positive({html: `Congratulations! You have choose the plan ${cardId}`})
+      },
+      chooseMostUsedPlan(cardId) {
+        return cardId == 1 ? 'animate-bounce shadow-3' : ''
+      }
+    }
+  }
+</script>
+<style scoped>
+  .inline-block {
+    margin-bottom: 7%;
+  }
+  .label{
+    padding: 1.2rem 0.7rem;
+    min-width: 260px;
+  }
+</style>
--- a/src/components/views/test/pao.vue
+++ b/src/components/views/test/pao.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="toolbar" v-show="true">
+        <q-toolbar class="toolbar">
+            <button class="hide-on-drawer-visible">
+                <i>menu</i>
+            </button>
+            <q-btn flat round dense icon="mail">
+                <q-chip floating color="red">2</q-chip>
+            </q-btn>
+            <q-toolbar-title :padding="1">
+                TestPao
+            </q-toolbar-title>
+        </q-toolbar>
+    </div>
+</template>
+<script type="text/javascript">
+</script>
+<style scoped>
+</style>