cleaner useForm

.vitepress/theme/MyLayout.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import DefaultTheme from 'vitepress/theme'
-import { checkAvailability } from '../../composables/useForm'
 const { Layout } = DefaultTheme
 </script>
 
 <template lang="pug">
 Layout
   template(#layout-bottom)
-
 </template>
 

components/MainPage.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue';
-import { isAccessGranted } from "../composables/useForm.ts";
+import { useForm } from "../composables/useForm.ts";
 import { data } from "../synths.data";
 import SynthCard from "./SynthCard.vue";
 import { SlickList, SlickItem } from "vue-slicksort";
-import { useElementVisibility, useStorage, useTransition } from '@vueuse/core';
+import { useElementVisibility, useTransition } from '@vueuse/core';
 import { version } from '../package.json'
 
+const { isAccessGranted } = useForm()
+
 import { useShare } from '@vueuse/core'
 
 const { share, isSupported } = useShare()

components/SynthCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { checkAvailability, isFormOpen, isAccessGranted } from '../composables/useForm.ts';
+import { useForm } from '../composables/useForm.ts';
 import { DragHandle } from 'vue-slicksort';
 //@ts-ignore
 import SynthFav from './SynthFav.vue';
@@ -13,6 +13,8 @@ const props = defineProps({
   url: { type: String, default: '' },
 })
 
+const { checkAvailability, isFormOpen } = useForm()
+
 const online = ref(null)
 
 watch(checkAvailability, async check => {

components/TheForm.vue

@@ -1,5 +1,7 @@
 <script setup>
-import { email, isAccessGranted, isValidEmail, isFormOpen, grantAccess } from '../composables/useForm.ts'
+import { useForm } from '../composables/useForm.ts'
+
+const { email, isValidEmail, isFormOpen, grantAccess } = useForm()
 </script>
 
 <template lang='pug'>
@@ -24,11 +26,11 @@ transition(name="slide")
           id="email"
           name="email"
           type="email"
-          @keydown.enter="grantAccess(email)"
+          @keydown.enter="grantAccess()"
           placeholder="[email protected]")
 
         button.text-sm.md-text-md.p-2.font-bold.md-p-4.rounded-xl.shadow-xl.hover-shadow-2xl.transition.-hover-translate-y-2px.active-translate-y-0.active-shadow-md.bg-green-400.dark-bg-green-700(
-          @click="grantAccess(email)"
+          @click="grantAccess()"
           :disabled="!isValidEmail"
           :class="{'grayscale-50':!isValidEmail}"
           style="flex: 1 1 400px"

composables/useForm.ts

@@ -1,36 +1,57 @@
-import { ref, computed, watch, Ref } from 'vue'
+import { ref, computed, watch, Ref, onMounted } from 'vue'
 import { Directus } from '@directus/sdk';
 import { RemovableRef, useStorage } from '@vueuse/core';
 
 const directus = new Directus('https://db.chromatone.center');
 
-export const isAccessGranted: RemovableRef<boolean | string> = useStorage('access-granted', false)
-
+const isAccessGranted = ref(false)
+const isFormOpen = ref(false)
+const checkAvailability = ref(false)
+const storedEmail = useStorage('storedEmail', '')
 const isSent = ref(false)
+const email = ref('')
+const isValidEmail = computed(() => /^[^@]+@\w+(\.\w+)+\w$/.test(email.value))
+const started = ref(false)
+
+export function useForm() {
+
+  if (!started.value) {
+    watch(isAccessGranted, a => {
+      if (a) isFormOpen.value = false
+    })
+
+    onMounted(() => {
+      if (storedEmail.value) {
+        isAccessGranted.value = true
+      }
+    })
+    started.value = true
+  }
 
-export const email = ref('')
-export const isValidEmail = computed(() => /^[^@]+@\w+(\.\w+)+\w$/.test(email.value))
+  return {
+    isAccessGranted,
+    isValidEmail,
+    email,
+    grantAccess,
+    isSent,
+    isFormOpen,
+    checkAvailability,
+  }
+}
 
-export async function grantAccess(email: string) {
-  if (!email) return
-  const data = { email }
-  isAccessGranted.value = email
+export async function grantAccess() {
+  if (!email.value && !isValidEmail.value) return
+  isAccessGranted.value = true
   if (!isSent.value) {
     isSent.value = true
     try {
-      await directus.items('players').createOne(data)
+      await directus.items('players').createOne({ email: email.value })
+      storedEmail.value = email.value
     } catch (e) {
       console.error(e)
     }
   }
 
 }
 
-export const isFormOpen = ref(false)
-
-watch(isAccessGranted, a => {
-  if (a) isFormOpen.value = false
-})
-
-export const checkAvailability = ref(false)