diff --git a/scripts/_ALL_SITES/comunitanuovomondo.app/src/db/lang/ws_it.js b/scripts/_ALL_SITES/comunitanuovomondo.app/src/db/lang/ws_it.js index 737a9c82..69abfaf0 100755 --- a/scripts/_ALL_SITES/comunitanuovomondo.app/src/db/lang/ws_it.js +++ b/scripts/_ALL_SITES/comunitanuovomondo.app/src/db/lang/ws_it.js @@ -22,6 +22,7 @@ const msg_website_it = { myhosps2: 'myhosps2', mygood2: 'mygood2', InvitoReg: 'Invito', + Ammetti: 'Ammetti', installaApp: 'Installa App', fundraising: 'Sostieni il Progetto', notifs: 'Configura le Notifiche', @@ -45,7 +46,7 @@ const msg_website_it = { presentazione: 'Presentazione', presentazione2: 'Presentazione', invita: 'Invita Persone', - SignUp: 'Modulo di Registrazione', + SignUp: 'Crea il tuo account', SignUpCollettivo: 'Reg. Collettiva:', SignUpCollettivo2: 'Registrazione Collettiva:', need_Telegram: 'Per poter utilizzare la Piattaforma occorre avere Telegram installato
', diff --git a/src/components/CRegistration/CRegistration.scss b/src/components/CRegistration/CRegistration.scss index e69de29b..28974eb1 100755 --- a/src/components/CRegistration/CRegistration.scss +++ b/src/components/CRegistration/CRegistration.scss @@ -0,0 +1,667 @@ +// ======================================== +// VARIABILI (Sincronizzate con CSignUp) +// ======================================== +$primary-color: #1976d2; +$primary-light: #42a5f5; +$primary-dark: #1565c0; +$accent-color: #26a69a; +$positive-color: #21ba45; +$negative-color: #c10015; +$info-color: #31ccec; + +$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; + +// ======================================== +// CONTAINER PRINCIPALE +// ======================================== +.registration-container { + width: 100%; + min-height: 60vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + + @media (max-width: $mobile-breakpoint) { + padding: 6px; + min-height: 100vh; + align-items: flex-start; + } +} + +// ======================================== +// BOTTONE INIZIALE +// ======================================== +.start-button-wrapper { + text-align: center; + animation: fadeInUp 0.6s ease; +} + +.start-btn { + min-width: 200px; + height: 56px; + border-radius: $border-radius; + font-size: 1.125rem; + font-weight: 600; + text-transform: none; + box-shadow: $shadow-lg; + background: linear-gradient(135deg, $primary-color, $primary-light); + transition: all $transition-speed ease; + + &:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(25, 118, 210, 0.4); + } + + &:active { + transform: translateY(-2px); + } + + @media (max-width: $mobile-breakpoint) { + min-width: 180px; + height: 52px; + font-size: 1rem; + } +} + +// ======================================== +// CARD PRINCIPALE +// ======================================== +.registration-card { + width: 100%; + max-width: 700px; + border-radius: $border-radius-lg; + box-shadow: $shadow-lg; + overflow: hidden; + background: white; + animation: fadeInUp 0.6s ease; + + @media (max-width: $mobile-breakpoint) { + max-width: 100%; + border-radius: $border-radius; + } +} + +// ======================================== +// CAROUSEL +// ======================================== +.modern-carousel { + background: transparent; + + @media (max-width: $mobile-breakpoint) { + height: auto !important; + } +} + +.carousel-slide { + padding: 0; + display: flex; + align-items: center; + justify-content: center; +} + +// ======================================== +// SLIDE CONTENT +// ======================================== +.slide-content { + width: 100%; + padding: 10px 8px; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + animation: fadeIn 0.4s ease; + + @media (max-width: $mobile-breakpoint) { + padding: 10px 8px; + gap: 16px; + } +} + +.slide-icon-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + border-radius: 50%; + background: linear-gradient(135deg, rgba(25, 118, 210, 0.1), rgba(38, 166, 154, 0.1)); + margin-bottom: 8px; + animation: scaleIn 0.6s ease; + + @media (max-width: $mobile-breakpoint) { + width: 100px; + height: 100px; + + .q-icon { + font-size: 48px !important; + } + } +} + +.slide-title { + font-size: 1.75rem; + font-weight: 600; + color: #1a1a1a; + text-align: center; + margin: 0; + line-height: 1.3; + + @media (max-width: $mobile-breakpoint) { + font-size: 1.375rem; + } +} + +// ======================================== +// ACTION BUTTONS (Yes/No) +// ======================================== +.action-buttons { + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; + max-width: 400px; + + @media (max-width: $mobile-breakpoint) { + gap: 12px; + max-width: 100%; + } +} + +.action-btn { + width: 100%; + height: 56px; + border-radius: $border-radius; + font-size: 1.125rem; + font-weight: 600; + text-transform: none; + box-shadow: $shadow-md; + transition: all $transition-speed ease; + + &:hover { + transform: translateY(-2px); + box-shadow: $shadow-lg; + } + + &:active { + transform: translateY(0); + } + + @media (max-width: $mobile-breakpoint) { + height: 52px; + font-size: 1rem; + } +} + +.yes-btn { + background: linear-gradient(135deg, $positive-color, #26a69a); +} + +.no-btn { + background: linear-gradient(135deg, $negative-color, #e91e63); +} + +// ======================================== +// LINKS LIST +// ======================================== +.links-list { + width: 100%; + max-width: 500px; + display: flex; + flex-direction: column; + gap: 12px; + + @media (max-width: $mobile-breakpoint) { + gap: 8px; + } +} + +.link-item { + background: linear-gradient(to right, rgba(25, 118, 210, 0.05), transparent); + border-radius: $border-radius-sm; + padding: 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + transition: all $transition-speed ease; + + &:hover { + transform: translateX(4px); + box-shadow: $shadow-sm; + background: linear-gradient(to right, rgba(25, 118, 210, 0.1), transparent); + } + + @media (max-width: $mobile-breakpoint) { + padding: 8px; + } +} + +.custom-link { + margin-top: 16px; + padding: 16px; + text-align: center; + + @media (max-width: $mobile-breakpoint) { + margin-top: 12px; + padding: 12px; + } +} + +.custom-link-text { + display: inline-flex; + align-items: center; + gap: 8px; + color: $primary-color; + font-size: 1.125rem; + font-weight: 600; + text-decoration: none; + transition: all $transition-speed ease; + + &:hover { + color: $primary-dark; + transform: translateX(4px); + } + + @media (max-width: $mobile-breakpoint) { + font-size: 1rem; + } +} + +// ======================================== +// NO INVITED CONTENT +// ======================================== +.no-invited-content { + width: 100%; + max-width: 550px; +} + +.instructions { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 24px; + + @media (max-width: $mobile-breakpoint) { + gap: 16px; + margin-top: 16px; + } +} + +.instruction-item { + display: flex; + gap: 16px; + align-items: flex-start; + + @media (max-width: $mobile-breakpoint) { + gap: 12px; + } +} + +.instruction-number { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + background: linear-gradient(135deg, $primary-color, $accent-color); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + font-weight: 700; + box-shadow: $shadow-sm; + + @media (max-width: $mobile-breakpoint) { + width: 36px; + height: 36px; + font-size: 1.125rem; + } +} + +.instruction-content { + flex: 1; + + p { + margin: 0 0 12px; + font-size: 1rem; + line-height: 1.6; + color: #333; + + @media (max-width: $mobile-breakpoint) { + font-size: 0.9375rem; + margin: 0 0 8px; + } + } +} + +.instruction-note { + font-size: 0.9375rem; + color: #666; + font-style: italic; + + @media (max-width: $mobile-breakpoint) { + font-size: 0.875rem; + } +} + +.telegram-btn { + margin-top: 12px; + border-radius: $border-radius-sm; + text-transform: none; + font-weight: 600; + box-shadow: $shadow-sm; + transition: all $transition-speed ease; + + &:hover { + transform: translateY(-2px); + box-shadow: $shadow-md; + } + + @media (max-width: $mobile-breakpoint) { + margin-top: 8px; + width: 100%; + } +} + +// ======================================== +// WITH INVITED CONTENT +// ======================================== +.with-invited-content { + width: 100%; + max-width: 800px; + @media (max-width: $mobile-breakpoint) { + max-width: 100%; + } +} + +.registration-options { + width: 100%; + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 24px; + + @media (max-width: $mobile-breakpoint) { + gap: 16px; + margin-top: 16px; + } +} + +.option-btn { + width: 100%; + height: 64px; + border-radius: $border-radius; + font-size: 1.125rem; + font-weight: 600; + text-transform: none; + box-shadow: $shadow-md; + transition: all $transition-speed ease; + position: relative; + + &:hover { + transform: translateY(-2px); + box-shadow: $shadow-lg; + } + + @media (max-width: $mobile-breakpoint) { + height: 76px; + font-size: 1rem; + } +} + +.telegram-option { + background: linear-gradient(135deg, $primary-color, $primary-light); +} + +.email-option { + border-width: 2px; + + &:hover { + background: rgba(25, 118, 210, 0.08); + } +} + +.recommended-badge { + top: -8px; + right: -8px; + padding: 4px 12px; + font-size: 0.75rem; + font-weight: 700; + border-radius: 12px; + box-shadow: $shadow-sm; + + @media (max-width: $mobile-breakpoint) { + font-size: 0.6875rem; + padding: 3px 10px; + } +} + +.divider { + position: relative; + text-align: center; + margin: 8px 0; + + &::before, + &::after { + content: ''; + position: absolute; + top: 50%; + width: calc(50% - 40px); + height: 1px; + background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.12)); + } + + &::before { + left: 0; + } + + &::after { + right: 0; + background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.12)); + } + + span { + display: inline-block; + padding: 4px 12px; + background: white; + color: #666; + font-size: 0.875rem; + font-weight: 500; + border-radius: 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + } +} + +// ======================================== +// SINGLE REGISTRATION +// ======================================== +.single-registration { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + margin-top: 24px; + + @media (max-width: $mobile-breakpoint) { + margin-top: 16px; + gap: 12px; + } +} + +.registration-text { + font-size: 1.125rem; + color: #666; + margin: 0; + + @media (max-width: $mobile-breakpoint) { + font-size: 1rem; + } +} + +.register-btn { + width: 100%; + max-width: 300px; + height: 56px; + border-radius: $border-radius; + font-size: 1.125rem; + font-weight: 600; + text-transform: none; + background: linear-gradient(135deg, $primary-color, $primary-light); + box-shadow: $shadow-md; + transition: all $transition-speed ease; + + &:hover { + transform: translateY(-2px); + box-shadow: $shadow-lg; + } + + @media (max-width: $mobile-breakpoint) { + max-width: 100%; + height: 52px; + font-size: 1rem; + } +} + +// ======================================== +// BACK BUTTON +// ======================================== +.back-btn { + margin-top: 24px; + border-radius: $border-radius-sm; + text-transform: none; + font-weight: 500; + transition: all $transition-speed ease; + + &:hover { + background: rgba(0, 0, 0, 0.04); + } + + @media (max-width: $mobile-breakpoint) { + margin-top: 16px; + width: 100%; + } +} + +// ======================================== +// NAVIGATION DOTS +// ======================================== +.navigation-dots { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + padding: 16px; + background: linear-gradient(to top, rgba(0, 0, 0, 0.02), transparent); + + @media (max-width: $mobile-breakpoint) { + padding: 12px; + gap: 6px; + } +} + +.nav-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: #d0d0d0; + cursor: pointer; + transition: all $transition-speed ease; + opacity: 0; + pointer-events: none; + + &.visible { + opacity: 1; + pointer-events: auto; + } + + &.active { + width: 24px; + border-radius: 5px; + background: $primary-color; + } + + &:hover:not(.active) { + background: #a0a0a0; + transform: scale(1.2); + } + + @media (max-width: $mobile-breakpoint) { + width: 8px; + height: 8px; + + &.active { + width: 20px; + } + } +} + +// ======================================== +// 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); + } +} + +// ======================================== +// RESPONSIVE UTILITIES +// ======================================== +@media (max-width: $mobile-breakpoint) { + // Fix per iOS Safari + .registration-container { + min-height: -webkit-fill-available; + } +} + +// ======================================== +// UTILITY CLASSES (Legacy) +// ======================================== +.centermydiv2 { + display: flex; + justify-content: center; + align-items: center; +} + +.dialog_card { + background: white; + border-radius: $border-radius; +} + +.my-custom-border { + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: $border-radius-sm; +} \ No newline at end of file diff --git a/src/components/CRegistration/CRegistration.ts b/src/components/CRegistration/CRegistration.ts index 19c54ca2..f1cc40b2 100755 --- a/src/components/CRegistration/CRegistration.ts +++ b/src/components/CRegistration/CRegistration.ts @@ -5,6 +5,7 @@ import { useQuasar } from 'quasar' import { useI18n } from 'vue-i18n' import { CContactUser } from '@src/components/CContactUser' import { CMyUser } from '@src/components/CMyUser' +import { Logo } from '@src/components/logo' import { DefaultProfile, useUserStore } from '@store/UserStore' import { useRoute, useRouter } from 'vue-router' @@ -14,7 +15,7 @@ import { useGlobalStore } from '@store/globalStore' export default defineComponent({ name: 'CRegistration', emits: ['regEventEmail'], - components: { CMyUser, CContactUser }, + components: { CMyUser, CContactUser, Logo }, props: { slide: { type: String, @@ -57,14 +58,18 @@ export default defineComponent({ const actionType = ref(costanti.ACTIONTYPE.LINK_REG) - function clickToRegister() { + // Responsive detection + const isMobile = ref(false) + const checkMobile = () => { + isMobile.value = window.innerWidth <= 768 + } + function clickToRegister() { //if (site.value.confpages.enableRegByBot) { //$router.push('/bot') //} else { $router.push('/registrati/' + tools.getInvitante()) //} - } function mounted() { @@ -76,6 +81,10 @@ export default defineComponent({ chooseReg.value = true slide.value = 'second' } + + // Check mobile on mount + checkMobile() + window.addEventListener('resize', checkMobile) } function regEventEmail() { @@ -91,16 +100,29 @@ export default defineComponent({ if (invitante) { start.value = true - slide.value = 'second'; - noInvited.value = false; - chooseReg.value = true; + slide.value = 'second' + noInvited.value = false + chooseReg.value = true } else { start.value = true } } + // Determina se mostrare un dot specifico + function shouldShowDot(slideName: string) { + // Non mostrare 'sceglilink' se non ci sono link + if (slideName === 'sceglilink' && listlinksreg.value.length === 0) { + return false + } + return true + } + onMounted(mounted) + onUnmounted(() => { + window.removeEventListener('resize', checkMobile) + }) + return { tools, site, @@ -115,6 +137,8 @@ export default defineComponent({ listlinksreg, actionType, t, + isMobile, + shouldShowDot, } }, }) diff --git a/src/components/CRegistration/CRegistration.vue b/src/components/CRegistration/CRegistration.vue index 66acc136..8bf8a02b 100755 --- a/src/components/CRegistration/CRegistration.vue +++ b/src/components/CRegistration/CRegistration.vue @@ -1,223 +1,275 @@ diff --git a/src/components/CSignIn/CSignIn.scss b/src/components/CSignIn/CSignIn.scss index 7ce52a96..06de9d5a 100755 --- a/src/components/CSignIn/CSignIn.scss +++ b/src/components/CSignIn/CSignIn.scss @@ -1,5 +1,414 @@ +// ======================================== +// VARIABILI (Sincronizzate con CSignUp) +// ======================================== +$primary-color: #1976d2; +$primary-light: #42a5f5; +$primary-dark: #1565c0; +$accent-color: #26a69a; +$positive-color: #21ba45; +$negative-color: #c10015; + +$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; + +// ======================================== +// CONTAINER PRINCIPALE +// ======================================== +.signin-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; + + @media (max-width: $mobile-breakpoint) { + padding: 12px; + align-items: flex-start; + padding-top: 40px; + } +} + +// ======================================== +// PWA CHECK +// ======================================== +.pwa-check { + position: absolute; + top: 20px; + right: 20px; + z-index: 10; + + @media (max-width: $mobile-breakpoint) { + top: 12px; + right: 12px; + } +} + +// ======================================== +// CARD PRINCIPALE +// ======================================== +.signin-card { + width: 100%; + max-width: 450px; + border-radius: $border-radius-lg; + box-shadow: $shadow-lg; + overflow: hidden; + background: white; + animation: fadeInUp 0.6s ease; + + @media (max-width: $mobile-breakpoint) { + max-width: 100%; + border-radius: $border-radius; + } +} + +// ======================================== +// HEADER +// ======================================== +.signin-header { + text-align: center; + padding: 32px 24px 24px; + background: linear-gradient(to bottom, rgba(103, 126, 234, 0.05), transparent); + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + + @media (max-width: $mobile-breakpoint) { + padding: 24px 16px 16px; + } +} + +.signin-logo { + margin: 0 auto 16px; + animation: scaleIn 0.6s ease; + + @media (max-width: $mobile-breakpoint) { + margin: 0 auto 12px; + } +} + +.signin-title { + font-size: 2rem; + font-weight: 600; + margin: 0 0 8px; + background: linear-gradient(135deg, $primary-color, $accent-color); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + + @media (max-width: $mobile-breakpoint) { + font-size: 1.5rem; + margin: 0 0 6px; + } +} + +.signin-subtitle { + font-size: 1rem; + color: #666; + margin: 0; + + @media (max-width: $mobile-breakpoint) { + font-size: 0.875rem; + } +} + +// ======================================== +// FORM +// ======================================== +.signin-form { + padding: 32px 24px; + + @media (max-width: $mobile-breakpoint) { + padding: 20px 16px; + } +} + +.form-fields { + display: flex; + flex-direction: column; + gap: 20px; + + @media (max-width: $mobile-breakpoint) { + gap: 16px; + } +} + +// ======================================== +// INPUT FIELDS +// ======================================== +.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: 52px; + 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.9375rem; + } + } + + :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); + } + } + + &.q-field--error { + animation: shake 0.4s ease; + } +} + +// ======================================== +// SUBMIT BUTTON +// ======================================== +.submit-btn { + width: 100%; + height: 56px; + border-radius: $border-radius; + font-size: 1.125rem; + font-weight: 600; + text-transform: none; + background: linear-gradient(135deg, $primary-color, $primary-light); + box-shadow: $shadow-md; + transition: all $transition-speed ease; + margin-top: 8px; + + &:hover { + transform: translateY(-2px); + box-shadow: $shadow-lg; + background: linear-gradient(135deg, $primary-dark, $primary-color); + } + + &:active { + transform: translateY(0); + } + + @media (max-width: $mobile-breakpoint) { + height: 52px; + font-size: 1rem; + } +} + +// ======================================== +// FORGOT PASSWORD +// ======================================== +.forgot-password { + text-align: center; + margin-top: -8px; + + @media (max-width: $mobile-breakpoint) { + margin-top: -4px; + } +} + +.forgot-link { + display: inline-flex; + align-items: center; + gap: 6px; + color: #666; + text-decoration: none; + font-size: 0.9375rem; + transition: all $transition-speed ease; + padding: 8px 12px; + border-radius: $border-radius-sm; + + &:hover { + color: $primary-color; + background: rgba(25, 118, 210, 0.06); + } + + @media (max-width: $mobile-breakpoint) { + font-size: 0.875rem; + padding: 6px 10px; + } +} + +// ======================================== +// DIVIDER +// ======================================== +.divider { + position: relative; + text-align: center; + margin: 8px 0; + + &::before, + &::after { + content: ''; + position: absolute; + top: 50%; + width: calc(50% - 80px); + height: 1px; + background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.12)); + } + + &::before { + left: 0; + } + + &::after { + right: 0; + background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.12)); + } + + span { + display: inline-block; + padding: 4px 16px; + background: white; + color: #666; + font-size: 0.875rem; + font-weight: 500; + border-radius: 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + + @media (max-width: $mobile-breakpoint) { + font-size: 0.8125rem; + padding: 3px 12px; + } + } +} + +// ======================================== +// REGISTRATION SECTION +// ======================================== +.register-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 16px; + background: linear-gradient(to bottom, rgba(33, 186, 69, 0.05), transparent); + border-radius: $border-radius; + border: 1px solid rgba(33, 186, 69, 0.15); + + @media (max-width: $mobile-breakpoint) { + padding: 12px; + gap: 10px; + } +} + +.register-text { + margin: 0; + font-size: 0.9375rem; + color: #666; + text-align: center; + + @media (max-width: $mobile-breakpoint) { + font-size: 0.875rem; + } +} + +.register-btn { + width: 100%; + max-width: 300px; + height: 52px; + border-radius: $border-radius; + font-size: 1.0625rem; + font-weight: 600; + text-transform: none; + background: linear-gradient(135deg, $positive-color, #26a69a); + box-shadow: $shadow-sm; + transition: all $transition-speed ease; + + &:hover { + transform: translateY(-2px); + box-shadow: $shadow-md; + background: linear-gradient(135deg, #1e8e3e, $positive-color); + } + + @media (max-width: $mobile-breakpoint) { + max-width: 100%; + height: 48px; + font-size: 1rem; + } +} + +// ======================================== +// ANIMAZIONI +// ======================================== +@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 shake { + 0%, 100% { + transform: translateX(0); + } + 25% { + transform: translateX(-10px); + } + 75% { + transform: translateX(10px); + } +} + +// ======================================== +// RESPONSIVE UTILITIES +// ======================================== +@media (max-width: $mobile-breakpoint) { + // Fix per iOS Safari + .signin-container { + min-height: -webkit-fill-available; + } +} + +// ======================================== +// LEGACY CLASS (per compatibilità) +// ======================================== .signin { width: 100%; margin: 0 auto; max-width: 450px; -} +} \ No newline at end of file diff --git a/src/components/CSignIn/CSignIn.vue b/src/components/CSignIn/CSignIn.vue index eddc6ff4..2498ab5f 100755 --- a/src/components/CSignIn/CSignIn.vue +++ b/src/components/CSignIn/CSignIn.vue @@ -1,127 +1,151 @@ - + diff --git a/src/db/lang/ws_it.js b/src/db/lang/ws_it.js index 2cc77cf0..9a27725a 100755 --- a/src/db/lang/ws_it.js +++ b/src/db/lang/ws_it.js @@ -43,7 +43,7 @@ const msg_website_it = { presentazione: 'Presentazione', presentazione2: 'Presentazione', invita: 'Invita Persone', - SignUp: 'Modulo di Registrazione:', + SignUp: 'Unisciti a {sitename}!', SignUpCollettivo: 'Reg. Collettiva:', SignUpCollettivo2: 'Registrazione Collettiva:', need_Telegram: 'Per poter utilizzare la Piattaforma occorre avere Telegram installato
', diff --git a/src/model/other.ts b/src/model/other.ts index 0c3a2da3..7aac0f7f 100755 --- a/src/model/other.ts +++ b/src/model/other.ts @@ -10,6 +10,11 @@ export interface ILinkReg { idlink: string } +export interface IAmmetti { + token: string + username: string +} + export interface ICallResult { code?: string msg?: string diff --git a/src/router/routesAdmin.ts b/src/router/routesAdmin.ts index 53cf485f..b2da30d1 100644 --- a/src/router/routesAdmin.ts +++ b/src/router/routesAdmin.ts @@ -666,6 +666,17 @@ function getRoutesAd(site: ISites) { infooter: false, separator: false }, + { + active: true, + order: 1005, + path: '/ammetti/:token/:username', + materialIcon: 'how_to_reg', + name: 'pages.Ammetti', + component: () => import('@src/views/login/ammetti/ammetti.vue'), + inmenu: false, + infooter: false, + separator: false + }, { active: true, order: 1001, diff --git a/src/statics/lang/it.js b/src/statics/lang/it.js index 4c1926cd..4de7dd75 100755 --- a/src/statics/lang/it.js +++ b/src/statics/lang/it.js @@ -704,6 +704,7 @@ const msg_it = { onlyadult: 'Confermo di essere Maggiorenne', submit: 'Registrati', title_verif_reg: 'Verifica Registrazione', + title_ammetti_membro: 'Ammetti Membro', reg_ok: 'Registrazione Effettuata con Successo', verificato: 'Verificato', non_verificato: 'Non Verificato', @@ -829,7 +830,7 @@ const msg_it = { }, reset: { title_reset_pwd: 'Reimposta la tua Password', - send_reset_pwd: 'Invia Reimposta la password', + send_reset_pwd: 'Reimposta la password', resend_reset_pwd: 'Rimanda nuovamente', incorso: 'Richiesta Nuova Email...', email_sent: 'Email inviata', diff --git a/src/store/Modules/serv_constants.ts b/src/store/Modules/serv_constants.ts index 33d53f0a..0bdccf2a 100755 --- a/src/store/Modules/serv_constants.ts +++ b/src/store/Modules/serv_constants.ts @@ -6,6 +6,9 @@ export const serv_constants = { RIS_CODE_EMAIL_ALREADY_VERIFIED: -5, RIS_CODE_EMAIL_VERIFIED: 1, + RIS_CODE_AMMESSO: 1, + RIS_CODE_GIA_AMMESSO: -5, + RIS_CODE_REC_DUPLICATED_DESCR_CITY_USER: -110, RIS_CODE_REC_ALREADY_EXIST_SYMBOL: -102, RIS_CODE_REC_ALREADY_EXIST_CODE: -101, diff --git a/src/store/UserStore.ts b/src/store/UserStore.ts index e1e507ff..5556667c 100755 --- a/src/store/UserStore.ts +++ b/src/store/UserStore.ts @@ -19,7 +19,7 @@ import type { import { IFriends, ISettings } from '@src/model'; import { tools } from '@tools'; import translate from '@src/globalroutines/util'; -import type { ILinkReg, IToken } from '@model/other'; +import type { IAmmetti, ILinkReg, IToken } from '@model/other'; import { ICallResult, IResult } from '@model/other'; import objectId from '@src/js/objectId'; @@ -1111,6 +1111,31 @@ export const useUserStore = defineStore('UserStore', { return { code: this.getServerCode, msg: error.getMsgError() }; }); }, + async ammetti(paramquery: IAmmetti) { + const usertosend = { + token: paramquery.token, + username: paramquery.username, + }; + console.log(usertosend); + + this.setServerCode(tools.CALLING); + + return Api.SendReq('/ammetti', 'POST', usertosend) + .then((res) => { + // console.log("RITORNO 2 "); + // mutations.setServerCode(myres); + if (res.data.code === serv_constants.RIS_CODE_AMMESSO) { + console.log('AMMESSO !!'); + } else { + console.log('Risultato di ammetti: ', res.data.code); + } + return { code: res.data.code, msg: res.data.msg }; + }) + .catch((error) => { + this.setErrorCatch(error); + return { code: this.getServerCode, msg: error.getMsgError() }; + }); + }, async unsubscribe(paramquery: any) { return Api.SendReq('/news/unsubscribe', 'POST', paramquery) diff --git a/src/views/login/ammetti/ammetti.scss b/src/views/login/ammetti/ammetti.scss new file mode 100755 index 00000000..d4645e99 --- /dev/null +++ b/src/views/login/ammetti/ammetti.scss @@ -0,0 +1,37 @@ +.mypanel { + padding: 10px; + margin: 10px; + +} + +.admission-header { + background: linear-gradient(135deg, var(--q-primary) 0%, #1976d2 100%); + border-radius: 16px; + padding: 48px 24px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +.result-card { + border-radius: 12px; + overflow: hidden; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + + .q-card-section { + padding: 32px 24px; + } +} + +.opacity-80 { + opacity: 0.8; +} + +// Responsive +@media (max-width: 600px) { + .admission-header { + padding: 32px 16px; + + h4 { + font-size: 1.5rem; + } + } +} \ No newline at end of file diff --git a/src/views/login/ammetti/ammetti.ts b/src/views/login/ammetti/ammetti.ts new file mode 100755 index 00000000..162eb879 --- /dev/null +++ b/src/views/login/ammetti/ammetti.ts @@ -0,0 +1,94 @@ +import { defineComponent, onMounted, ref } from 'vue'; + +import { serv_constants } from '../../../store/Modules/serv_constants'; + +import type { IAmmetti, ILinkReg } from '../../../model/other'; +import { ICallResult } from '../../../model/other'; +import { CSigninNoreg } from '../../../components/CSigninNoreg'; +import { useQuasar } from 'quasar'; +import { useI18n } from 'vue-i18n'; +import { useGlobalStore } from '@store/globalStore'; +import { useRoute, useRouter } from 'vue-router'; +import { useUserStore } from '@store/UserStore'; +import { tools } from '@tools'; + +export default defineComponent({ + name: 'Ammetti', + components: { CSigninNoreg }, + + setup(props) { + const $q = useQuasar(); + const route = useRoute(); + const $router = useRouter(); + const { t } = useI18n(); + const globalStore = useGlobalStore(); + const userStore = useUserStore(); + + const router = useRouter(); + + const isLoading = ref(false); + + const username = ref('') + + const risultato = ref('---'); + const riscode = ref(0); + + function myrisultato() { + return risultato; + } + + function giaammesso() { + return riscode.value !== serv_constants.RIS_CODE_AMMESSO; + } + + function ammettiok() { + return riscode.value === serv_constants.RIS_CODE_AMMESSO; + } + + function load() { + console.log('load Ammetti'); + + isLoading.value = true + + username.value = (route.params.username) ? route.params.username.toString() : ''; + let param: IAmmetti = { token: '', username: '' }; + if (route.params.token) param = { token: route.params.token.toString(), username: username.value }; + + // console.log('idlink = ', param) + return userStore + .ammetti(param) + .then((ris: any) => { + riscode.value = ris.code; + risultato.value = ris.msg; + isLoading.value = false + }) + .catch((err: any) => { + console.log('ERR = ' + err); + isLoading.value = false + }); + } + + onMounted(() => { + load(); + }); + + const goToProfile = () => { + // Naviga al profilo del membro ammesso + router.push(`/my/${username.value}`); + }; + + const goHome = () => { + router.push('/'); + }; + return { + tools, + ammettiok, + giaammesso, + myrisultato, + t, + isLoading, + goHome, + goToProfile, + }; + }, +}); diff --git a/src/views/login/ammetti/ammetti.vue b/src/views/login/ammetti/ammetti.vue new file mode 100755 index 00000000..5aea15ba --- /dev/null +++ b/src/views/login/ammetti/ammetti.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/src/views/login/signup/signup.scss b/src/views/login/signup/signup.scss index 6a3d2337..05ec98a4 100755 --- a/src/views/login/signup/signup.scss +++ b/src/views/login/signup/signup.scss @@ -1,7 +1,10 @@ .signup { width: 100%; margin: 0 auto; - max-width: 450px; + max-width: 800px; + @media (max-width: 800px) { + max-width: 100%; + } } diff --git a/src/views/requestresetpwd/requestresetpwd.scss b/src/views/requestresetpwd/requestresetpwd.scss index e69de29b..ab948ac1 100755 --- a/src/views/requestresetpwd/requestresetpwd.scss +++ b/src/views/requestresetpwd/requestresetpwd.scss @@ -0,0 +1,400 @@ +// ======================================== +// VARIABILI (Sincronizzate) +// ======================================== +$primary-color: #1976d2; +$primary-light: #42a5f5; +$primary-dark: #1565c0; +$accent-color: #26a69a; +$positive-color: #21ba45; +$negative-color: #c10015; + +$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; + +// ======================================== +// CONTAINER PRINCIPALE +// ======================================== +.reset-password-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; + + @media (max-width: $mobile-breakpoint) { + padding: 12px; + align-items: flex-start; + padding-top: 40px; + } +} + +// ======================================== +// CARD PRINCIPALE +// ======================================== +.reset-card { + width: 100%; + max-width: 500px; + border-radius: $border-radius-lg; + box-shadow: $shadow-lg; + overflow: hidden; + background: white; + animation: fadeInUp 0.6s ease; + + @media (max-width: $mobile-breakpoint) { + max-width: 100%; + border-radius: $border-radius; + } +} + +// ======================================== +// HEADER +// ======================================== +.reset-header { + text-align: center; + padding: 40px 24px 24px; + background: linear-gradient(to bottom, rgba(103, 126, 234, 0.05), transparent); + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + + &.success { + background: linear-gradient(to bottom, rgba(33, 186, 69, 0.08), transparent); + border-bottom-color: rgba(33, 186, 69, 0.15); + } + + @media (max-width: $mobile-breakpoint) { + padding: 32px 16px 20px; + } +} + +.icon-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 120px; + height: 120px; + margin: 0 auto 20px; + border-radius: 50%; + background: linear-gradient(135deg, rgba(25, 118, 210, 0.1), rgba(38, 166, 154, 0.1)); + animation: scaleIn 0.6s ease; + + &.success { + background: linear-gradient(135deg, rgba(33, 186, 69, 0.15), rgba(38, 166, 154, 0.15)); + } + + @media (max-width: $mobile-breakpoint) { + width: 100px; + height: 100px; + margin: 0 auto 16px; + + .q-icon { + font-size: 48px !important; + } + } +} + +.reset-title { + font-size: 1.875rem; + font-weight: 600; + margin: 0 0 12px; + color: #1a1a1a; + line-height: 1.3; + + @media (max-width: $mobile-breakpoint) { + font-size: 1.5rem; + margin: 0 0 10px; + } +} + +.reset-subtitle { + font-size: 1rem; + color: #666; + margin: 0; + line-height: 1.5; + + @media (max-width: $mobile-breakpoint) { + font-size: 0.9375rem; + } + + strong { + color: #333; + font-weight: 600; + } +} + +// ======================================== +// FORM +// ======================================== +.reset-form { + padding: 32px 24px; + + @media (max-width: $mobile-breakpoint) { + padding: 24px 16px; + } +} + +.form-fields { + display: flex; + flex-direction: column; + gap: 20px; + + @media (max-width: $mobile-breakpoint) { + gap: 16px; + } +} + +// ======================================== +// INPUT FIELDS +// ======================================== +.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: 52px; + 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.9375rem; + } + } + + :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); + } + } + + &.q-field--error { + animation: shake 0.4s ease; + } +} + +// ======================================== +// CODE INPUT +// ======================================== +.code-input-wrapper { + display: flex; + flex-direction: column; + gap: 12px; + + @media (max-width: $mobile-breakpoint) { + gap: 10px; + } +} + +.code-input { + :deep(.q-field__control) { + input { + text-align: center; + font-size: 1.5rem; + letter-spacing: 8px; + font-weight: 600; + + @media (max-width: $mobile-breakpoint) { + font-size: 1.25rem; + letter-spacing: 6px; + } + } + } +} + +.code-hint { + display: flex; + align-items: center; + gap: 8px; + padding: 12px; + background: rgba(103, 126, 234, 0.06); + border-radius: $border-radius-sm; + font-size: 0.875rem; + color: #666; + + @media (max-width: $mobile-breakpoint) { + padding: 10px; + font-size: 0.8125rem; + } + + .q-icon { + flex-shrink: 0; + } +} + +// ======================================== +// BUTTONS +// ======================================== +.submit-btn { + width: 100%; + height: 56px; + border-radius: $border-radius; + font-size: 1.125rem; + font-weight: 600; + text-transform: none; + background: linear-gradient(135deg, $primary-color, $primary-light); + box-shadow: $shadow-md; + transition: all $transition-speed ease; + margin-top: 8px; + + &:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: $shadow-lg; + background: linear-gradient(135deg, $primary-dark, $primary-color); + } + + &:active:not(:disabled) { + transform: translateY(0); + } + + &:disabled { + opacity: 0.5; + } + + @media (max-width: $mobile-breakpoint) { + height: 52px; + font-size: 1rem; + } +} + +.confirm-btn { + background: linear-gradient(135deg, $positive-color, #26a69a); + + &:hover:not(:disabled) { + background: linear-gradient(135deg, #1e8e3e, $positive-color); + } +} + +// ======================================== +// LINKS +// ======================================== +.back-link, +.resend-link { + text-align: center; + margin-top: 4px; + + @media (max-width: $mobile-breakpoint) { + margin-top: 0; + } +} + +.link-text { + display: inline-flex; + align-items: center; + gap: 6px; + color: #666; + text-decoration: none; + font-size: 0.9375rem; + transition: all $transition-speed ease; + padding: 8px 12px; + border-radius: $border-radius-sm; + cursor: pointer; + + &:hover { + color: $primary-color; + background: rgba(25, 118, 210, 0.06); + } + + @media (max-width: $mobile-breakpoint) { + font-size: 0.875rem; + padding: 6px 10px; + } + + .q-icon { + font-size: inherit; + } +} + +// ======================================== +// ANIMAZIONI +// ======================================== +@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 shake { + 0%, 100% { + transform: translateX(0); + } + 25% { + transform: translateX(-10px); + } + 75% { + transform: translateX(10px); + } +} + +// ======================================== +// RESPONSIVE UTILITIES +// ======================================== +@media (max-width: $mobile-breakpoint) { + .reset-password-container { + min-height: -webkit-fill-available; + } +} + +// ======================================== +// LEGACY CLASSES +// ======================================== +.padding { + padding: 20px; +} + +.center { + display: flex; + justify-content: center; +} + +.mybanner { + font-size: 1.125rem; + font-weight: 600; +} \ No newline at end of file diff --git a/src/views/requestresetpwd/requestresetpwd.vue b/src/views/requestresetpwd/requestresetpwd.vue index 27a3bba0..14275b73 100755 --- a/src/views/requestresetpwd/requestresetpwd.vue +++ b/src/views/requestresetpwd/requestresetpwd.vue @@ -1,92 +1,133 @@ - +