- User Profile

- DashBoard start

src/components/CSignUp/CSignUp-validate.ts

@@ -13,11 +13,13 @@ export const validations = {
         },
         password: {
           complexity,
-          required
+          required,
+          minLength: minLength(8)
         },
         username: {
           registereduser,
-          required
+          required,
+          minLength: minLength(6)
         },
         name: {
           required

src/components/CSignUp/CSignUp.scss

@@ -10,3 +10,33 @@
   align-items: center;
   justify-content: center;
 }
+
+.clCellCode {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.clCell {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.vue-country-select{
+  border-radius: 32px;
+}
+
+.clAportador{
+  background-color: lightblue;
+  border-radius: 32px;
+}
+
+.q-field--readonly {
+  border: 1px solid rgba(0,0,0,0.2);
+  border-radius: 32px;
+}

src/components/CSignUp/CSignUp.ts

@@ -10,21 +10,32 @@ import { validations, TSignup } from './CSignUp-validate'
 import { validationMixin } from 'vuelidate'
 
 import { Logo } from '../../components/logo'
+import { DefaultProfile } from '../../store/Modules/UserStore'
 
+import 'vue-country-code/dist/vue-country-code.css'
+import { serv_constants } from '@src/store/Modules/serv_constants'
+
+import VueCountryCode from 'vue-country-code'
+import { CTitleBanner } from '../CTitleBanner'
+
+Vue.use(VueCountryCode)
 // import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
 
 @Component({
   name: 'CSignUp',
   mixins: [validationMixin],
   validations,
-  components: { Logo }
+  components: { Logo, CTitleBanner }
 })
 
 export default class CSignUp extends Vue {
-  @Prop({ required: false, default: false }) public adult: boolean
+  @Prop({ required: false, default: false }) public showadultcheck: boolean
+  @Prop({ required: false, default: false }) public showcell: boolean
   public $v
   public $q
   public $t: any
+  public countryname: string = ''
+  public iamadult: boolean = false
 
   public duplicate_email: boolean = false
   public duplicate_username: boolean = false
@@ -37,6 +48,7 @@ export default class CSignUp extends Vue {
     password: process.env.TEST_PASSWORD || '',
     repeatPassword: process.env.TEST_PASSWORD || '',
     terms: !process.env.PROD,
+    profile: DefaultProfile
   }
 
   public created() {
@@ -57,7 +69,11 @@ export default class CSignUp extends Vue {
 
   get allowSubmit() {
 
-    const error = this.$v.$error || this.$v.$invalid
+    let error = this.$v.$error || this.$v.$invalid || this.signup.profile.cell.length <= 6
+
+    if (this.showadultcheck)
+      error = error || !this.iamadult
+
     return !error
   }
 
@@ -104,6 +120,7 @@ export default class CSignUp extends Vue {
   public errorMsg(cosa: string, item: any) {
     try {
       if (!item.$error) { return '' }
+      console.log('errorMsg', cosa, item)
       if (item.$params.email && !item.email) { return this.$t('reg.err.email') }
 
       if (cosa === 'repeatpassword') {
@@ -112,6 +129,10 @@ export default class CSignUp extends Vue {
         }
       }
 
+      if (!item.minLength) { return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char') }
+      if (!item.complexity) { return this.$t('reg.err.complexity') }
+// if (!item.maxLength) { return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char') }
+
       if (!item.required) { return this.$t('reg.err.required') }
       if (cosa === 'email') {
         // console.log("EMAIL " + item.isUnique);
@@ -122,12 +143,9 @@ export default class CSignUp extends Vue {
         if (!item.isUnique) { return this.$t('reg.err.duplicate_username') }
       } else if ((cosa === 'name') || (cosa === 'surname')) {
         // console.log(item);
-
       }
 
-      if (!item.complexity) { return this.$t('reg.err.complexity') }
-      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);
@@ -136,9 +154,9 @@ export default class CSignUp extends Vue {
 
   public SignUpcheckErrors(riscode: number) {
     console.log('SignUpcheckErrors', riscode)
-    if (riscode === tools.DUPLICATE_EMAIL_ID) {
+    if (riscode === serv_constants.RIS_CODE_EMAIL_ALREADY_EXIST) {
       tools.showNotif(this.$q, this.$t('reg.err.duplicate_email'))
-    } else if (riscode === tools.DUPLICATE_USERNAME_ID) {
+    } else if (riscode === serv_constants.RIS_CODE_USERNAME_ALREADY_EXIST) {
       tools.showNotif(this.$q, this.$t('reg.err.duplicate_username'))
     } else if (riscode === tools.ERR_SERVERFETCH) {
       tools.showNotif(this.$q, this.$t('fetch.errore_server'))
@@ -184,4 +202,16 @@ export default class CSignUp extends Vue {
 
   }
 
+  public intcode_change(coderec) {
+    // console.log('intcode', coderec)
+    this.signup.profile.intcode_cell = '+' + coderec.dialCode
+    this.signup.profile.iso2_cell = coderec.iso2
+  }
+
+  public selectcountry({name, iso2, dialCode}) {
+    // console.log(name, iso2, dialCode)
+    this.signup.profile.nationality = iso2
+    this.countryname = name
+  }
+
 }

src/components/CSignUp/CSignUp.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="text-center">
       <p>
-        <logo></logo>
+        <logo></logo><CTitleBanner :title="$t('pages.SignUp')"></CTitleBanner>
       </p>
     </div>
 
@@ -11,10 +11,11 @@
     <div class="q-gutter-xs">
 
       <q-input
+        class="clAportador"
         :readonly="true"
         v-model="signup.aportador_solidario"
         rounded outlined dense
-        bottom-slots
+
         :label="$t('reg.aportador_solidario')">
 
         <template v-slot:prepend>
@@ -29,7 +30,7 @@
         @blur="$v.signup.email.$touch"
         :error="$v.signup.email.$error"
         :error-message="errorMsg('email', $v.signup.email)"
-        bottom-slots
+
         debounce="1000"
         :label="$t('reg.email')">
 
@@ -44,7 +45,7 @@
         rounded outlined
         @blur="$v.signup.username.$touch"
         :error="$v.signup.username.$error"
-        bottom-slots
+
         debounce="1000"
         :error-message="errorMsg('username', $v.signup.username)"
         :label="$t('reg.username')">
@@ -60,7 +61,7 @@
         rounded outlined
         @blur="$v.signup.name.$touch"
         :error="$v.signup.name.$error"
-        bottom-slots
+
         debounce="1000"
         :error-message="errorMsg('name', $v.signup.name)"
         :label="$t('reg.name')">
@@ -76,7 +77,7 @@
         rounded outlined
         @blur="$v.signup.surname.$touch"
         :error="$v.signup.surname.$error"
-        bottom-slots
+
         debounce="1000"
         :error-message="errorMsg('surname', $v.signup.surname)"
         :label="$t('reg.surname')">
@@ -94,7 +95,7 @@
         @blur="$v.signup.password.$touch"
         :error="$v.signup.password.$error"
         :error-message="`${errorMsg('password', $v.signup.password)}`"
-        bottom-slots
+
         :label="$t('reg.password')">
 
         <template v-slot:prepend>
@@ -110,7 +111,7 @@
         @blur="$v.signup.repeatPassword.$touch"
         :error="$v.signup.repeatPassword.$error"
         :error-message="`${errorMsg('repeatpassword', $v.signup.repeatPassword)}`"
-        bottom-slots
+
         :label="$t('reg.repeatPassword')">
 
         <template v-slot:prepend>
@@ -121,6 +122,39 @@
 
       <!--:hint="$t('reg.tips.repeatpassword')"-->
 
+      <q-input
+        v-model="countryname"
+        :readonly="true"
+        rounded outlined
+
+        debounce="1000"
+        :label="$t('reg.nationality')">
+
+        <template v-slot:prepend>
+          <vue-country-code
+            @onSelect="selectcountry"
+            :preferredCountries="tools.getprefCountries"
+            :dropdownOptions="{ disabledDialCode: true }"
+          >
+
+          </vue-country-code>
+        </template>
+
+      </q-input>
+
+      <br>
+
+      <vue-tel-input
+        v-if="showcell"
+        @country-changed="intcode_change"
+        v-model="signup.profile.cell"
+        :placeholder="$t('reg.cell')"
+        :enabledCountryCode="true"
+        inputClasses="clCell"
+        wrapperClasses="clCellCode">
+      </vue-tel-input>
+
+
       <q-checkbox
         v-model="signup.terms"
         color="secondary"
@@ -132,12 +166,9 @@
       </q-checkbox>
 
       <q-checkbox
-        v-if="adult"
-        v-model="signup.onlyadult"
+        v-if="showadultcheck"
+        v-model="iamadult"
         color="secondary"
-        @blur="$v.signup.onlyadult.$touch"
-        :error="$v.signup.onlyadult.$error"
-        :error-message="`${errorMsg('onlyadult', $v.signup.onlyadult)}`"
         :label="$t('reg.onlyadult')">
       </q-checkbox>