From 9e5bd85328bdb595cf7c9fb622fcd9c51fe56876 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Sun, 29 Dec 2019 23:29:56 +0100
Subject: [PATCH] - User Profile - DashBoard start

---
 src/boot/vue-idb.ts                           |   1 -
 src/common/pattern.ts                         |   2 +-
 src/components/CGridTableRec/CGridTableRec.ts |  24 +-
 .../CGridTableRec/CGridTableRec.vue           | 313 +++++++++---------
 src/components/CMyFieldDb/CMyFieldDb.ts       |  12 +
 src/components/CMyFieldDb/CMyFieldDb.vue      |  73 ++++
 src/components/CMyPopupEdit/CMyPopupEdit.ts   |  16 +
 src/components/CMyPopupEdit/CMyPopupEdit.vue  |  49 +++
 src/components/CSignIn/CSignIn.ts             |   8 +-
 src/components/CSignUp/CSignUp-validate.ts    |   6 +-
 src/components/CSignUp/CSignUp.scss           |  30 ++
 src/components/CSignUp/CSignUp.ts             |  48 ++-
 src/components/CSignUp/CSignUp.vue            |  57 +++-
 src/components/CTitleBanner/CTitleBanner.ts   |   1 +
 src/components/CTitleBanner/CTitleBanner.vue  |   4 +-
 src/model/UserStore.ts                        |   3 +
 src/model/signup-option.ts                    |   2 +
 src/statics/i18n.js                           |  32 +-
 src/store/Modules/UserStore.ts                |  13 +-
 src/store/Modules/fieldsTable.ts              |   5 +-
 src/store/Modules/serv_constants.ts           |   4 +
 src/store/Modules/tools.ts                    |  12 +-
 src/views/login/signup/signup.vue             |   2 +-
 23 files changed, 516 insertions(+), 201 deletions(-)

diff --git a/src/boot/vue-idb.ts b/src/boot/vue-idb.ts
index afa362b..1a817ef 100644
--- a/src/boot/vue-idb.ts
+++ b/src/boot/vue-idb.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import VueIdb from 'vue-idb'
 
 export default ({ Vue }) => {
diff --git a/src/common/pattern.ts b/src/common/pattern.ts
index 01e1d59..12ffed3 100644
--- a/src/common/pattern.ts
+++ b/src/common/pattern.ts
@@ -17,6 +17,6 @@ export class Patterns {
    *
    *  8 to 20 characters string with at least one digit, one upper case letter, one lower case letter and one special symbol
    */
-  public static Password: RegExp = /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,30})/i
+  public static Password: RegExp = /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20})/i
 
 }
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index 74d3d72..a51bf05 100644
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -29,7 +29,7 @@ export default class CGridTableRec extends Vue {
   public mytable: string
   public mytitle: string
   public mycolumns: any[]
-  public colkey: string
+  public colkey: string = ''
   public search: string = ''
 
   public tablesel: string = ''
@@ -66,7 +66,7 @@ export default class CGridTableRec extends Vue {
   public rowclicksel: any = null
   public colclicksel: any = null
 
-  public selected: any = []
+  public selected = []
 
   get lists() {
     return lists
@@ -517,8 +517,11 @@ export default class CGridTableRec extends Vue {
 
   public clickrowcol(row, col) {
     if (!this.canEdit) {
-      if (this.rowclicksel) {
+      if (!this.selected[0]) {
+        const uguali = this.rowclicksel._id === row._id
+        console.log('id', this.rowclicksel._id, 'id2', row._id)
         this.rowclicksel = null
+        this.colclicksel = null
       } else {
         this.rowclicksel = row
         this.colclicksel = col
@@ -532,4 +535,19 @@ export default class CGridTableRec extends Vue {
     else
       return ''
   }
+  public getSelectedString() {
+    return this.selected.length === 0 ? '' : `${this.selected.length} record${this.selected.length > 1 ? 's' : ''} selected of ${this.serverData.length}`
+  }
+  public selectionclick(details) {
+    console.log('selectionclick this.selected', this.selected, 'details', details)
+    if (details.added) {
+      this.rowclicksel = details.rows[0]
+      this.colclicksel = details.keys[0]
+    } else {
+      this.rowclicksel = null
+      this.colclicksel = null
+    }
+
+    console.log('this.rowclicksel', this.rowclicksel)
+  }
 }
diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue
index 9ecf2cd..76152f1 100644
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -1,168 +1,181 @@
 <template>
-    <div class="q-pa-xs">
+  <div class="q-pa-xs">
 
-        <q-table
-                :data="serverData"
-                :columns="mycolumns"
-                :filter="myfilter"
-                :pagination.sync="pagination"
-                :row-key="colkey"
-                :loading="loading"
-                @request="onRequest"
-                binary-state-sort
-                :visible-columns="colVisib"
-                :no-data-label="nodataLabel"
-                :no-results-label="noresultLabel"
+
+    <q-table
+      :data="serverData"
+      :columns="mycolumns"
+      :filter="myfilter"
+      :pagination.sync="pagination"
+      :row-key="colkey"
+      :loading="loading"
+      @request="onRequest"
+      @selection="selectionclick"
+      binary-state-sort
+      :visible-columns="colVisib"
+      :no-data-label="nodataLabel"
+      :no-results-label="noresultLabel"
+      :selected-rows-label="getSelectedString"
+      selection="single"
+      :selected.sync="selected"
+    >
+
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th>
+
+          </q-th>
+          <q-th
+            v-for="col in props.cols"
+            v-if="colVisib.includes(col.field + col.subfield)"
+            :key="col.name"
+            :props="props"
+            class="text-italic text-weight-bold"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+
+      <template v-slot:top="props">
+        <div class="col-2 q-table__title">{{ mytitle }}</div>
+
+        <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
+
+        <q-input v-model="search" filled dense type="search" debounce="500" hint="Search"
+                 v-on:keyup.enter="doSearch">
+          <template v-slot:after>
+            <q-btn v-if="mytable" label="" color="primary" @click="refresh" icon="search"></q-btn>
+          </template>
+        </q-input>
+        <q-toggle v-if="mytable" v-model="canEdit" :val="lists.MenuAction.CAN_EDIT_TABLE" class="q-mx-sm"
+                  :label="$t('grid.editvalues')" @input="changefuncAct"
+        ></q-toggle>
+
+        <q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
+               :label="$t('grid.addrecord')"
+               @click="createNewRecord"></q-btn>
+
+        <q-space/>
+
+
+        <!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
+
+        <q-select
+          v-if="mytable"
+          v-model="colVisib"
+          rounded
+          outlined
+          multiple
+          dense
+          options-dense
+          :display-value="$t('grid.columns')"
+          emit-value
+          map-options
+          :options="mycolumns"
+          option-value="name"
+          style="min-width: 150px"
+          @input="changeCol">
+
+        </q-select>
+
+        <q-select v-if="tablesList"
+                  v-model="tablesel"
+                  rounded
+                  outlined
+                  dense
+                  :options="tablesList"
+                  :display-value="mytitle"
+                  emit-value
+                  @input="changeTable"
         >
+        </q-select>
 
 
-            <template v-slot:header="props">
-                <q-tr :props="props">
-                    <q-th
-                            v-for="col in props.cols"
-                            v-if="colVisib.includes(col.field + col.subfield)"
-                            :key="col.name"
-                            :props="props"
-                            class="text-italic text-weight-bold"
-                    >
-                        {{ col.label }}
-                    </q-th>
-                </q-tr>
-            </template>
+        <q-inner-loading :showing="spinner_visible">
+          <q-spinner-tail size="2em" color="primary"/>
+        </q-inner-loading>
 
-            <template v-slot:top="props">
-                <div class="col-2 q-table__title">{{ mytitle }}</div>
+      </template>
 
-                <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
+      <template v-slot:body="props">
 
-                <q-input v-model="search" filled dense type="search" debounce="500" hint="Search"
-                         v-on:keyup.enter="doSearch">
-                    <template v-slot:after>
-                        <q-btn v-if="mytable" label="" color="primary" @click="refresh" icon="search"></q-btn>
-                    </template>
-                </q-input>
-                <q-toggle v-if="mytable" v-model="canEdit" :val="lists.MenuAction.CAN_EDIT_TABLE" class="q-mx-sm"
-                          :label="$t('grid.editvalues')" @input="changefuncAct"
-                ></q-toggle>
+        <q-tr :props="props">
+          <q-td auto-width>
+            <q-checkbox dense v-model="props.selected"></q-checkbox>
+          </q-td>
+          <q-td v-for="col in mycolumns" :key="col.name" :props="props"
+                v-if="colVisib.includes(col.field + col.subfield)">
+            <div :class="getclrow(props.row)">
+              <CMyPopupEdit :canEdit="canEdit"
+                            :col="col"
+                            :row.sync="props.row"
+                            :field="col.field"
+                            :subfield="col.subfield"
+                            minuteinterval="1"
+                            @save="SaveValue"
+                            @show="selItem(props.row, col)"
+                            @showandsave="showandsel">
 
-                <q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
-                       :label="$t('grid.addrecord')"
-                       @click="createNewRecord"></q-btn>
-
-                <q-space/>
-
-
-                <!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
-
-                <q-select
-                        v-if="mytable"
-                        v-model="colVisib"
-                        rounded
-                        outlined
-                        multiple
-                        dense
-                        options-dense
-                        :display-value="$t('grid.columns')"
-                        emit-value
-                        map-options
-                        :options="mycolumns"
-                        option-value="name"
-                        style="min-width: 150px"
-                        @input="changeCol">
-
-                </q-select>
-
-                <q-select v-if="tablesList"
-                          v-model="tablesel"
-                          rounded
-                          outlined
-                          dense
-                          :options="tablesList"
-                          :display-value="mytitle"
-                          emit-value
-                          @input="changeTable"
-                >
-                </q-select>
-
-
-                <q-inner-loading :showing="spinner_visible">
-                    <q-spinner-tail size="2em" color="primary"/>
-                </q-inner-loading>
-
-            </template>
-
-            <q-tr v-if="mytable" slot="body" slot-scope="props" :props="props">
-                <q-td v-for="col in mycolumns" :key="col.name" :props="props"
-                      v-if="colVisib.includes(col.field + col.subfield)" @click="clickrowcol(props.row, col)">
-                        <div :class="getclrow(props.row)">
-                        <CMyPopupEdit :canEdit="canEdit"
-                                      :col="col"
-                                      :row.sync="props.row"
-                                      :field="col.field"
-                                      :subfield="col.subfield"
-                                      minuteinterval="1"
-                                      @save="SaveValue"
-                                      @show="selItem(props.row, col)"
-                                      @showandsave="showandsel">
-
-                        </CMyPopupEdit>
-                        </div>
-                </q-td>
-                <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colExtra.includes(col.name)">
-                    <div v-if="col.action && visCol(col)">
-                        <q-btn flat round color="red" :icon="col.icon" size="sm"
-                               @click="clickFunz(props.row, col)"></q-btn>
-                    </div>
-                </q-td>
-            </q-tr>
-            <!--
-                            <q-btn
-                                    flat round dense
-                                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
-                                    @click="props.toggleFullscreen"
-                                    class="q-ml-md">
-                            </q-btn>
-            -->
-            <!---->
-        </q-table>
-
-        <div v-if="rowclicksel">
-            <CTitleBanner title="Record:"></CTitleBanner>
-
-            <div class="q-ma-xs q-pa-xs text-center rounded-borders q-list--bordered"
-                 v-for="mycol in mycolumns" :key="mycol.name"
-                 v-if="colVisib.includes(mycol.field + mycol.subfield)">
-                <div class="row items-center justify-center q-gutter-md q-ma-xs">
-                    <div class="q-ma-xs">
-                        <q-field rounded outlined bg-color="orange-3" dense>
-                            <template v-slot:control>
-                                <div class="self-center full-width no-outline" tabindex="0">{{mycol.label}}</div>
-                            </template>
-                        </q-field>
-                    </div>
-                    <div class="q-ma-sm q-pa-sm colmodif col-grow rounded-borders " style="border: 1px solid #bbb"
-                         @click="colclicksel = mycol">
-                        <CMyPopupEdit :canEdit="true"
-                                      view="field"
-                                      :col="mycol"
-                                      :showall="true"
-                                      :row="rowclicksel"
-                                      :field="mycol.field"
-                                      :subfield="mycol.subfield"
-                                      @save="SaveValdb"
-                                      @show="selItem(rowclicksel, mycol)"
-                                      @showandsave="showandsel">
-
-                        </CMyPopupEdit>
-                    </div>
-                </div>
+              </CMyPopupEdit>
             </div>
+          </q-td>
+          <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colExtra.includes(col.name)">
+            <div v-if="col.action && visCol(col)">
+              <q-btn flat round color="red" :icon="col.icon" size="sm"
+                     @click="clickFunz(props.row, col)"></q-btn>
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <!--
+                      <q-btn
+                              flat round dense
+                              :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
+                              @click="props.toggleFullscreen"
+                              class="q-ml-md">
+                      </q-btn>
+      -->
+      <!---->
+    </q-table>
+
+    <div v-if="rowclicksel">
+      <CTitleBanner title="Record:"></CTitleBanner>
+
+      <div class="q-ma-xs q-pa-xs text-center rounded-borders q-list--bordered"
+           v-for="mycol in mycolumns" :key="mycol.name"
+           v-if="colVisib.includes(mycol.field + mycol.subfield)">
+        <div class="row items-center justify-center q-gutter-md q-ma-xs">
+          <div class="q-ma-xs">
+            <q-field rounded outlined bg-color="orange-3" dense>
+              <template v-slot:control>
+                <div class="self-center full-width no-outline" tabindex="0">{{mycol.label}}</div>
+              </template>
+            </q-field>
+          </div>
+          <div class="q-ma-sm q-pa-sm colmodif col-grow rounded-borders " style="border: 1px solid #bbb"
+               @click="colclicksel = mycol">
+            <CMyPopupEdit :canEdit="true"
+                          view="field"
+                          :col="mycol"
+                          :showall="true"
+                          :row="rowclicksel"
+                          :field="mycol.field"
+                          :subfield="mycol.subfield"
+                          @save="SaveValdb"
+                          @show="selItem(rowclicksel, mycol)"
+                          @showandsave="showandsel">
+
+            </CMyPopupEdit>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts" src="./CGridTableRec.ts">
 </script>
 
 <style lang="scss" scoped>
-    @import './CGridTableRec.scss';
+  @import './CGridTableRec.scss';
 </style>
diff --git a/src/components/CMyFieldDb/CMyFieldDb.ts b/src/components/CMyFieldDb/CMyFieldDb.ts
index 5488b04..841e7e9 100644
--- a/src/components/CMyFieldDb/CMyFieldDb.ts
+++ b/src/components/CMyFieldDb/CMyFieldDb.ts
@@ -30,12 +30,14 @@ export default class CMyFieldDb extends MixinBase {
   public myvalue = ''
   public col: IColGridTable = { name: 'test' }
   public canEdit: boolean = true
+  public countryname = ''
 
   public created() {
     this.myvalue = this.getValDb(this.mykey, this.serv, '', this.table, this.mysubkey)
     this.col.jointable = this.jointable
     this.col.fieldtype = this.type
     this.col.label = this.title
+
     // console.log('created', this.myvalue)
   }
 
@@ -101,4 +103,14 @@ export default class CMyFieldDb extends MixinBase {
     this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey)
   }
 
+  public selectcountry({name, iso2, dialCode}) {
+    // console.log(name, iso2, dialCode)
+    this.myvalue = iso2
+    this.countryname = name
+  }
+
+  public intcode_change(coderec) {
+    this.myvalue = '+' + coderec.dialCode
+  }
+
 }
diff --git a/src/components/CMyFieldDb/CMyFieldDb.vue b/src/components/CMyFieldDb/CMyFieldDb.vue
index 8d44c71..c643b48 100644
--- a/src/components/CMyFieldDb/CMyFieldDb.vue
+++ b/src/components/CMyFieldDb/CMyFieldDb.vue
@@ -31,6 +31,33 @@
                                 :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
                     </div>
                     <!-- Show Value -->
+                    <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+                      <q-input
+                        input-class="cursor-pointer"
+                        :readonly="true"
+                        v-model="countryname"
+                        rounded outlined
+                        debounce="1000"
+                        :label="$t('reg.nationality')">
+
+                        <div class="hidden">
+                          <vue-country-code
+                            :defaultCountry="myvalue"
+                            :disabledFetchingCountry="true"
+                            @onSelect="selectcountry"
+                            :preferredCountries="tools.getprefCountries"
+                            :dropdownOptions="{ disabledDialCode: true }">
+
+                          </vue-country-code>
+                        </div>
+
+                      </q-input>
+                    </div>
+                    <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+
+                      {{ myvalue }}
+
+                    </div>
                     <div v-else-if="type === tools.FieldType.multiselect">
                         <CMyChipList
                                 :type="tools.FieldType.multiselect"
@@ -111,6 +138,52 @@
                                        :useinput="false">
                             </CMySelect>
                         </div>
+                        <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+                          <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+                            <q-input
+                              v-model="countryname"
+                              :readonly="true"
+                              rounded outlined
+                              debounce="1000"
+                              :label="$t('reg.nationality')">
+
+                              <template v-slot:prepend>
+                                <div style="font-size: 1rem;">
+                                <vue-country-code
+                                  :defaultCountry="myvalue"
+                                  :disabledFetchingCountry="true"
+                                  @onSelect="selectcountry"
+                                  :preferredCountries="tools.getprefCountries"
+                                  :dropdownOptions="{ disabledDialCode: true }">
+
+                                </vue-country-code>
+                                </div>
+                              </template>
+                            </q-input>
+                            <div style="height: 180px;">
+
+                            </div>
+                          </div>
+                        </div>
+                        <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+
+                          <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+                            <vue-tel-input
+                              @country-changed="intcode_change"
+                              v-model="myvalue"
+                              :disabledFetchingCountry="true"
+                              :preferredCountries="tools.getprefCountries"
+                              :placeholder="$t('reg.cell')"
+                              :enabledCountryCode="true"
+                              inputClasses="clCell"
+                              wrapperClasses="clCellCode">
+                            </vue-tel-input>
+                            <div style="height: 180px;">
+
+                            </div>
+                          </div>
+
+                        </div>
                         <div v-else-if="type === tools.FieldType.multiselect">
                             <q-select
                                     v-model="myvalue"
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.ts b/src/components/CMyPopupEdit/CMyPopupEdit.ts
index bd47ed6..4eaf172 100644
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -28,6 +28,7 @@ export default class CMyPopupEdit extends Vue {
   @Prop({ required: false, default: '5' }) public minuteinterval
 
   public myvalue = ''
+  public countryname = ''
 
   get tools() {
     return tools
@@ -44,6 +45,10 @@ export default class CMyPopupEdit extends Vue {
     this.$emit('update:row', newval)
   }
 
+  public updatedata() {
+    this.mounted()
+  }
+
   public mounted() {
     if ((this.subfield !== '') && (this.subfield !== '')) {
       if (this.row[this.field] === undefined) {
@@ -165,4 +170,15 @@ export default class CMyPopupEdit extends Vue {
   public changeCol() {
 
   }
+
+  public selectcountry({name, iso2, dialCode}) {
+    // console.log(name, iso2, dialCode)
+    this.myvalue = iso2
+    this.countryname = name
+  }
+
+  public intcode_change(coderec) {
+    this.myvalue = '+' + coderec.dialCode
+  }
+
 }
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.vue b/src/components/CMyPopupEdit/CMyPopupEdit.vue
index 0f5a2af..1ef253b 100644
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -12,6 +12,16 @@
 
             </CGallery>
         </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+          <div>
+            {{myvalue}}
+          </div>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+          <div>
+            {{myvalue}}
+          </div>
+        </div>
         <div v-else>
             <!-- Edit Value -->
             <span v-if="col.fieldtype === tools.FieldType.date">
@@ -124,6 +134,45 @@
                                    :useinput="false">
                         </CMySelect>
                     </div>
+                    <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+                      <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+                        <q-input
+                          v-model="countryname"
+                          :readonly="true"
+                          rounded outlined
+                          debounce="1000"
+                          :label="$t('reg.nationality')">
+
+                          <template v-slot:prepend>
+                            <div style="font-size: 1rem;">
+                              <vue-country-code
+                                :defaultCountry="myvalue"
+                                :disabledFetchingCountry="true"
+                                @onSelect="selectcountry"
+                                :preferredCountries="tools.getprefCountries"
+                                :dropdownOptions="{ disabledDialCode: true }">
+
+                              </vue-country-code>
+                            </div>
+                          </template>
+                        </q-input>
+                        <div style="height: 180px;">
+
+                        </div>
+                      </div>
+                    </div>
+                    <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+
+                      <vue-tel-input
+                        @country-changed="intcode_change"
+                        v-model="myvalue"
+                        :placeholder="$t('reg.cell')"
+                        :enabledCountryCode="true"
+                        inputClasses="clCell"
+                        wrapperClasses="clCellCode">
+                      </vue-tel-input>
+
+                    </div>
                     <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
                         <q-select
                                 v-model="myvalue"
diff --git a/src/components/CSignIn/CSignIn.ts b/src/components/CSignIn/CSignIn.ts
index 526a6fb..ee6beb5 100644
--- a/src/components/CSignIn/CSignIn.ts
+++ b/src/components/CSignIn/CSignIn.ts
@@ -1,22 +1,18 @@
 import Vue from 'vue'
 import { GlobalStore } from '@store'
 import { UserStore } from '../../store/Modules'
-import { Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Prop } from 'vue-property-decorator'
 import { serv_constants } from '../../store/Modules/serv_constants'
 import { tools } from '../../store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
 
 import { ISigninOptions, IUserState } from 'model'
-import { TSignin, validations } from './CSignIn-validate'
+import { validations } from './CSignIn-validate'
 
 import { validationMixin } from 'vuelidate'
 
 import { Logo } from '../logo'
 
-import router from '@router'
-
-import globalroutines from '../../globalroutines/index'
-import { ICategory } from '../../model'
 import { static_data } from '../../db/static_data'
 
 // import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
diff --git a/src/components/CSignUp/CSignUp-validate.ts b/src/components/CSignUp/CSignUp-validate.ts
index 79c6112..f795f03 100644
--- a/src/components/CSignUp/CSignUp-validate.ts
+++ b/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
diff --git a/src/components/CSignUp/CSignUp.scss b/src/components/CSignUp/CSignUp.scss
index 6a3d233..1b37fdb 100644
--- a/src/components/CSignUp/CSignUp.scss
+++ b/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;
+}
diff --git a/src/components/CSignUp/CSignUp.ts b/src/components/CSignUp/CSignUp.ts
index 0d43ce3..b50dc9e 100644
--- a/src/components/CSignUp/CSignUp.ts
+++ b/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
+  }
+
 }
diff --git a/src/components/CSignUp/CSignUp.vue b/src/components/CSignUp/CSignUp.vue
index 04de7a7..1906e29 100644
--- a/src/components/CSignUp/CSignUp.vue
+++ b/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>
 
diff --git a/src/components/CTitleBanner/CTitleBanner.ts b/src/components/CTitleBanner/CTitleBanner.ts
index 8f35d55..0094880 100644
--- a/src/components/CTitleBanner/CTitleBanner.ts
+++ b/src/components/CTitleBanner/CTitleBanner.ts
@@ -32,6 +32,7 @@ export default class CTitleBanner extends Vue {
   @Prop({ required: false, default: '' }) public myclasstext: string
   @Prop({ required: false, default: '' }) public icon: string
   @Prop({ required: false, default: true }) public visible: boolean
+  @Prop({ required: false, default: false }) public canopen: boolean
 
   public myvisible: boolean = true
 
diff --git a/src/components/CTitleBanner/CTitleBanner.vue b/src/components/CTitleBanner/CTitleBanner.vue
index 468645d..9ccc0dd 100644
--- a/src/components/CTitleBanner/CTitleBanner.vue
+++ b/src/components/CTitleBanner/CTitleBanner.vue
@@ -8,10 +8,10 @@
                 @click="myvisible = !myvisible"
         >
             <template v-slot:avatar>
-                <q-icon :name="icon" color="white" />
+                <q-icon v-if="canopen" :name="icon" color="white" />
             </template>
             <template v-slot:action>
-                <q-icon :name="iconopen" color="white" />
+                <q-icon v-if="canopen" :name="iconopen" color="white" />
             </template>
             <span :class="`mybanner `+ myclasstext" :style="mystyle">{{title}}</span>
         </q-banner>
diff --git a/src/model/UserStore.ts b/src/model/UserStore.ts
index 9333b2d..2844b69 100644
--- a/src/model/UserStore.ts
+++ b/src/model/UserStore.ts
@@ -8,6 +8,9 @@ const enum ESexType {
 
 export interface IUserProfile {
   img?: string
+  nationality?: string
+  intcode_cell?: string
+  iso2_cell?: string
   cell?: string
   dateofbirth?: Date
   sex?: ESexType
diff --git a/src/model/signup-option.ts b/src/model/signup-option.ts
index f535d4e..d5269d8 100644
--- a/src/model/signup-option.ts
+++ b/src/model/signup-option.ts
@@ -1,3 +1,4 @@
+import { IUserProfile } from '@src/model/UserStore'
 
 export interface ISignupOptions {
   email?: string
@@ -9,4 +10,5 @@ export interface ISignupOptions {
   repeatPassword?: string
   terms?: boolean
   aportador_solidario?: string
+  profile?: IUserProfile
 }
diff --git a/src/statics/i18n.js b/src/statics/i18n.js
index 7479f83..96410f8 100644
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -104,13 +104,18 @@ const msgglobal = {
       content2: 'Contenuto 2',
       options: 'Opzioni',
     },
+    dashboard: {
+      downline: 'Persone che hai Invitato',
+    },
     reg: {
       aportador_solidario: 'Chi ti ha Invitato',
       page_title: 'Registrazione',
       incorso: 'Registrazione in corso...',
       richiesto: 'Campo Richiesto',
       email: 'Email',
-      cell: 'Telefono',
+      intcode_cell: 'Prefisso Int.',
+      cell: 'Cellulare',
+      nationality: 'Nazionalità',
       email_paypal: 'Email Paypal',
       username_telegram: 'Username Telegram',
       img: 'Immagine',
@@ -134,7 +139,6 @@ const msgglobal = {
         email: 'inserire una email valida',
         errore_generico: 'Si prega di compilare correttamente i campi',
         atleast: 'dev\'essere lungo almeno di',
-        // complexity: 'deve contenere almeno 1 minuscola, 1 maiuscola, 1 cifra e 1 carattere speciale (!,$,#,%,-) ',
         complexity: 'deve contenere almeno 1 minuscola, 1 maiuscola, 1 cifra',
         notmore: 'non dev\'essere lungo più di',
         char: 'caratteri',
@@ -473,13 +477,18 @@ const msgglobal = {
       content2: 'Contenuto 2',
       options: 'Opciones',
     },
+    dashboard: {
+      downline: 'Personas que has invitado',
+    },
     reg: {
       aportador_solidario: 'Aportador Solidario',
       page_title: 'Registro',
       incorso: 'Registro en curso...',
       richiesto: 'Campo requerido',
       email: 'Email',
+      intcode_cell: 'Prefijo Int.',
       cell: 'Móvil',
+      nationality: 'Nacionalidad',
       email_paypal: 'Email Paypal',
       username_telegram: 'Usuario Telegram',
       img: 'File image',
@@ -832,12 +841,17 @@ const msgglobal = {
       content2: 'Contenu 2',
       options: 'Options',
     },
+    dashboard: {
+      downline: 'Les personnes que vous avez invitées',
+    },
     reg: {
       aportador_solidario: 'Contributeur de solidarité',
       incorso: 'Inscription en cours...',
       richiesto: 'Champ obligatoire',
       email: 'Email',
+      intcode_cell: 'Préfixe int.',
       cell: 'Téléphone',
+      nationality: 'Nationalité',
       email_paypal: 'Email Paypal',
       username_telegram: 'Nom d\'utilisateur du Telegram',
       img: 'Fichier image',
@@ -1190,12 +1204,17 @@ const msgglobal = {
       content2: 'Content 2',
       options: 'Options',
     },
+    dashboard: {
+      downline: 'People you\'ve invited',
+    },
     reg: {
       aportador_solidario: 'Solidarity Contributor',
       incorso: 'Registration please wait...',
       richiesto: 'Field Required',
       email: 'Email',
-      cell: 'Phone',
+      intcode_cell: 'International Code',
+      cell: 'Mobile Phone',
+      nationality: 'Nationality',
       email_paypal: 'Email Paypal',
       username_telegram: 'Username Telegram',
       img: 'File Image',
@@ -1547,13 +1566,18 @@ const msgglobal = {
       content2: 'Content 2',
       options: 'Options',
     },
+    dashboard: {
+      downline: 'People you\'ve invited',
+    },
     reg: {
       aportador_solidario: 'Solidarity Contributor',
       page_title: 'Registration',
       incorso: 'Registration please wait...',
       richiesto: 'Field Required',
       email: 'Email',
-      cell: 'Phone',
+      intcode_cell: 'International Code',
+      cell: 'Mobile Phone',
+      nationality: 'Nationality',
       email_paypal: 'Email Paypal',
       username_telegram: 'Username Telegram',
       img: 'File Image',
diff --git a/src/store/Modules/UserStore.ts b/src/store/Modules/UserStore.ts
index 73b00a1..301f0fa 100644
--- a/src/store/Modules/UserStore.ts
+++ b/src/store/Modules/UserStore.ts
@@ -34,8 +34,10 @@ const DefaultUser: IUserFields = {
   }
 }
 
-const DefaultProfile: IUserProfile = {
+export const DefaultProfile: IUserProfile = {
   img: '',
+  nationality: '',
+  intcode_cell: '',
   cell: '',
   dateofbirth: new Date(),
   sex: 0,
@@ -516,6 +518,7 @@ namespace Actions {
 
     return bcrypt.hash(authData.password, bcrypt.genSaltSync(12))
       .then((hashedPassword: string) => {
+/*
         const usertosend = {
           lang: mylang,
           email: authData.email,
@@ -524,12 +527,15 @@ namespace Actions {
           name: authData.name,
           surname: authData.surname
         }
-
         console.log(usertosend)
 
+*/
+        authData.lang = mylang
+        authData.password = String(hashedPassword)
+
         Mutations.mutations.setServerCode(tools.CALLING)
 
-        return Api.SendReq('/users', 'POST', usertosend)
+        return Api.SendReq('/users', 'POST', authData)
           .then((res) => {
 
             const newuser = res.data
@@ -569,6 +575,7 @@ namespace Actions {
             }
           })
           .catch((error) => {
+            console.log('Err', error)
             UserStore.mutations.setErrorCatch(error)
             return UserStore.getters.getServerCode
           })
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index ea89bc3..4153d7d 100644
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -378,7 +378,10 @@ export const fieldsTable = {
     AddCol({ name: 'name', label_trans: 'reg.name' }),
     AddCol({ name: 'surname', label_trans: 'reg.surname' }),
     AddCol({ name: 'email', label_trans: 'reg.email' }),
-    AddCol({ name: 'profile.cell', field: 'profile', subfield: 'cell', label_trans: 'reg.cell' }),
+    AddCol({ name: 'profile.nationality', field: 'profile', subfield: 'nationality', label_trans: 'reg.nationality', fieldtype: tools.FieldType.nationality }),
+    AddCol({ name: 'profile.intcode_cell', field: 'profile', subfield: 'intcode_cell', label_trans: 'reg.intcode_cell', fieldtype: tools.FieldType.intcode }),
+    AddCol({ name: 'profile.iso2_cell', field: 'profile', subfield: 'iso2_cell', label_trans: 'reg.iso2_cell' }),
+    AddCol({ name: 'profile.cell', field: 'profile', subfield: 'cell', label_trans: 'reg.cell', fieldtype: tools.FieldType.intcode }),
     AddCol({ name: 'profile.email_paypal', field: 'profile', subfield: 'email_paypal', label_trans: 'reg.email_paypal' }),
     AddCol({ name: 'profile.username_telegram', field: 'profile', subfield: 'username_telegram', label_trans: 'reg.username_telegram' }),
     AddCol({ name: 'profile.img', field: 'profile', subfield: 'img', label_trans: 'reg.img', sortable: false }),
diff --git a/src/store/Modules/serv_constants.ts b/src/store/Modules/serv_constants.ts
index e1ee7df..111f5c6 100644
--- a/src/store/Modules/serv_constants.ts
+++ b/src/store/Modules/serv_constants.ts
@@ -5,6 +5,10 @@ export const serv_constants = {
   RIS_CODE_ERR: -99,
   RIS_CODE_EMAIL_ALREADY_VERIFIED: -5,
   RIS_CODE_EMAIL_VERIFIED: 1,
+
+  RIS_CODE_USERNAME_ALREADY_EXIST: -60,
+  RIS_CODE_EMAIL_ALREADY_EXIST: -50,
+  RIS_CODE_EMAIL_NOT_SENT: -40,
   RIS_CODE_ERR_UNAUTHORIZED: -30,
 
   RIS_CODE_LOGIN_ERR_GENERIC: -20,
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index 16acc45..5c912b0 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -47,6 +47,8 @@ export interface INotify {
 export const tools = {
   CAN_EDIT: 'q-ce',
 
+  getprefCountries: ['it', 'us', 'es', 'uk', 'fr', 'de', 'ch'],
+
   APORTADOR_SOLIDARIO: 'apsol',
 
   listBestColor: [
@@ -83,8 +85,6 @@ export const tools = {
   ERR_GENERICO: -1,
   ERR_SERVERFETCH: -2,
   ERR_AUTHENTICATION: -5,
-  DUPLICATE_EMAIL_ID: 11000,
-  DUPLICATE_USERNAME_ID: 11100,
 
   NOFIELD: 'nofield',
 
@@ -144,6 +144,8 @@ export const tools = {
     password: 512,
     listimages: 1024,
     image: 2048,
+    nationality: 4096,
+    intcode: 5000,
   },
 
   FieldTypeArr: [
@@ -2572,9 +2574,9 @@ export const tools = {
 
   SignUpcheckErrors(mythis, riscode: number) {
     console.log('SignUpcheckErrors', riscode)
-    if (riscode === tools.DUPLICATE_EMAIL_ID) {
+    if (riscode === serv_constants.RIS_CODE_EMAIL_ALREADY_EXIST) {
       tools.showNotif(mythis.$q, mythis.$t('reg.err.duplicate_email'))
-    } else if (riscode === tools.DUPLICATE_USERNAME_ID) {
+    } else if (riscode === serv_constants.RIS_CODE_USERNAME_ALREADY_EXIST) {
       tools.showNotif(mythis.$q, mythis.$t('reg.err.duplicate_username'))
     } else if (riscode === tools.ERR_SERVERFETCH) {
       tools.showNotif(mythis.$q, mythis.$t('fetch.errore_server'))
@@ -2746,7 +2748,7 @@ export const tools = {
   },
   getCookie(mytok, def?) {
     const ris = Cookies.get(mytok)
-    console.log('getCookie', ris)
+    // console.log('getCookie', ris)
     if (!!ris) {
       return ris
     } else {
diff --git a/src/views/login/signup/signup.vue b/src/views/login/signup/signup.vue
index 9391807..7cdda3a 100644
--- a/src/views/login/signup/signup.vue
+++ b/src/views/login/signup/signup.vue
@@ -1,6 +1,6 @@
 <template>
     <q-page padding class="signup">
-        <CSignUp :adult="adult">
+        <CSignUp :showadultcheck="false">
 
         </CSignUp>
     </q-page>