Aggiunta la Autenticazione con x-auth

src/components/Header.vue

@@ -54,13 +54,11 @@
 
   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');

src/components/views/auth/old_signup.vue

@@ -1,235 +0,0 @@
-<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>

src/components/views/login/signup.vue

@@ -11,7 +11,6 @@
             <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
 
             <q-field
-                    :helper=""
                     :error="$v.form.email.$error"
                     :error-label="`${errorMsg('email', $v.form.email)}`"
             >
@@ -27,7 +26,6 @@
             </q-field>
 
             <q-field
-                    :helper=""
                     :error="$v.form.username.$error"
                     :error-label="`${errorMsg('username', $v.form.username)}`"
             >
@@ -42,7 +40,6 @@
             </q-field>
 
             <q-field
-                    :helper=""
                     :error="$v.form.password.$error"
                     :error-label="`${errorMsg('password', $v.form.password)}`"
             >
@@ -56,7 +53,6 @@
             </q-field>
 
             <q-field
-                    :helper=""
                     :error="$v.form.repeatPassword.$error"
                     :error-label="`${errorMsg('repeatpassword', $v.form.repeatPassword)}`"
             >
@@ -70,7 +66,6 @@
             </q-field>
 
             <q-field
-                    :helper=""
                     :error="$v.form.terms.$error"
                     :error-label="`${errorMsg('terms', $v.form.terms)}`"
             >
@@ -147,11 +142,9 @@
       env() {
         return env
       },
-      userIsAuthenticated() {
-        return this.getUsername() !== null;
-      },
     },
     validations: {
+      isAsync: true,
       form: {
         email: {
           required, email,

src/i18n.js

@@ -6,7 +6,7 @@ const messages = {
       myDescriz: 'La prima App Libera e per Tutti'
     },
     reg: {
-      richiesto: '* Richiesto',
+      richiesto: 'Campo Richiesto',
       email: 'Email',
       username : 'Nome Utente',
       password: 'Password',
@@ -34,7 +34,7 @@ const messages = {
       myDescriz: 'The first Free app for Everyone'
     },
     reg: {
-      richiesto: '* Required',
+      richiesto: 'Field Required',
       email: 'Email',
       username : 'Username',
       password: 'Password',

src/plugins/aggiuntivi.js

@@ -1,7 +0,0 @@
-// import something here
-import Vuelidate from 'vuelidate'
-
-// leave the export, even if you don't use it
-export default ({ app, router, Vue }) => {
-  Vue.use(Vuelidate);
-}

src/router/index.js

@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
 
 import routes from './routes'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 
 /*
  * If not building with SSR mode, you can

src/router/routes.js

@@ -1,4 +1,3 @@
-
 import VueI18n from 'vue-i18n';
 import Vue from 'vue'
 Vue.use(VueI18n);
@@ -10,9 +9,7 @@ function load (component) {
 
 const routes = [
   { path: '/',  component: () => import('pages/Index.vue') },
-  { path: '/prec', component: load('views/dashboard/one/dashboard'), meta: { name: 'Dashboard One' } },
   { path: '/signup', component: load('views/login/signup'), meta: { name: 'Registration' } },
-  { path: '/signin', component: load('views/login/signin'), meta: { name: 'Login' } },
   { path: '/login', component: load('views/login/login'), meta: { name: 'Login' } },
 
 ];

src/store/modules/user.js

@@ -4,7 +4,7 @@ import Vuex from 'vuex'
 Vue.use(Vuex);
 
 import * as types from '../mutation-types'
-import tools from '../../../tools/tools'
+//import tools from '../../../tools/tools'
 
 export const Errori_MongoDb = {
   CALLING: 10,
@@ -16,14 +16,17 @@ export const Errori_MongoDb = {
 
 export const state = {
   user: {
+    _id: '',
     email: '',
     username: null,
     password: '',
     ripetipassword: '',
     dateofbirth: '',
 
-    idToken: '',
-    userId: 0,
+    tokens: [{
+      access: '',
+      token: ''
+    }]
   },
   userServer: null,
   servercode: 0,
@@ -33,7 +36,7 @@ function sendRequest(url, method, mydata) {
   const options = {
     method: method,
     //mode: 'no-cors',
-    headers: new Headers({'content-type': 'application/json'}),
+    headers: new Headers({'content-type': 'application/json', 'x-auth': ''}),
     cache: "no-cache",
     body: JSON.stringify(mydata),
   };
@@ -72,11 +75,8 @@ export const mutations = {
     state.user.dateOfBirth = payload;
   },
 
-  authUser(state, userData) {
-    if (userData.email == state.user.email) {
-      state.user.idToken = userData.idToken;
-      state.user.userId = userData.email
-    }
+  authUser(state, email, mytoken) {
+    state.user.tokens.push({access: "auth", token: mytoken});
   },
   setUser(state, user) {
     state.userServer = user
@@ -86,8 +86,7 @@ export const mutations = {
     state.servercode = servercode;
   },
   clearAuthData(state) {
-    state.idToken = null
-    state.userId = null
+    state.tokens = [];
   }
 };
 
@@ -126,8 +125,17 @@ export const actions = {
 
     commit('setServerCode', Errori_MongoDb.CALLING);
 
+    var x_auth_token = null;
+
     return sendRequest(call, "POST", params)
       .then((res) => {
+        console.log("HEADERS:");
+
+        for (let header of res.headers) {
+          console.log(header);
+        }
+
+        x_auth_token = res.headers.get('x-auth');
         myres = res;
         return res.json();
       })
@@ -140,47 +148,43 @@ export const actions = {
         }
 
         commit('setServerCode', myres);
-
         commit('setUser', body);
 
         if (myres.status === 200) {
-          var idToken = body._id;
+          var iduser = body._id;
           var email = body.email;
           if (process.env.DEV) {
             console.log("EMAIL = " + body.email);
-            console.log("ID= " + idToken);
+            console.log("IDUSER= " + iduser);
+            commit('authUser', email, x_auth_token);
           }
-          commit('authUser', {
-            idToken: idToken,
-            email: email
-          });
+
           const now = new Date();
           //const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
           const expirationDate = new Date(now.getTime() + 1000);
-          localStorage.setItem('token', idToken);
-          //localStorage.setItem('userId', myres.data.localId)
+          localStorage.setItem('token', x_auth_token);
+          localStorage.setItem('userId', iduser);
           localStorage.setItem('expirationDate', expirationDate);
           //dispatch('storeUser', authData);
           //dispatch('setLogoutTimer', myres.data.expiresIn);
-          console.log("2 - FINE SIGNUP....");
           return Errori_MongoDb.OK;
         } else if (myres.status === 404) {
           if (process.env.DEV) {
             console.log("CODE = " + body.code);
           }
-          console.log("2 - FINE SIGNUP....");
           return body.code;
         } else {
           if (process.env.DEV) {
             console.log("CODE = " + body.code);
           }
-          console.log("2 - FINE SIGNUP....");
           return body.code;
         }
       })
-      .catch( (error) => {
-        console.log("ERROREEEEEEEEE");
-        console.log(error);
+      .catch((error) => {
+        if (process.env.DEV) {
+          console.log("ERROREEEEEEEEE");
+          console.log(error);
+        }
         commit('setServerCode', Errori_MongoDb.ERR_GENERICO);
         return Errori_MongoDb.ERR_GENERICO;
       });