- aggiornati form registrazione
- Login - Password dimenticata - Aggiorna password. - Email registrazione - Ammetti Utente
This commit is contained in:
Surya Paolo
@@ -1,223 +1,275 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="site.confpages?.enableReg"
|
||||
class="row q-ma-sm centermydiv2 q-pa-sm justify-center align-center"
|
||||
class="registration-container"
|
||||
>
|
||||
<div v-if="!start">
|
||||
<!-- Bottone Iniziale -->
|
||||
<div
|
||||
v-if="!start"
|
||||
class="start-button-wrapper"
|
||||
>
|
||||
<q-btn
|
||||
rounded
|
||||
glossy
|
||||
icon="fas fa-user-plus"
|
||||
size="md"
|
||||
unelevated
|
||||
size="lg"
|
||||
color="primary"
|
||||
icon="person_add"
|
||||
@click="buttRegistrati()"
|
||||
:label="$t('reg.submit')"
|
||||
>
|
||||
</q-btn>
|
||||
class="start-btn"
|
||||
/>
|
||||
</div>
|
||||
<q-carousel
|
||||
|
||||
<!-- Carousel Registrazione -->
|
||||
<q-card
|
||||
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`"
|
||||
class="registration-card"
|
||||
>
|
||||
<q-carousel-slide
|
||||
name="start"
|
||||
class="column no-wrap flex-center"
|
||||
<q-carousel
|
||||
v-model="slide"
|
||||
transition-prev="slide-right"
|
||||
transition-next="slide-left"
|
||||
animated
|
||||
swipeable
|
||||
class="modern-carousel"
|
||||
:height="isMobile ? 'auto' : '500px'"
|
||||
>
|
||||
<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">
|
||||
<!-- Slide 1: Hai un Invitante? -->
|
||||
<q-carousel-slide
|
||||
name="start"
|
||||
class="carousel-slide"
|
||||
>
|
||||
<div class="slide-content">
|
||||
<div class="slide-icon-wrapper">
|
||||
<q-icon
|
||||
name="person_add"
|
||||
size="64px"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 class="slide-title">{{ t('reg.invitante') }}</h2>
|
||||
|
||||
<div class="action-buttons">
|
||||
<q-btn
|
||||
rounded
|
||||
glossy
|
||||
unelevated
|
||||
size="lg"
|
||||
color="positive"
|
||||
icon="check"
|
||||
@click="
|
||||
listlinksreg.length > 0 ? (slide = 'sceglilink') : (slide = 'second');
|
||||
noInvited = false;
|
||||
chooseReg = true;
|
||||
"
|
||||
:label="$t('dialog.yes')"
|
||||
>
|
||||
</q-btn>
|
||||
class="action-btn yes-btn"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
rounded
|
||||
glossy
|
||||
unelevated
|
||||
size="lg"
|
||||
color="negative"
|
||||
icon="close"
|
||||
@click="
|
||||
slide = 'second';
|
||||
noInvited = true;
|
||||
chooseReg = false;
|
||||
"
|
||||
:label="$t('dialog.no')"
|
||||
class="action-btn no-btn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
|
||||
<!-- Slide 2: Scegli Link (se disponibile) -->
|
||||
<q-carousel-slide
|
||||
name="sceglilink"
|
||||
class="carousel-slide"
|
||||
>
|
||||
<div class="slide-content">
|
||||
<h2 class="slide-title">{{ t('reg.title_reg_con_link') }}</h2>
|
||||
|
||||
<div class="links-list">
|
||||
<div
|
||||
v-for="(rec, i) in listlinksreg"
|
||||
:key="i"
|
||||
class="link-item"
|
||||
>
|
||||
</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">
|
||||
<div class="custom-link">
|
||||
<a
|
||||
href="/registrati"
|
||||
target="_blank"
|
||||
>👉🏻 {{ t('reg.scelgo_l_invitante') }}</a
|
||||
class="custom-link-text"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<q-btn
|
||||
rounded
|
||||
glossy
|
||||
size="md"
|
||||
color="primary"
|
||||
@click="slide = 'start'"
|
||||
:label="$t('dialog.indietro')"
|
||||
>
|
||||
</q-btn>
|
||||
<q-icon
|
||||
name="arrow_forward"
|
||||
size="20px"
|
||||
/>
|
||||
{{ t('reg.scelgo_l_invitante') }}
|
||||
</a>
|
||||
</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"
|
||||
<q-btn
|
||||
flat
|
||||
color="grey-7"
|
||||
icon="arrow_back"
|
||||
@click="slide = 'start'"
|
||||
:label="$t('dialog.indietro')"
|
||||
class="back-btn"
|
||||
/>
|
||||
<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>
|
||||
</q-carousel-slide>
|
||||
|
||||
<!-- Slide 3: Scelta Registrazione -->
|
||||
<q-carousel-slide
|
||||
name="second"
|
||||
class="carousel-slide"
|
||||
>
|
||||
<div class="slide-content">
|
||||
<!-- Caso: Non Invitato -->
|
||||
<div
|
||||
v-if="noInvited"
|
||||
class="no-invited-content"
|
||||
>
|
||||
<div class="slide-icon-wrapper">
|
||||
<q-icon
|
||||
name="info"
|
||||
size="56px"
|
||||
color="info"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 class="slide-title">Se ancora non sei stato invitato:</h2>
|
||||
|
||||
<div class="instructions">
|
||||
<div class="instruction-item">
|
||||
<div class="instruction-number">1</div>
|
||||
<div class="instruction-content">
|
||||
<p>Entra nei gruppi Territoriali su Telegram</p>
|
||||
<q-btn
|
||||
unelevated
|
||||
color="positive"
|
||||
icon="fab fa-telegram"
|
||||
href="https://t.me/riso_canale/3"
|
||||
target="_blank"
|
||||
label="Progetto RISO"
|
||||
class="telegram-btn"
|
||||
/>
|
||||
</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 class="instruction-item">
|
||||
<div class="instruction-number">2</div>
|
||||
<div class="instruction-content">
|
||||
<p>
|
||||
Sul post del canale fissato in alto, troverai tutte le info sul
|
||||
progetto e su come entrare nel gruppo della tua provincia.
|
||||
</p>
|
||||
<p class="instruction-note">
|
||||
Potrai così richiedere il link una volta entrato nella chat di
|
||||
gruppo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Caso: Con Invitante -->
|
||||
<div
|
||||
v-else-if="chooseReg"
|
||||
class="with-invited-content"
|
||||
>
|
||||
<div class="flex justify-center">
|
||||
<logo
|
||||
class="signup-logo "
|
||||
mystyle="width: 50px !important; height: 50px !important;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Multi Choice: Telegram vs Email -->
|
||||
<div
|
||||
v-if="site.confpages?.enableRegMultiChoice"
|
||||
class="registration-options"
|
||||
>
|
||||
<q-btn
|
||||
unelevated
|
||||
size="lg"
|
||||
color="primary"
|
||||
icon="fab fa-telegram"
|
||||
type="a"
|
||||
:href="invited ? tools.getLinkBotTelegram(invited, regexpire) : `/bot`"
|
||||
:label="$t('reg.bytelegram')"
|
||||
class="option-btn telegram-option"
|
||||
>
|
||||
<q-badge
|
||||
color="positive"
|
||||
floating
|
||||
class="recommended-badge"
|
||||
>
|
||||
Consigliato
|
||||
</q-badge>
|
||||
</q-btn>
|
||||
|
||||
<div class="divider">
|
||||
<span>oppure</span>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
outline
|
||||
size="lg"
|
||||
color="primary"
|
||||
icon="email"
|
||||
@click="regEventEmail"
|
||||
:label="$t('reg.byemail')"
|
||||
class="option-btn email-option"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Single Choice: Solo Registrati -->
|
||||
<div
|
||||
v-else
|
||||
class="single-registration"
|
||||
>
|
||||
<p class="registration-text">Registrati</p>
|
||||
<q-btn
|
||||
unelevated
|
||||
size="lg"
|
||||
color="primary"
|
||||
icon="person_add"
|
||||
@click="clickToRegister"
|
||||
:label="$t('reg.submit')"
|
||||
class="register-btn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
<!-- Navigation Indicators -->
|
||||
<div
|
||||
v-if="start"
|
||||
class="navigation-dots"
|
||||
>
|
||||
<div
|
||||
v-for="(s, i) in ['start', 'sceglilink', 'second']"
|
||||
:key="i"
|
||||
class="nav-dot"
|
||||
:class="{ active: slide === s, visible: shouldShowDot(s) }"
|
||||
@click="slide = s"
|
||||
></div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user