myprojplanet_vite/src/components/CSignUp/CSignUp.vue

<template>
  <div class="signup-container">
    <div
      v-if="tools.isLogged() && tools.getUsername() && !collettivo"
      class="already-logged"
    >
      <div class="success-card">
        <q-icon
          name="check_circle"
          size="64px"
          color="positive"
          class="q-mb-md"
        />
        <div class="success-message">{{ tools.getUsername() }}, sei già registrato!</div>
        <div class="action-buttons">
          <q-btn
            unelevated
            rounded
            color="primary"
            icon="fas fa-home"
            label="Vai alla Home"
            to="/"
            class="action-btn"
          />
          <q-btn
            unelevated
            rounded
            outline
            color="primary"
            label="Vedi Registrazione"
            @click="visureg = true"
            class="action-btn"
          />
        </div>
      </div>
    </div>

    <div
      v-if="!tools.isLogged() || visureg || collettivo"
      class="signup-content"
    >
<div class="header-section">
  <logo mystyle="width: 50px !important; height: 50px !important;" />
  <div
    v-if="!isalreadyReg && !(visubuttBOT && needTelegram)"
    class="title-section"
  >
    <h1 class="signup-title">{{ $t('pages.SignUp') }}</h1>
    <p class="signup-subtitle">Entra in RISO in pochi passi</p>
  </div>
</div>
      <div
        v-if="visubuttBOT && needTelegram && !collettivo"
        class="telegram-registration"
      >
        <CRegistration
          :invited="signup.aportador_solidario"
          :regexpire="regexpire"
          @regEventEmail="regEventEmail"
          :signupform="true"
        />
      </div>

      <div
        v-else-if="!isalreadyReg || collettivo"
        class="form-container"
      >
        <div
          v-if="signup.username === 'undefined'"
          class="telegram-setup"
        >
          <q-icon
            name="fab fa-telegram"
            size="80px"
            color="primary"
            class="q-mb-md"
          />
          <p class="telegram-message">
            Vai su <strong>BOT RISO</strong> Telegram ed imposta l'Username
          </p>
          <q-btn
            unelevated
            rounded
            color="primary"
            size="lg"
            icon="fab fa-telegram"
            label="Apri BOT"
            type="a"
            :href="tools.getLinkBotTelegram(signup.aportador_solidario, regexpire)"
            target="_blank"
            class="telegram-btn"
          />
        </div>

        <div
          v-else
          class="registration-form"
        >
          <!-- Progress Indicator -->
          <div class="progress-indicator">
            <div
              v-for="step in 3"
              :key="step"
              class="progress-step"
              :class="{
                active: parseInt(slide) >= step,
                completed: parseInt(slide) > step,
              }"
            >
              <div class="step-circle">
                <q-icon
                  v-if="parseInt(slide) > step"
                  name="check"
                  size="20px"
                  color="white"
                />
                <span v-else>{{ step }}</span>
              </div>
              <div class="step-label">
                {{ step === 1 ? 'Dati' : step === 2 ? 'Account' : 'Sicurezza' }}
              </div>
            </div>
            <div
              class="progress-line"
              :style="{ width: `${(parseInt(slide) - 1) * 50}%` }"
            ></div>
          </div>

          <!-- Carousel -->
          <q-carousel
            ref="carousel"
            v-model="slide"
            animated
            transition-prev="slide-right"
            transition-next="slide-left"
            swipeable
            control-color="primary"
            class="modern-carousel"
            :arrows="false"
            :navigation="false"
            height="auto"
          >
            <!-- SLIDE 1: Email + Aportador -->
            <q-carousel-slide
              name="1"
              class="carousel-slide"
            >
              <div class="slide-content">
                <div class="form-fields">
                  <q-input
                    v-if="
                      showaportador && signup.aportador_solidario !== tools.APORTADOR_NONE
                    "
                    ref="inputAportador"
                    v-model="signup.aportador_solidario"
                    :readonly="!!ap_iniziale"
                    rounded
                    outlined
                    filled
                    class="modern-input"
                    @keyup.enter="!checkifDisabled ? $refs.carousel.next() : null"
                    @blur="v$.aportador_solidario.$touch"
                    :error="v$.aportador_solidario.$error"
                    :error-message="
                      tools.errorMsg('aportador_solidario', v$.aportador_solidario)
                    "
                    maxlength="20"
                    debounce="1000"
                    :label="
                      collettivo
                        ? t('reg.username_admin_collettivo')
                        : t('reg.aportador_solidario')
                    "
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="person"
                        color="primary"
                      />
                    </template>
                  </q-input>

                  <q-input
                    ref="inputEmail"
                    v-model="signup.email"
                    rounded
                    outlined
                    filled
                    class="modern-input"
                    @update:model-value="changeemail()"
                    maxlength="50"
                    v-on:keyup.enter="!checkifDisabled ? $refs.carousel.next() : null"
                    debounce="2000"
                    :rules="[myRuleEmail]"
                    :label="
                      collettivo ? t('reg.email_reg_collettivo') : t('reg.email_reg')
                    "
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="email"
                        color="primary"
                      />
                    </template>
                  </q-input>
                </div>
              </div>
            </q-carousel-slide>

            <!-- SLIDE 2: Username + Nome/Cognome -->
            <q-carousel-slide
              name="2"
              class="carousel-slide"
            >
              <div class="slide-content">
                <div class="slide-header">
                  <q-icon
                    name="person"
                    size="40px"
                    color="primary"
                  />
                  <h2 class="slide-title">Il tuo profilo</h2>
                </div>

                <div class="form-fields">
                  <q-input
                    ref="inputUsername"
                    v-model="signup.username"
                    :readonly="
                      tools.getAskToVerifyReg() && !site.confpages?.enableRegMultiChoice
                    "
                    rounded
                    outlined
                    filled
                    class="modern-input"
                    @blur="v$.username.$touch"
                    @update:model-value="changeusername"
                    :error="v$.username.$error"
                    @keydown.space="(event) => event.preventDefault()"
                    @keyup.enter="
                      !v$.username.$error && show_namesurname
                        ? $refs.inputName.focus()
                        : !checkifDisabled
                          ? $refs.carousel.next()
                          : null
                    "
                    maxlength="20"
                    debounce="500"
                    :error-message="
                      tools.errorMsg('username', v$.username) ||
                      (isalreadyReg ? 'Username già registrato!' : '')
                    "
                    :label="
                      tools.getConfSiteOptionEnabled(
                        shared_consts.ConfSite.askUSernameTelegramToTheReg
                      )
                        ? t('reg.username_telegram')
                        : t('reg.username_reg')
                    "
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="person"
                        color="primary"
                      />
                    </template>
                  </q-input>

                  <div v-if="collettivo">
                    <q-input
                      ref="inputName"
                      v-model="signup.name"
                      rounded
                      outlined
                      filled
                      class="modern-input"
                      @blur="v$.name.$touch"
                      :error="v$.name.$error"
                      maxlength="30"
                      debounce="1000"
                      v-on:keyup.enter="!checkifDisabled ? $refs.carousel.next() : null"
                      :error-message="tools.errorMsg('name', v$.name)"
                      :label="$t('reg.name_opt_collettivo')"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="badge"
                          color="primary"
                        />
                      </template>
                    </q-input>
                  </div>

                  <div
                    v-else-if="show_namesurname"
                    class="name-fields"
                  >
                    <q-input
                      ref="inputName"
                      v-model="signup.name"
                      rounded
                      outlined
                      filled
                      class="modern-input"
                      @blur="v$.name.$touch"
                      :error="v$.name.$error"
                      maxlength="30"
                      debounce="1000"
                      @keyup.enter="$refs.inputSurname.focus()"
                      :error-message="tools.errorMsg('name', v$.name)"
                      :label="
                        tools.getConfSiteOptionEnabled(
                          shared_consts.ConfSite.regNameSurnameMandatory
                        )
                          ? t('reg.name')
                          : t('reg.name_opt')
                      "
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="badge"
                          color="primary"
                        />
                      </template>
                    </q-input>

                    <q-input
                      ref="inputSurname"
                      v-model="signup.surname"
                      rounded
                      outlined
                      filled
                      class="modern-input"
                      :error="v$.surname.$error"
                      @blur="v$.surname.$touch"
                      maxlength="30"
                      debounce="1000"
                      v-on:keyup.enter="!checkifDisabled ? $refs.carousel.next() : null"
                      :error-message="tools.errorMsg('surname', v$.surname)"
                      :label="
                        tools.getConfSiteOptionEnabled(
                          shared_consts.ConfSite.regNameSurnameMandatory
                        )
                          ? t('reg.surname')
                          : t('reg.surname_opt')
                      "
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="badge"
                          color="primary"
                        />
                      </template>
                    </q-input>
                  </div>
                </div>
              </div>
            </q-carousel-slide>

            <!-- SLIDE 3: Password + Privacy -->
            <q-carousel-slide
              name="3"
              class="carousel-slide"
            >
              <div class="slide-content">
                <div class="slide-header">
                  <q-icon
                    name="lock"
                    size="40px"
                    color="primary"
                  />
                  <h2 class="slide-title">Scegli una password sicura</h2>
                </div>

                <div class="form-fields">
                  <q-input
                    ref="inputPassword"
                    v-model="signup.password"
                    class="modern-input"
                    :type="typePassword"
                    rounded
                    outlined
                    filled
                    @blur="v$.password.$touch"
                    :error="v$.password.$error"
                    :error-message="tools.errorMsg('password', v$.password)"
                    @keyup.enter="
                      !v$.password.$error ? $refs.inputPassword2.focus() : null
                    "
                    maxlength="30"
                    debounce="1000"
                    :label="$t('reg.password_reg')"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="vpn_key"
                        color="primary"
                      />
                    </template>
                    <template v-slot:append>
                      <q-btn
                        flat
                        dense
                        round
                        tabindex="-1"
                        :icon="
                          typePassword === 'password' ? 'visibility_off' : 'visibility'
                        "
                        @click="showPassword"
                        color="primary"
                      />
                    </template>
                  </q-input>

                  <q-input
                    ref="inputPassword2"
                    v-model="signup.repeatPassword"
                    :type="typePassword"
                    maxlength="30"
                    rounded
                    outlined
                    filled
                    class="modern-input"
                    @blur="v$.repeatPassword.$touch"
                    :error="v$.repeatPassword.$error"
                    :error-message="tools.errorMsg('repeatpassword', v$.repeatPassword)"
                    v-on:keyup.enter="allowSubmit() ? submitOk() : null"
                    :label="$t('reg.repeatPassword')"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="vpn_key"
                        color="primary"
                      />
                    </template>
                    <template v-slot:append>
                      <q-btn
                        flat
                        dense
                        round
                        tabindex="-1"
                        :icon="
                          typePassword === 'password' ? 'visibility_off' : 'visibility'
                        "
                        @click="showPassword"
                        color="primary"
                      />
                    </template>
                  </q-input>

                  <!-- Privacy Section -->
                  <div class="privacy-section">
                    <q-separator class="q-my-md" />

                    <div class="privacy-link">
                      <q-btn
                        flat
                        dense
                        no-caps
                        color="primary"
                        icon="policy"
                        label="Leggi la Privacy Policy"
                        @click="showpolicy = true"
                      />
                    </div>

                    <q-checkbox
                      v-model="signup.terms"
                      color="primary"
                      class="privacy-checkbox"
                      :label="$t('reg.terms')"
                    />

                    <q-checkbox
                      v-if="showadultcheck"
                      v-model="iamadult"
                      color="primary"
                      class="privacy-checkbox"
                      :label="$t('reg.onlyadult')"
                    />
                  </div>
                </div>
              </div>
            </q-carousel-slide>
          </q-carousel>

          <!-- Privacy Dialog -->
          <q-dialog
            v-model="showpolicy"
            maximized
          >
            <q-card>
              <q-toolbar class="bg-primary text-white">
                <q-toolbar-title>Privacy Policy</q-toolbar-title>
                <q-btn
                  flat
                  round
                  dense
                  icon="close"
                  v-close-popup
                />
              </q-toolbar>
              <q-card-section class="scroll">
                <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"
                />
              </q-card-section>
            </q-card>
          </q-dialog>

          <!-- Fixed Bottom Buttons -->
          <div class="fixed-bottom-actions">
            <div class="action-row">
              <q-btn
                v-if="parseInt(slide) > 1"
                unelevated
                rounded
                outline
                color="primary"
                icon="arrow_back"
                label="Indietro"
                @click="$refs.carousel.previous()"
                class="nav-btn prev-btn"
              />

              <q-btn
                v-if="parseInt(slide) < 3"
                unelevated
                rounded
                color="primary"
                icon-right="arrow_forward"
                :label="parseInt(slide) === 1 ? 'Inizia' : 'Continua'"
                @click="$refs.carousel.next()"
                :disable="checkifDisabled"
                class="nav-btn next-btn"
              />

              <q-btn
                v-if="parseInt(slide) === 3"
                unelevated
                rounded
                color="positive"
                icon-right="check"
                label="Registrati"
                @click="submitOk"
                :disable="!allowSubmit()"
                class="nav-btn submit-btn"
                size="lg"
              />
            </div>
          </div>
        </div>
      </div>

      <div
        v-else-if="isalreadyReg && !collettivo"
        class="error-card"
      >
        <q-icon
          name="error"
          size="64px"
          color="negative"
          class="q-mb-md"
        />
        <div class="error-message">
          Utente già registrato con username <strong>{{ signup.username }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

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