Home Page With Element ! (Modular)

Arcadei Project...
Inscription

src/components/CGridTableRec/CGridTableRec.ts

@@ -285,7 +285,7 @@ export default defineComponent({
     let colsel = ref(<IColGridTable | null>{ name: '', field: '', sortable: false })
     let valPrec = ''
 
-    let separator: 'horizontal'
+    const separator = 'horizontal'
     const myfilter = ref('')
     const myfilterand: any = ref([])
     let rowsel: any = {}
@@ -386,13 +386,13 @@ export default defineComponent({
       for (const item of searchList.value) {
         if (item.table === tablecat) {
           const valsaved = tools.getCookie(tools.COOK_SEARCH + tablecat + '_' + newval, costanti.FILTER_TUTTI)
-          const rec = searchList.value.find((rec) => rec.table === tablecat) // check if exist
+          const rec = searchList.value.find((myrec) => myrec.table === tablecat) // check if exist
           let trovato = false
           let arrvalues = []
           if (rec) {
             arrvalues = valoriopt.value(rec.value, false, false)
             if (arrvalues)
-              trovato = arrvalues.find((rec: any) => rec[rec.key] === valsaved)
+              trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
           }
           console.log('   ...item', item)
           if (valsaved && trovato)
@@ -417,13 +417,13 @@ export default defineComponent({
       for (const item of searchList.value) {
         if (item.table === tableprov) {
           const valsaved = tools.getCookie(tools.COOK_SEARCH + tableprov + '_' + newval, costanti.FILTER_TUTTI)
-          const rec = searchList.value.find((rec) => rec.table === tableprov) // check if exist
+          const rec = searchList.value.find((myrec) => myrec.table === tableprov) // check if exist
           let trovato = false
           let arrvalues = []
           if (rec) {
             arrvalues = valoriopt.value(rec.value, false, false)
             if (arrvalues)
-              trovato = arrvalues.find((rec: any) => rec[rec.key] === valsaved)
+              trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
           }
           if (valsaved && trovato)
             item.value = valsaved
@@ -434,13 +434,13 @@ export default defineComponent({
           }
         } else if (item.table === toolsext.TABCITIES) {
           const valsaved = tools.getCookie(tools.COOK_SEARCH + toolsext.TABCITIES + '_' + newval, costanti.FILTER_TUTTI)
-          const rec = searchList.value.find((rec) => rec.table === toolsext.TABCITIES) // check if exist
+          const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABCITIES) // check if exist
           let trovato = false
           let arrvalues = []
           if (rec) {
             arrvalues = valoriopt.value(rec.value, false, false)
             if (arrvalues)
-              trovato = arrvalues.find((rec: any) => rec[rec.key] === valsaved)
+              trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
           }
           if (valsaved && trovato)
             item.value = valsaved
@@ -837,7 +837,7 @@ export default defineComponent({
         pagination.value.rowsNumber = getRowsNumberCount(myfilter)
 
         // clear out existing data and add new
-        if (returnedData.value === []) {
+        if (!returnedData.value || returnedData.value.length === 0) {
           serverData.value = []
         } else {
           // if (serverData.length > 0)

src/components/CMyElem/CMyElem.scss

@@ -0,0 +1,452 @@
+
+.testo-banda {
+  //background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
+  //background: linear-gradient(180deg, #3144f0, transparent);
+  //background: rgba(0, 0, 0, .6)
+}
+
+$grayshadow: #555;
+
+$textcol: blue;
+$textcol_scuro: darkblue;
+
+p {
+  margin: 0 0 1.25rem;
+  //text-shadow: .125rem .125rem .25rem $grayshadow;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+.mycard {
+  visibility: hidden;
+}
+
+.landing {
+}
+
+.landing_background {
+  background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
+  background-size: cover
+}
+
+.landing > section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  //padding: 0 16px
+}
+
+.intro {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  /* flex-flow: row nowrap; */
+
+  padding: 1.25rem 0 1.25rem 0;
+  margin: .125rem;
+
+  * {
+    width: 100%;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__associazione {
+    min-width: 350px;
+  }
+
+  &__comeassociarsi {
+    min-width: 350px;
+  }
+}
+
+.subtitle {
+  font-weight: 600;
+  text-align: center;
+  letter-spacing: 0.125rem;
+  text-transform: uppercase;
+  font-size: 1rem;
+}
+
+.landing > section.padding {
+  padding: 5.62rem 1rem;
+}
+
+.landing > section.padding_testo {
+  padding-top: 1.25rem;
+  padding-bottom: 1rem;
+}
+
+.landing > section.padding_gallery {
+  padding-top: 3.125rem;
+  padding-bottom: 5.625rem;
+}
+
+.landing > section > div {
+  position: relative;
+  width: 100%
+}
+
+.maxwidth1200 {
+  max-width: 1200px;
+}
+
+.landing__toolbar {
+  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
+  background: linear-gradient(180deg, #000, transparent);
+  padding: 0 !important
+}
+
+.landing__toolbar .q-btn {
+  border-radius: 0 0 .315rem .315rem;
+  -ms-flex-item-align: stretch;
+  align-self: stretch
+}
+
+.landing__hero {
+  min-height: 50vh
+}
+
+.landing__header {
+  height: 18vh
+}
+
+.landing__arrow {
+  bottom: 1.5rem;
+  opacity: .4
+}
+
+.landing__front {
+  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
+}
+
+.landing__logo {
+  width: 9.40rem;
+  height: 9.40rem;
+  margin-top: 1.315rem;
+  //-webkit-animation: logo-rotate 240s linear infinite;
+  //animation: logo-rotate 240s linear infinite
+}
+
+.landing__features .q-icon {
+  font-size: 4rem
+}
+
+h4 {
+  line-height: 1.5;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+.landing__features h4, .landing__features h6 {
+  margin: 1rem 0
+}
+
+.landing__features p {
+  opacity: .7;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.landing__footer {
+  //background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
+  background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
+  padding-top: 4.5rem !important;
+  padding-bottom: 4.5rem !important;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  color: #9f9f9f;
+}
+
+.icon_contact:hover {
+  color: blue;
+  border-color: white;
+  border-width: .0625rem;
+}
+
+.landing__footer .doc-link {
+  color: $textcol;
+}
+
+.landing__footer .doc-link:hover {
+  opacity: .8
+}
+
+.landing__swirl-bg {
+  background-repeat: no-repeat !important;
+  background-position: top;
+  background-size: contain !important;
+  background-image: url(../../../public/images/landing_first_section.png) !important
+}
+
+.feat-descr {
+  font-size: 1.15rem;
+}
+
+.feat-descr:hover {
+  transition: opacity 0.5s ease-in-out;
+  opacity: 0.9;
+}
+
+.q-col-gutter-sm {
+  padding: 3.125rem 3.125rem;
+  //margin-left: -48px
+}
+
+body.mobile .landing {
+  //background: unset
+}
+
+body.mobile .landing:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  //background: #000 url(../../public/images/cover.jpg) 50%;
+
+  background-size: cover
+}
+
+/*
+@-webkit-keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+
+@keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+*/
+
+.home {
+  //background-color: rgb(250, 250, 250);
+  padding: 3.125rem;
+  display: flex;
+  //flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.btn-start {
+  margin: 3.125rem;
+}
+
+.shadow {
+  //color: white;
+  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
+}
+
+.text-h1, h1 {
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 3rem;
+  letter-spacing: -.01562em;
+  margin-bottom: 8px !important;
+}
+
+.text-h2 {
+  font-size: 3.75rem;
+  font-weight: 300;
+  line-height: 3.75rem;
+  letter-spacing: -.00833em;
+}
+
+.text-weight-bold {
+  font-weight: 700;
+}
+
+.text-vers {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+.homep-cover-img-1 {
+  background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-2 {
+  background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-3 {
+  background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img.hide-filter:before {
+  opacity: 0
+}
+
+.landing__footer-icons {
+  font-size: 1.75rem
+}
+
+.landing__footer-icons a {
+  margin: 0 .5rem .5rem;
+  text-decoration: none;
+  outline: 0;
+  color: $textcol;
+  transition: color .28s
+}
+
+.landing__footer-icons a:hover {
+  color: $textcol_scuro;
+}
+
+.doc-img {
+  max-width: 100%;
+}
+
+.mylist {
+  background: #3fdaff;
+  padding-left: 1.25rem;
+}
+
+.clgutter {
+  margin-top: 1.25rem;
+  padding: .62rem;
+}
+
+.carousel_img_3 {
+  //background-image: url(../../public/images/cibo_sano.jpg);
+  background-size: cover !important;
+  background-position: 50% center !important;
+  background-repeat: no-repeat !important;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+
+  .landing__hero {
+    text-align: center
+  }
+  .landing__header {
+    height: 7vh
+  }
+  .clgutter {
+    margin-top: 0;
+    padding: 0;
+  }
+  .landing__hero .text-h1, h1 {
+    font-size: 2rem;
+    line-height: 2.05rem;
+    margin-bottom: 1.25rem
+  }
+
+  .landing > section.padding {
+    padding: 2.5rem 1rem;
+  }
+
+  .landing > section.padding_testo {
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
+  }
+
+  .landing > section.padding_gallery {
+    padding-top: 3.125rem;
+    padding-bottom: 5.625rem;
+
+    max-width: 800px;
+  }
+
+  .landing > section.padding_gallery > div {
+    padding-top: 3.125rem;
+    padding-bottom: 5.625rem;
+
+  }
+
+  .landing__features h4, .landing__features h6 {
+    margin: 1.25rem 0
+  }
+
+  h4 {
+    line-height: 1.4;
+    text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
+  }
+
+  .landing .feature-item {
+    text-align: center;
+    margin-top: 1.25rem;
+  }
+  .landing__hero-content {
+    padding-bottom: 11.25rem;
+  }
+  .landing__hero2-content {
+    padding-bottom: 7.25rem;
+  }
+  .landing__hero-btns {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center
+  }
+
+  .q-col-gutter-sm {
+    padding: .625rem .315rem;
+  }
+
+  .text-subtitle1 {
+    font-size: 1.25rem;
+  }
+  .text-vers {
+    font-size: 0.6rem;
+  }
+
+  .carousel_img_3 {
+    //background-image: url(../../public/images/cibo_sano.jpg);
+    background-size: 620px 620px !important;
+    background-position: 50% top !important;
+    background-repeat: no-repeat !important;
+  }
+
+}
+
+.custom-caption {
+  text-align: center;
+  padding: .75rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+.sfondo-grigio {
+  padding: 1rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .35);
+}
+
+.mycontacts {
+  color: gray;
+  letter-spacing: 0.078rem;
+}
+
+.mycontacts_title {
+  text-shadow: 0.125rem 0.125rem 0.125rem #555;
+  font-weight: bold;
+  color: #999;
+  letter-spacing: 0.125rem;
+}
+
+.mycontacts_text {
+  color: #999;
+  letter-spacing: 0.093rem;
+}

src/components/CMyElem/CMyElem.ts

@@ -0,0 +1,62 @@
+import {
+  defineComponent, onMounted, PropType, ref, toRef, watch,
+} from 'vue'
+
+import { IMyElem, IMyPage, IOperators } from '@src/model'
+import { useGlobalStore } from '@store/globalStore'
+
+import { CImgTitle } from '../CImgTitle/index'
+import { CTitle } from '@/components/CTitle/index'
+import { tools } from '@store/Modules/tools'
+import { shared_consts } from '@/common/shared_vuejs'
+import LandingFooter from '@/components/LandingFooter/LandingFooter'
+import { COpenStreetMap } from '@src/components/COpenStreetMap'
+import { CCardCarousel } from '@src/components/CCardCarousel'
+import { CMyPage } from '@src/components/CMyPage'
+import { CMyPageIntro } from '@src/components/CMyPageIntro'
+import { CEventsCalendar } from '@src/components/CEventsCalendar'
+import MixinMetaTags from '@/mixins/mixin-metatags'
+
+export default defineComponent({
+  name: 'CMyElem',
+  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro },
+  props: {
+    myelem: {
+      type: Object as PropType<IMyElem>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const globalStore = useGlobalStore()
+
+    const { setmeta, getsrcbyimg } = MixinMetaTags()
+
+    const animare = ref(0)
+    const slide = ref(0)
+    const slide2 = ref(0)
+
+    function getArrDisciplines() {
+      return globalStore.disciplines.filter((rec: any) => rec.showinhome)
+    }
+
+    function getheightgallery() {
+      if (tools.isMobile())
+        return '400px'
+      else
+        return '600px'
+    }
+
+    return {
+      tools,
+      shared_consts,
+      getArrDisciplines,
+      getheightgallery,
+      slide,
+      slide2,
+      animare,
+      setmeta,
+      getsrcbyimg,
+    }
+  },
+
+})

src/components/CMyElem/CMyElem.vue

@@ -0,0 +1,156 @@
+<template>
+  <div v-if="myelem">
+    <div v-if="myelem.type === shared_consts.ELEMTYPE.TEXT">
+      <div :class="myelem.class">{{ myelem.container }}</div>
+    </div>
+    <div v-if="myelem.type === shared_consts.ELEMTYPE.MARGINI">
+      <div :style="`margin: ` + myelem.size"></div>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.TITLE">
+      <CTitle
+        :imgbackground="myelem.imgback"
+        :headtitle="myelem.title" :sizes="myelem.size" :styleadd="myelem.styleadd">
+      </CTitle>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMGTITLE">
+      <CImgTitle v-if="myelem.container" :src="myelem.container" :title="myelem.title">
+      </CImgTitle>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.HTML">
+      <div :class="myelem.class" v-html="myelem.containerHtml"></div>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMAGE">
+      <div class="text-center">
+         <q-img :src="myelem.container" class="img" :width="myelem.width" :height="myelem.height"></q-img>
+      </div>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.VIDEO">
+      <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
+      </q-video>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.FOOTER">
+      <LandingFooter></LandingFooter>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
+      <CMyPage :mypath="myelem.container"></CMyPage>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGEINTRO">
+      <CMyPageIntro :mypath="myelem.container" :maxheightimg="myelem.heightimg" :maxwidthimg="myelem.widthimg" :link="myelem.link"></CMyPageIntro>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
+      <CCardCarousel :myarr="getArrDisciplines()">
+
+      </CCardCarousel>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
+      <!-- Da Fare -->
+      <COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
+                      :coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
+
+      </COpenStreetMap>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
+      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
+
+        <q-carousel
+          swipeable
+          animated
+          :autoplay="8000"
+          v-model="slide2"
+          arrows
+          thumbnails
+          infinite
+          height="600">
+          <q-carousel-slide v-for="(rec, index) in myelem.list" :key="index" :name="index"
+                            :img-src="getsrcbyimg(`images/`+ rec.imagefile)"
+                            :alt="rec.alt"
+                            class="carousel_slide">
+            <div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
+              <div class="text-h5"><span
+                class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span>
+                <span v-if="rec.alt"
+                class="text-h6 text-grey-2 shadow">{{rec.alt}}</span></div>
+              <div class="text-subtitle1" v-if="rec.description"><span class="text-grey-4 shadow">{{rec.description}}</span>
+              </div>
+            </div>
+          </q-carousel-slide>
+        </q-carousel>
+      </section>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
+      <section>
+        <div class="landing">
+          <div class="landing__hero maxwidth1200 text-white">
+          <q-carousel
+            animated
+            :autoplay="animare"
+            swipeable
+            infinite
+            navigation
+            transition-next="slide-left"
+            transition-prev="slide-right"
+            v-model="slide"
+            :height="getheightgallery()"
+            width="100%"
+          >
+                <q-carousel-slide
+                  v-for="(myrec, ind) in myelem.list" :key="ind"
+                  :name="ind"
+                                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">
+
+                <div class="landing__header"></div>
+                <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
+                  <div class="row">
+                    &nbsp;
+                  </div>
+                  <div class="flex justify-end">
+                    <div class="q-gutter-xs testo-banda clgutter">
+                      <h1 class="text-h1 shadow-max">{{ tools.getappname() }}</h1>
+                      <div class="text-subtitle1 shadow text-italic q-pl-sm">
+                        {{myelem.container}}&nbsp;
+                      </div>
+                      <div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
+                        {{myelem.container2}}
+                      </div>
+                      <div class="text-subtitle2 shadow text-italic q-pl-sm">
+                        {{myelem.container3}}
+                      </div>
+                      <div>
+                        <br><br>
+                        <div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
+                          <br><br>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--<div class="landing__arrow absolute-bottom text-center">
+                  <i aria-hidden="true"
+                     class="q-icon text-h2 text-white material-icons">expand_more</i>
+                </div>-->
+              </q-carousel-slide>
+          </q-carousel>
+        </div>
+        </div>
+      </section>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CALENDAR">
+      <CEventsCalendar :mysingleevent="null" :showfirstN="myelem.number || 3">
+      </CEventsCalendar>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
+      <div class="q-pa-md q-gutter-md">
+        <div v-if="tools.isLogged() && !isVerified" class="text-verified">{{
+            $t('components.authentication.email_verification.link_sent') }}
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyElem.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMyElem.scss';
+</style>

src/components/CMyElem/index.ts

@@ -0,0 +1 @@
+export { default as CMyElem } from './CMyElem.vue'

src/components/CMyPage/CMyPage.ts

@@ -54,12 +54,12 @@ export default defineComponent({
 
     const load = async (): Promise<void> => {
       // console.log('load', mypath.value)
-      if (mypath.value !== '') rec.value = await globalStore.loadPage('/'+mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
     }
 
     watch(() => props.mypath, async (to: string, from: string) =>  {
       // console.log('load', mypath.value)
-      if (mypath.value !== '') rec.value = await globalStore.loadPage('/'+mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
     })
 
     // onMounted(load)

src/components/CMyPage/CMyPage.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div v-if="mypath && !!rec">
-
       <div class="q-ma-sm q-gutter-sm q-pa-xs">
         <div v-if="!!rec.img1" class="text-center">
           <q-img :src="``+ rec.img1" class="img"></q-img>

src/components/CMyPageIntro/CMyPageIntro.ts

@@ -0,0 +1,79 @@
+import {
+  defineComponent, onMounted, ref, toRef, watch,
+} from 'vue'
+
+import { IMyPage } from '@src/model'
+import { useGlobalStore } from '@store/globalStore'
+import { LandingFooter } from '@/components/LandingFooter'
+
+import { CImgTitle } from '../CImgTitle/index'
+import { CTitle } from '../CTitle/index'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'CMyPageIntro',
+  components: { LandingFooter, CImgTitle, CTitle },
+  props: {
+    title: String,
+    mypath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    img: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sizes: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    styleadd: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    maxheightimg: {
+      type: Number,
+    },
+    maxwidthimg: {
+      type: Number,
+    },
+    link: {
+      type: String,
+    },
+  },
+
+  setup(props) {
+    const rec = ref<IMyPage | null>(null)
+    const mypath = toRef(props, 'mypath')
+    const $router = useRouter()
+
+    const globalStore = useGlobalStore()
+
+    const load = async (): Promise<void> => {
+      // console.log('load', mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
+    }
+
+    watch(() => props.mypath, async (to: string, from: string) =>  {
+      // console.log('load', mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
+    })
+
+    function openclick() {
+      if (props.link)
+        $router.push(props.link)
+    }
+
+
+    // onMounted(load)
+
+    load()
+
+    return { rec, openclick }
+  },
+
+})

src/components/CMyPageIntro/CMyPageIntro.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div v-if="mypath && !!rec">
+      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+        <div v-if="!!rec.img1" class="text-center">
+          <q-btn v-if="link" @click="openclick">
+              <q-img :src="rec.img1" :height="maxheightimg + `px`" :width="maxwidthimg + `px`" fit="fill"></q-img>
+          </q-btn>
+          <q-img v-else :src="rec.img1" :height="maxheightimg + `px`" :width="maxwidthimg + `px`" fit="fill" @click="openclick"></q-img>
+        </div>
+
+        <div v-if="!!rec.content" v-html="rec.content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyPageIntro.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMyPageIntro.scss';
+</style>

src/components/CMyPageIntro/index.ts

@@ -0,0 +1 @@
+export { default as CMyPageIntro } from './CMyPageIntro.vue'

src/components/CMySingleEvent/CMySingleEvent.ts

@@ -7,8 +7,12 @@ import { LandingFooter } from '../../components/LandingFooter/index'
 import { tools } from '../../store/Modules/tools'
 import { static_data } from '@src/db/static_data'
 
-import { CImgText } from '../../components/CImgText/index'
-import { CCard, CMyAvatar, CMyTeacher, CMyPage } from '@components'
+import { CCard } from '@/components/CCard/index'
+import { CImgText } from '@/components/CImgText/index'
+import { CMyAvatar } from '@/components/CMyAvatar/index'
+import { CMyTeacher } from '@/components/CMyTeacher/index'
+import { CMyPage } from '@/components/CMyPage/index'
+
 import { IEvents, IOperators } from '@src/model'
 import MixinEvents from '@/mixins/mixin-events'
 

src/components/CPhotosGallery/CPhotosGallery.scss

@@ -61,10 +61,6 @@ h4 {
   background-size: cover
 }
 
-.carousel_slide {
-
-}
-
 .gallery {
   background-size: cover;
   background-position: center center;

src/components/CSignUpIscrizioneArcadei/CSignUpIscrizioneArcadei.scss

@@ -0,0 +1,34 @@
+.signup {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clCellCode {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.clCell {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.vue-country-select{
+  border-radius: 32px;
+}
+
+

src/components/CSignUpIscrizioneArcadei/CSignUpIscrizioneArcadei.ts

@@ -0,0 +1,255 @@
+import { ISignupIscrizioneConacreisOptions } from 'model'
+import { tools } from '@store/Modules/tools'
+
+import { Logo } from '@/components/logo'
+import { CDate } from '@/components/CDate'
+import { CMyPage } from '@/components/CMyPage'
+
+import { CTitleBanner } from '../CTitleBanner'
+import { computed, defineComponent, reactive, ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import MixinUsers from '@/mixins/mixin-users'
+import useVuelidate from '@vuelidate/core'
+import { email, minLength, required } from 'vuelidate/lib/validators'
+
+// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
+export default defineComponent({
+  name: 'CSignUpIscrizioneArcadei',
+  components: { Logo, CTitleBanner, CDate, CMyPage },
+
+  setup() {
+    const $q = useQuasar()
+    const userStore = useUserStore()
+    const $router = useRouter()
+    const globalStore = useGlobalStore()
+    const { t } = useI18n()
+
+    // @ts-ignore
+    const v$ = useVuelidate(validations, signup)
+
+    const countryname = ref('')
+    const countryborn = ref('')
+    const iamadult = ref(false)
+
+    const duplicate_email = ref(false)
+    const duplicate_username = ref(false)
+
+    const { mySurname, Email, myCell } = MixinUsers()
+
+    const { getMyUsername } = MixinUsers()
+
+    const signup = ref({
+      accetta_carta_costituzionale_on: false,
+      newsletter_on: false,
+      terms: false
+    } as ISignupIscrizioneConacreisOptions)
+
+    const validations: any = computed(() => {
+      const valid: any = {
+        signup: {
+          name: {
+            required
+          },
+          surname: {
+            required
+          },
+          email: {
+            email,
+            required
+          },
+          fiscalcode: {
+            required,
+            minLength: minLength(16)
+          },
+          residency_address: {
+            required
+          },
+          residency_city: {
+            required
+          },
+          residency_province: {
+            required
+          },
+          residency_zipcode: {
+            required
+          },
+          dateofbirth: {
+            required
+          },
+          born_city: {
+            required
+          },
+          born_province: {
+            required
+          },
+          born_country: {
+            required
+          },
+          metodo_pagamento: {
+            required
+          },
+          terms: {
+            required
+          },
+        }
+
+      }
+      return valid
+    })
+
+    function created() {
+      if (!!getMyUsername() && (!userStore.my.profile.socio)) {
+        signup.value.name = userStore.my.name
+        signup.value.surname = mySurname.toString()
+        signup.value.email = Email.toString()
+        signup.value.cell_phone = myCell.toString()
+      }
+      v$.value.$reset()
+    }
+
+    function allowSubmit() {
+
+      const error = v$.value.$error || v$.value.$invalid
+
+      // console.log('v', v$, 'error', error, 'terms', signup.value.terms, 'carta', signup.value.accetta_carta_costituzionale_on)
+      return !error && signup.value.terms && signup.value.accetta_carta_costituzionale_on
+    }
+
+    function errorMsg(cosa: string, item: any) {
+      try {
+        if (!item.$error) {
+          return ''
+        }
+        console.log('item', item)
+        // console.log('errorMsg', cosa, item)
+        if (item.$params.email && !item.email) {
+          return t('reg.err.email')
+        }
+
+        // console.log('item', item)
+
+        if (item.minLength !== undefined) {
+          if (!item.minLength) {
+            return t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + t('reg.err.char')
+          }
+        }
+        if (item.complexity !== undefined) {
+          if (!item.complexity) {
+            return t('reg.err.complexity')
+          }
+        }
+// if (!item.maxLength) { return t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + t('reg.err.char') }
+
+        if (item.required !== undefined) {
+          if (!item.required) {
+            return t('reg.err.required')
+          }
+        }
+
+        // console.log('    ....avanti')
+        if (cosa === 'email') {
+          // console.log("EMAIL " + item.isUnique);
+          // console.log(item);
+          if (!item.isUnique) {
+            return t('reg.err.duplicate_email')
+          }
+        } else if (cosa === 'username') {
+          // console.log(item);
+          console.log('username')
+          console.log(item.$error)
+          if (!item.isUnique) {
+            return t('reg.err.duplicate_username')
+          }
+        } else if ((cosa === 'name') || (cosa === 'surname')) {
+          // console.log(item);
+        }
+
+        return ''
+      } catch (error) {
+        // console.log("ERR : " + error);
+      }
+    }
+
+    function submitOk() {
+      v$.value.signup.value.touch()
+
+      if (signup.value) {
+        signup.value.email = tools.removespaces(signup.value.email!)
+        signup.value.email = signup.value.email.toLowerCase()
+
+        signup.value.residency_country = tools.CapitalizeAllWords(signup.value.residency_country)
+        signup.value.residency_address = tools.CapitalizeAllWords(signup.value.residency_address)
+        signup.value.residency_city = tools.CapitalizeAllWords(signup.value.residency_city)
+        signup.value.residency_province = signup.value.residency_province!.toUpperCase()
+        signup.value.born_province = signup.value.born_province!.toUpperCase()
+
+        duplicate_email.value = false
+        duplicate_username.value = false
+
+        if (!signup.value.terms) {
+          tools.showNotif($q, t('reg.err.terms'))
+          return
+        }
+
+        if (!signup.value.accetta_carta_costituzionale_on) {
+          tools.showNotif($q, t('reg.err.accetta_carta_costituzionale_on'))
+          return
+        }
+
+        if (v$.value.signup.value.$error) {
+          tools.showNotif($q, t('reg.err.errore_generico'))
+          return
+        }
+
+        signup.value.name = tools.CapitalizeAllWords(signup.value.name)
+        signup.value.surname = tools.CapitalizeAllWords(signup.value.surname)
+        signup.value.annoTesseramento = 2023
+
+        $q.loading.show({ message: t('reg.iscrizioneincorso') })
+
+        console.log(signup)
+        return userStore.iscrivitiConacreis(tools.clone(signup))
+          .then((ris) => {
+            if (tools.SignUpcheckErrors($q, $router, ris.code, ris.msg))
+              $q.loading.hide()
+          }).catch((error: any) => {
+            console.log('ERROR = ' + error)
+            $q.loading.hide()
+          })
+
+      }
+    }
+
+    function selectcountry({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
+      // console.log(name, iso2, dialCode)
+      signup.value.residency_country = name
+      countryname.value = name
+    }
+
+    function selectcountryborn({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
+      // console.log(name, iso2, dialCode)
+      signup.value.born_country = name
+      countryborn.value = name
+    }
+
+    created()
+
+    return {
+      tools,
+      selectcountryborn,
+      selectcountry,
+      submitOk,
+      errorMsg,
+      allowSubmit,
+
+    }
+
+  }
+
+
+})

src/components/CSignUpIscrizioneArcadei/CSignUpIscrizioneArcadei.vue

@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <div class="text-center">
+      <logo></logo>
+      <CTitleBanner :title="$t('pages.SignUpIscrizione')" :canopen="true" :visible="false">
+
+        <div class="q-gutter-xs">
+
+          <p class="q-ml-md text-center">
+            Leggi
+            <span class="underline"> <router-link to="/il-nostro-progetto" custom v-slot="{ navigate }">
+            <span class="footer_link" @click="navigate" @keypress.enter="navigate" role="link">Il Nostro Progetto</span>
+            </router-link></span>
+          </p>
+
+
+          <q-input
+            v-model="signup.name"
+            rounded outlined
+            @blur="v$.signup.name.$touch"
+            :error="v$.signup.name.$error"
+            maxlength="30"
+            :error-message="errorMsg('name', v$.signup.name)"
+            :label="$t('reg.name')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.surname"
+            rounded outlined
+            @blur="v$.signup.surname.$touch"
+            :error="v$.signup.surname.$error"
+            maxlength="30"
+            :error-message="errorMsg('surname', v$.signup.surname)"
+            :label="$t('reg.surname')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.email"
+            rounded outlined
+            @blur="v$.signup.email.$touch"
+            :error="v$.signup.email.$error"
+            :error-message="errorMsg('email', v$.signup.email)"
+            maxlength="50"
+            debounce="1000"
+            :label="$t('reg.email')">
+
+            <template v-slot:prepend>
+              <q-icon name="email"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.fiscalcode"
+            rounded outlined
+            @blur="v$.signup.fiscalcode.$touch"
+            :error="v$.signup.fiscalcode.$error"
+            maxlength="20"
+            mask="AAAAAA##A##A###A"
+            debounce="1000"
+            :error-message="errorMsg('fiscalcode', v$.signup.fiscalcode)"
+            :label="$t('reg.fiscalcode')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_address"
+            rounded outlined
+            @blur="v$.signup.residency_address.$touch"
+            :error="v$.signup.residency_address.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('residency_address', v$.signup.residency_address)"
+            :label="$t('reg.residency_address')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_city"
+            rounded outlined
+            @blur="v$.signup.residency_city.$touch"
+            :error="v$.signup.residency_city.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('residency_city', v$.signup.residency_city)"
+            :label="$t('reg.residency_city')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_province"
+            rounded outlined
+            @blur="v$.signup.residency_province.$touch"
+            :error="v$.signup.residency_province.$error"
+            maxlength="3"
+            debounce="1000"
+            :error-message="errorMsg('residency_province', v$.signup.residency_province)"
+            :label="$t('reg.residency_province')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_zipcode"
+            rounded outlined
+            @blur="v$.signup.residency_zipcode.$touch"
+            :error="v$.signup.residency_zipcode.$error"
+            maxlength="10"
+            debounce="1000"
+            :error-message="errorMsg('residency_zipcode', v$.signup.residency_zipcode)"
+            :label="$t('reg.residency_zipcode')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="countryname"
+            :readonly="true"
+            rounded outlined
+
+            debounce="1000"
+            :label="$t('reg.nationality')">
+
+            <template v-slot:prepend>
+              <vue-country-code
+                @onSelect="selectcountry"
+                :preferredCountries="tools.getprefCountries"
+                :dropdownOptions="{ disabledDialCode: true }"
+              >
+
+              </vue-country-code>
+            </template>
+
+          </q-input>
+
+          <br>
+
+          <vue-tel-input
+            v-model="signup.cell_phone"
+            :placeholder="$t('reg.cell')"
+            maxlength="20"
+            debounce="1000"
+            :enabledCountryCode="true"
+            inputClasses="clCell"
+            wrapperClasses="clCellCode">
+          </vue-tel-input>
+
+          <br>
+
+          <q-input
+            v-model="signup.dateofbirth"
+            debounce="1000"
+            @blur="v$.signup.dateofbirth.$touch"
+            :error="v$.signup.dateofbirth.$error"
+            :error-message="errorMsg('dateofbirth', v$.signup.dateofbirth)"
+            stack-label
+            :label="$t('reg.dateofbirth')"
+            rounded
+            type="date"
+            mask="date"
+            fill-mask
+            outlined>
+          </q-input>
+
+          <q-input
+            v-model="signup.born_city"
+            rounded outlined
+            @blur="v$.signup.born_city.$touch"
+            :error="v$.signup.born_city.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('born_city', v$.signup.born_city)"
+            :label="$t('reg.born_city')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.born_province"
+            rounded outlined
+            @blur="v$.signup.born_province.$touch"
+            :error="v$.signup.born_province.$error"
+            maxlength="3"
+            debounce="1000"
+            :error-message="errorMsg('born_province', v$.signup.born_province)"
+            :label="$t('reg.born_province')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <!--<CDate :mydate="signup.dateofbirth" @input="setDateOfBirth(arguments[0])"
+                 :rounded="true" :outlined="true"
+                 :dense="false"
+                 :label="$t('reg.dateofbirth')">
+          </CDate>-->
+
+
+          <q-input
+            v-model="countryborn"
+            :readonly="true"
+            rounded outlined
+
+            debounce="1000"
+            :label="$t('reg.nationality_born')">
+
+            <template v-slot:prepend>
+              <vue-country-code
+                @onSelect="selectcountryborn"
+                :preferredCountries="tools.getprefCountries"
+                :dropdownOptions="{ disabledDialCode: true }"
+              >
+
+              </vue-country-code>
+            </template>
+
+          </q-input>
+
+          <br>
+
+          <!--<div v-if="!tools.isMobile()"><br></div>-->
+
+
+          <q-select
+            rounded outlined v-model="signup.metodo_pagamento"
+            :options="tools.SelectMetodiPagamento"
+            :label="$t('reg.metodopagamento')" emit-value map-options>
+          </q-select>
+
+          <q-checkbox
+            v-model="signup.accetta_carta_costituzionale_on"
+            color="secondary">
+            <span v-html="$t('reg.accetta_carta_costituzionale_on')"></span>
+          </q-checkbox>
+
+          <q-checkbox
+            v-model="signup.terms"
+            color="secondary"
+            @blur="v$.signup.terms.$touch"
+            :error="v$.signup.terms.$error"
+            :error-message="`${errorMsg('terms', v$.signup.terms)}`"
+            :label="$t('reg.terms')">
+
+          </q-checkbox>
+
+
+          <div class="wrapper">
+            <q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'
+                   :label="$t('reg.iscriviti')">
+            </q-btn>
+          </div>
+
+          <br>
+        </div>
+      </CTitleBanner>
+      <br>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CSignUpIscrizioneArcadei.ts">
+</script>
+<style lang="scss" scoped>
+@import './CSignUpIscrizioneArcadei.scss';
+</style>

src/components/CSignUpIscrizioneArcadei/index.ts

@@ -0,0 +1 @@
+export {default as CSignUpIscrizioneArcadei} from './CSignUpIscrizioneArcadei.vue'

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis-validate.ts

@@ -0,0 +1,9 @@
+import { ISignupIscrizioneConacreisOptions } from 'model'
+import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
+
+export interface ISignupConacreis {
+  signup: ISignupIscrizioneConacreisOptions,
+  validationGroup: string[]
+}
+
+

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.scss

@@ -0,0 +1,34 @@
+.signup {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clCellCode {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.clCell {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.vue-country-select{
+  border-radius: 32px;
+}
+
+

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.ts

@@ -0,0 +1,255 @@
+import { ISignupIscrizioneConacreisOptions } from 'model'
+import { tools } from '@store/Modules/tools'
+
+import { Logo } from '@/components/logo'
+import { CDate } from '@/components/CDate'
+import { CMyPage } from '@/components/CMyPage'
+
+import { CTitleBanner } from '../CTitleBanner'
+import { computed, defineComponent, reactive, ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import MixinUsers from '@/mixins/mixin-users'
+import useVuelidate from '@vuelidate/core'
+import { email, minLength, required } from 'vuelidate/lib/validators'
+
+// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
+export default defineComponent({
+  name: 'CSignUpIscrizioneConacreis',
+  components: { Logo, CTitleBanner, CDate, CMyPage },
+
+  setup() {
+    const $q = useQuasar()
+    const userStore = useUserStore()
+    const $router = useRouter()
+    const globalStore = useGlobalStore()
+    const { t } = useI18n()
+
+    // @ts-ignore
+    const v$ = useVuelidate(validations, signup)
+
+    const countryname = ref('')
+    const countryborn = ref('')
+    const iamadult = ref(false)
+
+    const duplicate_email = ref(false)
+    const duplicate_username = ref(false)
+
+    const { mySurname, Email, myCell } = MixinUsers()
+
+    const { getMyUsername } = MixinUsers()
+
+    const signup = ref({
+      accetta_carta_costituzionale_on: false,
+      newsletter_on: false,
+      terms: false
+    } as ISignupIscrizioneConacreisOptions)
+
+    const validations: any = computed(() => {
+      const valid: any = {
+        signup: {
+          name: {
+            required
+          },
+          surname: {
+            required
+          },
+          email: {
+            email,
+            required
+          },
+          fiscalcode: {
+            required,
+            minLength: minLength(16)
+          },
+          residency_address: {
+            required
+          },
+          residency_city: {
+            required
+          },
+          residency_province: {
+            required
+          },
+          residency_zipcode: {
+            required
+          },
+          dateofbirth: {
+            required
+          },
+          born_city: {
+            required
+          },
+          born_province: {
+            required
+          },
+          born_country: {
+            required
+          },
+          metodo_pagamento: {
+            required
+          },
+          terms: {
+            required
+          },
+        }
+
+      }
+      return valid
+    })
+
+    function created() {
+      if (!!getMyUsername() && (!userStore.my.profile.socio)) {
+        signup.value.name = userStore.my.name
+        signup.value.surname = mySurname.toString()
+        signup.value.email = Email.toString()
+        signup.value.cell_phone = myCell.toString()
+      }
+      v$.value.$reset()
+    }
+
+    function allowSubmit() {
+
+      const error = v$.value.$error || v$.value.$invalid
+
+      // console.log('v', v$, 'error', error, 'terms', signup.value.terms, 'carta', signup.value.accetta_carta_costituzionale_on)
+      return !error && signup.value.terms && signup.value.accetta_carta_costituzionale_on
+    }
+
+    function errorMsg(cosa: string, item: any) {
+      try {
+        if (!item.$error) {
+          return ''
+        }
+        console.log('item', item)
+        // console.log('errorMsg', cosa, item)
+        if (item.$params.email && !item.email) {
+          return t('reg.err.email')
+        }
+
+        // console.log('item', item)
+
+        if (item.minLength !== undefined) {
+          if (!item.minLength) {
+            return t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + t('reg.err.char')
+          }
+        }
+        if (item.complexity !== undefined) {
+          if (!item.complexity) {
+            return t('reg.err.complexity')
+          }
+        }
+// if (!item.maxLength) { return t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + t('reg.err.char') }
+
+        if (item.required !== undefined) {
+          if (!item.required) {
+            return t('reg.err.required')
+          }
+        }
+
+        // console.log('    ....avanti')
+        if (cosa === 'email') {
+          // console.log("EMAIL " + item.isUnique);
+          // console.log(item);
+          if (!item.isUnique) {
+            return t('reg.err.duplicate_email')
+          }
+        } else if (cosa === 'username') {
+          // console.log(item);
+          console.log('username')
+          console.log(item.$error)
+          if (!item.isUnique) {
+            return t('reg.err.duplicate_username')
+          }
+        } else if ((cosa === 'name') || (cosa === 'surname')) {
+          // console.log(item);
+        }
+
+        return ''
+      } catch (error) {
+        // console.log("ERR : " + error);
+      }
+    }
+
+    function submitOk() {
+      v$.value.signup.value.touch()
+
+      if (signup.value) {
+        signup.value.email = tools.removespaces(signup.value.email!)
+        signup.value.email = signup.value.email.toLowerCase()
+
+        signup.value.residency_country = tools.CapitalizeAllWords(signup.value.residency_country)
+        signup.value.residency_address = tools.CapitalizeAllWords(signup.value.residency_address)
+        signup.value.residency_city = tools.CapitalizeAllWords(signup.value.residency_city)
+        signup.value.residency_province = signup.value.residency_province!.toUpperCase()
+        signup.value.born_province = signup.value.born_province!.toUpperCase()
+
+        duplicate_email.value = false
+        duplicate_username.value = false
+
+        if (!signup.value.terms) {
+          tools.showNotif($q, t('reg.err.terms'))
+          return
+        }
+
+        if (!signup.value.accetta_carta_costituzionale_on) {
+          tools.showNotif($q, t('reg.err.accetta_carta_costituzionale_on'))
+          return
+        }
+
+        if (v$.value.signup.value.$error) {
+          tools.showNotif($q, t('reg.err.errore_generico'))
+          return
+        }
+
+        signup.value.name = tools.CapitalizeAllWords(signup.value.name)
+        signup.value.surname = tools.CapitalizeAllWords(signup.value.surname)
+        signup.value.annoTesseramento = 2023
+
+        $q.loading.show({ message: t('reg.iscrizioneincorso') })
+
+        console.log(signup)
+        return userStore.iscrivitiConacreis(tools.clone(signup))
+          .then((ris) => {
+            if (tools.SignUpcheckErrors($q, $router, ris.code, ris.msg))
+              $q.loading.hide()
+          }).catch((error: any) => {
+            console.log('ERROR = ' + error)
+            $q.loading.hide()
+          })
+
+      }
+    }
+
+    function selectcountry({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
+      // console.log(name, iso2, dialCode)
+      signup.value.residency_country = name
+      countryname.value = name
+    }
+
+    function selectcountryborn({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
+      // console.log(name, iso2, dialCode)
+      signup.value.born_country = name
+      countryborn.value = name
+    }
+
+    created()
+
+    return {
+      tools,
+      selectcountryborn,
+      selectcountry,
+      submitOk,
+      errorMsg,
+      allowSubmit,
+
+    }
+
+  }
+
+
+})

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.vue

@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <div class="text-center">
+      <logo></logo>
+      <CTitleBanner :title="$t('pages.SignUpIscrizione')" :canopen="true" :visible="false">
+
+        <div class="q-gutter-xs">
+
+          <p class="q-ml-md text-center">
+            Leggi
+            <span class="underline"> <router-link to="/il-nostro-progetto" custom v-slot="{ navigate }">
+            <span class="footer_link" @click="navigate" @keypress.enter="navigate" role="link">Il Nostro Progetto</span>
+            </router-link></span>
+          </p>
+
+
+          <q-input
+            v-model="signup.name"
+            rounded outlined
+            @blur="v$.signup.name.$touch"
+            :error="v$.signup.name.$error"
+            maxlength="30"
+            :error-message="errorMsg('name', v$.signup.name)"
+            :label="$t('reg.name')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.surname"
+            rounded outlined
+            @blur="v$.signup.surname.$touch"
+            :error="v$.signup.surname.$error"
+            maxlength="30"
+            :error-message="errorMsg('surname', v$.signup.surname)"
+            :label="$t('reg.surname')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.email"
+            rounded outlined
+            @blur="v$.signup.email.$touch"
+            :error="v$.signup.email.$error"
+            :error-message="errorMsg('email', v$.signup.email)"
+            maxlength="50"
+            debounce="1000"
+            :label="$t('reg.email')">
+
+            <template v-slot:prepend>
+              <q-icon name="email"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.fiscalcode"
+            rounded outlined
+            @blur="v$.signup.fiscalcode.$touch"
+            :error="v$.signup.fiscalcode.$error"
+            maxlength="20"
+            mask="AAAAAA##A##A###A"
+            debounce="1000"
+            :error-message="errorMsg('fiscalcode', v$.signup.fiscalcode)"
+            :label="$t('reg.fiscalcode')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_address"
+            rounded outlined
+            @blur="v$.signup.residency_address.$touch"
+            :error="v$.signup.residency_address.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('residency_address', v$.signup.residency_address)"
+            :label="$t('reg.residency_address')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_city"
+            rounded outlined
+            @blur="v$.signup.residency_city.$touch"
+            :error="v$.signup.residency_city.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('residency_city', v$.signup.residency_city)"
+            :label="$t('reg.residency_city')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_province"
+            rounded outlined
+            @blur="v$.signup.residency_province.$touch"
+            :error="v$.signup.residency_province.$error"
+            maxlength="3"
+            debounce="1000"
+            :error-message="errorMsg('residency_province', v$.signup.residency_province)"
+            :label="$t('reg.residency_province')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_zipcode"
+            rounded outlined
+            @blur="v$.signup.residency_zipcode.$touch"
+            :error="v$.signup.residency_zipcode.$error"
+            maxlength="10"
+            debounce="1000"
+            :error-message="errorMsg('residency_zipcode', v$.signup.residency_zipcode)"
+            :label="$t('reg.residency_zipcode')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="countryname"
+            :readonly="true"
+            rounded outlined
+
+            debounce="1000"
+            :label="$t('reg.nationality')">
+
+            <template v-slot:prepend>
+              <vue-country-code
+                @onSelect="selectcountry"
+                :preferredCountries="tools.getprefCountries"
+                :dropdownOptions="{ disabledDialCode: true }"
+              >
+
+              </vue-country-code>
+            </template>
+
+          </q-input>
+
+          <br>
+
+          <vue-tel-input
+            v-model="signup.cell_phone"
+            :placeholder="$t('reg.cell')"
+            maxlength="20"
+            debounce="1000"
+            :enabledCountryCode="true"
+            inputClasses="clCell"
+            wrapperClasses="clCellCode">
+          </vue-tel-input>
+
+          <br>
+
+          <q-input
+            v-model="signup.dateofbirth"
+            debounce="1000"
+            @blur="v$.signup.dateofbirth.$touch"
+            :error="v$.signup.dateofbirth.$error"
+            :error-message="errorMsg('dateofbirth', v$.signup.dateofbirth)"
+            stack-label
+            :label="$t('reg.dateofbirth')"
+            rounded
+            type="date"
+            mask="date"
+            fill-mask
+            outlined>
+          </q-input>
+
+          <q-input
+            v-model="signup.born_city"
+            rounded outlined
+            @blur="v$.signup.born_city.$touch"
+            :error="v$.signup.born_city.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('born_city', v$.signup.born_city)"
+            :label="$t('reg.born_city')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.born_province"
+            rounded outlined
+            @blur="v$.signup.born_province.$touch"
+            :error="v$.signup.born_province.$error"
+            maxlength="3"
+            debounce="1000"
+            :error-message="errorMsg('born_province', v$.signup.born_province)"
+            :label="$t('reg.born_province')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <!--<CDate :mydate="signup.dateofbirth" @input="setDateOfBirth(arguments[0])"
+                 :rounded="true" :outlined="true"
+                 :dense="false"
+                 :label="$t('reg.dateofbirth')">
+          </CDate>-->
+
+
+          <q-input
+            v-model="countryborn"
+            :readonly="true"
+            rounded outlined
+
+            debounce="1000"
+            :label="$t('reg.nationality_born')">
+
+            <template v-slot:prepend>
+              <vue-country-code
+                @onSelect="selectcountryborn"
+                :preferredCountries="tools.getprefCountries"
+                :dropdownOptions="{ disabledDialCode: true }"
+              >
+
+              </vue-country-code>
+            </template>
+
+          </q-input>
+
+          <br>
+
+          <!--<div v-if="!tools.isMobile()"><br></div>-->
+
+
+          <q-select
+            rounded outlined v-model="signup.metodo_pagamento"
+            :options="tools.SelectMetodiPagamento"
+            :label="$t('reg.metodopagamento')" emit-value map-options>
+          </q-select>
+
+          <q-checkbox
+            v-model="signup.accetta_carta_costituzionale_on"
+            color="secondary">
+            <span v-html="$t('reg.accetta_carta_costituzionale_on')"></span>
+          </q-checkbox>
+
+          <q-checkbox
+            v-model="signup.terms"
+            color="secondary"
+            @blur="v$.signup.terms.$touch"
+            :error="v$.signup.terms.$error"
+            :error-message="`${errorMsg('terms', v$.signup.terms)}`"
+            :label="$t('reg.terms')">
+
+          </q-checkbox>
+
+
+          <div class="wrapper">
+            <q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'
+                   :label="$t('reg.iscriviti')">
+            </q-btn>
+          </div>
+
+          <br>
+        </div>
+      </CTitleBanner>
+      <br>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CSignUpIscrizioneConacreis.ts">
+</script>
+<style lang="scss" scoped>
+@import './CSignUpIscrizioneConacreis.scss';
+</style>

src/components/CSignUpIscrizioneConacreis/index.ts

@@ -0,0 +1 @@
+export {default as CSignUpIscrizioneConacreis} from './CSignUpIscrizioneConacreis.vue'

src/components/index.ts

@@ -16,6 +16,8 @@ export * from './CMyCart'
 export * from './CMyFieldDb'
 export * from './CMyFieldRec'
 export * from './CMyPage'
+export * from './CMyPageIntro'
+export * from './CMyElem'
 export * from './CMyTeacher'
 export * from './CProfile'
 export * from './CProvaPao'