- Chart Maps Nationality

- Username lowercase
- Statistics
- Telegram

src/views/admin/extralist/extralist.ts

@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+import { GlobalStore } from '@store'
+import { tools } from '../../../store/Modules/tools'
+import { UserStore } from '../../../store/Modules'
+import { CTitleBanner } from '../../../components/CTitleBanner'
+
+@Component({
+  components: { CTitleBanner }
+})
+export default class Extralist extends Vue {
+  public users_imported: string = ''
+  private myloadingImport: boolean = false
+  private errimport: boolean = false
+  private okimport: boolean = false
+  private myrisimport: string = ''
+
+  public async importExtraList() {
+    this.myloadingImport = true
+    this.errimport = false
+    this.okimport = false
+
+    const mydata = {
+      strdata: this.users_imported,
+      locale: tools.getLocale()
+    }
+
+    const res = await UserStore.actions.importExtraList(mydata)
+
+    let esistiti = ''
+    if (res.data.numalreadyexisted > 0)
+      esistiti = ` ${res.data.numalreadyexisted} email già esistenti`
+
+    if (res.data.numadded > 0) {
+      this.okimport = true
+      this.myrisimport = `(${res.data.numadded} / ${res.data.numtot}) utenti extra importati !` + esistiti
+    } else {
+      this.errimport = true
+      this.myrisimport = `Nessun utente extra importato (trovate ${res.data.numtot})` + esistiti
+    }
+
+    this.myloadingImport = false
+  }
+
+}

src/views/admin/extralist/extralist.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <CTitleBanner title="Importa Lista Utenti Extra:"></CTitleBanner>
+    <div class="q-ma-md q-pa-sm text-center rounded-borders q-list--bordered">
+
+      <q-input v-model="users_imported"
+               autofocus
+               filled
+               bordered
+               color="blue-12"
+               @keyup.enter.stop
+               type="textarea"
+      >
+      </q-input>
+      <div class="q-ma-md q-pa-sm text-center">
+        <q-btn :loading="myloadingImport" rounded outline :disable="users_imported === ''"
+               @click="importExtraList" color="primary" icon="email">
+          Importa Lista Utenti Extra
+          <template v-slot:loading>
+            <q-spinner-hourglass class="on-left"/>
+            Importazione Utenti in corso ...
+          </template>
+        </q-btn>
+      </div>
+
+      <transition
+        enter-active-class="animated fadeIn"
+        leave-active-class="animated fadeOut"
+        appear
+
+      >
+        <CTitleBanner v-if="errimport" bgcolor="bg-warning" :title="myrisimport"></CTitleBanner>
+        <CTitleBanner v-if="okimport" :title="myrisimport"></CTitleBanner>
+      </transition>
+    </div>
+
+  </div>
+</template>
+<script lang="ts" src="./extralist.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './extralist';
+</style>

src/views/admin/extralist/index.ts

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

src/views/email/unsubscribe/unsubscribe.scss

@@ -0,0 +1,6 @@
+.mypanel {
+  padding: 10px;
+  margin: 10px;
+
+}
+

src/views/email/unsubscribe/unsubscribe.ts

@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'  // Questo va messo SEMPRE ! (ed anche $t ....) altrimenti non carica !
+
+import { UserStore } from '@store'
+
+import { serv_constants } from '../../../store/Modules/serv_constants'
+
+import { ILinkReg } from '../../../model/other'
+import { tools } from '../../../store/Modules/tools'
+
+@Component({})
+export default class Unsubscribe extends Vue {
+  public risultato: string = '...'
+  public riscode: number = 0
+  public $t: any
+
+  constructor() {
+    super()
+    console.log('Vreg constructor...')
+  }
+
+  public created() {
+    console.log('vreg created')
+    this.load()
+  }
+
+  get disiscritto() {
+    return this.riscode === serv_constants.RIS_UNSUBSCRIBED_OK
+  }
+
+  get errore() {
+    return this.riscode !== serv_constants.RIS_UNSUBSCRIBED_OK
+  }
+
+  get myrisultato() {
+    return this.risultato
+  }
+
+  get email() {
+    return this.$route.query.email
+  }
+
+  public load() {
+    // console.log('load')
+    let param
+    param = { em: this.$route.query.em, mc: this.$route.query.mc, locale: tools.getLocale()  }
+    console.log('idlink = ', param)
+    return UserStore.actions.unsubscribe(param)
+      .then((ris) => {
+        this.riscode = ris.code
+        this.risultato = ris.msg
+
+      }).catch((err) => {
+        console.log('ERR = ' + err)
+    })
+  }
+}

src/views/email/unsubscribe/unsubscribe.vue

@@ -0,0 +1,48 @@
+<template>
+    <q-page padding class="vreg">
+        <div class="q-pa-md q-gutter-sm">
+            <q-banner
+                    rounded
+                    class="bg-primary text-white"
+                    color="primary q-title"
+                    style="text-align: center;">
+                <span class="mybanner">{{ $t('components.authentication.email_verification.title_unsubscribe')}}: {{email}}</span>
+            </q-banner>
+            <br>
+
+            <transition
+                    enter-active-class="animated fadeIn"
+                    leave-active-class="animated fadeOut"
+                    appear
+
+            >
+
+                <q-banner
+                        rounded
+                        class="bg-warning text-black"
+                        style="text-align: center;"
+                        v-if="errore"
+                >
+                    <span class="mybanner">{{ myrisultato}}</span>
+                </q-banner>
+                <q-banner
+                        class="bg-positive text-white"
+                        style="text-align: center;"
+                        rounded
+                        v-if="disiscritto"
+                >
+                    <span class="mybanner">{{ $t('components.authentication.email_verification.title_unsubscribe_done') }}</span>
+                </q-banner>
+            </transition>
+
+
+        </div>
+    </q-page>
+</template>
+
+<script lang="ts" src="./unsubscribe.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './unsubscribe.scss';
+</style>

src/views/login/regok/regok.ts

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'  // Questo va messo SEMPRE ! (ed anche $t ....) altrimenti non carica !
+
+import { UserStore } from '@store'
+import { Footer } from '../../../components/Footer'
+
+@Component({
+  components: { Footer }
+})
+export default class Regok extends Vue {
+  public $t
+
+  get isEmailVerified() {
+    if (UserStore.state.my)
+      return UserStore.state.my.verified_email
+    else
+      return false
+  }
+
+}

src/views/login/regok/regok.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-page padding class="vreg">
+    <div class="q-">
+      <div class="q-pa-md q-gutter-sm">
+        <q-banner
+          rounded
+          class="bg-primary text-white"
+          color="primary q-title"
+          style="text-align: center;">
+          <span class="mybanner">{{ $t('reg.reg_ok')}}</span>
+        </q-banner>
+        <br>
+        <div class="text-center">
+          <q-icon name="fas fa-exclamation-triangle" color="warning" size="md"></q-icon>
+        </div>
+      </div>
+      <q-banner
+        v-if="!isEmailVerified"
+        rounded
+        class="bg-warning text-black"
+        color="primary q-title"
+        style="text-align: center;">
+        <div class="mybanner" v-html="$t('components.authentication.email_verification.link_sent')">
+
+        </div>
+
+      </q-banner>
+      <br>
+      <q-banner
+        v-if="!isEmailVerified"
+        rounded
+        class="bg-warning text-black"
+        color="primary q-title"
+        style="text-align: center;">
+        <div class="mybanner" v-html="$t('components.authentication.email_verification.se_non_ricevo')">
+
+        </div>
+
+      </q-banner>
+
+    </div>
+    <br>
+    <br>
+    <br>
+
+    <Footer></Footer>
+  </q-page>
+</template>
+
+<script lang="ts" src="./regok.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './regok.scss';
+</style>

src/views/login/signup_complete/signup_complete.scss

@@ -0,0 +1,12 @@
+.signup {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/views/login/signup_complete/signup_complete.ts

@@ -0,0 +1,27 @@
+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 { CSignUpNotevole } from '../../../components/CSignUpNotevole'
+
+@Component({
+  components: { CSignUpNotevole }
+})
+
+export default class SignupComplete extends Vue {
+  public $t: any
+  public adult: boolean = false
+
+  @Watch('$route.params.invited')
+  public changeadult() {
+    console.log('$route.params.invited')
+    this.adult = !!this.$route.params.invited
+  }
+
+  public created() {
+    if (!tools.getCookie(tools.APORTADOR_SOLIDARIO, ''))
+      tools.setCookie(tools.APORTADOR_SOLIDARIO, this.$route.params.invited)
+  }
+
+}

src/views/login/signup_complete/signup_complete.vue

@@ -0,0 +1,14 @@
+<template>
+    <q-page padding class="signup">
+        <CSignUpNotevole :showadultcheck="true" :showcell="true" :showaportador="true" :shownationality="true">
+
+        </CSignUpNotevole>
+    </q-page>
+
+</template>
+
+<script lang="ts" src="./signup_complete.ts">
+</script>
+<style lang="scss" scoped>
+    @import './signup_complete.scss';
+</style>

src/views/requestresetpwd/request-resetpwd-validate.ts

@@ -0,0 +1,13 @@
+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 const validations = {
+  form: {
+    email: {
+      email,
+      required
+    }
+  }
+}

src/views/requestresetpwd/requestresetpwd.ts

@@ -0,0 +1,88 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { serv_constants } from '../../store/Modules/serv_constants'
+
+import { UserStore } from '../../store/Modules/index'
+import { tools } from '../../store/Modules/tools'
+import { Logo } from '../../components/logo'
+import { validationMixin } from 'vuelidate'
+import { CTitleBanner } from '../../components/CTitleBanner'
+import { validations } from './request-resetpwd-validate'
+
+@Component({
+  name: 'RequestResetPwd',
+  mixins: [validationMixin],
+  validations,
+  components: { Logo, CTitleBanner }
+})
+
+export default class RequestResetPwd extends Vue {
+  public $q
+  public $t
+  public $v
+
+  public emailsent = false
+  public form = {
+    email: '',
+    tokenforgot: ''
+  }
+
+  get emailinviata() {
+    return this.emailsent
+  }
+
+  public submit() {
+    this.$v.form.$touch()
+
+    if (this.$v.form.$error) {
+      tools.showNotif(this.$q, this.$t('reg.err.errore_generico'))
+      return
+    }
+
+    this.$q.loading.show({ message: this.$t('reset.incorso') })
+
+    this.form.tokenforgot = ''
+
+    console.log(this.form)
+    UserStore.actions.requestpwd(this.form)
+      .then((ris) => {
+        if (ris.code === serv_constants.RIS_CODE_OK)
+          this.emailsent = true
+        else if (ris.code === serv_constants.RIS_CODE_EMAIL_NOT_EXIST)
+          tools.showNegativeNotif(this.$q, this.$t('reg.err.email_not_exist'))
+        this.$q.loading.hide()
+      }).catch((err) => {
+        console.log('ERROR = ' + err.error)
+        this.$q.loading.hide()
+      })
+
+  }
+
+  public errorMsg(cosa: string, item: any) {
+    try {
+      if (!item.$error) {
+        return ''
+      }
+      if (item.$params.email && !item.email) {
+        return this.$t('reg.err.email')
+      }
+
+      if (item.required !== undefined) {
+        if (!item.required) {
+          return this.$t('reg.err.required')
+        }
+      }
+
+      if (cosa === 'email') {
+        if (!item.isUnique) {
+          return this.$t('reg.err.duplicate_email')
+        }
+      }
+
+      return ''
+    } catch (error) {
+      // console.log("ERR : " + error);
+    }
+  }
+
+}

src/views/requestresetpwd/requestresetpwd.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="row justify-center text-center padding">
+    <div class="q-gutter-sm q-ma-sm" style="max-width: 800px; margin: auto;">
+
+      <div v-if="!emailinviata">
+        <q-banner
+          rounded
+          class="bg-primary text-white"
+          style="text-align: center;">
+          <span class="mybanner">{{ $t('reset.title_reset_pwd')}}</span>
+        </q-banner>
+        <br>
+
+        <q-input
+          v-model="form.email"
+          rounded outlined
+          autocomplete="email"
+          @blur="$v.form.email.$touch"
+          :error="$v.form.email.$error"
+          :error-message="errorMsg('email', $v.form.email)"
+          maxlength="50"
+          debounce="1000"
+          :label="$t('reg.email')">
+
+          <template v-slot:prepend>
+            <q-icon name="email"/>
+          </template>
+
+        </q-input>
+
+        <br>
+
+        <div align="center q-ma-sm">
+          <q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">
+            {{$t('reset.send_reset_pwd')}}
+          </q-btn>
+        </div>
+
+      </div>
+      <div v-else>
+        <q-banner
+          rounded
+          class="bg-positive text-white"
+          style="text-align: center;">
+          <span class="mybanner">{{ $t('reset.email_sent')}}</span>
+        </q-banner>
+        <br>
+
+        <div>
+          <strong>{{ $t('reset.check_email')}}</strong>
+        </div>
+
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./requestresetpwd.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './requestresetpwd';
+</style>

src/views/user/dashboard/dashboard.ts

@@ -0,0 +1,81 @@
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import MixinBase from '../../../mixins/mixin-base'
+import { CMyFieldDb, CTitleBanner, CProfile } from '@components'
+import { UserStore } from '../../../store/Modules'
+import { tools } from '../../../store/Modules/tools'
+import { DefaultUser } from '@src/store/Modules/UserStore'
+
+@Component({
+  components: { CProfile, CTitleBanner, CMyFieldDb }
+})
+
+export default class Dashboard extends MixinBase {
+  public $v
+  public $q
+  public dashboard = {aportador: DefaultUser, downline: []}
+
+  public mythis() {
+    return this
+  }
+
+  public created() {
+
+    UserStore.actions.getDashboard({}).then((ris) => {
+      console.log('getDashboard', ris)
+      if (ris.aportador === undefined) {
+        this.dashboard.aportador = DefaultUser
+      } else {
+        this.dashboard.aportador = ris.aportador
+      }
+      if (ris.downline === undefined) {
+        this.dashboard.downline = []
+      } else {
+        this.dashboard.downline = [...ris.downline]
+      }
+
+      // console.log('this.dashboard', this.dashboard)
+    })
+  }
+
+  public getletter(user) {
+    return user.name[0].toUpperCase()
+  }
+
+  public getnumber(user, index) {
+    return index
+  }
+
+  public getstatecolor(user) {
+    return (this.dashboard.aportador.verified_email) ? 'green' : 'gray'
+  }
+
+  public getmoneycolor(user) {
+    return (this.dashboard.aportador.made_gift) ? 'green' : 'gray'
+  }
+
+  public get2peoplecolor(user, index) {
+    if (!!user.downline)
+      return (user.downline.length >= 2) ? 'green' : 'gray'
+    else
+      return 'grey'
+  }
+  public getnumpeople(user) {
+    if (!!user.downline)
+      return (user.downline.length)
+    else
+      return 0
+  }
+
+  get getRefLink() {
+    return UserStore.getters.getRefLink()
+  }
+
+  public copylink() {
+    tools.copyStringToClipboard(this, this.getRefLink)
+  }
+
+  get madegift() {
+    return UserStore.state.my.made_gift
+  }
+
+}

src/views/user/dashboard/dashboard.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="q-ma-xs q-gutter-xs q-pa-xs">
+
+    <CTitleBanner class="q-pa-xs" :title="$t('pages.dashboard')" bgcolor="bg-info" clcolor="text-white"
+                  mystyle=" " myclass="myshad">
+
+      <q-field outlined bottom-slots :label="$t('reg.reflink')" stack-label class="text-center">
+        <template v-slot:prepend>
+          <q-btn round dense flat icon="far fa-copy" @click="copylink"/>
+        </template>
+
+        <template v-slot:control>
+          <div class="self-center full-width no-outline text-center wrapword" tabindex="0">{{getRefLink}}</div>
+        </template>
+      </q-field>
+
+      <!--<q-toolbar class="bg-primary text-white shadow-2">-->
+        <!--<q-toolbar-title class="text-center">{{ $t('reg.aportador_solidario')}}</q-toolbar-title>-->
+      <!--</q-toolbar>-->
+
+<!--
+      <q-list bordered v-if="!!dashboard.aportador.name">
+        <q-item class="q-my-sm" clickable v-ripple>
+          <q-item-section avatar>
+            <q-avatar color="primary" text-color="white">
+              {{ getletter(dashboard.aportador) }}
+            </q-avatar>
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label>{{ dashboard.aportador.username }} ({{ dashboard.aportador.name }} {{ dashboard.aportador.surname }})</q-item-label>
+            <q-item-label caption lines="1">{{ dashboard.aportador.email }}</q-item-label>
+          </q-item-section>
+
+          <q-item-section side>
+            <q-icon name="fas fa-user-check" color="green"></q-icon>
+          </q-item-section>
+        </q-item>
+      </q-list>
+      <div v-else class="q-pa-md text-center">
+        Nessun Dato
+      </div>
+-->
+
+      <q-toolbar class="bg-positive text-white shadow-2">
+        <q-toolbar-title class="text-center">{{ $t('dashboard.downline')}}</q-toolbar-title>
+      </q-toolbar>
+
+      <q-list bordered v-if="!!dashboard.downline && dashboard.downline.length > 0">
+        <q-item class="q-my-sm" clickable v-ripple v-for="(user, index) in dashboard.downline" :key="index">
+          <q-item-section avatar>
+            <div class="row">
+              <q-avatar text-color="primary">
+                {{ getnumber(user, index + 1) }}°
+              </q-avatar>
+              <q-avatar color="primary" text-color="white">
+                {{ getletter(user) }}
+              </q-avatar>
+            </div>
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label>{{ user.username }} ({{ user.name }} {{ user.surname }})</q-item-label>
+            <q-item-label caption lines="1">{{ user.email }}</q-item-label>
+          </q-item-section>
+
+          <q-item-section side>
+            <div class="row q-gutter-md justify-center items-center">
+              <q-icon size="sm" name="fas fa-user-check" :color="getstatecolor(user)"></q-icon>
+              <q-icon size="sm" name="fas fa-gift" :color="getmoneycolor(user)"></q-icon>
+              <q-avatar text-color="primary">
+                {{ getnumpeople(user) }}
+              </q-avatar>
+              <q-icon size="sm" name="fas fa-user-friends" :color="get2peoplecolor(user)"></q-icon>
+            </div>
+          </q-item-section>
+        </q-item>
+      </q-list>
+      <div v-else class="q-pa-md text-center">
+        Nessun Dato
+      </div>
+
+    </CTitleBanner>
+
+<!--
+    <CTitleBanner class="q-pa-xs" :title="$t('text.dashboard.madegift')" bgcolor="bg-info" clcolor="text-white"
+                  mystyle=" " myclass="myshad">
+      <div class="q-pa-sm text-center">
+
+        <div v-if="madegift" class="q-gutter-md">
+          <q-icon name="fas fa-gift" size="lg" color="green"></q-icon>
+          <q-icon name="fas fa-thumbs-up" size="lg" color="green"></q-icon>
+        </div>
+        <div v-else class="q-gutter-md">
+          <q-icon name="fas fa-gift" size="lg" color="grey"></q-icon>
+          <q-icon name="fas fa-exclamation-triangle" size="lg" color="orange"></q-icon>
+        </div>
+
+      </div>
+    </CTitleBanner>
+-->
+  </div>
+</template>
+
+<script lang="ts" src="./dashboard.ts">
+</script>
+<style lang="scss" scoped>
+  @import './dashboard.scss';
+</style>

src/views/user/profile/profile.scss

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

src/views/user/profile/profile.ts

@@ -0,0 +1,25 @@
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import MixinBase from '../../../mixins/mixin-base'
+import { CMyFieldDb, CTitleBanner, CProfile, CStatus } from '@components'
+import { UserStore } from '../../../store/Modules'
+
+@Component({
+  components: { CProfile, CTitleBanner, CMyFieldDb, CStatus }
+})
+
+export default class Profile extends MixinBase {
+  public $v
+  public $q
+
+  public mythis() {
+    return this
+  }
+
+  get getpayment() {
+    return UserStore.state.my.profile.paymenttypes
+  }
+  get profile() {
+    return UserStore.state.my.profile
+  }
+
+}

src/views/user/profile/profile.vue

@@ -0,0 +1,103 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <div class="q-gutter-sm q-pa-xs q-pb-md">
+    <CTitleBanner class="q-pa-xs" :title="$t('pages.profile')" bgcolor="bg-primary" clcolor="text-white"
+                   myclass="myshad" :canopen="true">
+
+
+      <div class="column">
+        <div class="row">
+          <CMyFieldDb :title="$t('reg.name')"
+                      table="users"
+                      mykey="name"
+                      :type="tools.FieldType.string">
+          </CMyFieldDb>
+          <CMyFieldDb :title="$t('reg.surname')"
+                      table="users"
+                      mykey="surname"
+                      :type="tools.FieldType.string">
+          </CMyFieldDb>
+        </div>
+        <div class="row">
+          <CMyFieldDb :title="$t('reg.username')"
+                      table="users"
+                      mykey="username"
+                      disable="true"
+                      :type="tools.FieldType.string">
+          </CMyFieldDb>
+          <CMyFieldDb :title="$t('reg.email')"
+                      table="users"
+                      mykey="email"
+                      disable="true"
+                      :type="tools.FieldType.string">
+          </CMyFieldDb>
+        </div>
+        <CMyFieldDb :title="$t('reg.nationality')"
+                    table="users"
+                    mykey="profile"
+                    mysubkey="nationality"
+                    :type="tools.FieldType.nationality">
+        </CMyFieldDb>
+        <div class="row">
+          <CMyFieldDb :title="$t('reg.intcode_cell')"
+                      table="users"
+                      mykey="profile"
+                      mysubkey="intcode_cell"
+                      :type="tools.FieldType.intcode">
+          </CMyFieldDb>
+          <CMyFieldDb :title="$t('reg.cell')"
+                      table="users"
+                      mykey="profile"
+                      mysubkey="cell"
+                      :type="tools.FieldType.string">
+          </CMyFieldDb>
+        </div>
+        <!--<CMyFieldDb :title="$t('reg.username_telegram')"
+                    table="users"
+                    mykey="profile"
+                    mysubkey="username_telegram"
+                    :type="tools.FieldType.string">
+        </CMyFieldDb>-->
+        <!--<CMyFieldDb title="Telegram Id"
+                    table="users"
+                    :readonly="true"
+                    mykey="profile"
+                    mysubkey="teleg_id"
+                    :type="tools.FieldType.number">
+        </CMyFieldDb>-->
+      </div>
+    </CTitleBanner>
+    <CTitleBanner class="q-pa-xs" :title="$t('pages.payment')" bgcolor="bg-primary" clcolor="text-white"
+                   myclass="myshad" :canopen="true">
+      <div class="row fa-border justify-center items-center">
+        <CMyFieldDb :title="$t('reg.country_pay')"
+                    table="users"
+                    mykey="profile"
+                    mysubkey="country_pay"
+                    :type="tools.FieldType.nationality">
+        </CMyFieldDb>
+        <CMyFieldDb :title="$t('reg.email_paypal')"
+                    table="users"
+                    mykey="profile"
+                    mysubkey="email_paypal"
+                    :type="tools.FieldType.string">
+        </CMyFieldDb>
+      </div>
+
+      <CMyFieldDb :title="$t('reg.paymenttype')"
+                  table="users"
+                  mykey="profile"
+                  mysubkey="paymenttypes"
+                  :type="tools.FieldType.multiselect"
+                  jointable="paymenttypes">
+      </CMyFieldDb>
+
+    </CTitleBanner>
+  </div>
+</template>
+
+<script lang="ts" src="./profile.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './profile.scss';
+</style>