- aggiornati form registrazione
- Login - Password dimenticata - Aggiorna password. - Email registrazione - Ammetti Utente
This commit is contained in:
Surya Paolo
@@ -1,46 +1,843 @@
|
||||
// ========================================
|
||||
// VARIABILI E CONFIGURAZIONE
|
||||
// ========================================
|
||||
$primary-color: #1976d2;
|
||||
$primary-light: #42a5f5;
|
||||
$primary-dark: #1565c0;
|
||||
$accent-color: #26a69a;
|
||||
$positive-color: #21ba45;
|
||||
$negative-color: #c10015;
|
||||
$warning-color: #f2c037;
|
||||
|
||||
$border-radius: 16px;
|
||||
$border-radius-sm: 12px;
|
||||
$border-radius-lg: 24px;
|
||||
|
||||
$transition-speed: 0.3s;
|
||||
$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
$shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
|
||||
|
||||
$mobile-breakpoint: 768px;
|
||||
$mobile-footer-height: 80px;
|
||||
|
||||
// ========================================
|
||||
// CONTAINER PRINCIPALE
|
||||
// ========================================
|
||||
.signup-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background-attachment: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 0;
|
||||
align-items: flex-start;
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CARDS DI SISTEMA (Success, Error, Warning)
|
||||
// ========================================
|
||||
.already-logged,
|
||||
.already-registered {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
animation: fadeInUp 0.5s ease;
|
||||
}
|
||||
|
||||
.success-card,
|
||||
.error-card,
|
||||
.warning-card,
|
||||
.telegram-card {
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $shadow-lg;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
|
||||
.q-icon {
|
||||
animation: scaleIn 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.success-card {
|
||||
border-top: 4px solid $positive-color;
|
||||
}
|
||||
|
||||
.error-card {
|
||||
border-top: 4px solid $negative-color;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
border-top: 4px solid $warning-color;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
min-width: 140px;
|
||||
border-radius: $border-radius-sm;
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// FORM PRINCIPALE
|
||||
// ========================================
|
||||
.signup-form {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
animation: fadeInUp 0.5s ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// HEADER
|
||||
// ========================================
|
||||
.signup-header {
|
||||
text-align: center;
|
||||
padding: 0 10px 10px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: $border-radius-lg $border-radius-lg 0 0;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px 8px;
|
||||
border-radius: 0;
|
||||
margin: 8px;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-logo {
|
||||
margin: 2px auto 2px;
|
||||
animation: rotateIn 0.6s ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 2px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-title {
|
||||
h1 {
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, $primary-color, $accent-color);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: 2rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0 0;
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// FORM CONTENT
|
||||
// ========================================
|
||||
.form-content {
|
||||
background: white;
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $shadow-lg;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
border-radius: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// PROGRESS STEPPER
|
||||
// ========================================
|
||||
.progress-stepper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 20px;
|
||||
background: linear-gradient(to bottom, rgba(103, 126, 234, 0.05), transparent);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&.active .step-circle {
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
|
||||
}
|
||||
|
||||
&.completed .step-circle {
|
||||
background: $positive-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
color: #757575;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all $transition-speed ease;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.step-line {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, #e0e0e0, #bdbdbd);
|
||||
margin: 0 4px;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.completed + & {
|
||||
background: linear-gradient(to right, $positive-color, $primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CAROUSEL
|
||||
// ========================================
|
||||
.carousel-wrapper {
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: $mobile-footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-carousel {
|
||||
background: transparent;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
flex: 1;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-slide {
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SLIDE CONTENT
|
||||
// ========================================
|
||||
.slide-content {
|
||||
padding: 5px 16px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
animation: fadeIn 0.4s ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 0px 16px 16px;
|
||||
gap: 12px;
|
||||
min-height: calc(100vh - 280px);
|
||||
}
|
||||
|
||||
&.final-slide {
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-header {
|
||||
text-align: center;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.q-icon {
|
||||
margin-bottom: 12px;
|
||||
animation: bounceIn 0.6s ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 32px !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
margin: 12px 0 8px;
|
||||
color: #1a1a1a;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1.25rem;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-subtitle {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// FORM FIELDS
|
||||
// ========================================
|
||||
.form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-input {
|
||||
:deep(.q-field__control) {
|
||||
border-radius: $border-radius-sm;
|
||||
min-height: 56px;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
border-color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-field__label) {
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-field__prepend) {
|
||||
.q-icon {
|
||||
font-size: 24px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.q-field--focused {
|
||||
:deep(.q-field__control) {
|
||||
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: rgba(103, 126, 234, 0.08);
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px;
|
||||
font-size: 0.8125rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SUMMARY CARD (Slide 4)
|
||||
// ========================================
|
||||
.summary-card {
|
||||
background: linear-gradient(135deg, rgba(103, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
|
||||
padding: 20px;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
box-shadow: $shadow-sm;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.q-icon {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// POLICY SECTION
|
||||
// ========================================
|
||||
.policy-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-top: 16px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 12px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.policy-btn {
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
align-self: center;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 8px 16px;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(25, 118, 210, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.terms-checkbox {
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-radius: $border-radius-sm;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
:deep(.q-checkbox__label) {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terms-text {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// NAVIGATION BUTTONS
|
||||
// ========================================
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 20px 32px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.02), transparent);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12px 16px;
|
||||
background: white;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
flex: 0 0 auto;
|
||||
min-width: 48px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-height: 48px;
|
||||
border-radius: $border-radius-sm;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
font-size: 1rem;
|
||||
transition: all $transition-speed ease;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 44px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
min-width: 120px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.next-btn,
|
||||
.submit-btn {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
background: linear-gradient(135deg, $primary-color, $primary-light);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, $primary-dark, $primary-color);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: linear-gradient(135deg, $positive-color, #26a69a);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #1e8e3e, $positive-color);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DEBUG STEPPER
|
||||
// ========================================
|
||||
.debug-stepper {
|
||||
padding: 16px 32px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: $mobile-footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TELEGRAM SECTION
|
||||
// ========================================
|
||||
.telegram-section {
|
||||
padding: 20px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ANIMAZIONI
|
||||
// ========================================
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// UTILITY CLASSES
|
||||
// ========================================
|
||||
.signup {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
max-width: 800px;
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clCellCode {
|
||||
border-radius: 32px;
|
||||
border-right: #2d2260;
|
||||
height: 50px;
|
||||
font-size: 1rem;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
// Legacy classes (mantenute per compatibilità)
|
||||
.clCellCode,
|
||||
.clCell {
|
||||
border-radius: 32px;
|
||||
border-right: #2d2260;
|
||||
height: 50px;
|
||||
font-size: 1rem;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.vue-country-select{
|
||||
.vue-country-select {
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.myuserinvitante{
|
||||
.myuserinvitante {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
color: $negative-color;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.cosa_chiedere{
|
||||
font-weight: bold;
|
||||
color: blue;
|
||||
font-size: 1rem;
|
||||
padding: 10px;
|
||||
// ========================================
|
||||
// RESPONSIVE UTILITIES
|
||||
// ========================================
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
// Assicura che il body non scrolli quando necessario
|
||||
body.signup-open {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Fix per iOS Safari
|
||||
.signup-container {
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DARK MODE SUPPORT (opzionale)
|
||||
// ========================================
|
||||
// @media (prefers-color-scheme: dark) {
|
||||
// .signup-container {
|
||||
// background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
// }
|
||||
|
||||
// .signup-header,
|
||||
// .form-content {
|
||||
// background: #2a2a3e;
|
||||
// color: #ffffff;
|
||||
// }
|
||||
|
||||
// .slide-title {
|
||||
// color: #ffffff;
|
||||
// }
|
||||
|
||||
// .slide-subtitle {
|
||||
// color: #b0b0b0;
|
||||
// }
|
||||
|
||||
// .summary-card {
|
||||
// background: linear-gradient(135deg, rgba(103, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
|
||||
// }
|
||||
|
||||
// .summary-item {
|
||||
// background: #3a3a4e;
|
||||
// color: #ffffff;
|
||||
// }
|
||||
|
||||
// .modern-input {
|
||||
// :deep(.q-field__control) {
|
||||
// background: #3a3a4e;
|
||||
// color: #ffffff;
|
||||
// }
|
||||
|
||||
// :deep(.q-field__label) {
|
||||
// color: #b0b0b0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.signup-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.signup-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.signup-title {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,16 @@ import { CTitleBanner } from '../CTitleBanner';
|
||||
import { CCopyBtn } from '../CCopyBtn';
|
||||
import { CRegistration } from '../CRegistration';
|
||||
import { PagePolicy } from '../PagePolicy';
|
||||
import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue';
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
nextTick,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue';
|
||||
import { CSignIn } from '@src/components/CSignIn';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -123,6 +132,14 @@ export default defineComponent({
|
||||
const inputPassword = ref(<any>null);
|
||||
const inputPassword2 = ref(<any>null);
|
||||
|
||||
const submitBtn = ref(<any>null); // AGGIUNGI QUESTA RIGA
|
||||
|
||||
// Responsive detection
|
||||
const isMobile = ref(false);
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth <= 768;
|
||||
};
|
||||
|
||||
const invitaStore = useInvitaAmicoStore();
|
||||
|
||||
const checkifDisabled = computed(() => {
|
||||
@@ -132,7 +149,7 @@ export default defineComponent({
|
||||
ret =
|
||||
!signup.email ||
|
||||
(tools.getAskToVerifyReg() &&
|
||||
(!signup.aportador_solidario || inputAportador.value.hasError)) ||
|
||||
(!signup.aportador_solidario || inputAportador.value?.hasError)) ||
|
||||
(inputEmail.value && inputEmail.value.hasError);
|
||||
} else if (slide.value === '2') {
|
||||
// Username
|
||||
@@ -158,6 +175,37 @@ export default defineComponent({
|
||||
return ret;
|
||||
});
|
||||
|
||||
// Auto-focus sul primo campo quando cambia slide
|
||||
watch(
|
||||
() => slide.value,
|
||||
async (newSlide) => {
|
||||
await nextTick();
|
||||
|
||||
if (newSlide === '1') {
|
||||
// Step 1: Focus su aportador o email
|
||||
if (inputAportador.value && props.showaportador) {
|
||||
inputAportador.value.focus();
|
||||
} else if (inputEmail.value) {
|
||||
inputEmail.value.focus();
|
||||
}
|
||||
} else if (newSlide === '2') {
|
||||
// Step 2: Focus su username
|
||||
if (inputUsername.value) {
|
||||
inputUsername.value.focus();
|
||||
}
|
||||
} else if (newSlide === '3') {
|
||||
// Step 3: Focus su password
|
||||
if (inputPassword.value) {
|
||||
inputPassword.value.focus();
|
||||
}
|
||||
} else if (newSlide === '4') {
|
||||
if (submitBtn.value) {
|
||||
submitBtn.value.$el.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const typePassword = ref('password');
|
||||
|
||||
const ap_iniziale = ref('');
|
||||
@@ -452,20 +500,27 @@ export default defineComponent({
|
||||
onMounted(async () => {
|
||||
const token = props.token;
|
||||
|
||||
// Check mobile on mount
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
|
||||
if (token) {
|
||||
// carica le info della registrazione
|
||||
const risinvite = await invitaStore.ottieniInvitoByToken(token);
|
||||
if (risinvite && risinvite.email) {
|
||||
signup.email = risinvite.email;
|
||||
if (risinvite.usernameInvitante)
|
||||
signup.aportador_solidario = risinvite.usernameInvitante
|
||||
|
||||
slide.value = '2'
|
||||
signup.aportador_solidario = risinvite.usernameInvitante;
|
||||
|
||||
slide.value = '2';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
});
|
||||
|
||||
created();
|
||||
|
||||
return {
|
||||
@@ -502,6 +557,8 @@ export default defineComponent({
|
||||
inputPassword,
|
||||
inputPassword2,
|
||||
shared_consts,
|
||||
isMobile,
|
||||
submitBtn,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user