fix Registrazione data

fix linkref
fix controllo login
fix pagination CGridTableRec
added CstatusReg e Cstatus

src/components/CCardOperator/CCardOperator.ts

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { CCard } from '@components'
+import MixinOperator from '../../mixins/mixin-operator'
+
+@Component({
+  name: 'CCardOperator',
+  components: { CCard }
+})
+
+export default class CCardOperator extends MixinOperator {
+  @Prop({ required: true}) public username
+  public tab: string = 'one'
+
+  get tools() {
+    return tools
+  }
+
+}

src/components/CCardOperator/CCardOperator.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <CCard :op="getOperatorByUsername(username)" :tab="tab">
+    </CCard>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CCardOperator.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CCardOperator.scss';
+</style>

src/components/CCardOperator/index.ts

@@ -0,0 +1 @@
+export {default as CCardOperator} from './CCardOperator.vue'

src/components/CCardState/CCardState.scss

@@ -0,0 +1,13 @@
+.my-card-stat {
+  width: 100%;
+  max-width: 200px;
+  min-width: 120px;
+  padding: 1rem 1rem;
+  @media (max-width: 718px) {
+    // PER VERSIONE MOBILE
+    max-width: 150px;
+    padding: 0;
+  }
+
+  box-shadow: none;
+}

src/components/CCardState/CCardState.ts

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import MixinBase from '@src/mixins/mixin-base'
+
+@Component({
+  name: 'CCardState'
+})
+
+export default class CCardState extends MixinBase {
+  @Prop({ required: true, default: '' }) public mytext
+  @Prop({ required: true, default: 0 }) public myval
+  @Prop({ required: true, default: 0 }) public myperc
+  @Prop({ required: false, default: '' }) public imgsrc
+  @Prop({ required: false, default: false }) public isperc
+  @Prop({ required: false, default: '' }) public textadd
+
+  get getsize() {
+    if (tools.isMobile())
+      return '130px'
+    else
+      return '150px'
+  }
+}

src/components/CCardState/CCardState.vue

@@ -0,0 +1,36 @@
+<template>
+  <q-card class="my-card-stat text-center">
+    <q-circular-progress
+      show-value
+      font-size="1rem"
+      :value="myperc"
+      :size="getsize"
+      :thickness="0.25"
+      color="green"
+      track-color="grey-3"
+      class="q-ma-sm animated"
+    >
+
+      <q-avatar v-if="imgsrc" size="60px">
+        <img :src="imgsrc">
+      </q-avatar>
+      <div class="column q-pa-sm text-center">
+        <div>
+          {{ mytext }}
+        </div>
+        <div class="mlvalue text-h5 text-blue boldhigh"> {{ myval }} {{ textadd }}
+        </div>
+        <div v-if="isperc" class="cltexth4">
+          ({{ myperc.toFixed(1) }} %)
+        </div>
+      </div>
+    </q-circular-progress>
+  </q-card>
+</template>
+
+<script lang="ts" src="./CCardState.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './CCardState.scss';
+</style>

src/components/CCardState/index.ts

@@ -0,0 +1 @@
+export {default as CCardState} from './CCardState.vue'

src/components/CMyImg/CMyImg.scss

@@ -0,0 +1,3 @@
+.climg {
+  border-radius: 5px;
+}

src/components/CMyImg/CMyImg.ts

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+@Component({
+  name: 'CMyImg'
+})
+
+export default class CMyImg extends Vue {
+  @Prop({ required: true, default: '' }) public src: string
+  @Prop({ required: false, default: '' }) public alt: string
+  @Prop({ required: false, default: '' }) public width: string
+  public srcbase: string = ''
+  public mystyle: string = ''
+
+  public mounted() {
+    console.log('mounted')
+    console.log(this.src)
+
+    if (this.width)
+      this.mystyle = 'max-width: ' + this.width + 'px; '
+    else
+      this.mystyle = ''
+  }
+
+  public created() {
+    console.log('created')
+
+  }
+
+  get getalt() {
+    if (this.alt) {
+      return this.alt
+    } else {
+      return tools.getimgFullpathbysize(this.src)
+    }
+  }
+}

src/components/CMyImg/CMyImg.vue

@@ -0,0 +1,12 @@
+<template>
+  <div v-if="src" class="text-center">
+    <q-img :src="src" class="myimg" :style="mystyle" :alt="getalt">
+    </q-img>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyImg.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CMyImg.scss';
+</style>

src/components/CMyImg/index.ts

@@ -0,0 +1 @@
+export {default as CMyImg} from './CMyImg.vue'

src/components/CMyInnerPage/CMyInnerPage.ts

@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '../../store/Modules/toolsext'
+import { static_data } from '../../db/static_data'
+import { Screen } from 'quasar'
+
+import { colmypage } from '@src/store/Modules/fieldsTable'
+
+import { CImgText } from '../../components/CImgText/index'
+import { CCard, CGridTableRec, CMyPage, CTitleBanner } from '@components'
+import MixinMetaTags from '../../mixins/mixin-metatags'
+import MixinBase from '@src/mixins/mixin-base'
+import { IMyPage } from '@src/model/GlobalStore'
+
+@Component({
+  name: 'CMyInnerPage',
+  mixins: [MixinBase],
+  components: { CImgText, CCard, CMyPage, CTitleBanner }
+})
+export default class CMyInnerPage extends MixinMetaTags {
+  @Prop({ required: true }) public path: string
+  public heightimg
+  public imgback
+  public rec: IMyPage = {}
+
+  public mounted() {
+    // console.log('this.$route.path', this.$route.path)
+    this.rec = GlobalStore.getters.getPage(this.path)
+    console.log(this.rec)
+  }
+
+  public meta() {
+    return tools.metafunc(this)
+  }
+
+  get static_data() {
+    return static_data
+  }
+}

src/components/CMyInnerPage/CMyInnerPage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div v-if="rec">
+      <!--<CMyPage :title="rec.title" :imgbackground="`statics/` + rec.imgback" :sizes="`max-height: ` + rec.heightimg + `px`">-->
+
+      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+        <div v-if="rec.content" v-html="rec.content">
+        </div>
+      </div>
+      <!--</CMyPage>-->
+    </div>
+    <div v-else>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./CMyInnerPage.ts">
+
+</script>
+<style lang="scss" scoped>
+  @import 'CMyInnerPage.scss';
+</style>

src/components/CMyInnerPage/index.ts

@@ -0,0 +1 @@
+export {default as CMyInnerPage} from './CMyInnerPage.vue'

src/components/CProfile/CProfile.scss

@@ -0,0 +1,5 @@
+.signin {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}

src/components/CProfile/CProfile.ts

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import { GlobalStore } from '@store'
+import { UserStore } from '../../store/Modules'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { validationMixin } from 'vuelidate'
+
+import MixinBase from '../../mixins/mixin-base'
+
+@Component({
+  name: 'CProfile',
+  mixins: [validationMixin],
+  components: {  }
+})
+
+export default class CProfile extends MixinBase {
+  @Prop({ required: true }) public mythis: any
+  public $v
+  public $t: any
+
+
+}

src/components/CProfile/CProfile.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <form>
+            <div class="q-gutter-xs">
+
+            </div>
+        </form>
+    </div>
+</template>
+
+<script lang="ts" src="./CProfile.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CProfile.scss';
+</style>

src/components/CProfile/index.ts

@@ -0,0 +1 @@
+export {default as CProfile} from './CProfile.vue'

src/components/CSignUpNotevole/CSignUp-validate.ts

@@ -0,0 +1,43 @@
+import { ISignupOptions } from 'model'
+import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
+// import { ValidationRuleset } from 'vuelidate'
+import { complexity, registeredemail, registereduser, aportadorexist } from '../../validation'
+
+export interface TSignup { signup: ISignupOptions, validationGroup: string[] }
+
+export const validations = {
+  signup: {
+    repeatPassword: {
+      required,
+      sameAsPassword: sameAs('password')
+    },
+    password: {
+      required,
+      minLength: minLength(8),
+      complexity
+    },
+    username: {
+      required,
+      minLength: minLength(6),
+      registereduser
+    },
+    name: {
+      required
+    },
+    surname: {
+      required
+    },
+    email: {
+      email,
+      registeredemail,
+      required
+    },
+    terms: {
+      required
+    },
+    aportador_solidario: {
+      aportadorexist,
+      required
+    }
+  }
+}

src/components/CSignUpNotevole/CSignUpNotevole.scss

@@ -0,0 +1,34 @@
+.signup {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+
+.wrapper {
+  display: flex;
+  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;
+}
+
+

src/components/CSignUpNotevole/CSignUpNotevole.ts

@@ -0,0 +1,268 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { UserStore } from '@store'
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { ISignupOptions, IUserState, IUserFields } from 'model'
+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'
+import { registereduser } from '../../validation'
+import MixinBase from '../../mixins/mixin-base'
+
+Vue.use(VueCountryCode)
+// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
+@Component({
+  name: 'CSignUp',
+  mixins: [validationMixin],
+  validations,
+  components: { Logo, CTitleBanner }
+})
+
+export default class CSignUpNotevole extends MixinBase {
+  @Prop({ required: false, default: false }) public showadultcheck: boolean
+  @Prop({ required: false, default: false }) public showcell: boolean
+  @Prop({ required: false, default: false }) public showaportador: boolean
+  @Prop({ required: false, default: false }) public shownationality: 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
+
+  public options = [
+    { label: 'Sono già registrato sulla Chat di Ayni', value: true, color: 'green' },
+    { label: 'Nuova Registrazione', value: false, color: 'blue' },
+  ]
+
+  public signup: ISignupOptions = {
+    email: process.env.TEST_EMAIL || '',
+    username: process.env.TEST_USERNAME || '',
+    name: process.env.TEST_NAME || '',
+    surname: process.env.TEST_SURNAME || '',
+    password: process.env.TEST_PASSWORD || '',
+    repeatPassword: process.env.TEST_PASSWORD || '',
+    terms: !process.env.PROD,
+    profile: DefaultProfile,
+    aportador_solidario: process.env.TEST_APORTADOR,
+  }
+
+  public created() {
+    this.$v.$reset()
+
+    this.signup.aportador_solidario = this.$route.params.invited
+    if (!this.signup.aportador_solidario) {
+      this.signup.aportador_solidario = tools.APORTADOR_NONE
+    }
+    this.$v.signup.aportador_solidario.$touch()
+
+  }
+
+  // @Watch('signup.already_registered')
+  // public changealreadyreg() {
+  //   if (this.signup.already_registered) {
+  //     this.signup.aportador_solidario = tools.APORTADOR_NONE
+  //   } else {
+  //     this.signup.aportador_solidario = this.$route.params.invited
+  //   }
+  //   this.$v.signup.aportador_solidario.$touch()
+  // }
+
+  @Watch('$route.params.invited')
+  public changeaportador() {
+    if (this.showaportador) {
+      console.log('changeaportador', this.$route.params.invited)
+      if (!this.signup.aportador_solidario)
+        this.signup.aportador_solidario = this.$route.params.invited
+    }
+  }
+
+  get allowSubmit() {
+
+    let error = this.$v.$error || this.$v.$invalid
+
+    if (this.showadultcheck)
+      error = error || !this.iamadult
+
+    if (this.showcell)
+      error = error || this.signup.profile.cell.length <= 6
+
+    return !error
+  }
+
+  /*
+  validations: {
+    isAsync: true,
+    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),
+        isUnique: value => {
+          if (value === '') return true;
+          return axios.get(process.env.MONGODB_HOST + '/users/' + value)
+            .then(res => {
+              return (res.status !== 200)
+            }).catch((e) => {
+              return true;
+            })
+        }
+      },
+      repeatPassword: {
+        sameAsPassword: sameAs('password')
+      },
+      terms: {required},
+
+    }
+  }, */
+  public env() {
+    return process.env
+  }
+
+  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') {
+        if (!item.sameAsPassword) {
+          return this.$t('reg.err.sameaspassword')
+        }
+      }
+
+      // console.log('item', item)
+
+      if (item.minLength !== undefined) {
+        if (!item.minLength) {
+          return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char')
+        }
+      }
+      if (item.complexity !== undefined) {
+        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 !== undefined) {
+        if (!item.required) {
+          return this.$t('reg.err.required')
+        }
+      }
+
+      // console.log('    ....avanti')
+      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')
+        }
+      } else if (cosa === 'aportador_solidario') {
+        // console.log(item);
+        if (!item.aportadorexist) {
+          // console.log('!item.aportadorexist !')
+          return this.$t('reg.err.aportador_not_exist')
+        }
+      } else if ((cosa === 'name') || (cosa === 'surname')) {
+        // console.log(item);
+      }
+
+      return ''
+    } catch (error) {
+      // console.log("ERR : " + error);
+    }
+  }
+
+  public submitOk() {
+    this.$v.signup.$touch()
+
+    this.duplicate_email = false
+    this.duplicate_username = false
+
+    if (!this.signup.terms) {
+      tools.showNotif(this.$q, this.$t('reg.err.terms'))
+      return
+    }
+
+    if (this.$v.signup.$error) {
+      tools.showNotif(this.$q, this.$t('reg.err.errore_generico'))
+      return
+    }
+
+    this.signup.name = tools.CapitalizeAllWords(this.signup.name)
+    this.signup.surname = tools.CapitalizeAllWords(this.signup.surname)
+
+    this.$q.loading.show({ message: this.$t('reg.incorso') })
+
+    console.log(this.signup)
+    return UserStore.actions.signup(tools.clone(this.signup))
+      .then((riscode) => {
+        if (tools.SignUpcheckErrors(this, riscode))
+          this.$q.loading.hide()
+      }).catch((error) => {
+        console.log('ERROR = ' + error)
+        this.$q.loading.hide()
+      })
+
+  }
+
+  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
+  }
+
+  public inputUsername(value) {
+    this.signup.username = value.trim()
+  }
+
+  get getplaceholdercell() {
+    return this.$t('reg.cellreg')
+  }
+
+  get regvisibile() {
+    return true
+    // return this.signup.already_registered || (!this.signup.already_registered && this.signup.aportador_solidario)
+  }
+}

src/components/CSignUpNotevole/CSignUpNotevole.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <div class="text-center">
+      <p>
+        <logo></logo>
+        <CTitleBanner :title="$t('pages.SignUp')"></CTitleBanner>
+      </p>
+    </div>
+
+    <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
+
+    <div class="q-gutter-sm">
+
+      <!--<q-option-group-->
+        <!--:options="options"-->
+        <!--label="Notifications"-->
+        <!--type="radio"-->
+        <!--v-model="signup.already_registered"-->
+      <!--&gt;</q-option-group>-->
+
+      <!--<q-toggle dark color="green"
+                v-model="signup.already_registered"
+                :label="$t('reg.already_registered')">
+      </q-toggle>-->
+      <br>
+
+      <q-input
+        v-if="showaportador && signup.aportador_solidario !== tools.APORTADOR_NONE"
+        bg-color="lightblue"
+        :readonly="true"
+        v-model="signup.aportador_solidario"
+        rounded outlined
+        @blur="$v.signup.aportador_solidario.$touch"
+        :error="$v.signup.aportador_solidario.$error"
+        :error-message="errorMsg('aportador_solidario', $v.signup.aportador_solidario)"
+        maxlength="20"
+        debounce="1000"
+
+        :label="$t('reg.aportador_solidario')">
+
+        <template v-slot:prepend>
+          <q-icon name="person"/>
+        </template>
+
+      </q-input>
+
+      <div v-if="regvisibile">
+        <q-input
+          v-model="signup.email"
+          rounded outlined
+          @blur="$v.signup.email.$touch"
+          :error="$v.signup.email.$error"
+          :error-message="errorMsg('email', $v.signup.email)"
+          maxlength="50"
+          debounce="1000"
+          :label="$t('reg.email')">
+
+          <template v-slot:prepend>
+            <q-icon name="email"/>
+          </template>
+
+        </q-input>
+
+        <q-input
+          v-model="signup.username"
+          rounded outlined
+          @blur="$v.signup.username.$touch"
+          :error="$v.signup.username.$error"
+          @keydown.space="(event) => event.preventDefault()"
+          maxlength="20"
+          debounce="1000"
+          :error-message="errorMsg('username', $v.signup.username)"
+          :label="$t('reg.username')">
+
+          <template v-slot:prepend>
+            <q-icon name="person"/>
+          </template>
+
+        </q-input>
+
+        <q-input
+          v-model="signup.name"
+          rounded outlined
+          @blur="$v.signup.name.$touch"
+          :error="$v.signup.name.$error"
+          maxlength="30"
+          debounce="1000"
+          :error-message="errorMsg('name', $v.signup.name)"
+          :label="$t('reg.name')">
+
+          <template v-slot:prepend>
+            <q-icon name="person"/>
+          </template>
+
+        </q-input>
+
+        <q-input
+          v-model="signup.surname"
+          rounded outlined
+          @blur="$v.signup.surname.$touch"
+          :error="$v.signup.surname.$error"
+          maxlength="30"
+          debounce="1000"
+          :error-message="errorMsg('surname', $v.signup.surname)"
+          :label="$t('reg.surname')">
+
+          <template v-slot:prepend>
+            <q-icon name="person"/>
+          </template>
+
+        </q-input>
+
+        <q-input
+          v-model="signup.password"
+          type="password"
+          rounded outlined
+          @blur="$v.signup.password.$touch"
+          :error="$v.signup.password.$error"
+          :error-message="`${errorMsg('password', $v.signup.password)}`"
+          maxlength="30"
+          :label="$t('reg.password')">
+
+          <template v-slot:prepend>
+            <q-icon name="vpn_key"/>
+          </template>
+
+        </q-input>
+
+        <q-input
+          v-model="signup.repeatPassword"
+          type="password"
+          maxlength="30"
+          rounded outlined
+          @blur="$v.signup.repeatPassword.$touch"
+          :error="$v.signup.repeatPassword.$error"
+          :error-message="`${errorMsg('repeatpassword', $v.signup.repeatPassword)}`"
+
+          :label="$t('reg.repeatPassword')">
+
+          <template v-slot:prepend>
+            <q-icon name="vpn_key"/>
+          </template>
+
+        </q-input>
+
+        <!--:hint="$t('reg.tips.repeatpassword')"-->
+
+        <q-input
+          v-if="shownationality"
+          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>
+
+        <div v-if="!tools.isMobile()"><br></div>
+
+        <vue-tel-input
+          v-if="showcell"
+          @country-changed="intcode_change"
+          v-model="signup.profile.cell"
+          :preferredCountries="tools.getprefCountries"
+          :placeholder="getplaceholdercell"
+          maxlength="20"
+          :enabledCountryCode="true"
+          inputClasses="clCell"
+          wrapperClasses="clCellCode">
+        </vue-tel-input>
+
+
+        <q-checkbox
+          v-model="signup.terms"
+          color="secondary"
+          @blur="$v.signup.terms.$touch"
+          :error="$v.signup.terms.$error"
+          :error-message="`${errorMsg('terms', $v.signup.terms)}`"
+          :label="$t('reg.terms')">
+
+        </q-checkbox>
+
+        <q-checkbox
+          v-if="showadultcheck"
+          v-model="iamadult"
+          color="secondary"
+          :label="$t('reg.onlyadult')">
+        </q-checkbox>
+
+        <div v-if="showadultcheck">
+          <br>
+        </div>
+
+        <div class="wrapper">
+          <q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'>
+            {{$t('reg.submit')}}
+          </q-btn>
+        </div>
+      </div>
+
+    </div>
+
+    <!--
+
+            <div align="center">
+        <q-btn rounded size="lg" color="primary" @click="submitOk" :disable="">{{$t('reg.submit')}}
+        </q-btn>
+    </div>
+
+    -->
+
+  </div>
+</template>
+
+<script lang="ts" src="./CSignUpNotevole.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CSignUpNotevole.scss';
+</style>

src/components/CSignUpNotevole/index.ts

@@ -0,0 +1 @@
+export {default as CSignUpNotevole} from './CSignUpNotevole.vue'

src/components/CStatus/CStatus.scss

@@ -0,0 +1,21 @@
+.signin {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+.q-stepper__tab {
+
+  @media (max-width: 718px) {
+    // PER VERSIONE MOBILE
+    padding: 10px 16px !important;
+  }
+}
+
+.q-stepper__step-inner {
+  @media (max-width: 718px) {
+    padding: 0 12px 24px 40px !important;
+  }
+}
+
+li {}

src/components/CStatus/CStatus.ts

@@ -0,0 +1,266 @@
+import Vue from 'vue'
+import { GlobalStore } from '@store'
+import { NotevoleStore, UserStore } from '../../store/Modules'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import MixinBase from '../../mixins/mixin-base'
+import { CTitleBanner, CMyFieldDb } from '@components'
+import { CMyInnerPage } from '../CMyInnerPage'
+import { tools } from '../../store/Modules/tools'
+
+import { copyToClipboard } from 'quasar'
+
+@Component({
+  components: { CTitleBanner, CMyFieldDb, CMyInnerPage  }
+})
+
+export default class CStatus extends MixinBase {
+  public $v
+  public $t: any
+  public step = 1
+  public NUMSTEP_START = 3
+
+  public arrsteps = [
+    {
+      title: 'steps.zoom',
+      descr: 'steps.zoom_long',
+      page: '/zoom',
+      funccheck(index) {
+        return UserStore.state.my.profile.saw_zoom_presentation
+      },
+      funccheck_error(index) {
+        return true
+      }
+    },
+    {
+      title: 'steps.dream',
+      descr: 'steps.dream_long',
+      page: '/mydream',
+      funccheck(index) {
+        if (UserStore.state.my.profile.my_dream)
+          if (UserStore.state.my.profile.my_dream.length > 10)
+            return true
+
+        return false
+      },
+      funccheck_error(index) {
+        return true
+      },
+    },
+    {
+      title: 'steps.sharemovement',
+      descr: 'steps.sharemovement_long',
+      page: '/sharemovement',
+      funccheck(index) {
+        if (UserStore.state.my.calcstat)
+          return UserStore.state.my.calcstat.numinvitati_attivi >= 2
+      },
+      funccheck_error(index) {
+        return true
+      },
+    },
+    {
+      title: 'steps.paymenttype',
+      descr: 'steps.paymenttype_long',
+      page: '',
+      funccheck(index) {
+        return this.numpayment >= 2
+      },
+      funccheck_error(index) {
+        return true
+      },
+    },
+    {
+      title: 'steps.enter_prog',
+      descr: 'steps.enter_prog_long',
+      page: '/enter_prog',
+      funccheck(index) {
+        return false
+      },
+      funccheck_error(index) {
+        return false
+      },
+    },
+    {
+      title: 'steps.collaborate',
+      descr: 'steps.collaborate_long',
+      page: '/collaborate',
+      funccheck(index) {
+        return false
+      },
+      funccheck_error(index) {
+        return false
+      },
+    },
+    {
+      title: 'steps.dono',
+      descr: 'steps.dono_long',
+      page: '/gift',
+      funccheck(index) {
+        return false
+      },
+      funccheck_error(index) {
+        return false
+      },
+    },
+    {
+      title: 'steps.support',
+      descr: 'steps.support_long',
+      page: '/support',
+      funccheck(index) {
+        return false
+      },
+      funccheck_error(index) {
+        return false
+      },
+    },
+    {
+      title: 'steps.ricevo_dono',
+      descr: 'steps.ricevo_dono_long',
+      page: '/receivegift',
+      funccheck(index) {
+        return false
+      },
+      funccheck_error(index) {
+        return false
+      },
+    },
+
+/*
+      sharemovement: 'Condivido il movimento',
+      sharemovement_long: 'Condivido il movimento con almeno 2 amici e li guido alla registrazione e agli zoom',
+      enter_prog: 'entro in Programmazione',
+      enter_prog_long: 'entro in programmazione, e vengo aggiunto al Mandala, ed entro così nella chat corrispondente.',
+      collaborate: 'Collaborazione',
+      collaborate_long: 'Continuo a collaborare con il miei compagni, per arrivare al giorno della programmazione dove si attiverà il mio Mandala',
+      dono: 'Dono',
+      dono_long: 'Faccio il mio dono al proprietario della Bigliettera',
+      support: 'Sostengo il movimento',
+      support_long: 'Continuo a sostenere il movimento partecipando attivamente! Organizzando zoom e partecipando, sostenendo, informando, aiutando e diffondendo',
+      ricevo_dono: 'Ricevo il mio dono e CELEBRO',
+      ricevo_dono_long: 'Ricevo il mio dono e CELEBRO',
+*/
+
+  ]
+
+  public setstep() {
+    if (this.isEmailVerified) {
+      this.step = 2
+      if (this.TelegVerificato) {
+        this.step = 3
+        for (let indstep = 0; indstep < this.arrsteps.length; indstep++){
+          if (this.arrsteps[indstep].funccheck(indstep)) {
+            this.step++
+          }
+        }
+        // if (this.numpayment > 0) {
+        //   this.step = 4
+        // }
+      }
+    }
+    console.log('step', this.step)
+  }
+
+  public mounted() {
+    this.setstep()
+  }
+
+  get TelegCode() {
+    return UserStore.state.my.profile.teleg_checkcode
+  }
+  get TelegVerificato() {
+    return UserStore.state.my.profile.teleg_id > 0
+  }
+
+  get isEmailVerified() {
+    return UserStore.state.my.verified_email
+  }
+
+  get emailtext() {
+    if (this.isEmailVerified)
+      return `Email ` + this.$t('pages.statusreg.verified')
+    else
+      return `Email ` + this.$t('pages.statusreg.nonverified')
+  }
+
+  get telegramtext() {
+    if (this.TelegVerificato)
+      return `Telegram ` + this.$t('pages.statusreg.verified')
+    else
+      return `Telegram ` + this.$t('pages.statusreg.nonverified')
+  }
+
+  get paymenttext() {
+    return ' (' + this.numpayment + ' ' + this.$t('reg.selected') + ')'
+  }
+
+  get numpayment() {
+    if (UserStore.state.my.profile)
+      if (UserStore.state.my.profile.paymenttypes)
+        return UserStore.state.my.profile.paymenttypes.length
+
+    return 0
+  }
+
+  get getLinkBotTelegram() {
+    const link = this.getValDb('TELEG_BOT_LINK', false)
+    // console.log('link', link)
+    return link
+  }
+
+  get getlaststep() {
+    return this.arrsteps.length + this.NUMSTEP_START - 1
+  }
+
+  public getnuminvitati() {
+    if (UserStore.state.my)
+      if (UserStore.state.my.calcstat)
+        return UserStore.state.my.calcstat.numinvitati
+
+    return 0
+  }
+  public getnuminvitati_attivi() {
+    if (UserStore.state.my)
+      if (UserStore.state.my.calcstat)
+        return UserStore.state.my.calcstat.numinvitati_attivi
+
+    return 0
+  }
+
+  public gettextstep(step) {
+    let tit = this.$t(step.title)
+
+    if (step.title === 'steps.sharemovement') {
+      tit += ' (' + this.getnuminvitati_attivi() + ' / ' + this.getnuminvitati() + ' invitati Attivi)'
+    } else if (step.title === 'steps.paymenttype') {
+      tit += this.paymenttext
+    }
+
+    return tit
+  }
+
+  get getRefLink() {
+    return UserStore.getters.getRefLink()
+  }
+
+  public copylink() {
+    copyToClipboard(this.getRefLink).then(() => {
+      tools.showNotif(this.$q, this.$t('dialog.copyclipboard') + ' \'' + this.getRefLink + '\'')
+    })
+
+  }
+
+  public getiferror(checkerror, value) {
+    if (checkerror) {
+      return !value
+    } else {
+      return false
+    }
+  }
+
+  public geterricon(value) {
+    return 'fas fa-exclamation-triangle'
+  }
+
+}

src/components/CStatus/CStatus.vue

@@ -0,0 +1,214 @@
+<template>
+  <div>
+    <CTitleBanner class="text-center" title="Guida passo passo" bgcolor="bg-primary" clcolor="text-white"
+                  mystyle="" myclass="myshad" :canopen="true">
+
+      <div class="q-pa-xs">
+        <q-stepper
+          v-model="step"
+          vertical
+          header-nav
+          done-color="green"
+          active-color="blue"
+          inactive-color="grey"
+          animated
+        >
+          <q-step
+            :name="1"
+            :title="emailtext"
+            icon="mail"
+            :done="isEmailVerified"
+            :error="!isEmailVerified"
+            :error-icon="geterricon(true)"
+          >
+            <q-chip v-if="isEmailVerified" color="positive" text-color="white" icon="mail">
+              {{ `Email ` + $t('pages.statusreg.verified') }}
+            </q-chip>
+            <q-chip v-else color="negative" text-color="white" icon="">
+              {{ `Email ` + $t('pages.statusreg.nonverified') }}
+            </q-chip>
+            <div v-if="!isEmailVerified" v-html="$t('components.authentication.email_verification.link_sent')">
+
+            </div>
+
+            <q-stepper-navigation v-if="isEmailVerified">
+              <q-btn @click="step = 2" color="primary" :label="$t('dialog.avanti')"></q-btn>
+            </q-stepper-navigation>
+
+          </q-step>
+          <q-step
+            :name="2"
+            :title="telegramtext"
+            icon="fab fa-telegram"
+            :done="TelegVerificato"
+            :error="!TelegVerificato"
+            :error-icon="geterricon(true)"
+          >
+            <q-chip v-if="TelegVerificato" color="positive" text-color="white" icon="fab fa-telegram">
+              {{ telegramtext }}
+            </q-chip>
+            <q-chip v-else color="negative" text-color="white" icon="">
+              {{ telegramtext }}
+            </q-chip>
+
+            <div v-if="TelegCode" class="text-h4 text-center">
+              {{ $t('reg.teleg_auth') }} Telegram: {{TelegCode}}
+            </div>
+
+            <div v-if="!TelegVerificato" class="q-pa-sm q-gutter-sm">
+              <strong>{{ $t('components.authentication.telegram.open')}}</strong>
+              <div class="q-ma-sm">
+                <q-btn color="primary" icon="fab fa-telegram" :label="$t('components.authentication.telegram.openbot')"
+                       type="a"
+                       :href="getLinkBotTelegram" target="_blank"></q-btn>
+                <br>
+              </div>
+              <strong>{{ $t('components.authentication.telegram.ifclose')}}</strong>
+              <div class="q-my-sm">
+                <q-img src="statics/images/ayni_bot.jpg" class="" alt="AYNI BOT" style="height: 100px; width: 250px;">
+                </q-img>
+              </div>
+            </div>
+
+            <q-stepper-navigation>
+              <q-btn v-if="TelegVerificato" @click="step = 3" color="primary" :label="$t('dialog.avanti')"></q-btn>
+              <q-btn flat @click="step = 1" color="primary" :label="$t('dialog.indietro')" class="q-ml-sm"></q-btn>
+            </q-stepper-navigation>
+          </q-step>
+          <q-step
+            v-for="(mystep, index) in arrsteps"
+            :key="mystep.title"
+            :name="NUMSTEP_START + index"
+            :title="gettextstep(mystep)"
+            icon="check-circle"
+            :done="mystep.funccheck(index)"
+            :error="getiferror(mystep.funccheck_error(index), mystep.funccheck(index))"
+            :error-icon="geterricon(mystep.funccheck(index))"
+          >
+            <div v-if="mystep.title === 'steps.paymenttype'">
+              <div v-if="mystep.descr">
+                <div v-html="$t(mystep.descr)"></div>
+              </div>
+              <CMyFieldDb :title="$t('reg.paymenttype')"
+                          table="users"
+                          mykey="profile"
+                          mysubkey="paymenttypes"
+                          :type="tools.FieldType.multiselect"
+                          jointable="paymenttypes">
+              </CMyFieldDb>
+            </div>
+            <div v-else-if="mystep.title === 'steps.dream'">
+              <div v-if="mystep.descr">
+                <div v-html="$t(mystep.descr)"></div>
+              </div>
+              <CMyFieldDb :title="$t('reg.my_dream')"
+                          table="users"
+                          mykey="profile"
+                          mysubkey="my_dream"
+                          :type="tools.FieldType.string"
+              >
+              </CMyFieldDb>
+            </div>
+            <div v-else-if="mystep.title === 'steps.zoom'">
+              <div v-if="mystep.descr">
+                <div v-html="$t(mystep.descr)"></div>
+              </div>
+              <CTitleBanner class="q-pa-xs" title="Che cos'è Zoom e come funziona?" bgcolor="bg-primary"
+                            clcolor="text-white"
+                            myclass="myshad" canopen="true" :visible="false">
+                <div>
+
+                  <h3>ISTRUZIONI ZOOM</h3>
+
+                  <ul style="text-align: left; font-size:0.75rem;">
+                    <li>1. Scarica l'app (<a href="https://play.google.com/store/apps/details?id=us.zoom.videomeetings"
+                                             target="_blank">store</a> o <a href="https://zoom.us/support/download"
+                                                                            target="_blank">da PC</a>)
+                    </li>
+                    <li>1B. Fai il test per vedere se funziona: <a href="https://zoom.us/test" target="_blank">Esegui
+                      TEST</a></li>
+                    <li>2. Clicca "Join meeting"</li>
+                    <li>3. Inserisci il codice ID</li>
+                    <li>4. Sotto inserisci il tuo nominativo per essere riconosciuto</li>
+                    <li>5. Clicca "join meeting"</li>
+                    <li>6. Clicca "call in device" altrimenti non potrai sentire 🔊</li>
+                    <li>7. SILENZIARE I MICROFONI clicca sullo schermo e si aprirà una banda in basso</li>
+                    <li>8. Clicca 🔇 per SILENZIARE</li>
+                  </ul>
+
+                  <div class="text-h6"><strong>In più avrai:</strong></div>
+                  <ul style="text-align: left; font-size:0.75rem;">
+                    <li>Tasto per togliere il video (📹) ❌</li>
+                    <li>Tasto 'Share': per condividere contenuti condivisi</li>
+                    <li>Tasto 'Partecipants' in cui sulla sinistra, in basso, troverai la CHAT.</li>
+                    <li>Tasto 'More': troverai Raise Hands per fare le domande.</li>
+                  </ul>
+
+                </div>
+              </CTitleBanner>
+
+              <CTitleBanner class="q-pa-xs" title="Prossimi Incontri" bgcolor="bg-primary"
+                            clcolor="text-white"
+                            myclass="myshad" canopen="true" :visible="false">
+                <div v-if="mystep.page">
+                  <CMyInnerPage :path=mystep.page>
+                    <div v-if="mystep.descr">
+                      <div v-html="$t(mystep.descr)"></div>
+                    </div>
+                  </CMyInnerPage>
+                </div>
+
+              </CTitleBanner>
+
+
+            </div>
+            <div v-else-if="mystep.title === 'steps.sharemovement'">
+              <div v-if="mystep.descr">
+                <div v-html="$t(mystep.descr)"></div>
+              </div>
+              {{ $t('reg.reflink') + ' ' + getRefLink }}
+            </div>
+            <div v-else>
+              <div v-if="mystep.page">
+                <CMyInnerPage :path=mystep.page>
+                  <div v-if="mystep.descr">
+                    <div v-html="$t(mystep.descr)"></div>
+                  </div>
+                </CMyInnerPage>
+              </div>
+            </div>
+
+            <q-stepper-navigation>
+              <q-btn v-if="NUMSTEP_START + index < getlaststep" @click="step = NUMSTEP_START + index + 1"
+                     color="primary" :label="$t('dialog.avanti')" class="q-ml-sm"></q-btn>
+              <q-btn flat @click="step = NUMSTEP_START + index - 1" color="primary" :label="$t('dialog.indietro')"
+                     class="q-ml-sm"></q-btn>
+            </q-stepper-navigation>
+          </q-step>
+
+          <!--<q-step-->
+          <!--:name="getlaststep"-->
+          <!--:title="$t('dialog.finish')"-->
+          <!--icon="check-circle"-->
+          <!--:done="step > getlaststep"-->
+          <!--&gt;-->
+
+          <!--<q-stepper-navigation>-->
+          <!--<q-btn flat @click="step = getlaststep - 1" color="primary" :label="$t('dialog.indietro')" class="q-ml-sm"></q-btn>-->
+          <!--</q-stepper-navigation>-->
+          <!--</q-step>-->
+        </q-stepper>
+      </div>
+
+    </CTitleBanner>
+
+
+  </div>
+</template>
+
+<script lang="ts" src="./CStatus.ts">
+</script>
+
+<style lang="scss">
+  @import './CStatus.scss';
+</style>

src/components/CStatus/index.ts

@@ -0,0 +1 @@
+export {default as CStatus} from './CStatus.vue'

src/components/CStatusReg/CStatusReg.ts

@@ -0,0 +1,146 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { INotData } from '../../model/index'
+import { tools } from '../../store/Modules/tools'
+import { NotevoleStore } from '@store'
+import MixinBase from '@src/mixins/mixin-base'
+import { validationMixin } from 'vuelidate'
+import { validations } from '../CSignUpNotevole/CSignUp-validate'
+import { CTitleBanner } from '@components'
+import { CCardState } from '../CCardState'
+import { UserStore } from '../../store/Modules'
+
+@Component({
+  name: 'CStatusReg',
+  components: { CTitleBanner, CCardState }
+})
+
+export default class CStatusReg extends MixinBase {
+  public NUMSEC_TO_POLLING: number = 60
+  public MAXNUM_POLLING: number = 10
+
+  public myloadingload: boolean = false
+  public eseguipolling: boolean = false
+  public polling = null
+  public numpolled: number = 0
+  public datastat: INotData = {
+    num_tot_lista: 0,
+    num_reg_lista: 0,
+    num_reg: 0,
+    lastsreg: [],
+    checkuser: { verified_email: false }
+  }
+
+  public async checkifpolling() {
+    if (UserStore.state.my.profile) {
+      if (!UserStore.state.my.verified_email || UserStore.state.my.profile.teleg_id <= 0)
+        this.NUMSEC_TO_POLLING = 10
+    }
+
+    if (this.eseguipolling) {
+      clearInterval(this.polling)
+      this.polling = null
+      if (this.numpolled > 100) {
+        this.NUMSEC_TO_POLLING = 60 * 5
+      }
+      if (this.numpolled < this.MAXNUM_POLLING) {
+        if (!this.polling) {
+          this.polling = setInterval(() => {
+            this.load()
+            this.numpolled++
+          }, this.NUMSEC_TO_POLLING * 1000)
+        }
+      }
+    }
+  }
+
+  public beforeDestroy() {
+    clearInterval(this.polling)
+  }
+
+  public created() {
+    if (tools.isManager()) {
+      this.MAXNUM_POLLING = 1000
+    }
+    this.load()
+  }
+
+  get lastsreg() {
+    return this.datastat.lastsreg
+  }
+
+  public async load() {
+    // console.log('load')
+    this.myloadingload = true
+    const datastat = await NotevoleStore.actions.notevoleload()
+    if (datastat) {
+      this.datastat = datastat
+    }
+
+    // console.log('this.datastat.lastsreg')
+    // console.table(this.datastat.lastsreg)
+
+    // console.log('newsstate')
+    // console.table('GlobalStore.state.serv_settings', GlobalStore.state.serv_settings)
+
+    this.eseguipolling = true
+
+    // console.log('this.eseguipolling', this.eseguipolling)
+    this.myloadingload = false
+
+    if (UserStore.state.my) {
+      if (this.datastat.checkuser) {
+        if (this.datastat.checkuser.verified_email && !UserStore.state.my.verified_email) {
+          UserStore.state.my.verified_email = true
+          this.riaggiorna()
+        }
+        if (UserStore.state.my.profile) {
+          if ((UserStore.state.my.profile.teleg_id <= 0 && this.datastat.checkuser.profile.teleg_id > 0) ||
+            (UserStore.state.my.profile.teleg_id !== this.datastat.checkuser.profile.teleg_id > 0)) {
+            UserStore.state.my.profile.teleg_id = this.datastat.checkuser.profile.teleg_id
+            this.riaggiorna()
+          }
+          if ((UserStore.state.my.profile.teleg_checkcode <= 0 && this.datastat.checkuser.profile.teleg_checkcode > 0) ||
+            (UserStore.state.my.profile.teleg_checkcode !== this.datastat.checkuser.profile.teleg_checkcode)) {
+            UserStore.state.my.profile.teleg_checkcode = this.datastat.checkuser.profile.teleg_checkcode
+            this.riaggiorna()
+          }
+        }
+      }
+    }
+
+    this.checkifpolling()
+  }
+
+  public riaggiorna() {
+    // clearInterval(this.polling)
+    // this.polling = null
+    this.checkifpolling()
+  }
+
+  get perc_reg() {
+    if (this.datastat.num_tot_lista > 0)
+      return (this.datastat.num_reg_lista / this.datastat.num_tot_lista * 100)
+    else
+      return 0
+  }
+
+  public geticon(reg) {
+    if (reg.profile.nationality === 'IT')
+      return 'fa-flag-it'
+    else if (reg.profile.nationality === 'ES')
+      return 'fa-flag-es'
+    else if (reg.profile.nationality === 'US')
+      return 'fa-flag-us'
+    else if ((reg.profile.nationality === 'GB') || (reg.profile.nationality === 'UK'))
+      return 'fa-flag-gb'
+    else if (reg.profile.nationality === 'DE')
+      return 'fa-flag-de'
+
+    return ''
+  }
+
+  get visustat() {
+    return this.datastat.num_reg > 0 || this.datastat.num_reg_lista > 0
+  }
+
+}

src/components/CStatusReg/CStatusReg.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div v-if="visustat">
+      <CTitleBanner class="q-pa-xs" :title="$t('pages.status')" bgcolor="bg-primary" clcolor="text-white"
+                    mystyle="" myclass="myshad" canopen="true">
+
+
+        <div class="flex flex-center">
+
+          <CCardState :mytext="$t('pages.statusreg.reg')" :myval="datastat.num_reg" :myperc="100"></CCardState>
+          <CCardState :mytext="$t('pages.statusreg.giainlista')" :isperc="true" :myval="datastat.num_reg_lista"
+                      :myperc="perc_reg" :textadd="` / ` + datastat.num_tot_lista"></CCardState>
+          <div class="column animazione">
+            <div class="text-center">Nuove Registrazioni:</div>
+            <transition-group name="fade" mode="out-in"
+                              appear
+                              enter-active-class="animazione fadeIn"
+                              leave-active-class="animazione fadeOut">
+              <q-item v-for="(user, index) in lastsreg" :key="user.username" class="q-mb-xs animated" v-ripple>
+
+                <q-item-section avatar>
+                  <q-avatar v-if="geticon(user)" :class="geticon(user)">
+
+                  </q-avatar>
+                  <q-avatar v-else color="primary" text-color="white" class="text-center">
+                    {{ tools.capitalize(user.profile.nationality) }}
+                  </q-avatar>
+                </q-item-section>
+
+                <q-item-section>
+                  <q-item-label>{{ user.name }} {{ tools.firstchars_onedot(user.surname, 1) }}</q-item-label>
+                  <q-item-label caption lines="1">{{ user.username }}</q-item-label>
+                </q-item-section>
+
+                <q-item-section side>
+                  <q-item-label>{{ tools.getstrDateTimeShort(user.date_temp_reg) }}</q-item-label>
+                  <q-chip outline color="green" text-color="white" icon-right="fas fa-user-plus" size="xs"></q-chip>
+                </q-item-section>
+              </q-item>
+            </transition-group>
+          </div>
+        </div>
+      </CTitleBanner>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CStatusReg.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './CStatusReg.scss';
+</style>

src/components/CStatusReg/index.ts

@@ -0,0 +1 @@
+export {default as CStatusReg} from './CStatusReg.vue'