Prima del salvataggio USER

.env

@@ -1,5 +1,16 @@
-VUE_APP_URL = "PROVA ENV! FUNZIONA"
+## SVILUPPO !!!
-PROVA_PAOLO = "PROVA ENV FUNZIONA!"
 
-PAO_APP_ID = ''
+VUE_APP_URL = "prova SVILUPPO!"
-MASTER_KEY = ''
+PROVA_PAOLO = "PROVA SVILUPPO"
+
+MONGODB_HOST = 'http://localhost:3000'
+
+PAO_APP_ID = 'KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF'
+MASTER_KEY = 'KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T'
+
+LOGO_REG = quasar-logo-full.svg
+
+
+TEST_EMAIL=paolo@prova.com
+TEST_USERNAME = paoloar77
+TEST_PASSWORD = mypassword

.env.development

@@ -1,5 +0,0 @@
-VUE_APP_URL = "prova SVILUPPO!"
-PROVA_PAOLO = "PROVA SVILUPPO"
-
-PAO_APP_ID = 'KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF'
-MASTER_KEY = 'KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T'

.env.production

@@ -0,0 +1,13 @@
+VUE_APP_URL = "PROVA ENV! FUNZIONA"
+PROVA_PAOLO = "PROVA ENV FUNZIONA!"
+
+PAO_APP_ID = ''
+MASTER_KEY = ''
+
+MONGODB_HOST = 'http://localhost:3000'
+
+LOGO_REG = 'quasar-logo-full.svg'
+
+TEST_EMAIL=
+TEST_USERNAME =
+TEST_PASSWORD =

quasar.conf.js

@@ -80,6 +80,7 @@ module.exports = function (ctx) {
         'QChip',
         'QCollapsible',
         'QInput',
+        'QCheckbox',
 
       ],
       directives: [

src/components/views/login/signup.vue

@@ -1,76 +1,168 @@
 <template>
     <div>
-        <!--Prova URL :  {{envHelper('PROVA_PAOLO')}}-->
+        <q-page padding class="">
+            <div class="text-center">
+                <p>
+                    <!--<img src="../../../assets/quasar-logo-full.svg">-->
+                    <img :src="`../../../assets/`+`${env('LOGO_REG')}`">
+                </p>
+            </div>
 
-        <q-input
+            <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
-                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>
+            <q-field
+                    :helper="$t('reg.richiesto')"
+                    :error="$v.form.email.$error"
+                    :error-label="$t('reg.email') + ` ${errorMsg($v.form.email)}`"
+            >
+                <q-input
+                        v-model="form.email"
+                        :before="[{icon: 'mail', handler () {}}]"
+                        @blur="$v.form.email.$touch"
+                        :error="$v.form.email.$error"
+                        :float-label="$t('reg.email')"
+                />
+            </q-field>
+
+            <q-field
+                    :helper="$t('reg.richiesto')"
+                    :error="$v.form.username.$error"
+                    :error-label="$t('reg.username') + ` ${errorMsg($v.form.username)}`"
+            >
+                <q-input
+                        v-model="form.username"
+                        :before="[{icon: 'person', handler () {}}]"
+                        @blur="$v.form.username.$touch"
+                        :error="$v.form.username.$error"
+                        :float-label="$t('reg.username')"
+                />
+            </q-field>
+
+            <q-field
+                    :helper="$t('reg.richiesto')"
+                    :error="$v.form.password.$error"
+                    :error-label="$t('reg.password') + ` ${errorMsg($v.form.password)}`"
+            >
+                <q-input
+                        v-model="form.password"
+                        :before="[{icon: 'vpn_key', handler () {}}]"
+                        @blur="$v.form.password.$touch"
+                        :error="$v.form.password.$error"
+                        :float-label="$t('reg.password')"
+                />
+            </q-field>
+
+            <q-field
+                    :helper="$t('reg.richiesto')"
+                    :error="$v.form.confirmpassword.$error"
+                    :error-label="$t('reg.password') + ` ${errorMsg($v.form.confirmpassword)}`"
+            >
+                <q-input
+                        v-model="form.confirmpassword"
+                        :before="[{icon: 'vpn_key', handler () {}}]"
+                        @blur="$v.form.confirmpassword.$touch"
+                        :error="$v.form.confirmpassword.$error"
+                        :float-label="$t('reg.confirmpassword')"
+                />
+            </q-field>
+
+            <q-field
+                    :helper="$t('reg.richiesto')"
+                    :error="$v.form.terms.$error"
+                    :error-label="$t('reg.terms') + ` ${errorMsg($v.form.terms)}`"
+            >
+
+                <q-checkbox
+                        v-model="form.terms"
+                        :before="[{icon: 'vpn_key', handler () {}}]"
+                        color="secondary"
+                        @blur="$v.form.terms.$touch"
+                        :error="$v.form.terms.$error"
+                        :float-label="$t('reg.terms')"
+                        :label="$t('reg.terms')"
+                />
+            </q-field>
+
+
+            <q-btn color="primary" @click="submit">Submit</q-btn>
+        </q-page>
     </div>
 </template>
 
 <script>
-  import {required, email} from 'vuelidate/lib/validators'
+  import {
+    required,
+    email,
+    numeric,
+    minValue,
+    minLength,
+    maxLength,
+    sameAs,
+    requiredUnless
+  } from 'vuelidate/lib/validators'
 
-  import {mapGetters} from 'vuex'
+  import {mapGetters, mapActions} from 'vuex'
+  import * as types from '../../../store/mutation-types'
 
   export default {
     data() {
       return {
         url: process.env.VUE_APP_URL,
         form: {
-          email: '',
+          email: process.env.TEST_EMAIL,
-          username: '',
+          username: process.env.TEST_USERNAME,
+          password: process.env.TEST_PASSWORD,
+          confirmpassword: process.env.TEST_PASSWORD,
           dateOfBirth: '',
-          password: '',
+          terms: true,
-          terms: false,
         }
       }
     },
-    computed:{
+    computed: {
       ...mapGetters("glob", [
         'getUsername',
         'getPassword',
         'getEmail',
         'getDateOfBirth',
       ]),
-      envHelper(){
+      env() {
         return env
       }
     },
     validations: {
       form: {
         email: {required, email},
-        password: {required, minLen: minLength(6)},
+        password: {required, minLength: minLength(8), maxLength: maxLength(20)},
-        confirmPassword: {
+        username: {required, minLength: minLength(6), maxLength: maxLength(20)},
-          sameAs: sameAs(vm => {
+        confirmpassword: {
-            return vm.password
+          sameAsPassword: sameAs('password')
-          })
-        },
-        terms: {
-          required: requiredUnless(vm => {
-            return vm.country === 'germany'
-          })
         },
+        terms: { required },
 
       }
     },
     methods: {
+      ...mapActions("user", {
+        signup: types.USER_SIGNUP,
+      }),
+      errorMsg(item) {
+        if (!item.$error) return '';
+        if (item.$params.email && !item.email) return this.$t('reg.err.email');
+        if (!item.required) return this.$t('reg.err.required');
+        if (!item.minLength) return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char');
+        if (!item.maxLength) return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char');
+        return '';
+      },
       submit() {
         this.$v.form.$touch();
 
+        if (!this.form.terms) {
+          this.$q.notify(this.$t('reg.err.terms'));
+          return
+        }
+
         if (this.$v.form.$error) {
-          this.$q.notify('Please review fields again.')
+          this.$q.notify(this.$t('reg.err.errore_generico'));
           return
         }
 
@@ -81,12 +173,12 @@
           dateOfBirth: this.dateOfBirth,
           confirmPassword: this.confirmPassword,
           terms: this.terms,
-        }
+        };
         console.log(formData);
-        this.$store.dispatch('signup', formData)
+        this.signup(formData);
 
         // ...
       }
-    }
+    },
   }
 </script>

src/i18n.js

@@ -1,19 +1,52 @@
 const messages = {
-  enUs: {
-    msg: {
-      hello: 'Hello!',
-      myAppName: 'FreePlanet',
-      myDescriz: 'The first Free app for Everyone'
-
-    }
-  },
   it: {
     msg: {
       hello: 'Buongiorno!',
       myAppName: 'FreePlanet',
       myDescriz: 'La prima App Libera e per Tutti'
-    }
+    },
-  }
+    reg: {
+      richiesto: '* Richiesto',
+      email: 'Email',
+      username : 'Nome Utente',
+      password: 'Password',
+      confirmpassword: 'Ripeti password',
+      terms: "Accetti i termini e le condizioni?",
+      err: {
+        required: 'è richiesto',
+        email: 'dev\'essere una email valida',
+        errore_generico: 'Si prega di compilare correttamente i campi',
+        atleast: 'dev\'essere lungo almeno di',
+        notmore: 'non dev\'essere lungo più di',
+        char: 'caratteri',
+        terms: 'Devi accettare le condizioni, per continuare.'
+      }
+    },
+  },
+  enUs: {
+    msg: {
+      hello: 'Hello!',
+      myAppName: 'FreePlanet',
+      myDescriz: 'The first Free app for Everyone'
+    },
+    reg: {
+      richiesto: '* Required',
+      email: 'Email',
+      username : 'Username',
+      password: 'Password',
+      confirmpassword: 'Repeat password',
+      terms: "Do you agree with the terms & conditions?",
+      err: {
+        required: 'is required',
+        email: 'must be a valid email',
+        errore_generico: 'Please review fields again',
+        atleast: 'must be at least',
+        notmore: 'must not be more than',
+        char: 'characters long',
+        terms: 'You need to agree with the terms & conditions.'
+      }
+    },
+  },
 };
 
 export default messages;

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 
 import example from './module-example/index'
 import glob from './modules/glob';
+import user from './modules/user';
 import types from './mutation-types'
 
 Vue.use(Vuex);
@@ -16,6 +17,7 @@ Vue.filter('time', timestamp => {
 export default new Vuex.Store({
   modules: {
     glob,
+    user,
     example
   },
 

src/store/mutation-types.js

@@ -14,6 +14,8 @@ export const USER_EMAIL = 'email';
 export const USER_PASSWORD = 'password';
 export const USER_DATEOFBIRTH = 'dateofbirth';
 
+export const USER_SIGNUP = 'signup';
+
 
 
 

tools/tools.js

@@ -0,0 +1,13 @@
+var sendRequest = function (url, method, body)
+{
+  const options = {
+    method: method,
+    mode: 'no-cors',
+    headers: new Headers({'content-type': 'application/json'}),
+    mode: 'no-cors'
+  };
+
+  options.body = JSON.stringify(body);
+
+  return fetch(url, options);
+}();