From 182fcf643fb5230ee852f3ed5c5091cbee239787 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 00:05:59 +0800
Subject: [PATCH 1/8] feat: pick username

* put new registered social login user to session data
* ask to choose username
* simplify checkUsername functions
---
 app/src/components/AuthenticationPart.vue    | 24 +++---
 app/src/components/UsernameForm.vue          | 82 ++++++++++++++++++
 app/src/router.js                            |  7 ++
 app/src/views/ChooseUsernamePage.vue         | 16 ++++
 server/src/api/controllers/authController.js | 89 +++++++++++++++-----
 server/src/api/routes/auth.js                | 20 ++---
 server/src/auth/githubStrategy.js            | 14 +--
 server/src/auth/googleStrategy.js            | 10 ++-
 server/src/middleware/authRequired.js        |  2 +-
 server/src/models/user.js                    |  3 +-
 server/src/utils/auth.js                     |  2 +-
 server/swagger.yaml                          | 44 +++++++++-
 12 files changed, 244 insertions(+), 69 deletions(-)
 create mode 100644 app/src/components/UsernameForm.vue
 create mode 100644 app/src/views/ChooseUsernamePage.vue

diff --git a/app/src/components/AuthenticationPart.vue b/app/src/components/AuthenticationPart.vue
index 3f2126a..5ceadf9 100644
--- a/app/src/components/AuthenticationPart.vue
+++ b/app/src/components/AuthenticationPart.vue
@@ -34,7 +34,7 @@ const handleLogin = async () => {
   try {
     const isSuccess = await login(username.value, password.value)
     if (isSuccess) success()
-    else errorMessage.value = 'Invalid username or password.'
+    else errorMessage.value = 'Wrong username or password.'
   } catch (err) {
     console.error(err)
     errorMessage.value = 'Something went wrong.'
@@ -47,20 +47,18 @@ async function check() {
     const res = await api.get('/auth/check-username', {
       params: { username: user },
     })
-    // user not exists, try register
-    const { type } = res.data
-    if (type === 'email') {
-      email.value = user
-      username.value = ''
-    }
-    isRegister.value = true
-    usernameInput.value.focus()
-  } catch (err) {
-    if (err.response?.status === 409) {
-      // user already exists, try login
+    const { type, available } = res.data
+    if (available) {
+      if (type === 'email') {
+        email.value = user
+        username.value = ''
+      }
+      isRegister.value = true
+      usernameInput.value.focus()
+    } else {
       await handleLogin()
-      return
     }
+  } catch (err) {
     if (err.response?.status === 400) {
       errorMessage.value = 'Invalid username or email.'
       return
diff --git a/app/src/components/UsernameForm.vue b/app/src/components/UsernameForm.vue
new file mode 100644
index 0000000..05e9e6f
--- /dev/null
+++ b/app/src/components/UsernameForm.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import api from '../utils/api'
+
+const username = ref('')
+const errorMessage = ref('')
+const router = useRouter()
+
+async function checkUsername() {
+  const user = username.value.trim()
+  errorMessage.value = ''
+  if (user.length > 3) {
+    try {
+      const { data } = await api.get('/auth/check-username', {
+        params: { username: user },
+      })
+
+      const { available } = data
+      if (!available) {
+        errorMessage.value = 'Username is already taken.'
+      } else {
+        errorMessage.value = ''
+      }
+    } catch {
+      errorMessage.value = 'Invalid username.'
+    }
+  }
+}
+
+async function handleSubmit() {
+  if (errorMessage.value) {
+    return
+  }
+  try {
+    const { data } = await api.post('/auth/register-from-session', {
+      username: username.value.trim(),
+    })
+    console.log(data)
+    router.push({ name: 'game' })
+  } catch (err) {
+    console.error(err.message)
+    if (err.response?.status === 409) {
+      errorMessage.value = 'Username is already taken.'
+    } else {
+      errorMessage.value = 'Something went wrong.'
+    }
+  }
+}
+</script>
+<template>
+  <div
+    class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
+  >
+    <h1 class="text-text-primary text-3xl font-black mb-8">Choose username</h1>
+    <form @submit.prevent="handleSubmit" class="w-full">
+      <div class="mb-6">
+        <label for="username" class="text-sm font-semibold text-text"
+          >Username</label
+        ><input
+          type="text"
+          id="username"
+          ref="usernameInput"
+          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          placeholder="Enter your email or username"
+          v-model="username"
+          @input="checkUsername"
+          autocomplete="username"
+        />
+      </div>
+      <p class="text-red-500 flex justify-center" v-if="errorMessage">
+        {{ errorMessage }}
+      </p>
+      <button
+        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
+        type="submit"
+      >
+        <span>Sign up</span>
+      </button>
+    </form>
+  </div>
+</template>
diff --git a/app/src/router.js b/app/src/router.js
index 40dd4dc..726f439 100644
--- a/app/src/router.js
+++ b/app/src/router.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import GamePage from './views/GamePage.vue'
 import AuthPage from './views/AuthPage.vue'
+import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
 import { isLoggedIn } from './utils/auth'
 
 const routes = [
@@ -20,6 +21,12 @@ const routes = [
     component: GamePage,
     meta: { requiresAuth: true },
   },
+  {
+    path: '/choose-username',
+    name: 'choose-username',
+    component: ChooseUsernamePage,
+    meta: { requiresGuest: true },
+  },
 ]
 
 const router = createRouter({
diff --git a/app/src/views/ChooseUsernamePage.vue b/app/src/views/ChooseUsernamePage.vue
new file mode 100644
index 0000000..cec4a14
--- /dev/null
+++ b/app/src/views/ChooseUsernamePage.vue
@@ -0,0 +1,16 @@
+<script setup>
+import UsernameForm from '../components/UsernameForm.vue'
+import Background from '../components/DynamicBackground.vue'
+</script>
+<template>
+  <div class="relative w-screen h-screen">
+    <Background class="w-full h-full" />
+    <div
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="h-2/3 w-1/3">
+        <UsernameForm />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/server/src/api/controllers/authController.js b/server/src/api/controllers/authController.js
index 2d8cf15..acca879 100644
--- a/server/src/api/controllers/authController.js
+++ b/server/src/api/controllers/authController.js
@@ -16,6 +16,14 @@ export async function issueToken(req, res) {
   res.json({ token })
 }
 
+async function invalidUsername(username) {
+  return !isValidUsername(username) || User.exists({ username })
+}
+
+async function invalidEmail(email) {
+  return !isValidEmail(email) || User.exists({ email })
+}
+
 export async function checkUsername(req, res) {
   const { username, email } = req.query
   const cred = username || email
@@ -27,30 +35,16 @@ export async function checkUsername(req, res) {
   }
 
   if (isValidEmail(cred)) {
-    if (await User.exists({ email: cred })) {
-      res.status(409).json({
-        type: 'email',
-        message: `"${cred}" already exists`,
-      })
-      return
-    }
-    res.status(200).json({
+    res.json({
       type: 'email',
-      message: `"${cred}" is available`,
+      available: !(await User.exists({ email: cred })),
     })
     return
   }
   if (isValidUsername(cred)) {
-    if (await User.exists({ username: cred })) {
-      res.status(409).json({
-        type: 'username',
-        message: `"${cred}" already exists`,
-      })
-      return
-    }
-    res.status(200).json({
+    res.json({
       type: 'username',
-      message: `"${cred}" is available`,
+      available: !(await User.exists({ username: cred })),
     })
     return
   }
@@ -68,18 +62,18 @@ export async function register(req, res, next) {
     return
   }
 
-  if (await User.exists({ username })) {
+  if (await invalidUsername(username)) {
     res.status(409).json({
       type: 'username',
-      message: 'username already exists',
+      message: 'Invalid username',
     })
     return
   }
 
-  if (await User.exists({ email })) {
+  if (await invalidEmail(email)) {
     res.status(409).json({
       type: 'email',
-      message: 'email already exists',
+      message: 'Invalid email',
     })
     return
   }
@@ -126,6 +120,55 @@ export function logout(req, res) {
 
 export function checkSession(req, res) {
   res.json({
-    loggedIn: req.isAuthenticated(),
+    loggedIn: req.isAuthenticated() && !req.session.newUser,
+  })
+}
+
+export async function socialLogin(req, res) {
+  const { newUser } = req.user
+  if (newUser) {
+    req.session.newUser = newUser
+    res.redirect('/choose-username')
+    return
+  }
+  res.redirect('/')
+}
+
+export async function registerFromSession(req, res) {
+  const { username } = req.body
+  const { newUser } = req.session
+
+  if (!newUser) {
+    res.status(400).json({
+      message: 'no new user found',
+    })
+    return
+  }
+
+  if (await invalidUsername(username)) {
+    res.status(409).json({
+      type: 'username',
+      message: 'Invalid username',
+    })
+    return
+  }
+
+  newUser.username = username
+  const user = new User(newUser)
+
+  await user.save()
+
+  req.login(user, (err) => {
+    if (err) {
+      console.error(err)
+      res.status(500).json({
+        message: 'error logging in',
+      })
+      return
+    }
+    delete req.session.newUser
+    res.status(201).json({
+      message: 'user created',
+    })
   })
 }
diff --git a/server/src/api/routes/auth.js b/server/src/api/routes/auth.js
index 4687610..8b9954d 100644
--- a/server/src/api/routes/auth.js
+++ b/server/src/api/routes/auth.js
@@ -8,6 +8,8 @@ import {
   checkUsername,
   checkSession,
   logout,
+  socialLogin,
+  registerFromSession,
 } from '../controllers/authController.js'
 
 const router = Router()
@@ -34,24 +36,14 @@ router.get('/available-methods', (req, res) => {
 
 if (enabledMethods.google) {
   router.get('/google', passport.authenticate('google'))
-  router.get(
-    '/google/callback',
-    passport.authenticate('google', {
-      successRedirect: '/',
-      failureRedirect: '/login',
-    })
-  )
+  router.get('/google/callback', passport.authenticate('google'), socialLogin)
 }
 
 if (enabledMethods.github) {
   router.get('/github', passport.authenticate('github'))
-  router.get(
-    '/github/callback',
-    passport.authenticate('github', {
-      successRedirect: '/',
-      failureRedirect: '/login',
-    })
-  )
+  router.get('/github/callback', passport.authenticate('github'), socialLogin)
 }
 
+router.post('/register-from-session', registerFromSession)
+
 export default router
diff --git a/server/src/auth/githubStrategy.js b/server/src/auth/githubStrategy.js
index 7b2120a..ae4e5d7 100644
--- a/server/src/auth/githubStrategy.js
+++ b/server/src/auth/githubStrategy.js
@@ -5,8 +5,6 @@ import User from '../models/user.js'
 
 function verify(accessToken, refreshToken, profile, cb) {
   process.nextTick(async () => {
-    console.log(accessToken, refreshToken, profile)
-    // cb('todo')
     const email = profile.emails[0]?.value
     if (!email) {
       cb(new Error('No email found'))
@@ -21,16 +19,18 @@ function verify(accessToken, refreshToken, profile, cb) {
         displayName: profile.displayName,
       }
       if (!user) {
-        user = new User({
+        const newUser = {
           email,
           github,
-        })
-      } else if (user.github?.id) {
+        }
+        cb(null, { newUser })
+        return
+      }
+      if (user.github?.id) {
         cb(new Error('Email already used and binded to another account'))
         return
-      } else {
-        user.github = github
       }
+      user.github = github
       await user.save()
     }
 
diff --git a/server/src/auth/googleStrategy.js b/server/src/auth/googleStrategy.js
index adf27c0..749baa3 100644
--- a/server/src/auth/googleStrategy.js
+++ b/server/src/auth/googleStrategy.js
@@ -19,16 +19,18 @@ function verify(issuer, profile, cb) {
         displayName: profile.displayName,
       }
       if (!user) {
-        user = new User({
+        const newUser = new User({
           email,
           google,
         })
-      } else if (user.google?.id) {
+        cb(null, { newUser })
+        return
+      }
+      if (user.google?.id) {
         cb(new Error('Email already used and binded to another account'))
         return
-      } else {
-        user.google = google
       }
+      user.google = google
       await user.save()
     }
 
diff --git a/server/src/middleware/authRequired.js b/server/src/middleware/authRequired.js
index 8a5bd4f..df0c937 100644
--- a/server/src/middleware/authRequired.js
+++ b/server/src/middleware/authRequired.js
@@ -1,5 +1,5 @@
 export default function authRequired(req, res, next) {
-  if (req.isAuthenticated()) {
+  if (req.isAuthenticated() && !req.session.newUser) {
     next()
     return
   }
diff --git a/server/src/models/user.js b/server/src/models/user.js
index 5d910c7..3280c3e 100644
--- a/server/src/models/user.js
+++ b/server/src/models/user.js
@@ -4,8 +4,7 @@ const User = model('User', {
   username: {
     type: String,
     unique: true,
-    required: false, // should be required,
-    // but need to let social login users to pick one after login
+    required: true,
   },
   email: {
     type: String,
diff --git a/server/src/utils/auth.js b/server/src/utils/auth.js
index fc8478d..ec95600 100644
--- a/server/src/utils/auth.js
+++ b/server/src/utils/auth.js
@@ -56,7 +56,7 @@ export function isValidUsername(username) {
   if (!usernamePattern.test(username)) return false
 
   // check if the username is between 1 and 32 characters
-  if (username.length < 1 || username.length > 32) {
+  if (username.length < 4 || username.length > 32) {
     return false
   }
 
diff --git a/server/swagger.yaml b/server/swagger.yaml
index b9f09b3..d52d7bc 100644
--- a/server/swagger.yaml
+++ b/server/swagger.yaml
@@ -211,6 +211,31 @@ paths:
                     type: string
                     example: User already exists
 
+  /auth/register-from-session:
+    post:
+      summary: Register a new user from a session, for social login to pick a username
+      security:
+        - cookieAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                username:
+                  type: string
+                  format: username
+                  example: alex
+      responses:
+        '201':
+          description: User created
+          headers:
+            Set-Cookie:
+              schema:
+                type: string
+                example: connect.sid=s%3Aq1Z; Path=/; HttpOnly; SameSite=Strict; Secure
+
   /auth/login:
     post:
       summary: Log in a user
@@ -297,19 +322,30 @@ paths:
             type: string
             format: username
             example: alex
+        - in: query
+          name: email
+          description: email to check
+          required: true
+          schema:
+            type: string
+            format: email
+            example: alex@example.com
       responses:
         '200':
-          description: Username is available
+          description: Username / Email checking result
           content:
             application/json:
               schema:
                 type: object
                 properties:
-                  message:
+                  type:
                     type: string
                     example: Username is available
-        '409':
-          description: Username is already taken
+                  available:
+                    type: boolean
+                    example: true
+        '400':
+          description: Bad Request
           content:
             application/json:
               schema:

From d0186727ced8b5707d07c7fa80f5ebd9c0e055ee Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 00:18:56 +0800
Subject: [PATCH 2/8] feat: add chatgpt code reivew

---
 .github/workflows/code_review.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .github/workflows/code_review.yml

diff --git a/.github/workflows/code_review.yml b/.github/workflows/code_review.yml
new file mode 100644
index 0000000..9a54622
--- /dev/null
+++ b/.github/workflows/code_review.yml
@@ -0,0 +1,15 @@
+name: CI/CD
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  gpt-review:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: gpt-review
+        uses: microsoft/gpt-review@v0.9.5
+        with:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}

From db0126de53684b07c10cadbc41d7b23af4669248 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 00:25:14 +0800
Subject: [PATCH 3/8] fix: change to use mattzcarey/code-review-gpt

---
 .github/workflows/code_review.yml | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/code_review.yml b/.github/workflows/code_review.yml
index 9a54622..e482cb9 100644
--- a/.github/workflows/code_review.yml
+++ b/.github/workflows/code_review.yml
@@ -1,15 +1,20 @@
-name: CI/CD
+name: Code Review GPT
 
 on:
   pull_request:
-    types: [opened, synchronize, reopened]
+    branches: [main]
 
 jobs:
-  gpt-review:
+  run_code_review:
     runs-on: ubuntu-latest
-
     steps:
-      - name: gpt-review
-        uses: microsoft/gpt-review@v0.9.5
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Code Review GPT
+        uses: mattzcarey/code-review-gpt@v0.1.4-alpha
         with:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          MODEL: 'gpt-3.5-turbo'
+          GITHUB_TOKEN: ${{ github.token }}

From 9253feb52026b481ff03854c0a4a4813030cfb62 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 00:32:58 +0800
Subject: [PATCH 4/8] fix: add permission

---
 .github/workflows/code_review.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/code_review.yml b/.github/workflows/code_review.yml
index e482cb9..e15258e 100644
--- a/.github/workflows/code_review.yml
+++ b/.github/workflows/code_review.yml
@@ -6,6 +6,8 @@ on:
 
 jobs:
   run_code_review:
+    permissions:
+      pull-requests: write
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

From 7a9206fb47f16af91a90cd61c6c61cf500b1b177 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 00:51:00 +0800
Subject: [PATCH 5/8] refactor: reuse oauthVerify function

---
 server/src/auth/githubStrategy.js | 35 ++-----------------------------
 server/src/auth/googleStrategy.js | 35 ++-----------------------------
 server/src/auth/oauthVerify.js    | 24 +++++++++++++++++++++
 3 files changed, 28 insertions(+), 66 deletions(-)
 create mode 100644 server/src/auth/oauthVerify.js

diff --git a/server/src/auth/githubStrategy.js b/server/src/auth/githubStrategy.js
index ae4e5d7..d3af989 100644
--- a/server/src/auth/githubStrategy.js
+++ b/server/src/auth/githubStrategy.js
@@ -1,41 +1,10 @@
 import GitHubStrategy from 'passport-github2'
 
 import config from '../config.js'
-import User from '../models/user.js'
+import oauthVerify from './oauthVerify.js'
 
 function verify(accessToken, refreshToken, profile, cb) {
-  process.nextTick(async () => {
-    const email = profile.emails[0]?.value
-    if (!email) {
-      cb(new Error('No email found'))
-      return
-    }
-
-    let user = await User.findOne({ 'github.id': profile.id })
-    if (!user) {
-      user = await User.findOne({ email })
-      const github = {
-        id: profile.id,
-        displayName: profile.displayName,
-      }
-      if (!user) {
-        const newUser = {
-          email,
-          github,
-        }
-        cb(null, { newUser })
-        return
-      }
-      if (user.github?.id) {
-        cb(new Error('Email already used and binded to another account'))
-        return
-      }
-      user.github = github
-      await user.save()
-    }
-
-    cb(null, user)
-  })
+  oauthVerify('github', profile, { 'github.id': profile.id }, cb)
 }
 
 const enabled = config.github.clientID && config.github.clientSecret
diff --git a/server/src/auth/googleStrategy.js b/server/src/auth/googleStrategy.js
index 749baa3..566a09e 100644
--- a/server/src/auth/googleStrategy.js
+++ b/server/src/auth/googleStrategy.js
@@ -1,41 +1,10 @@
 import GoogleStrategy from 'passport-google-oidc'
 
 import config from '../config.js'
-import User from '../models/user.js'
+import oauthVerify from './oauthVerify.js'
 
 function verify(issuer, profile, cb) {
-  process.nextTick(async () => {
-    const email = profile.emails[0]?.value
-    if (!email) {
-      cb(new Error('No email found'))
-      return
-    }
-
-    let user = await User.findOne({ 'google.id': profile.id })
-    if (!user) {
-      user = await User.findOne({ email })
-      const google = {
-        id: profile.id,
-        displayName: profile.displayName,
-      }
-      if (!user) {
-        const newUser = new User({
-          email,
-          google,
-        })
-        cb(null, { newUser })
-        return
-      }
-      if (user.google?.id) {
-        cb(new Error('Email already used and binded to another account'))
-        return
-      }
-      user.google = google
-      await user.save()
-    }
-
-    cb(null, user)
-  })
+  oauthVerify('google', profile, { 'google.id': profile.id }, cb)
 }
 
 const enabled = config.google.clientID && config.google.clientSecret
diff --git a/server/src/auth/oauthVerify.js b/server/src/auth/oauthVerify.js
new file mode 100644
index 0000000..55b95ee
--- /dev/null
+++ b/server/src/auth/oauthVerify.js
@@ -0,0 +1,24 @@
+import User from '../models/user.js'
+
+export default async function oauthVerify(provider, profile, query, cb) {
+  process.nextTick(async () => {
+    const email = profile.emails[0]?.value
+    if (!email) {
+      return cb(new Error('No email found'))
+    }
+
+    let user = await User.findOne(query)
+    if (!user) {
+      user = await User.findOne({ email })
+      if (!user) {
+        const newUser = { email }
+        newUser[provider] = profile
+        return cb(null, { newUser })
+      }
+      user[provider] = profile
+      await user.save()
+    }
+
+    return cb(null, user)
+  })
+}

From 30aeacaf0678a0355dced56ae80bc50987b952fa Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 16:13:25 +0800
Subject: [PATCH 6/8] feat: separate Login and Register Page

---
 .../{AuthenticationPart.vue => AuthForm.vue}  | 156 +++++++-----------
 app/src/components/HeaderPart.vue             |   2 +-
 app/src/router.js                             |  15 +-
 app/src/views/AuthPage.vue                    |  16 --
 app/src/views/LoginPage.vue                   |  28 ++++
 app/src/views/RegisterPage.vue                |  56 +++++++
 6 files changed, 159 insertions(+), 114 deletions(-)
 rename app/src/components/{AuthenticationPart.vue => AuthForm.vue} (60%)
 delete mode 100644 app/src/views/AuthPage.vue
 create mode 100644 app/src/views/LoginPage.vue
 create mode 100644 app/src/views/RegisterPage.vue

diff --git a/app/src/components/AuthenticationPart.vue b/app/src/components/AuthForm.vue
similarity index 60%
rename from app/src/components/AuthenticationPart.vue
rename to app/src/components/AuthForm.vue
index 5ceadf9..c37fae5 100644
--- a/app/src/components/AuthenticationPart.vue
+++ b/app/src/components/AuthForm.vue
@@ -1,15 +1,18 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { login, register } from '../utils/auth'
+import { RouterLink, useRouter } from 'vue-router'
 import api from '../utils/api'
 
+const emit = defineEmits(['onSubmit', 'onChange'])
+const props = defineProps({
+  isRegister: Boolean,
+})
+
+console.log(typeof props.isRegister)
+
 const router = useRouter()
-const isRegister = ref(false)
 const username = ref('')
-const usernameInput = ref(null)
 const email = ref('')
-const emailInput = ref(null)
 const password = ref('')
 const errorMessage = ref('')
 
@@ -30,87 +33,45 @@ const success = () => {
   router.push({ name: 'game' })
 }
 
-const handleLogin = async () => {
-  try {
-    const isSuccess = await login(username.value, password.value)
-    if (isSuccess) success()
-    else errorMessage.value = 'Wrong username or password.'
-  } catch (err) {
-    console.error(err)
-    errorMessage.value = 'Something went wrong.'
-  }
-}
-
-async function check() {
-  const user = username.value.trim()
-  try {
-    const res = await api.get('/auth/check-username', {
-      params: { username: user },
-    })
-    const { type, available } = res.data
-    if (available) {
-      if (type === 'email') {
-        email.value = user
-        username.value = ''
-      }
-      isRegister.value = true
-      usernameInput.value.focus()
-    } else {
-      await handleLogin()
-    }
-  } catch (err) {
-    if (err.response?.status === 400) {
-      errorMessage.value = 'Invalid username or email.'
-      return
-    }
-    errorMessage.value = 'Something went wrong.'
-    console.error(err)
-  }
-}
-
-function handleRegister() {
-  register(username.value, email.value, password.value)
-    .then((isSuccess) => {
-      if (isSuccess) {
-        success()
-      } else {
-        errorMessage.value = 'Something went wrong.'
-      }
-    })
-    .catch((err) => {
-      if (err.response?.status === 409) {
-        // Handle username or email already exists error here
-        if (err.response.data.type === 'username') {
-          errorMessage.value = 'Username already exists.'
-        } else if (err.response.data.type === 'email') {
-          errorMessage.value = 'Email already exists.'
-        } else {
-          errorMessage.value = 'Something went wrong.'
-        }
-      } else if (err.response?.status === 400) {
-        errorMessage.value = 'Invalid username or email.'
-      } else {
-        errorMessage.value = 'Something went wrong.'
-        console.error(err)
-      }
-    })
-}
-
-async function handleSubmit() {
-  if (!isRegister.value) {
-    check()
-    return
-  }
-  // register
-  handleRegister()
+const error = (err) => {
+  console.error(err)
+  errorMessage.value = err
 }
 
 const clearError = () => {
   errorMessage.value = ''
 }
 
-const goBack = () => {
-  isRegister.value = false
+const handleSubmit = () => {
+  clearError()
+  try {
+    emit('onSubmit', {
+      username: username.value,
+      email: email.value,
+      password: password.value,
+      success,
+      error,
+    })
+  } catch (err) {
+    console.error(err)
+    errorMessage.value = 'Something went wrong'
+  }
+}
+
+const handleChange = () => {
+  clearError()
+  try {
+    emit('onChange', {
+      username: username.value,
+      email: email.value,
+      password: password.value,
+      success,
+      error,
+    })
+  } catch (err) {
+    console.error(err)
+    errorMessage.value = 'Something went wrong'
+  }
 }
 </script>
 <template>
@@ -119,7 +80,7 @@ const goBack = () => {
     class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
     <h1 class="text-text-primary text-3xl font-black mb-8">Linux Odyssey</h1>
-    <form @submit.prevent="handleSubmit" class="w-full">
+    <form @submit.prevent="handleSubmit()" class="w-full">
       <div class="mb-6">
         <label for="username" class="text-sm font-semibold text-text">{{
           isRegister ? 'Username' : 'Email / Username'
@@ -131,7 +92,7 @@ const goBack = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Enter your email or username"
           v-model="username"
-          @input="clearError"
+          @input="handleChange()"
           autocomplete="username"
         />
       </div>
@@ -144,7 +105,7 @@ const goBack = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Enter your email or username"
           v-model="email"
-          @input="clearError"
+          @input="handleChange()"
           autocomplete="email"
         />
       </div>
@@ -157,7 +118,7 @@ const goBack = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Enter your password"
           v-model="password"
-          @input="clearError"
+          @input="handleChange()"
         />
       </div>
       <p class="text-red-500 flex justify-center" v-if="errorMessage">
@@ -167,16 +128,25 @@ const goBack = () => {
         class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
         type="submit"
       >
-        <span v-if="isRegister">Sign up</span>
-        <span v-else>Log in / Sign up</span>
-      </button>
-      <button
-        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
-        v-if="isRegister"
-        @click="goBack"
-      >
-        <span>Back to Login</span>
+        <span v-if="isRegister">Register</span>
+        <span v-else>Log in</span>
       </button>
+
+      <p class="text-text flex justify-center mt-3">
+        <span v-if="isRegister"
+          >Already have an account?
+          <RouterLink class="text-text-primary" to="/login"
+            >Log in</RouterLink
+          ></span
+        >
+        <span v-else
+          >Don't have an account?
+          <RouterLink class="text-text-primary" to="/register"
+            >Register</RouterLink
+          ></span
+        >
+      </p>
+
       <div v-if="hasSocialLogins">
         <hr class="my-8" />
         <p class="flex justify-center font-semibold text-text text-base">
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
index ebf0ee5..900767f 100644
--- a/app/src/components/HeaderPart.vue
+++ b/app/src/components/HeaderPart.vue
@@ -6,7 +6,7 @@ const router = useRouter()
 
 const handleLogout = async () => {
   await logout()
-  router.push({ name: 'auth' })
+  router.push({ name: 'login' })
 }
 </script>
 
diff --git a/app/src/router.js b/app/src/router.js
index 726f439..84dfc8c 100644
--- a/app/src/router.js
+++ b/app/src/router.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import GamePage from './views/GamePage.vue'
-import AuthPage from './views/AuthPage.vue'
+import LoginPage from './views/LoginPage.vue'
+import RegisterPage from './views/RegisterPage.vue'
 import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
 import { isLoggedIn } from './utils/auth'
 
@@ -11,8 +12,14 @@ const routes = [
   },
   {
     path: '/login',
-    name: 'auth',
-    component: AuthPage,
+    name: 'login',
+    component: LoginPage,
+    meta: { requiresGuest: true },
+  },
+  {
+    path: '/register',
+    name: 'register',
+    component: RegisterPage,
     meta: { requiresGuest: true },
   },
   {
@@ -41,7 +48,7 @@ router.beforeEach(async (to, from, next) => {
     // Check if the user isn't authenticated
     // Redirect to the login page
     next({
-      name: 'auth',
+      name: 'register',
       query: { redirect: to.fullPath }, // Optionally pass a redirect parameter
     })
   } else if (to.meta.requiresGuest && loggedIn) {
diff --git a/app/src/views/AuthPage.vue b/app/src/views/AuthPage.vue
deleted file mode 100644
index 749522b..0000000
--- a/app/src/views/AuthPage.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup>
-import AuthenticationPart from '../components/AuthenticationPart.vue'
-import Background from '../components/DynamicBackground.vue'
-</script>
-<template>
-  <div class="relative w-screen h-screen">
-    <Background class="w-full h-full" />
-    <div
-      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
-    >
-      <div class="h-2/3 w-1/3">
-        <AuthenticationPart />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/src/views/LoginPage.vue b/app/src/views/LoginPage.vue
new file mode 100644
index 0000000..f51d31e
--- /dev/null
+++ b/app/src/views/LoginPage.vue
@@ -0,0 +1,28 @@
+<script setup>
+import AuthForm from '../components/AuthForm.vue'
+import Background from '../components/DynamicBackground.vue'
+
+import { login } from '../utils/auth'
+
+const handleLogin = async ({ username, password, success, error }) => {
+  try {
+    const isSuccess = await login(username, password)
+    if (isSuccess) success()
+    else error('Wrong username or password.')
+  } catch (err) {
+    console.error(err)
+  }
+}
+</script>
+<template>
+  <div class="relative w-screen h-screen">
+    <Background class="w-full h-full" />
+    <div
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="h-2/3 w-1/3">
+        <AuthForm @onSubmit="handleLogin" :isRegister="false" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
new file mode 100644
index 0000000..0a9c83f
--- /dev/null
+++ b/app/src/views/RegisterPage.vue
@@ -0,0 +1,56 @@
+<script setup>
+import AuthForm from '../components/AuthForm.vue'
+import Background from '../components/DynamicBackground.vue'
+
+import api from '../utils/api'
+import { register } from '../utils/auth'
+
+function handleRegister({ username, email, password, success, error }) {
+  register(username, email, password)
+    .then(success)
+    .catch((err) => {
+      if (err.response?.status === 409) {
+        // Handle username or email already exists error here
+        if (err.response.data.type === 'username') {
+          error('Username already exists.')
+        } else if (err.response.data.type === 'email') {
+          error('Email already exists.')
+        } else {
+          error('Something went wrong.')
+        }
+      } else if (err.response?.status === 400) {
+        error('Invalid username or email.')
+      } else {
+        console.error(err)
+      }
+    })
+}
+
+// async function check({ username, password, email }) {
+//   try {
+//     const res = await api.get('/auth/check-username', {
+//       params: { username },
+//     })
+//     const { type, available } = res.data
+//   } catch (err) {
+//     if (err.response?.status === 400) {
+//       errorMessage.value = 'Invalid username or email.'
+//       return
+//     }
+//     errorMessage.value = 'Something went wrong.'
+//     console.error(err)
+//   }
+// }
+</script>
+<template>
+  <div class="relative w-screen h-screen">
+    <Background class="w-full h-full" />
+    <div
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="h-2/3 w-1/3">
+        <AuthForm @onSubmit="handleRegister" :isRegister="true" />
+      </div>
+    </div>
+  </div>
+</template>

From c5ccf03ac5ad333c8c054ce275aa9dabe49aa803 Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 16:38:25 +0800
Subject: [PATCH 7/8] feat: add username and email check in frontend

---
 app/Dockerfile                                |  2 +
 app/Dockerfile.dev                            |  1 +
 app/package.json                              |  1 +
 app/src/components/AuthForm.vue               |  2 +-
 app/src/views/RegisterPage.vue                | 51 +++++++++++++------
 docker-compose.yml                            |  2 +-
 packages/utils/auth.js                        | 38 ++++++++++++++
 {server/tests => packages}/utils/auth.test.js |  2 +-
 packages/utils/index.js                       |  1 +
 packages/utils/package.json                   |  8 +++
 server/Dockerfile                             |  2 +
 server/Dockerfile.dev                         |  1 +
 server/package.json                           |  1 +
 server/src/api/controllers/authController.js  |  8 +--
 server/src/utils/auth.js                      | 39 --------------
 15 files changed, 95 insertions(+), 64 deletions(-)
 create mode 100644 packages/utils/auth.js
 rename {server/tests => packages}/utils/auth.test.js (92%)
 create mode 100644 packages/utils/index.js
 create mode 100644 packages/utils/package.json

diff --git a/app/Dockerfile b/app/Dockerfile
index 30a17f7..8c9b986 100644
--- a/app/Dockerfile
+++ b/app/Dockerfile
@@ -4,10 +4,12 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 COPY app/package.json ./app/package.json
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
+COPY packages/utils/package.json ./packages/utils/package.json
 RUN yarn install --frozen-lockfile
 
 COPY app ./app
 COPY packages/file-graph ./packages/file-graph
+COPY packages/utils ./packages/utils
 RUN yarn build
 
 # Production stage
diff --git a/app/Dockerfile.dev b/app/Dockerfile.dev
index a58a1cc..7548510 100644
--- a/app/Dockerfile.dev
+++ b/app/Dockerfile.dev
@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 COPY app/package.json ./app/package.json
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
+COPY packages/utils/package.json ./packages/utils/package.json
 RUN yarn install --frozen-lockfile
 
 WORKDIR /app/app
diff --git a/app/package.json b/app/package.json
index 4381231..9746862 100644
--- a/app/package.json
+++ b/app/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@linux-odyssey/file-graph": "*",
+    "@linux-odyssey/utils": "*",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index c37fae5..f710d53 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -43,7 +43,7 @@ const clearError = () => {
 }
 
 const handleSubmit = () => {
-  clearError()
+  if (errorMessage.value) return
   try {
     emit('onSubmit', {
       username: username.value,
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
index 0a9c83f..0ea7ac1 100644
--- a/app/src/views/RegisterPage.vue
+++ b/app/src/views/RegisterPage.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { isValidEmail, isValidUsername } from '@linux-odyssey/utils'
 import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
 
@@ -26,21 +27,35 @@ function handleRegister({ username, email, password, success, error }) {
     })
 }
 
-// async function check({ username, password, email }) {
-//   try {
-//     const res = await api.get('/auth/check-username', {
-//       params: { username },
-//     })
-//     const { type, available } = res.data
-//   } catch (err) {
-//     if (err.response?.status === 400) {
-//       errorMessage.value = 'Invalid username or email.'
-//       return
-//     }
-//     errorMessage.value = 'Something went wrong.'
-//     console.error(err)
-//   }
-// }
+async function check({ username, email, error }) {
+  if (username && !isValidUsername(username)) {
+    error('Invalid username.')
+    return
+  }
+  if (email && !isValidEmail(email)) {
+    error('Invalid email.')
+    return
+  }
+  if (!username && !email) {
+    return
+  }
+  try {
+    const res = await api.get('/auth/check-username', {
+      params: { username },
+    })
+    const { type, available } = res.data
+    if (!available) {
+      error(`${type} already exists.`)
+    }
+  } catch (err) {
+    if (err.response?.status === 400) {
+      error('Invalid username or email.')
+      return
+    }
+    console.error(err)
+    error('Something went wrong.')
+  }
+}
 </script>
 <template>
   <div class="relative w-screen h-screen">
@@ -49,7 +64,11 @@ function handleRegister({ username, email, password, success, error }) {
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <div class="h-2/3 w-1/3">
-        <AuthForm @onSubmit="handleRegister" :isRegister="true" />
+        <AuthForm
+          @onSubmit="handleRegister"
+          @onChange="check"
+          :isRegister="true"
+        />
       </div>
     </div>
   </div>
diff --git a/docker-compose.yml b/docker-compose.yml
index 195f55f..93ca8c9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -10,7 +10,7 @@ services:
       - internal
     volumes:
       - ./app:/app/app
-      - ./packages/file-graph:/app/packages/file-graph
+      - ./packages:/app/packages
   backend:
     build:
       context: .
diff --git a/packages/utils/auth.js b/packages/utils/auth.js
new file mode 100644
index 0000000..cd26d47
--- /dev/null
+++ b/packages/utils/auth.js
@@ -0,0 +1,38 @@
+export function isValidUsername(username) {
+  // Define a regular expression pattern for a valid Linux username.
+  const usernamePattern = /^[a-z][a-z0-9_-]*$/
+
+  // Test the username against the pattern.
+  if (!usernamePattern.test(username)) return false
+
+  // check if the username is between 1 and 32 characters
+  if (username.length < 4 || username.length > 32) {
+    return false
+  }
+
+  const reservedWords = [
+    'root',
+    'admin',
+    'administrator',
+    'sysadmin',
+    'system',
+    'daemon',
+    'bin',
+    'nobody',
+    'nogroup',
+    'guest',
+    'user',
+  ]
+  if (reservedWords.includes(username)) {
+    return false
+  }
+  return true
+}
+
+export function isValidEmail(email) {
+  // Define a regular expression pattern for a valid email address.
+  const emailPattern = /^[\w-.+]+@([\w][\w-]*\.)+[\w-]{2,}$/
+
+  // Test the email against the pattern.
+  return emailPattern.test(email)
+}
diff --git a/server/tests/utils/auth.test.js b/packages/utils/auth.test.js
similarity index 92%
rename from server/tests/utils/auth.test.js
rename to packages/utils/auth.test.js
index 4254ed8..e7d45a7 100644
--- a/server/tests/utils/auth.test.js
+++ b/packages/utils/auth.test.js
@@ -1,4 +1,4 @@
-import { isValidEmail, isValidUsername } from '../../src/utils/auth'
+import { isValidEmail, isValidUsername } from './auth.js'
 
 test('check valid username', () => {
   const valid = ['alex', 'alex123', 'john_doe', 'john-doe', 'rudeus']
diff --git a/packages/utils/index.js b/packages/utils/index.js
new file mode 100644
index 0000000..ab747e8
--- /dev/null
+++ b/packages/utils/index.js
@@ -0,0 +1 @@
+export { isValidEmail, isValidUsername } from './auth.js'
diff --git a/packages/utils/package.json b/packages/utils/package.json
new file mode 100644
index 0000000..09e9205
--- /dev/null
+++ b/packages/utils/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@linux-odyssey/utils",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "exports": "./index.js",
+  "license": "MIT"
+}
diff --git a/server/Dockerfile b/server/Dockerfile
index 078876b..5bee61f 100644
--- a/server/Dockerfile
+++ b/server/Dockerfile
@@ -4,10 +4,12 @@ WORKDIR /app
 COPY ./package.json yarn.lock ./
 COPY server/package.json ./server/package.json
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
+COPY packages/utils/package.json ./packages/utils/package.json
 RUN yarn install --frozen-lockfile --production
 
 COPY ./server ./server
 COPY packages/file-graph ./packages/file-graph
+COPY packages/utils ./packages/utils
 COPY quests ./quests
 
 WORKDIR /app/server
diff --git a/server/Dockerfile.dev b/server/Dockerfile.dev
index d6c2d35..488c1ca 100644
--- a/server/Dockerfile.dev
+++ b/server/Dockerfile.dev
@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 COPY server/package.json ./server/package.json
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
+COPY packages/utils/package.json ./packages/utils/package.json
 RUN yarn install --frozen-lockfile
 
 COPY server/nodemon.json ./server/nodemon.json
diff --git a/server/package.json b/server/package.json
index 317b6bb..7ba551b 100644
--- a/server/package.json
+++ b/server/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@linux-odyssey/file-graph": "*",
+    "@linux-odyssey/utils": "*",
     "bcrypt": "^5.1.1",
     "commander": "^11.0.0",
     "connect-mongo": "^5.0.0",
diff --git a/server/src/api/controllers/authController.js b/server/src/api/controllers/authController.js
index acca879..1a12555 100644
--- a/server/src/api/controllers/authController.js
+++ b/server/src/api/controllers/authController.js
@@ -1,10 +1,6 @@
+import { isValidEmail, isValidUsername } from '@linux-odyssey/utils'
 import User from '../../models/user.js'
-import {
-  genJWT,
-  hashPassword,
-  isValidEmail,
-  isValidUsername,
-} from '../../utils/auth.js'
+import { genJWT, hashPassword } from '../../utils/auth.js'
 
 export async function issueToken(req, res) {
   const { user } = req
diff --git a/server/src/utils/auth.js b/server/src/utils/auth.js
index ec95600..66fe0cb 100644
--- a/server/src/utils/auth.js
+++ b/server/src/utils/auth.js
@@ -47,42 +47,3 @@ export function verifyJWT(token) {
     })
   })
 }
-
-export function isValidUsername(username) {
-  // Define a regular expression pattern for a valid Linux username.
-  const usernamePattern = /^[a-z][a-z0-9_-]*$/
-
-  // Test the username against the pattern.
-  if (!usernamePattern.test(username)) return false
-
-  // check if the username is between 1 and 32 characters
-  if (username.length < 4 || username.length > 32) {
-    return false
-  }
-
-  const reservedWords = [
-    'root',
-    'admin',
-    'administrator',
-    'sysadmin',
-    'system',
-    'daemon',
-    'bin',
-    'nobody',
-    'nogroup',
-    'guest',
-    'user',
-  ]
-  if (reservedWords.includes(username)) {
-    return false
-  }
-  return true
-}
-
-export function isValidEmail(email) {
-  // Define a regular expression pattern for a valid email address.
-  const emailPattern = /^[\w-.+]+@([\w][\w-]*\.)+[\w-]{2,}$/
-
-  // Test the email against the pattern.
-  return emailPattern.test(email)
-}

From 5c7acd88ca6bad63fce328c8248d0925d27f1e7b Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 17:21:10 +0800
Subject: [PATCH 8/8] refactor: reuse AuthForm in ChooseUsernamePage

---
 app/src/components/AuthForm.vue      | 43 ++++++++++-----
 app/src/components/UsernameForm.vue  | 82 ----------------------------
 app/src/views/ChooseUsernamePage.vue | 49 ++++++++++++++++-
 app/src/views/LoginPage.vue          |  2 +-
 app/src/views/RegisterPage.vue       |  2 +-
 5 files changed, 77 insertions(+), 101 deletions(-)
 delete mode 100644 app/src/components/UsernameForm.vue

diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index f710d53..70a6f98 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -4,12 +4,21 @@ import { RouterLink, useRouter } from 'vue-router'
 import api from '../utils/api'
 
 const emit = defineEmits(['onSubmit', 'onChange'])
-const props = defineProps({
-  isRegister: Boolean,
+defineProps({
+  type: {
+    type: String,
+    default: 'login',
+  },
+  socialLogin: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: 'Linux Odyssey',
+  },
 })
 
-console.log(typeof props.isRegister)
-
 const router = useRouter()
 const username = ref('')
 const email = ref('')
@@ -79,37 +88,41 @@ const handleChange = () => {
   <div
     class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
-    <h1 class="text-text-primary text-3xl font-black mb-8">Linux Odyssey</h1>
+    <h1 class="text-text-primary text-3xl font-black mb-8">{{ title }}</h1>
     <form @submit.prevent="handleSubmit()" class="w-full">
       <div class="mb-6">
         <label for="username" class="text-sm font-semibold text-text">{{
-          isRegister ? 'Username' : 'Email / Username'
+          type === 'login' ? 'Email / Username' : 'Username'
         }}</label
         ><input
           type="text"
           id="username"
           ref="usernameInput"
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
-          placeholder="Enter your email or username"
+          :placeholder="
+            type === 'login'
+              ? 'Enter your email or username'
+              : 'Enter your username'
+          "
           v-model="username"
           @input="handleChange()"
           autocomplete="username"
         />
       </div>
-      <div class="mb-6" v-if="isRegister">
+      <div class="mb-6" v-if="type === 'register'">
         <label for="email" class="text-sm font-semibold text-text">Email</label
         ><input
           type="email"
           id="email"
           ref="emailInput"
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
-          placeholder="Enter your email or username"
+          placeholder="Enter your email"
           v-model="email"
           @input="handleChange()"
           autocomplete="email"
         />
       </div>
-      <div class="mb-6">
+      <div class="mb-6" v-if="type === 'login' || type === 'register'">
         <label for="password" class="text-sm font-semibold leading-6 text-text"
           >Password</label
         ><input
@@ -128,18 +141,18 @@ const handleChange = () => {
         class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
         type="submit"
       >
-        <span v-if="isRegister">Register</span>
-        <span v-else>Log in</span>
+        <span v-if="type === 'login'">Log in</span>
+        <span v-else>Register</span>
       </button>
 
       <p class="text-text flex justify-center mt-3">
-        <span v-if="isRegister"
+        <span v-if="type === 'register'"
           >Already have an account?
           <RouterLink class="text-text-primary" to="/login"
             >Log in</RouterLink
           ></span
         >
-        <span v-else
+        <span v-else-if="type === 'login'"
           >Don't have an account?
           <RouterLink class="text-text-primary" to="/register"
             >Register</RouterLink
@@ -147,7 +160,7 @@ const handleChange = () => {
         >
       </p>
 
-      <div v-if="hasSocialLogins">
+      <div v-if="socialLogin && hasSocialLogins">
         <hr class="my-8" />
         <p class="flex justify-center font-semibold text-text text-base">
           Log in with social account
diff --git a/app/src/components/UsernameForm.vue b/app/src/components/UsernameForm.vue
deleted file mode 100644
index 05e9e6f..0000000
--- a/app/src/components/UsernameForm.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import api from '../utils/api'
-
-const username = ref('')
-const errorMessage = ref('')
-const router = useRouter()
-
-async function checkUsername() {
-  const user = username.value.trim()
-  errorMessage.value = ''
-  if (user.length > 3) {
-    try {
-      const { data } = await api.get('/auth/check-username', {
-        params: { username: user },
-      })
-
-      const { available } = data
-      if (!available) {
-        errorMessage.value = 'Username is already taken.'
-      } else {
-        errorMessage.value = ''
-      }
-    } catch {
-      errorMessage.value = 'Invalid username.'
-    }
-  }
-}
-
-async function handleSubmit() {
-  if (errorMessage.value) {
-    return
-  }
-  try {
-    const { data } = await api.post('/auth/register-from-session', {
-      username: username.value.trim(),
-    })
-    console.log(data)
-    router.push({ name: 'game' })
-  } catch (err) {
-    console.error(err.message)
-    if (err.response?.status === 409) {
-      errorMessage.value = 'Username is already taken.'
-    } else {
-      errorMessage.value = 'Something went wrong.'
-    }
-  }
-}
-</script>
-<template>
-  <div
-    class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
-  >
-    <h1 class="text-text-primary text-3xl font-black mb-8">Choose username</h1>
-    <form @submit.prevent="handleSubmit" class="w-full">
-      <div class="mb-6">
-        <label for="username" class="text-sm font-semibold text-text"
-          >Username</label
-        ><input
-          type="text"
-          id="username"
-          ref="usernameInput"
-          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
-          placeholder="Enter your email or username"
-          v-model="username"
-          @input="checkUsername"
-          autocomplete="username"
-        />
-      </div>
-      <p class="text-red-500 flex justify-center" v-if="errorMessage">
-        {{ errorMessage }}
-      </p>
-      <button
-        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
-        type="submit"
-      >
-        <span>Sign up</span>
-      </button>
-    </form>
-  </div>
-</template>
diff --git a/app/src/views/ChooseUsernamePage.vue b/app/src/views/ChooseUsernamePage.vue
index cec4a14..decc2b4 100644
--- a/app/src/views/ChooseUsernamePage.vue
+++ b/app/src/views/ChooseUsernamePage.vue
@@ -1,6 +1,46 @@
 <script setup>
-import UsernameForm from '../components/UsernameForm.vue'
+import { isValidUsername } from '@linux-odyssey/utils'
+import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
+
+import api from '../utils/api'
+
+async function checkUsername({ username, error }) {
+  if (username && !isValidUsername(username)) {
+    error('Invalid username.')
+    return
+  }
+  if (username.length > 3) {
+    try {
+      const { data } = await api.get('/auth/check-username', {
+        params: { username },
+      })
+
+      const { available } = data
+      if (!available) {
+        error('Username is already taken.')
+      }
+    } catch {
+      error('Invalid username.')
+    }
+  }
+}
+
+function handleSubmit({ username, success, error }) {
+  api
+    .post('/auth/register-from-session', {
+      username,
+    })
+    .then(success)
+    .catch((err) => {
+      if (err.response?.status === 409) {
+        error('Username is already taken.')
+      } else {
+        console.error(err.message)
+        error('Something went wrong.')
+      }
+    })
+}
 </script>
 <template>
   <div class="relative w-screen h-screen">
@@ -9,7 +49,12 @@ import Background from '../components/DynamicBackground.vue'
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <div class="h-2/3 w-1/3">
-        <UsernameForm />
+        <AuthForm
+          @onSubmit="handleSubmit"
+          @onChange="checkUsername"
+          type="username"
+          :socialLogin="false"
+        />
       </div>
     </div>
   </div>
diff --git a/app/src/views/LoginPage.vue b/app/src/views/LoginPage.vue
index f51d31e..af38994 100644
--- a/app/src/views/LoginPage.vue
+++ b/app/src/views/LoginPage.vue
@@ -21,7 +21,7 @@ const handleLogin = async ({ username, password, success, error }) => {
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <div class="h-2/3 w-1/3">
-        <AuthForm @onSubmit="handleLogin" :isRegister="false" />
+        <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
     </div>
   </div>
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
index 0ea7ac1..b34bcde 100644
--- a/app/src/views/RegisterPage.vue
+++ b/app/src/views/RegisterPage.vue
@@ -67,7 +67,7 @@ async function check({ username, email, error }) {
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"
-          :isRegister="true"
+          type="register"
         />
       </div>
     </div>