newfreeplanet_OLD/src/components/CSignUp/CSignUp.vue

<template>
  <div>
    <div v-if="need_Telegram && tools.isLogged() && tools.getUsername()" class="text-center">
      <q-banner
        rounded
        class="bg-green text-white"
        style="text-align: center;"
      >
        <span class="mybanner">
        {{ tools.getUsername() }} sei già correttamente registrato ed hai accesso alla Piattaforma<br>
        </span>
      </q-banner>

      <div class="row q-ma-sm q-pa-sm justify-center">
      <q-btn class="q-ma-sm" color="primary" icon="fas fa-home" label="Vai alla Home" to="/"></q-btn>

        <q-btn class="q-ma-sm" color="accent" icon="fas fa-sign" label="Voglio vedere la pagina di Registrazione" @click="visureg = true"></q-btn>
        <br>
      </div>

    </div>
    <div v-if="!tools.isLogged() || visureg"
         class="text-center">
      <div>

        <div>
          <logo></logo>

          <q-btn class="q-ma-sm" color="positive" icon="fas fa-home" label="Se sei già Registrato CLICCA QUI" to="/"></q-btn>

          <div v-if="need_Telegram" class="mybanner" v-html="t('pages.need_Telegram')"></div><br>

          <div v-if="!isalreadyReg && !(visubuttBOT && need_Telegram)">
            <CTitleBanner :title="$t('pages.SignUp')"></CTitleBanner>

          </div>

        </div>
      </div>


      <div v-if="visubuttBOT && need_Telegram" class="q-gutter-md">
        <q-banner
          rounded
          class="bg-green-5 text-white"
          style="text-align: center;"
        >
          <div class="q-ma-md">
            <q-btn rounded color="primary" icon="fab fa-telegram" :label="$t('components.authentication.telegram.regbot', {botname: tools.getBotName() })"
                   type="a"
                   :href="tools.getLinkBotTelegram(signup.aportador_solidario, regexpire)" target="_blank"></q-btn>
            <br>
          </div>
        </q-banner>

      </div>

      <div v-else-if="!isalreadyReg" class="q-gutter-sm q-mt-sm">

        <div v-if="signup.username === 'undefined'">
          <br>
          Vai su <b>BOT RISO</b> Telegram ed imposta l'Username di Telegram.<br><br>
          <q-btn rounded color="primary" icon="fab fa-telegram" label="Apri BOT"
                 type="a"
                 :href="tools.getLinkBotTelegram(signup.aportador_solidario, regexpire)" target="_blank"></q-btn>
          <br><br>

        </div>
        <div v-else>
          <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$.aportador_solidario.$touch"
            :error="v$.aportador_solidario.$error"
            :error-message="tools.errorMsg('aportador_solidario', v$.aportador_solidario)"
            maxlength="20"
            debounce="1000"

            :label="$t('reg.aportador_solidario')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <!--<q-input
            v-model="signup.email"
            rounded outlined
            @blur="v$.email.$touch"
            @update:model-value="changeemail()"
            :error="v$.email.$invalid"
            :error-message="tools.errorMsg( 'email', v$.email)"
            maxlength="50"
            debounce="2000"
            :label="$t('reg.email')">

            <template v-slot:prepend>
              <q-icon name="email"/>
            </template>

          </q-input> -->

          <q-input
            v-model="signup.username"
            :readonly="tools.getAskToVerifyReg()"
            rounded outlined
            @blur="v$.username.$touch"
            @update:model-value="changeusername"
            :error="v$.username.$error"
            @keydown.space="(event) => event.preventDefault()"
            maxlength="20"
            debounce="1000"
            :error-message="tools.errorMsg( 'username', v$.username) || (isalreadyReg ? 'L\'Username è gia stato registrato!' : '')"
            :label="$t('reg.username_reg')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.email"
            rounded outlined
            @update:model-value="changeemail()"
            maxlength="50"
            debounce="3000"
            :rules="[ myRuleEmail ]"
            lazy-rules
            :label="$t('reg.email_reg')">

            <template v-slot:prepend>
              <q-icon name="email"/>
            </template>

          </q-input>

          <div v-if="show_namesurname">
            <q-input
              v-model="signup.name"
              rounded outlined
              @blur="v$.name.$touch"
              :error="v$.name.$error"
              maxlength="30"
              debounce="1000"
              :error-message="tools.errorMsg( 'name', v$.name)"
              :label="$t('reg.name')">

              <template v-slot:prepend>
                <q-icon name="person"/>
              </template>

            </q-input>

            <q-input
              v-model="signup.surname"
              rounded outlined
              :error="v$.surname.$error"
              @blur="v$.surname.$touch"
              maxlength="30"
              debounce="1000"
              :error-message="tools.errorMsg( 'surname', v$.surname)"
              :label="$t('reg.surname')">

              <template v-slot:prepend>
                <q-icon name="person"/>
              </template>

            </q-input>

          </div>

          <q-input
            v-model="signup.password"
            type="password"
            rounded outlined
            @blur="v$.password.$touch"
            :error="v$.password.$error"
            :error-message="`${tools.errorMsg( 'password', v$.password)}`"
            maxlength="30"
            debounce="1000"
            :label="$t('reg.password_reg')">

            <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$.repeatPassword.$touch"
            :error="v$.repeatPassword.$error"
            :error-message="`${tools.errorMsg( 'repeatpassword', v$.repeatPassword)}`"

            :label="$t('reg.repeatPassword')">

            <template v-slot:prepend>
              <q-icon name="vpn_key"/>
            </template>

          </q-input>

          <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>

          <!--<vue-tel-input
            v-if="showcell"
            @country-changed="intcode_change()"
            :value="signup.profile.cell"
            :placeholder="$t('reg.cell')"
            maxlength="20"
            :enabledCountryCode="true"
            inputClasses="clCell"
            wrapperClasses="clCellCode">
          </vue-tel-input>-->

          <div class="text-center">
            <q-btn label="Mostra Privacy" @click="showpolicy = true"></q-btn>
          </div>

          <q-dialog v-model="showpolicy">
            <q-card class="dialog_card">
              <q-toolbar class="bg-primary text-white">
                <q-toolbar-title>
                  Privacy Policy
                </q-toolbar-title>
                <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
              </q-toolbar>
              <q-card-section class="inset-shadow">
                <PagePolicy
                    v-if="site.policy"
                    :owneremail="site.policy.owneremail"
                    :siteName="site.policy.siteName"
                    :ownerDataName="site.policy.ownerDataName"
                    :managerData="site.policy.managerData"
                    :includeData="site.policy.includeData"
                    :url="site.policy.url"
                    :lastdataupdate="site.policy.lastdataupdate"
                    :country="site.policy.country"
            >

            </PagePolicy>
              </q-card-section>
            </q-card>
          </q-dialog>

          <q-checkbox
            v-model="signup.terms"
            color="secondary"
            @blur="v$.terms.$touch"
            :error="v$.terms.$error"
            :error-message="`${tools.errorMsg( 'terms', v$.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()'
                   :label="$t('reg.submit')">
            </q-btn>
          </div>
          <br/><br/><br/>

        </div>
      </div>
      <div v-else-if="isalreadyReg">
        <q-banner class="bg-negative text-white text-h5" transition-show="jump-down">
          Utente già registrato con l'username {{signup.username}}
        </q-banner>

      </div>

    </div>

  </div>
</template>

<script lang="ts" src="./CSignUp.ts">
</script>
<style lang="scss" scoped>
@import './CSignUp.scss';
</style>