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="md"
        color="primary"
        @click="buttRegistrati()"
        :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="
                  listlinksreg.length > 0 ? (slide = 'sceglilink') : (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="sceglilink">
        <q-card class="dialog_card q-mb-lg">
          <div class="q-ma-sm q-pa-sm text-h6 text-blue text-bold">{{ t('reg.title_reg_con_link') }}</div>
          <q-card-section class="column q-ma-sm q-pa-sm q-col-gutter-sm text-black">
            <div
              v-for="(rec, i) in listlinksreg"
              :key="i"
            >
              <div class="q-pa-xs q-ma-xs q-border q-rounded my-custom-border">
                <CMyUser
                  :mycontact="rec"
                  :visu="costanti.FIND_PEOPLE"
                  @setCmd="tools.setCmd"
                  :actionType="actionType"
                  :hideellipses="true"
                >
                </CMyUser>
                <!--<CContactUser
                  :myuser="rec"
                  :showBtnActivities="false"
                  :sendRIS="false"
                  :actionType="actionType"
                />
              </div>-->
              </div>

              <div class="q-ma-md q-pa-md">
                <a
                  href="/registrati"
                  target="_blank"
                  >👉🏻 {{ t('reg.scelgo_l_invitante') }}</a
                >
              </div>

              <div class="text-center">
                <q-btn
                  rounded
                  glossy
                  size="md"
                  color="primary"
                  @click="slide = 'start'"
                  :label="$t('dialog.indietro')"
                >
                </q-btn>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </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 nei gruppi Territoriali su Telegram:<br />
          <div class="text-center">
            <q-btn
              type="a"
              rounded
              icon="fab fa-telegram"
              color="positive"
              href="https://t.me/riso_canale/3"
              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 q-my-md"
                    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>
                  <br />
                  <div :class="$q.dark.isActive ? `text-white` : `text-black` + ` col-12 text-center`">
                    <div class="bg-grey-4">
                      <br />
                      se non hai Telegram puoi registrarti con solo l'email ma
                      <span style="text-decoration: underline">non potrai contattare gli iscritti</span>.
                      <q-btn
                        rounded
                        class="flex-item-btn col-xs-12 col-sm-6"
                        outline
                        icon="fas fa-envelope"
                        size="0.75rem"
                        :color="$q.dark.isActive ? `black` : `white`"
                        :text-color="$q.dark.isActive ? `white` : `black`"
                        @click="regEventEmail"
                        :label="$t('reg.byemail')"
                      >
                      </q-btn>
                    </div>
                  </div>
                </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>