From e6808f621494a566552c50468fc06c6ccd0b2b6e Mon Sep 17 00:00:00 2001
From: paolo <paolo.arena77@gmail.com>
Date: Mon, 15 Oct 2018 21:58:29 +0200
Subject: [PATCH] Validation dei campi di registrazione: OK Invio al server e
 scrittura su DB: OK

---
 src/components/views/login/signup.vue | 108 +++++++++++++++-----------
 src/i18n.js                           |  10 ++-
 2 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/src/components/views/login/signup.vue b/src/components/views/login/signup.vue
index 6a1120c..da0d7f5 100644
--- a/src/components/views/login/signup.vue
+++ b/src/components/views/login/signup.vue
@@ -13,10 +13,12 @@
             <q-field
                     :helper="$t('reg.richiesto')"
                     :error="$v.form.email.$error"
-                    :error-label="$t('reg.email') + ` ${errorMsg($v.form.email)}`"
+                    :error-label="`${errorMsg('email', $v.form.email)}`"
             >
                 <q-input
                         v-model="form.email"
+                        :value="form.email"
+                        @change="val => { form.email = val }"
                         :before="[{icon: 'mail', handler () {}}]"
                         @blur="$v.form.email.$touch"
                         :error="$v.form.email.$error"
@@ -27,10 +29,11 @@
             <q-field
                     :helper="$t('reg.richiesto')"
                     :error="$v.form.username.$error"
-                    :error-label="$t('reg.username') + ` ${errorMsg($v.form.username)}`"
+                    :error-label="`${errorMsg('username', $v.form.username)}`"
             >
                 <q-input
-                        v-model="form.username"
+                        :value="form.username"
+                        @change="val => { form.username = val }"
                         :before="[{icon: 'person', handler () {}}]"
                         @blur="$v.form.username.$touch"
                         :error="$v.form.username.$error"
@@ -41,7 +44,7 @@
             <q-field
                     :helper="$t('reg.richiesto')"
                     :error="$v.form.password.$error"
-                    :error-label="$t('reg.password') + ` ${errorMsg($v.form.password)}`"
+                    :error-label="`${errorMsg('password', $v.form.password)}`"
             >
                 <q-input
                         v-model="form.password"
@@ -54,22 +57,22 @@
 
             <q-field
                     :helper="$t('reg.richiesto')"
-                    :error="$v.form.confirmpassword.$error"
-                    :error-label="$t('reg.password') + ` ${errorMsg($v.form.confirmpassword)}`"
+                    :error="$v.form.repeatPassword.$error"
+                    :error-label="`${errorMsg('repeatpassword', $v.form.repeatPassword)}`"
             >
                 <q-input
-                        v-model="form.confirmpassword"
+                        v-model="form.repeatPassword"
                         :before="[{icon: 'vpn_key', handler () {}}]"
-                        @blur="$v.form.confirmpassword.$touch"
-                        :error="$v.form.confirmpassword.$error"
-                        :float-label="$t('reg.confirmpassword')"
+                        @blur="$v.form.repeatPassword.$touch"
+                        :error="$v.form.repeatPassword.$error"
+                        :float-label="$t('reg.repeatPassword')"
                 />
             </q-field>
 
             <q-field
                     :helper="$t('reg.richiesto')"
                     :error="$v.form.terms.$error"
-                    :error-label="$t('reg.terms') + ` ${errorMsg($v.form.terms)}`"
+                    :error-label="`${errorMsg('terms', $v.form.terms)}`"
             >
 
                 <q-checkbox
@@ -108,8 +111,6 @@
 
   import axios from 'axios';
 
-  import { debounce } from 'quasar'
-
 
   export default {
     data() {
@@ -119,7 +120,7 @@
           email: process.env.TEST_EMAIL,
           username: process.env.TEST_USERNAME,
           password: process.env.TEST_PASSWORD,
-          confirmpassword: process.env.TEST_PASSWORD,
+          repeatPassword: process.env.TEST_PASSWORD,
           dateOfBirth: '',
           terms: true,
         },
@@ -152,35 +153,30 @@
       form: {
         email: {
           required, email,
+          isUnique: value => {
+            if (value === '') return true;
+            return axios.get(process.env.MONGODB_HOST + '/email/' + value)
+              .then(res => {
+                return (res.status !== 200)
+              }).catch((e) => {
+                return true;
+              })
+          }
         },
         password: {required, minLength: minLength(8), maxLength: maxLength(20)},
         username: {
           required, minLength: minLength(6), maxLength: maxLength(20),
-          unique: value => {
+          isUnique: value => {
             if (value === '') return true;
-            debounce(function() {
-              return axios.get(process.env.MONGODB_HOST + '/users/' + value)
-                .then(res => {
-                  console.log("STATUS: ");
-                  console.log(res.status);
-                  if (res.status !== 200)
-                    return true;
-                  else
-                    return false;
-                }).then(ris => {
-                  setTimeout(() => {
-                    //
-                    return ris;
-                  }, 1000);
-                })
-                .catch((e) => {
-                  console.log(e);
-                  return true;
-                })
-            }, 2000);
+            return axios.get(process.env.MONGODB_HOST + '/users/' + value)
+              .then(res => {
+                return (res.status !== 200)
+              }).catch((e) => {
+                return true;
+              })
           }
         },
-        confirmpassword: {
+        repeatPassword: {
           sameAsPassword: sameAs('password')
         },
         terms: {required},
@@ -191,20 +187,40 @@
       ...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 '';
+      errorMsg(cosa, item) {
+        try {
+          if (!item.$error) return '';
+          if (item.$params.email && !item.email) return this.$t('reg.err.email');
+
+          if (cosa === 'repeatpassword') {
+            if (!item.sameAsPassword) {
+              return this.$t('reg.err.sameaspassword');
+            }
+          }
+
+          if (cosa === 'email') {
+            //console.log("EMAIL " + item.isUnique);
+            //console.log(item);
+            if (!item.isUnique) return this.$t('reg.err.duplicate_email');
+          } else if (cosa === 'username') {
+            //console.log(item);
+            if (!item.isUnique) return this.$t('reg.err.duplicate_username');
+          }
+
+          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 '';
+        } catch (error) {
+          //console.log("ERR : " + error);
+        }
       },
-      checkErrors(riscode){
+      checkErrors(riscode) {
         //console.log("RIS = " + riscode);
         if (riscode === Errori_MongoDb.DUPLICATE_EMAIL_ID) {
           this.$q.notify(this.$t('reg.err.duplicate_email'));
-        }else if (riscode === Errori_MongoDb.DUPLICATE_USERNAME_ID) {
-            this.$q.notify(this.$t('reg.err.duplicate_username'));
+        } else if (riscode === Errori_MongoDb.DUPLICATE_USERNAME_ID) {
+          this.$q.notify(this.$t('reg.err.duplicate_username'));
         } else if (riscode === Errori_MongoDb.OK) {
           this.$router.push('/');
         } else {
diff --git a/src/i18n.js b/src/i18n.js
index b356405..89a4c8e 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -10,7 +10,7 @@ const messages = {
       email: 'Email',
       username : 'Nome Utente',
       password: 'Password',
-      confirmpassword: 'Ripeti password',
+      repeatPassword: 'Ripeti password',
       terms: "Accetti i termini e le condizioni?",
       err: {
         required: 'è richiesto',
@@ -21,7 +21,8 @@ const messages = {
         char: 'caratteri',
         terms: 'Devi accettare le condizioni, per continuare.',
         duplicate_email: 'l\'Email è già stata registrata',
-        duplicate_username: 'L\'Username è stato già utilizzato'
+        duplicate_username: 'L\'Username è stato già utilizzato',
+        sameaspassword: 'Le password devono essere identiche',
       }
     },
   },
@@ -36,7 +37,7 @@ const messages = {
       email: 'Email',
       username : 'Username',
       password: 'Password',
-      confirmpassword: 'Repeat password',
+      repeatPassword: 'Repeat password',
       terms: "Do you agree with the terms & conditions?",
       err: {
         required: 'is required',
@@ -47,7 +48,8 @@ const messages = {
         char: 'characters long',
         terms: 'You need to agree with the terms & conditions.',
         duplicate_email: 'Email was already registered',
-        duplicate_username: 'Username is already taken'
+        duplicate_username: 'Username is already taken',
+        sameaspassword: 'Passwords must be identical',
       }
     },
   },