Merge pull request #27 from Nauxscript/feature/user-progress

feat: basic login / logout / signup
cuixueshe · Jan 24, 2024 · 569b115 · 569b115
2 parents a17f3e8 + 3ad49ed
commit 569b115
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 50 deletions.
diff --git 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')
-  sign(@Body() dto: SignDto) {
-    return this.authService.signIn(dto);
+  @Post('login')
+  login(@Body() dto: SignDto) {
+    return this.authService.login(dto);
   }
 
   @Post('signup')
@@ -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
@@ -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,9 +26,10 @@ 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),
+      user: payload,
     };
   }
 

diff --git a/apps/client/api/auth.ts b/apps/client/api/auth.ts
@@ -1,40 +1,47 @@
 import { type ErrorVo, isError } from "./common";
 
-interface SignInDto {
+interface LoginDto {
   phone: string;
   password: string;
 }
 
-interface SignUpDto extends SignInDto {
+export interface UserInfo {
+  userId: string;
+  username: string;
+  phone: string;
+}
+
+interface SignUpDto extends LoginDto {
   name: string;
 }
 
-interface SignInVo {
+interface LoginVo {
   token: string;
+  user: UserInfo
 }
 
-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",
   });
   if (isError(data.value)) {
     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",
   });
   if (isError(data.value)) {
     message.error(data.value.message);
     return;
   }
-  return data.value as SignInVo;
+  return data.value as LoginVo;
 }
diff --git a/apps/client/components/Navbar/index.vue b/apps/client/components/Navbar/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import type { UserInfo } from '~/api/auth';
+const route = useRoute()
+
+const userInfo = useState<null | UserInfo>('userInfo', () => JSON.parse(localStorage.getItem('userInfo') || 'null'))
 
 const toggleDarkMode = () => {
   if (document.documentElement.classList.contains('dark')) {
@@ -19,6 +23,19 @@ const setDarkMode = (state = false) => {
   }
 }
 
+const handleLogin = () => {
+  navigateTo('/auth/login')
+}
+
+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)
@@ -34,12 +51,25 @@ 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">
-        <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>
+    <div class="flex items-center">
+      <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="!userInfo && route.name !== 'Auth-Signup' " class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleSignup">
+        Sign up
       </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/SignIn.vue → apps/client/pages/Auth/Login.vue b/apps/client/pages/Auth/SignIn.vue → 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>
 
@@ -31,7 +31,8 @@
 </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 {
@@ -57,16 +58,19 @@ const rules: FormRules = {
 
 const message = useMessage()
 const router = useRouter()
+const userInfo = useState('userInfo')
 
 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 ?? ''
             })
             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
@@ -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
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const userInfo = useState('userInfo')
+console.log(userInfo.value, 'singup');
 import { registerShortcut, cancelShortcut } from "~/utils/keyboardShortcuts";
 
 useShortcutToGame();
@@ -20,10 +22,8 @@ function useShortcutToGame() {
 
 <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">
+    <section class="flex md:flex-row md:justify-between justify-center flex-col py-8">
+      <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">
@@ -34,34 +34,24 @@ function useShortcutToGame() {
             ></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"
-      >
+      <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>