refactor: login and signup

cuixueshe · Jan 26, 2024 · 9161055 · 9161055
1 parent ff622e3
commit 9161055
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 136 deletions.
diff --git a/apps/api/src/auth/auth.service.ts b/apps/api/src/auth/auth.service.ts
@@ -43,6 +43,10 @@ export class AuthService {
     const payload = { userId: res.id, username: dto.name };
     return {
       token: await this.jwtService.signAsync(payload),
+      user: {
+        ...payload,
+        phone: dto.phone,
+      },
     };
   }
 }
diff --git a/apps/client/api/auth.ts b/apps/client/api/auth.ts
@@ -20,10 +20,10 @@ interface LoginVo {
   user: UserInfo;
 }
 
-export async function login(dto: LoginDto) {
+export async function fetchLogin(dto: LoginDto) {
   return await http.post<LoginVo, LoginVo>("/auth/login", dto);
 }
 
-export async function signUp(dto: SignUpDto) {
+export async function fetchSignUp(dto: SignUpDto) {
   return await http.post<LoginVo, LoginVo>("/auth/signup", dto);
 }
diff --git a/apps/client/components/main/Header.vue b/apps/client/components/main/Header.vue
diff --git a/apps/client/composables/auth.ts b/apps/client/composables/auth.ts
@@ -0,0 +1,43 @@
+import { setToken } from "~/utils/token";
+import { fetchLogin, fetchSignUp } from "~/api/auth";
+import { useUserStore } from "~/store/user";
+
+async function login({ phone, password }: { phone: string; password: string }) {
+  const userStore = useUserStore();
+
+  const data = await fetchLogin({
+    phone,
+    password,
+  });
+
+  setToken(data.token);
+  userStore.initUser(data.user);
+}
+
+async function signup({
+  phone,
+  name,
+  password,
+}: {
+  phone: string;
+  name: string;
+  password: string;
+}) {
+  const userStore = useUserStore();
+
+  const data = await fetchSignUp({
+    phone,
+    name,
+    password,
+  });
+
+  setToken(data.token);
+  userStore.initUser(data.user);
+}
+
+export function useAuth() {
+  return {
+    login,
+    signup
+  };
+}
diff --git a/apps/client/pages/Auth/Login.vue b/apps/client/pages/Auth/Login.vue
@@ -1,98 +1,86 @@
 <template>
-  <div
-    className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8"
-  >
-    <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-      <img className="mx-auto h-10 w-auto" src="/logo.png" alt="earthworm" />
-      <h2
-        className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
-      >
-        Log in to your account
-      </h2>
-    </div>
+    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+            <img className="mx-auto h-10 w-auto" src="/logo.png" alt="earthworm" />
+            <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+                Log in to your account
+            </h2>
+        </div>
 
-    <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-      <n-form ref="formRef" :rules="rules" :model="model">
-        <n-form-item path="phone" label="Phone" required>
-          <n-input v-model:value="model.phone" @keydown.enter.prevent />
-        </n-form-item>
-        <n-form-item path="password" label="Password" required>
-          <n-input
-            v-model:value="model.password"
-            type="password"
-            @keydown.enter.prevent
-          />
-        </n-form-item>
-        <n-button type="primary" size="large" block @click="handleLogin">
-          Log in
-        </n-button>
-      </n-form>
+        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+            <n-form ref="formEl" :rules="rules" :model="model">
+                <n-form-item path="phone" label="Phone" required>
+                    <n-input v-model:value="model.phone" @keydown.enter.prevent />
+                </n-form-item>
+                <n-form-item path="password" label="Password" required>
+                    <n-input v-model:value="model.password" type="password" @keydown.enter.prevent />
+                </n-form-item>
+                <n-button type="primary" size="large" block @click="handleLogin">
+                    Log in
+                </n-button>
+            </n-form>
 
-      <p className="mt-10 text-center text-sm text-gray-500">
-        Not a account?
-        <NuxtLink
-          href="/auth/signup"
-          className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
-        >
-          Sign up
-        </NuxtLink>
-      </p>
+            <p className="mt-10 text-center text-sm text-gray-500">
+                Not a account?
+                <NuxtLink href="/auth/signup" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
+                    Sign up
+                </NuxtLink>
+            </p>
+        </div>
     </div>
-  </div>
 </template>
 <script setup lang="ts">
 import { type FormInst, type FormRules } from "naive-ui";
-import { login } from "../../api/auth";
-import { setToken } from "~/utils/token";
-import { useUserStore } from "~/store/user";
-
-const formRef = ref<FormInst | null>(null);
+import { useAuth } from "~/composables/auth";
+import { delay } from '~/utils';
 
 interface ModelType {
-  phone: string | null;
-  password: string | null;
+    phone: string | null;
+    password: string | null;
 }
 
+const { login } = useAuth();
+
+const formEl = ref<FormInst | null>(null);
 const model = ref<ModelType>({
-  phone: null,
-  password: null,
+    phone: null,
+    password: null,
 });
 
 const rules: FormRules = {
-  phone: [
-    { required: true, message: "Please input your phone number" },
-    {
-      pattern: /^1[3456789]\d{9}$/,
-      message: "Please input correct phone number",
-    },
-  ],
-  password: [
-    { required: true, message: "Please input your password" },
-    { min: 6, message: "Password length must be greater than 6" },
-  ],
+    phone: [
+        { required: true, message: "Please input your phone number" },
+        {
+            pattern: /^1[3456789]\d{9}$/,
+            message: "Please input correct phone number",
+        },
+    ],
+    password: [
+        { required: true, message: "Please input your password" },
+        { min: 6, message: "Password length must be greater than 6" },
+    ],
 };
 
 const message = useMessage();
 const router = useRouter();
 const route = useRoute();
-const userStore = useUserStore()
+
+async function gotoPreviousPage() {
+    await delay(500);
+    router.replace(route.query.callback?.toString() ?? "/");
+}
 
 const handleLogin = () => {
-  formRef.value?.validate(async (errors) => {
-    if (!errors) {
-      const data = await login({
-        phone: model.value.phone ?? "",
-        password: model.value.password ?? "",
-      });
-      if (data) {
-        setToken(data.token);
-        userStore.loginUser(data.user)
-        message.success("login success");
-        setTimeout(() => {
-          router.replace(route.query.callback?.toString() ?? "/");
-        }, 500);
-      }
-    }
-  });
+    formEl.value?.validate(async (errors) => {
+        if (!errors) {
+            await login({
+                phone: model.value.phone ?? "",
+                password: model.value.password ?? "",
+            });
+
+            message.success("login success");
+            await gotoPreviousPage()
+        }
+    });
 };
 </script>
diff --git a/apps/client/pages/Auth/SignUp.vue b/apps/client/pages/Auth/SignUp.vue
@@ -12,7 +12,7 @@
     </div>
 
     <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-      <n-form ref="formRef" :rules="rules" :model="model">
+      <n-form ref="formEl" :rules="rules" :model="model">
         <n-form-item path="name" label="Name" required>
           <n-input v-model:value="model.name" @keydown.enter.prevent />
         </n-form-item>
@@ -52,9 +52,8 @@
 </template>
 <script setup lang="ts">
 import { type FormInst, type FormRules, type FormItemRule } from "naive-ui";
-import { signUp } from "../../api/auth";
-import { setToken } from "~/utils/token";
-const formRef = ref<FormInst | null>(null);
+import { useAuth } from "~/composables/auth";
+import { delay } from "~/utils";
 
 interface ModelType {
   name: string | null;
@@ -63,6 +62,9 @@ interface ModelType {
   confirmPassword: string | null;
 }
 
+const { signup } = useAuth();
+const formEl = ref<FormInst | null>(null);
+
 const model = ref<ModelType>({
   name: null,
   phone: null,
@@ -102,22 +104,22 @@ const rules: FormRules = {
 const message = useMessage();
 const router = useRouter();
 
+async function gotoHomePage() {
+  await delay(500);
+  router.replace("/");
+}
+
 const handleRegister = () => {
-  formRef.value?.validate(async (errors) => {
+  formEl.value?.validate(async (errors) => {
     if (!errors) {
-      const data = await signUp({
+      await signup({
         phone: model.value.phone ?? "",
         name: model.value.name ?? "",
         password: model.value.password ?? "",
       });
-      console.log(data);
-      if (data) {
-        setToken(data.token);
-        message.success("register success");
-        setTimeout(() => {
-          router.replace("/");
-        }, 500);
-      }
+
+      message.success("register success");
+      await gotoHomePage();
     }
   });
 };

diff --git a/apps/client/store/tests/user.spec.ts b/apps/client/store/tests/user.spec.ts
@@ -19,7 +19,7 @@ describe("user", () => {
     const mockUser = generateUserInfo();
     const userStore = useUserStore();
 
-    userStore.loginUser(mockUser);
+    userStore.initUser(mockUser);
 
     expect(userStore.user).toEqual(mockUser);
     expect(userStore.getUserInfo()).toMatchInlineSnapshot(
@@ -30,7 +30,7 @@ describe("user", () => {
   it("should restore user", () => {
     const mockUser = generateUserInfo();
     const userStore = useUserStore();
-    userStore.loginUser(mockUser);
+    userStore.initUser(mockUser);
 
     userStore.user = undefined;
     userStore.restoreUser();
@@ -41,7 +41,7 @@ describe("user", () => {
   it("should logout user", () => {
     const mockUser = generateUserInfo();
     const userStore = useUserStore();
-    userStore.loginUser(mockUser);
+    userStore.initUser(mockUser);
 
     userStore.logoutUser();
 

diff --git a/apps/client/store/user.ts b/apps/client/store/user.ts
@@ -11,7 +11,7 @@ const LOCAL_STORAGE_KEY = "userInfo";
 export const useUserStore = defineStore("user", () => {
   const user = ref<User>();
 
-  function loginUser(userInfo: User) {
+  function initUser(userInfo: User) {
     user.value = userInfo;
     saveUserInfo();
   }
@@ -41,7 +41,7 @@ export const useUserStore = defineStore("user", () => {
 
   return {
     user,
-    loginUser,
+    initUser,
     logoutUser,
     restoreUser,
     getUserInfo,

diff --git a/apps/client/utils/index.ts b/apps/client/utils/index.ts
@@ -0,0 +1,7 @@
+export function delay(timeout: number = 1000) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve("");
+    }, timeout);
+  });
+}