feat: 添加登录组件，更新认证流程，优化输入标签组件

src/auth/components/login.vue

@@ -0,0 +1,51 @@
+<script lang='ts' setup>
+import { modalController } from "@ionic/vue";
+import { logoGoogle } from "ionicons/icons";
+
+async function closeModal() {
+  await modalController.dismiss();
+}
+</script>
+
+<template>
+  <IonPage>
+    <IonHeader class="ion-no-border">
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonButton @click="closeModal">
+            Close
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent :fullscreen="true" class="ion-padding">
+      <h1 class="title">
+        <strong>Log in</strong>
+      </h1>
+
+      <ui-input-label
+        label="Email"
+        type="email"
+        placeholder="Enter your email"
+        clear-input
+      />
+
+      <ion-button expand="block" class="ion-margin-top" shape="round">
+        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>
+    </IonContent>
+  </IonPage>
+</template>
+
+<style scoped>
+.title {
+  margin-bottom: 30px;
+}
+</style>

src/auth/index.ts

@@ -1,7 +1,6 @@
 import { modalController } from "@ionic/vue";
 import { emailOTPClient } from "better-auth/client/plugins";
 import { createAuthClient } from "better-auth/vue";
-import SignupContent from "./components/signup.vue";
 
 export const authClient = createAuthClient({
   fetchOptions: {
@@ -11,8 +10,22 @@ export const authClient = createAuthClient({
 });
 
 export async function modelControllerSignup(presentingElement?: HTMLElement) {
+  const SignupContent = await import("./components/signup.vue");
+
   const modal = await modalController.create({
-    component: SignupContent,
+    component: SignupContent.default,
+    presentingElement,
+    canDismiss: async (data, role) => role !== "gesture",
+  });
+
+  return modal;
+}
+
+export async function modelControllerLogin(presentingElement?: HTMLElement) {
+  const LoginContent = await import("./components/login.vue");
+
+  const modal = await modalController.create({
+    component: LoginContent.default,
     presentingElement,
     canDismiss: async (data, role) => role !== "gesture",
   });

src/components/ui/input-label/index.vue

@@ -0,0 +1,35 @@
+<script lang='ts' setup>
+import type { ComponentInstance } from "vue";
+import UiInput from "@/components/ui/input/index.vue";
+
+defineProps<{
+  label?: string;
+}>();
+
+const vm = getCurrentInstance()!;
+
+function changeRef(exposed: any) {
+  vm.exposed = exposed;
+}
+
+defineExpose({} as ComponentInstance<typeof UiInput>);
+</script>
+
+<template>
+  <div>
+    <div v-if="label" class="label">
+      {{ label }}
+    </div>
+    <component :is="h(UiInput, { ...$attrs, ref: changeRef })" />
+  </div>
+</template>
+
+<style scoped>
+.label {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 14px;
+  margin-left: 8px;
+  color: var(--ion-text-color-secondary);
+}
+</style>

src/views/riwa/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { authClient, modelControllerSignup } from "@/auth";
+import { authClient, modelControllerLogin, modelControllerSignup } from "@/auth";
 
 const page = useTemplateRef<PageInstance>("page");
 const { user } = useAuth();
 
 async function openSignin() {
-  const modal = await modelControllerSignup(page.value?.$el);
+  const modal = await modelControllerLogin(page.value?.$el);
   await modal.present();
 }
 async function openSignup() {
@@ -32,10 +32,10 @@ async function handleLogout() {
       </IonHeader>
 
       <IonButton @click="openSignin">
-        Signin
+        Log in
       </IonButton>
       <IonButton @click="openSignup">
-        Signup
+        Sign up
       </IonButton>
       <IonButton @click="handleLogout">
         Log out