myprojplanet_vite/src/components/CRegistration/CRegistration.vue

<template>
  <div
    v-if="site.confpages.enableReg"
    class="row q-ma-sm centermydiv2 q-pa-sm justify-center align-center"
  >
    <div v-if="!start">
      <q-btn
        rounded
        glossy
        icon="fas fa-user-plus"
        size="lg"
        color="primary"
        @click="start = true"
        :label="$t('reg.submit')"
      >
      </q-btn>
    </div>
    <q-carousel
      v-if="start"
      v-model="slide"
      transition-prev="scale"
      transition-next="scale"
      animated
      control-color="white"
      navigation
      padding
      height="500px"
      :class="`text-white bg-primary shadow-1 rounded-borders`"
    >
      <q-carousel-slide name="start" class="column no-wrap flex-center">
        <q-icon name="fas fa-user-plus" size="56px" />
        <div class="q-mt-md text-center">
          <span class="text-h6 text-white"> {{ $t('reg.invitante') }}</span>
          <q-card class="dialog_card q-mb-lg">
            <q-card-section class="column q-ma-sm q-pa-sm q-col-gutter-sm">
              <q-btn
                rounded
                glossy
                size="lg"
                color="positive"
                @click="
                  slide = 'second';
                  noInvited = false;
                  chooseReg = true;
                "
                :label="$t('dialog.yes')"
              >
              </q-btn>

              <q-btn
                rounded
                glossy
                size="lg"
                color="negative"
                @click="
                  slide = 'second';
                  noInvited = true;
                  chooseReg = false;
                "
                :label="$t('dialog.no')"
              >
              </q-btn>
            </q-card-section>
          </q-card>
        </div>
      </q-carousel-slide>
      <q-carousel-slide name="second">
        <div v-if="noInvited" class="text-h7">
          <div class="text-center text-bold text-h6">
            Se ancora non sei stato invitato:
          </div>
          <br />
          1️⃣ 👉🏻 Entra nel canale Telegram "Progetto RISO" cliccando qui:<br />
          <div class="text-center">
            <q-btn
              type="a"
              rounded
              icon="fab fa-telegram"
              color="positive"
              href="https://t.me/+pZ40VpmL1NhkZjE0"
              target="_blank"
              label="Progetto RISO"
            >
            </q-btn>
          </div>
          <br />

          2️⃣ 👉🏻 sul post del canale fissato in alto, troverai tutte le info sul
          progetto e su come entrare nel gruppo della tua provincia.<br />
          Potrai cosi richiedere il link una volta entrato nella chat di
          gruppo.<br />
        </div>
        <div v-else-if="chooseReg">
          <div class="row justify-center items-center">
            <q-icon name="fas fa-user-plus" size="27px" class="q-mx-md" />
            <span class="text-h6 text-white"> {{ $t('reg.page_title') }}</span>
            <q-card class="q-mt-sm dialog_card q-mb-sm">
              <q-card-section>
                <div
                  v-if="site.confpages.enableRegMultiChoice"
                  style=""
                  class="column q-ma-sm centermydiv2 q-pa-sm justify-center"
                >
                  <q-btn
                    rounded
                    type="a"
                    class="col-xs-12 col-sm-6 flex-item-btn items-center"
                    icon="fab fa-telegram"
                    size="md"
                    color="primary"
                    :href="
                      invited
                        ? tools.getLinkBotTelegram(invited, regexpire)
                        : `/bot`
                    "
                    :label="$t('reg.bytelegram')"
                  >
                    <q-badge color="red" align="bottom" floating
                      >Consigliato</q-badge
                    >
                  </q-btn>
                  <div
                    :class="
                      $q.dark.isActive
                        ? `text-white`
                        : `text-black` + ` col-12 text-center`
                    "
                  >
                    se non riesci ad installare Telegram:
                  </div>
                  <q-btn
                    rounded
                    class="flex-item-btn col-xs-12 col-sm-6"
                    outline
                    icon="fas fa-envelope"
                    size="md"
                    :color="$q.dark.isActive ? `black` : `white`"
                    :text-color="$q.dark.isActive ? `white` : `black`"
                    @click="regEventEmail"
                    :label="$t('reg.byemail')"
                  >
                  </q-btn>
                </div>
                <div v-else style="margin-top: 10px; text-align: center">
                  Registrati<br />
                  <q-btn
                    rounded
                    size="md"
                    color="primary"
                    @click="clickToRegister"
                    :label="$t('reg.submit')"
                  >
                  </q-btn>
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </q-carousel-slide>
    </q-carousel>
  </div>
</template>

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