before liquid glass

src/pages/AgreementsPage.vue

@@ -9,41 +9,13 @@
           <div v-if="route.query.type === 'update'">{{ $t('agreements__description_update') }}</div>
           <div>{{ $t('agreements__description') }}</div>
         </div>
-        <div class="flex items-center no-wrap">
-          <q-checkbox v-model="agreement" val="1" class="q-pr-sm"/>
-          <span>
-            {{ $t('agreements__checkbox_agreement_terms') + ' ' }}
-            <span
-              @click="router.push({ name: 'terms' })"
-              class="cursor-pointer text-primary"
-              >
-              {{ $t('agreements__checkbox_agreement_terms_doc') }}
-            </span>
-          </span>
-        </div>
-        <div class="flex items-center no-wrap">
-          <q-checkbox v-model="agreement" val="2" class="q-pr-sm"/>
-          <span>
-            {{ $t('agreements__checkbox_agreement_consent') + ' ' }}
-            <span
-              @click="router.push({ name: 'consent' })"
-              class="cursor-pointer text-primary"
-              >
-              {{ $t('agreements__checkbox_agreement_consent_doc') }}
-            </span>
-            {{ ' ' +  $t('agreements__checkbox_agreement_privacy') + ' ' }}
-            <span
-              @click="router.push({ name: 'privacy' })"
-              class="cursor-pointer text-primary"
-              >
-              {{ $t('agreements__checkbox_agreement_privacy_doc') }}
-            </span>
-          </span>
-        </div>
+        <agreement-block
+          v-model="agreement"
+        />
       </div>
     </pn-scroll-list>
     <template #footer>
-            <div class="column no-wrap items-center w100">
+      <div class="column no-wrap items-center w100">
         <q-btn
           color="primary"
           no-caps rounded
@@ -74,9 +46,10 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, inject } from 'vue'
+  import { ref, inject, onMounted, onUnmounted } from 'vue'
   import { useRouter, useRoute } from 'vue-router'
   import { useAuthStore } from 'stores/auth'
+  import agreementBlock from 'components/agreementBlock.vue'
   import type { WebApp } from '@twa-dev/types'
   const tg = inject('tg') as WebApp
 
@@ -88,34 +61,42 @@
 
   const authStore = useAuthStore()
   const router = useRouter()
+  const submitAccept = ref(false)
 
   async function onSubmit () {
+
+    sessionStorage.removeItem('agreement')
+    submitAccept.value = true
     
-    if (!route.query.method || !route.query.type) {
+    if (!route.query.type) {
       await authStore.logout()
       await router.push({ name: 'login' })
       return
     }
 
-    if (route.query.method === 'telegram' && route.query.type === 'register') {
+    if (route.query.type === 'register') { // if register with email - agreement inside agreement-block
       await authStore.registerWithTelegram(tg.initData)
       await authStore.loginWithTelegram(tg.initData)
       await router.push({ name: 'projects' })
     }
 
-    if (route.query.method === 'email' && route.query.type === 'register') {
-      await router.push({ name: 'create_account' })
-    }
-
     if (route.query.type === 'update') {
       await authStore.termsAccepted()
       await router.push({ name: 'projects' })
     }
   }
 
-  const agreement = ref([])
+  const agreement = ref<('terms'| 'consent')[]>([])
+
+  onMounted(() => {
+     const a = sessionStorage.getItem('agreement')
+     if (a) agreement.value = JSON.parse(a)
+  })
+  onUnmounted(() => {
+    if (!submitAccept.value) sessionStorage.setItem('agreement', JSON.stringify(agreement.value))
+  })
 
 </script>
 
 <style>
-</style>
+</style>