e9fa53a637
- Login - Password dimenticata - Aggiorna password. - Email registrazione - Ammetti Utente
280 lines
8.0 KiB
Vue
Executable File
280 lines
8.0 KiB
Vue
Executable File
<template>
|
|
<div
|
|
v-if="site.confpages?.enableReg"
|
|
class="registration-container"
|
|
>
|
|
<!-- Bottone Iniziale -->
|
|
<div
|
|
v-if="!start"
|
|
class="start-button-wrapper"
|
|
>
|
|
<q-btn
|
|
unelevated
|
|
size="lg"
|
|
color="primary"
|
|
icon="person_add"
|
|
@click="buttRegistrati()"
|
|
:label="$t('reg.submit')"
|
|
class="start-btn"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Carousel Registrazione -->
|
|
<q-card
|
|
v-if="start"
|
|
class="registration-card"
|
|
>
|
|
<q-carousel
|
|
v-model="slide"
|
|
transition-prev="slide-right"
|
|
transition-next="slide-left"
|
|
animated
|
|
swipeable
|
|
class="modern-carousel"
|
|
:height="isMobile ? 'auto' : '500px'"
|
|
>
|
|
<!-- 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
|
|
unelevated
|
|
size="lg"
|
|
color="positive"
|
|
icon="check"
|
|
@click="
|
|
listlinksreg.length > 0 ? (slide = 'sceglilink') : (slide = 'second');
|
|
noInvited = false;
|
|
chooseReg = true;
|
|
"
|
|
:label="$t('dialog.yes')"
|
|
class="action-btn yes-btn"
|
|
/>
|
|
|
|
<q-btn
|
|
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"
|
|
>
|
|
<CMyUser
|
|
:mycontact="rec"
|
|
:visu="costanti.FIND_PEOPLE"
|
|
@setCmd="tools.setCmd"
|
|
:actionType="actionType"
|
|
:hideellipses="true"
|
|
/>
|
|
</div>
|
|
|
|
<div class="custom-link">
|
|
<a
|
|
href="/registrati"
|
|
target="_blank"
|
|
class="custom-link-text"
|
|
>
|
|
<q-icon
|
|
name="arrow_forward"
|
|
size="20px"
|
|
/>
|
|
{{ t('reg.scelgo_l_invitante') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<q-btn
|
|
flat
|
|
color="grey-7"
|
|
icon="arrow_back"
|
|
@click="slide = 'start'"
|
|
:label="$t('dialog.indietro')"
|
|
class="back-btn"
|
|
/>
|
|
</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 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>
|
|
</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>
|
|
</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>
|
|
|
|
<script lang="ts" src="./CRegistration.ts"></script>
|
|
<style lang="scss" scoped>
|
|
@import './CRegistration.scss';
|
|
</style>
|