138 lines
3.6 KiB
Vue
138 lines
3.6 KiB
Vue
<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>
|
|
<ui-input v-model="form.email" type="email" placeholder="Enter your email address" @ion-blur="onEmailBlur" />
|
|
|
|
<ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSendVerification">
|
|
Sign up
|
|
</ion-button>
|
|
|
|
<ui-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>
|