feat: 重构登录和注册流程，添加邮箱验证和验证码输入组件，优化样式

src/auth/components/login/email/step1.vue

@@ -0,0 +1,87 @@
+<script lang='ts' setup>
+import type { InputCustomEvent } from "@ionic/vue";
+import { toastController } from "@ionic/vue";
+import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
+import { authClient } from "@/auth";
+
+const emit = defineEmits<{
+  (e: "success", value: string): void;
+}>();
+
+const model = defineModel({ type: String, required: true });
+const inputInstance = useTemplateRef<InputInstance>("inputInstance");
+
+function markTouched() {
+  inputInstance.value?.$el.classList.add("ion-touched");
+}
+function validate(value: string) {
+  inputInstance.value?.$el.classList.remove("ion-valid");
+  inputInstance.value?.$el.classList.remove("ion-invalid");
+
+  if (value === "") {
+    return false;
+  }
+  const isEmailValid = emailPattern.test(model.value);
+
+  isEmailValid ? inputInstance.value?.$el.classList.add("ion-valid") : inputInstance.value?.$el.classList.add("ion-invalid");
+
+  return isEmailValid;
+}
+
+async function submitSendVerification() {
+  const isEmailValid = validate(model.value);
+  if (!isEmailValid) {
+    inputInstance.value?.$el.classList.remove("ion-invalid");
+    inputInstance.value?.$el.classList.add("ion-invalid");
+    inputInstance.value?.$el.classList.add("ion-touched");
+    return;
+  }
+
+  const { data, error } = await authClient.emailOtp.sendVerificationOtp({
+    email: model.value, // required
+    type: "sign-in", // required
+  });
+  if (data?.success) {
+    emit("success", model.value);
+  }
+  else {
+    const toast = await toastController.create({
+      message: error?.message || "Failed to send verification code.",
+      duration: 1500,
+      position: "bottom",
+    });
+
+    await toast.present();
+  }
+}
+</script>
+
+<template>
+  <h1 class="title">
+    <strong>Log in</strong>
+  </h1>
+
+  <ui-input-label
+    ref="inputInstance"
+    v-model="model"
+    label="Email"
+    placeholder="Enter your email"
+    type="email"
+    error-text="Please enter a valid email address."
+    @ion-input="validate($event.target.value as string)"
+    @ion-blur="markTouched"
+  />
+
+  <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSendVerification">
+    Next
+  </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="logoGoogle" />
+    Google
+  </ion-button>
+</template>
+
+<style scoped></style>