feat: add email sign up

src/auth/components/verify-code.vue

@@ -0,0 +1,139 @@
+<script lang='ts' setup>
+import type { AuthUserSignup } from "../type";
+import { toastController } from "@ionic/vue";
+import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
+import { emailPattern } from "@/utils";
+import { authClient } from "..";
+
+const form = ref<AuthUserSignup>({
+  email: "",
+  password: "",
+  confirmPassword: "",
+  verificationCode: "",
+});
+const step = ref(1);
+
+function onEmailBlur() {
+  const isEmailValid = emailPattern.test(form.value.email);
+  if (!isEmailValid) {
+    toastController
+      .create({
+        message: "Please enter a valid email address.",
+        duration: 1500,
+        position: "bottom",
+      })
+      .then((toast) => {
+        toast.present();
+      });
+  }
+}
+async function submitSendVerification() {
+  const isEmailValid = emailPattern.test(form.value.email);
+  if (!isEmailValid) {
+    const toast = await toastController.create({
+      message: "Please enter a valid email address.",
+      duration: 1500,
+      position: "bottom",
+    });
+
+    await toast.present();
+    return;
+  }
+
+  const { data, error } = await authClient.emailOtp.sendVerificationOtp({
+    email: form.value.email, // required
+    type: "sign-in", // required
+  });
+  if (data?.success) {
+    step.value = 2;
+  }
+  else {
+    const toast = await toastController.create({
+      message: error?.message || "Failed to send verification code.",
+      duration: 1500,
+      position: "bottom",
+    });
+
+    await toast.present();
+  }
+}
+
+function reset() {
+  step.value = 1;
+  form.value.email = "";
+  form.value.password = "";
+  form.value.confirmPassword = "";
+  form.value.verificationCode = "";
+}
+
+async function submitSignup() {
+  const { data, error } = await authClient.signIn.emailOtp({
+    email: form.value.email,
+    otp: form.value.verificationCode,
+  });
+  if (data?.token) {
+    reset();
+    step.value = 1;
+    const toast = await toastController.create({
+      message: "Email verified successfully!",
+      duration: 1500,
+      position: "bottom",
+    });
+
+    await toast.present();
+  }
+  else {
+    const toast = await toastController.create({
+      message: error?.message || "Failed to verify the code.",
+      duration: 1500,
+      position: "bottom",
+    });
+
+    await toast.present();
+  }
+}
+</script>
+
+<template>
+  <div v-if="step === 1">
+    <h1><strong>What's your email?</strong></h1>
+    <p>You'll use this email to login and access everything we have to offer.</p>
+
+    <div>
+      <ion-item>
+        <ion-input v-model="form.email" type="email" placeholder="Enter your email address" @ion-blur="onEmailBlur" />
+      </ion-item>
+
+      <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSendVerification">
+        Sign up
+      </ion-button>
+
+      <divider text="Or continue with" />
+
+      <ion-button color="medium" expand="block" class="ion-margin-top" shape="round">
+        <IonIcon slot="start" aria-hidden="true" :icon="phonePortraitOutline" />
+        Phone Number
+      </ion-button>
+      <ion-button color="medium" expand="block" class="ion-margin-top" shape="round">
+        <IonIcon slot="start" aria-hidden="true" :icon="logoGoogle" />
+        Google
+      </ion-button>
+    </div>
+  </div>
+  <div v-else-if="step === 2">
+    <h1><strong>Verify your email</strong></h1>
+    <p>We have sent a verification code to {{ form.email }}. Please enter the code below to verify your email address.</p>
+
+    <div>
+      <ion-item>
+        <ion-input-otp v-model="form.verificationCode" :length="6" />
+      </ion-item>
+
+      <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSignup">
+        Submit
+      </ion-button>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>