Simple front interface to subscribe to the newsletter

src/components/Home/NewsletterFields.vue

@@ -0,0 +1,64 @@
+<template>
+  <section id="newsletter" class="relative pt-10 px-2 container mx-auto px-2">
+    <h2
+      class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100 mt-0"
+    >
+      {{ t("Subscribe to our newsletter") }}
+    </h2>
+    <p>
+      {{
+        t("Receive every week in your mailbox an overview of upcoming events")
+      }}
+    </p>
+    <form
+      @submit.prevent="subscribeToNewsletter"
+      class="container my-3 flex flex-wrap flex-col gap-2 sm:flex-row items-stretch gap-2"
+    >
+      <o-input
+        type="email"
+        :placeholder="t('Your email')"
+        required
+        v-model="emailValue"
+      />
+      <o-button native-type="submit" icon-left="email">
+        {{ t("Subscribe") }}
+      </o-button>
+    </form>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { useMutation } from "@vue/apollo-composable";
+import { CREATE_SUBSCRIBER } from "../../graphql/subscriber";
+import { ref } from "vue";
+
+const { t } = useI18n({ useScope: "global" });
+
+const emailValue = ref<string>();
+
+const {
+  mutate: subscribeToNewsletterMutation,
+  onDone: subscribeToNewsletterDone,
+  onError: subscribeToNewsletterError,
+} = useMutation(CREATE_SUBSCRIBER);
+
+subscribeToNewsletterDone(() => {
+  alert(t("You subscribed to the newsletter"));
+});
+
+subscribeToNewsletterError((err) => {
+  console.error(err);
+  if (err.graphQLErrors) {
+    err.graphQLErrors.forEach(({ message }: { message: string }) => {
+      alert(message);
+    });
+  }
+});
+
+const subscribeToNewsletter = () => {
+  subscribeToNewsletterMutation({
+    email: emailValue.value,
+  });
+};
+</script>

src/graphql/subscriber.ts

@@ -0,0 +1,10 @@
+import gql from "graphql-tag";
+
+export const CREATE_SUBSCRIBER = gql`
+  mutation CreateSubscriber($email: String!) {
+    createSubscriber(email: $email) {
+      id
+      email
+    }
+  }
+`;

src/views/HomeView.vue

@@ -144,26 +144,7 @@
   <CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
   <OnlineEvents />
   <LastEvents v-if="instanceName" :instanceName="instanceName" />
-  <section id="newsletter" class="relative pt-10 px-2 container mx-auto px-2">
-    <h2
-      class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100 mt-0"
-    >
-      {{ t("Subscribe to our newsletter") }}
-    </h2>
-    <p>
-      {{
-        t("Receive every week in your mailbox an overview of upcoming events")
-      }}
-    </p>
-    <form
-      class="container my-3 flex flex-wrap flex-col gap-2 sm:flex-row items-stretch gap-2"
-    >
-      <o-input type="email" :placeholder="t('Your email')" />
-      <o-button native-type="submit" icon-left="email">
-        {{ t("Subscribe") }}
-      </o-button>
-    </form>
-  </section>
+  <NewsletterFields />
 </template>
 
 <script lang="ts" setup>
@@ -202,6 +183,7 @@ import { LocationType } from "@/types/user-location.model";
 import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
 import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
 import SearchFields from "@/components/Home/SearchFields.vue";
+import NewsletterFields from "@/components/Home/NewsletterFields.vue";
 import { useHead } from "@unhead/vue";
 import { geoHashToCoords } from "@/utils/location";
 import { useServerProvidedLocation } from "@/composition/apollo/config";