From 090e4bf74bdf527dd6e9ae017aa6c055414c15bb Mon Sep 17 00:00:00 2001
From: nauxscript <nauxscript@gmail.com>
Date: Wed, 24 Jan 2024 15:46:08 +0800
Subject: [PATCH 1/5] fix: change signin to login

---
 apps/api/src/auth/auth.controller.ts             |  6 +++---
 apps/client/api/auth.ts                          | 16 ++++++++--------
 apps/client/pages/Auth/{SignIn.vue => Login.vue} |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)
 rename apps/client/pages/Auth/{SignIn.vue => Login.vue} (97%)

diff --git a/apps/api/src/auth/auth.controller.ts b/apps/api/src/auth/auth.controller.ts
index 29b4b254d..c02e20f61 100644
--- a/apps/api/src/auth/auth.controller.ts
+++ b/apps/api/src/auth/auth.controller.ts
@@ -13,11 +13,11 @@ import { CreateUserDto } from '../user/model/user.dto';
 
 @Controller('auth')
 export class AuthController {
-  constructor(private readonly authService: AuthService) { }
+  constructor(private readonly authService: AuthService) {}
 
-  @Post('signin')
+  @Post('login')
   sign(@Body() dto: SignDto) {
-    return this.authService.signIn(dto);
+    return this.authService.login(dto);
   }
 
   @Post('signup')
diff --git a/apps/client/api/auth.ts b/apps/client/api/auth.ts
index 67bacd36e..214dd27f2 100644
--- a/apps/client/api/auth.ts
+++ b/apps/client/api/auth.ts
@@ -1,21 +1,21 @@
 import { type ErrorVo, isError } from "./common";
 
-interface SignInDto {
+interface LoginDto {
   phone: string;
   password: string;
 }
 
-interface SignUpDto extends SignInDto {
+interface SignUpDto extends LoginDto {
   name: string;
 }
 
-interface SignInVo {
+interface LoginVo {
   token: string;
 }
 
-export async function signin(dto: SignInDto) {
+export async function login(dto: LoginDto) {
   const message = useMessage();
-  const { data } = await useFetchPlus<SignInVo | ErrorVo>("/auth/signin", {
+  const { data } = await useFetchPlus<LoginVo | ErrorVo>("/auth/login", {
     body: dto,
     method: "post",
   });
@@ -23,12 +23,12 @@ export async function signin(dto: SignInDto) {
     message.error(data.value.message);
     return;
   }
-  return data.value as SignInVo;
+  return data.value as LoginVo;
 }
 
 export async function signUp(dto: SignUpDto) {
   const message = useMessage();
-  const { data } = await useFetchPlus<SignInVo | ErrorVo>("/auth/signup", {
+  const { data } = await useFetchPlus<LoginVo | ErrorVo>("/auth/signup", {
     body: dto,
     method: "post",
   });
@@ -36,5 +36,5 @@ export async function signUp(dto: SignUpDto) {
     message.error(data.value.message);
     return;
   }
-  return data.value as SignInVo;
+  return data.value as LoginVo;
 }
diff --git a/apps/client/pages/Auth/SignIn.vue b/apps/client/pages/Auth/Login.vue
similarity index 97%
rename from apps/client/pages/Auth/SignIn.vue
rename to apps/client/pages/Auth/Login.vue
index 518bf590e..e5d6b0fda 100644
--- a/apps/client/pages/Auth/SignIn.vue
+++ b/apps/client/pages/Auth/Login.vue
@@ -31,7 +31,7 @@
 </template>
 <script setup lang="ts">
 import { type FormInst, type FormRules } from 'naive-ui'
-import { signin } from '../../api/auth'
+import { login } from '../../api/auth'
 const formRef = ref<FormInst | null>(null)
 
 interface ModelType {
@@ -61,7 +61,7 @@ const router = useRouter()
 const handleLogin = () => {
     formRef.value?.validate(async errors => {
         if (!errors) {
-            const data = await signin({
+            const data = await login({
                 phone: model.value.phone ?? '',
                 password: model.value.password ?? ''
             })

From a7ec3e99a21e5d41496b7922acf90ebefbb3e502 Mon Sep 17 00:00:00 2001
From: nauxscript <nauxscript@gmail.com>
Date: Wed, 24 Jan 2024 15:48:56 +0800
Subject: [PATCH 2/5] feat: userInfo api

---
 apps/api/src/auth/auth.controller.ts | 6 +++---
 apps/api/src/auth/auth.service.ts    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/api/src/auth/auth.controller.ts b/apps/api/src/auth/auth.controller.ts
index c02e20f61..8c0489b21 100644
--- a/apps/api/src/auth/auth.controller.ts
+++ b/apps/api/src/auth/auth.controller.ts
@@ -16,7 +16,7 @@ export class AuthController {
   constructor(private readonly authService: AuthService) {}
 
   @Post('login')
-  sign(@Body() dto: SignDto) {
+  login(@Body() dto: SignDto) {
     return this.authService.login(dto);
   }
 
@@ -26,8 +26,8 @@ export class AuthController {
   }
 
   @UseGuards(AuthGuard)
-  @Get('test')
-  tets(@Request() req) {
+  @Get('userInfo')
+  userInfo(@Request() req) {
     return req.user;
   }
 }
diff --git a/apps/api/src/auth/auth.service.ts b/apps/api/src/auth/auth.service.ts
index 019b31e49..adb49d6c3 100644
--- a/apps/api/src/auth/auth.service.ts
+++ b/apps/api/src/auth/auth.service.ts
@@ -15,9 +15,9 @@ export class AuthService {
   constructor(
     private userService: UserService,
     private jwtService: JwtService,
-  ) { }
+  ) {}
 
-  async signIn(dto: SignDto) {
+  async login(dto: SignDto) {
     const user = await this.userService.findWithPhone(dto);
     if (!user) {
       throw new HttpException('User not exists', HttpStatus.BAD_REQUEST);
@@ -26,7 +26,7 @@ export class AuthService {
       throw new UnauthorizedException();
     }
 
-    const payload = { userId: user.id, username: user.name };
+    const payload = { userId: user.id, username: user.name, phone: user.phone };
     return {
       token: await this.jwtService.signAsync(payload),
     };

From bdfe4aee367eb1a22e12484779a7e8dcc526e762 Mon Sep 17 00:00:00 2001
From: nauxscript <nauxscript@gmail.com>
Date: Wed, 24 Jan 2024 16:08:53 +0800
Subject: [PATCH 3/5] fix: navbar link

---
 apps/api/src/auth/auth.service.ts       |  1 +
 apps/client/components/Navbar/index.vue | 21 +++++++++++++++++++--
 apps/client/pages/Auth/Login.vue        |  1 +
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/api/src/auth/auth.service.ts b/apps/api/src/auth/auth.service.ts
index adb49d6c3..9ee801797 100644
--- a/apps/api/src/auth/auth.service.ts
+++ b/apps/api/src/auth/auth.service.ts
@@ -29,6 +29,7 @@ export class AuthService {
     const payload = { userId: user.id, username: user.name, phone: user.phone };
     return {
       token: await this.jwtService.signAsync(payload),
+      user: payload,
     };
   }
 
diff --git a/apps/client/components/Navbar/index.vue b/apps/client/components/Navbar/index.vue
index 30743e9ec..c743885c9 100644
--- a/apps/client/components/Navbar/index.vue
+++ b/apps/client/components/Navbar/index.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+const route = useRoute()
+const token = ref(sessionStorage.getItem('token'))
+console.log(route);
 
 const toggleDarkMode = () => {
   if (document.documentElement.classList.contains('dark')) {
@@ -19,6 +22,14 @@ const setDarkMode = (state = false) => {
   }
 }
 
+const handleLogin = () => {
+  navigateTo('/auth/login')
+}
+
+const handleSignup = () => {
+  navigateTo('/auth/signup')
+}
+
 onMounted(() => {
   const state = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
   setDarkMode(state)
@@ -34,8 +45,14 @@ onMounted(() => {
         <h1 class="text-2xl leading-none font-black leading-normal text-wrap text-fuchsia-400">Earthworm</h1>
       </div>
     </NuxtLink>
-    <div>
-      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
+    <div class="flex items-center">
+      <button v-if="!token && route.name !== 'Auth-Login'" class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleLogin">
+        Log in
+      </button> 
+      <button v-else-if="!token && route.name !== 'Auth-Signup' " class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleSignup">
+        Sign up
+      </button>
+      <button v-else class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
         </svg>
diff --git a/apps/client/pages/Auth/Login.vue b/apps/client/pages/Auth/Login.vue
index e5d6b0fda..6313f6b35 100644
--- a/apps/client/pages/Auth/Login.vue
+++ b/apps/client/pages/Auth/Login.vue
@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import { type FormInst, type FormRules } from 'naive-ui'
 import { login } from '../../api/auth'
+
 const formRef = ref<FormInst | null>(null)
 
 interface ModelType {

From 5ed6656d10452fdd37f3aa646dd97190ada561a8 Mon Sep 17 00:00:00 2001
From: nauxscript <nauxscript@gmail.com>
Date: Wed, 24 Jan 2024 10:40:06 +0800
Subject: [PATCH 4/5] fix: homepage style fix

---
 apps/client/pages/index.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/client/pages/index.vue b/apps/client/pages/index.vue
index cb88fa121..1106ca8b4 100644
--- a/apps/client/pages/index.vue
+++ b/apps/client/pages/index.vue
@@ -6,7 +6,7 @@
 <template>
   <div class="container w-full">
     <section class="flex md:flex-row md:justify-between justify-center flex-col py-8">
-      <div class="w-1/2">
+      <div class="w-1/2 mx-4">
         <div class="mb-12 leading-loose text-3xl opacity-80 items-center">
           <div class="">Why aren’t you good at English?</div>
           <div class="align-middle">It’s because you haven’t used <span
@@ -27,15 +27,11 @@
           </button>
         </a>
       </div>
-      <div class="w-1/2 flex items-center justify-center group select-none cursor-pointer rounded-xl relative">
+      <div class="w-1/2 flex items-center justify-center group select-none cursor-pointer rounded-xl relative m-4">
         <div class="absolute flex h-full w-full card">
           <div class="bg-dot rounded-[64px]"></div>
-          <div
-            class="absolute left-0 right-0 top-12 text-[220px] text-center group-hover:-skew-y-12 group-hover:rotate-12 transition-all">
-            📖</div>
-          <div
-            class="absolute left-40 right-0 top-32 text-[80px] -ml-28 text-center color-gray group-hover:-skew-y-12 group-hover:rotate-[30deg] group-hover:-ml-32 group-hover:-mt-6  transition-all">
-            🪱</div>
+          <div class="absolute left-0 right-0 top-0 text-[220px] text-center group-hover:-skew-y-12 group-hover:rotate-12 transition-all">📖</div>
+          <div class="absolute left-48 right-0 top-24 text-[80px] -ml-28 text-center color-gray group-hover:-skew-y-12 group-hover:rotate-[30deg] group-hover:-ml-32 group-hover:-mt-6  transition-all">🪱</div>
         </div>
       </div>
     </section>
@@ -87,4 +83,3 @@
   background-position: 0 0, var(--bgPosition) var(--bgPosition);
   mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5));
 }
-</style>
\ No newline at end of file

From abddc6c3260e35b93e6551dfbdeccecc77895290 Mon Sep 17 00:00:00 2001
From: nauxscript <nauxscript@gmail.com>
Date: Wed, 24 Jan 2024 17:47:19 +0800
Subject: [PATCH 5/5] feat: basic login / logout / signup

---
 apps/client/api/auth.ts                 |  7 ++++++
 apps/client/components/Navbar/index.vue | 31 ++++++++++++++++++-------
 apps/client/pages/Auth/Login.vue        |  7 ++++--
 apps/client/pages/Auth/SignUp.vue       |  1 +
 apps/client/pages/index.vue             | 19 ++++++++-------
 5 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/apps/client/api/auth.ts b/apps/client/api/auth.ts
index 214dd27f2..7d885c1f3 100644
--- a/apps/client/api/auth.ts
+++ b/apps/client/api/auth.ts
@@ -5,12 +5,19 @@ interface LoginDto {
   password: string;
 }
 
+export interface UserInfo {
+  userId: string;
+  username: string;
+  phone: string;
+}
+
 interface SignUpDto extends LoginDto {
   name: string;
 }
 
 interface LoginVo {
   token: string;
+  user: UserInfo
 }
 
 export async function login(dto: LoginDto) {
diff --git a/apps/client/components/Navbar/index.vue b/apps/client/components/Navbar/index.vue
index c743885c9..5d6b973ea 100644
--- a/apps/client/components/Navbar/index.vue
+++ b/apps/client/components/Navbar/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { UserInfo } from '~/api/auth';
 const route = useRoute()
-const token = ref(sessionStorage.getItem('token'))
-console.log(route);
+
+const userInfo = useState<null | UserInfo>('userInfo', () => JSON.parse(localStorage.getItem('userInfo') || 'null'))
 
 const toggleDarkMode = () => {
   if (document.documentElement.classList.contains('dark')) {
@@ -30,6 +31,11 @@ const handleSignup = () => {
   navigateTo('/auth/signup')
 }
 
+const handleLogout = () => {
+  userInfo.value = null
+  localStorage.removeItem('token')
+}
+
 onMounted(() => {
   const state = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
   setDarkMode(state)
@@ -46,17 +52,24 @@ onMounted(() => {
       </div>
     </NuxtLink>
     <div class="flex items-center">
-      <button v-if="!token && route.name !== 'Auth-Login'" class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleLogin">
+      <button v-if="!userInfo && route.name !== 'Auth-Login'" class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleLogin">
         Log in
       </button> 
-      <button v-else-if="!token && route.name !== 'Auth-Signup' " class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleSignup">
+      <button v-else-if="!userInfo && route.name !== 'Auth-Signup' " class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleSignup">
         Sign up
       </button>
-      <button v-else class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
-        </svg>
-      </button>
+      <div v-else class="dropdown dropdown-end">
+        <button tabindex="0" class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+          </svg>
+        </button>
+        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
+          <li><a>User info</a></li>
+          <li @click="handleLogout"><a>Log out</a></li>
+          <!-- <li><a>Item 2</a></li> -->
+        </ul>
+      </div>
       <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0" @click="toggleDarkMode">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
diff --git a/apps/client/pages/Auth/Login.vue b/apps/client/pages/Auth/Login.vue
index 6313f6b35..5ebdd15d0 100644
--- a/apps/client/pages/Auth/Login.vue
+++ b/apps/client/pages/Auth/Login.vue
@@ -3,7 +3,7 @@
         <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">
-                Sign in to your account
+                Log in to your account
             </h2>
         </div>
 
@@ -16,7 +16,7 @@
                     <n-input v-model:value="model.password" type="password" @keydown.enter.prevent />
                 </n-form-item>
                 <n-button type="primary" size="large" block @click="handleLogin">
-                    Sign in
+                    Log in
                 </n-button>
             </n-form>
 
@@ -58,6 +58,7 @@ const rules: FormRules = {
 
 const message = useMessage()
 const router = useRouter()
+const userInfo = useState('userInfo')
 
 const handleLogin = () => {
     formRef.value?.validate(async errors => {
@@ -68,6 +69,8 @@ const handleLogin = () => {
             })
             if (data) {
                 localStorage.setItem('token', data.token)
+                localStorage.setItem('userInfo', JSON.stringify(data.user))
+                userInfo.value = data.user
                 message.success('login success')
                 setTimeout(() => {
                     router.replace('/')
diff --git a/apps/client/pages/Auth/SignUp.vue b/apps/client/pages/Auth/SignUp.vue
index 82e77a04d..faad6ce8f 100644
--- a/apps/client/pages/Auth/SignUp.vue
+++ b/apps/client/pages/Auth/SignUp.vue
@@ -88,6 +88,7 @@ const handleRegister = () => {
                 name: model.value.name ?? '',
                 password: model.value.password ?? ''
             })
+            console.log(data);
             if (data) {
                 localStorage.setItem('token', data.token)
                 message.success('register success')
diff --git a/apps/client/pages/index.vue b/apps/client/pages/index.vue
index 1106ca8b4..c1241d2d0 100644
--- a/apps/client/pages/index.vue
+++ b/apps/client/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-
+const userInfo = useState('userInfo')
+console.log(userInfo.value, 'singup');
 
 </script>
 
@@ -13,19 +14,18 @@
               class="text-fuchsia-400 font-bold">EARTHWORM</span> yet! 🤪 <i
               class="animate-wink inline w-1 h-8 dark:bg-white bg-slate-900 mx-2 text-2xl p-[2px]"></i></div>
         </div>
+        <a class="mr-4" target="_blank" href="https://github.com/cuixueshe/earthworm">
+          <button class="btn w-48 indicator">
+            <span class="indicator-item">🌟</span>
+            Star us on GitHub
+          </button>
+        </a>
         <NuxtLink href="/main/1">
           <button
-            class="indicator btn btn-outline w-48 hover:text-fuchsia-400 hover:border-fuchsia-400 hover:bg-fuchsia-100 text-fuchsia-300 border-fuchsia-300 mr-4">
-            <span class="indicator-item">🌟</span>
+            class="btn btn-outline w-48 hover:text-fuchsia-400 hover:border-fuchsia-400 hover:bg-fuchsia-100 text-fuchsia-300 border-fuchsia-300">
             Go and get it <kbd class="kbd"> ↵ </kbd>
           </button>
         </NuxtLink>
-
-        <a target="_blank" href="https://github.com/cuixueshe/earthworm">
-          <button class="btn w-48">
-            Star us on GitHub
-          </button>
-        </a>
       </div>
       <div class="w-1/2 flex items-center justify-center group select-none cursor-pointer rounded-xl relative m-4">
         <div class="absolute flex h-full w-full card">
@@ -83,3 +83,4 @@
   background-position: 0 0, var(--bgPosition) var(--bgPosition);
   mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5));
 }
+</style>