From 93a3621462b4e38986b1324e6ccedd66ca1a8215 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:12:22 +0800
Subject: [PATCH] Add login and signup pages with hidden menu

---
 open-isle-cli/src/App.vue                       | 12 ++++++++++--
 .../src/components/HeaderComponent.vue          | 10 ++++++++--
 open-isle-cli/src/router/index.js               | 12 ++++++++++++
 open-isle-cli/src/views/LoginPageView.vue       | 17 +++++++++++++++++
 open-isle-cli/src/views/SignupPageView.vue      | 17 +++++++++++++++++
 5 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 open-isle-cli/src/views/LoginPageView.vue
 create mode 100644 open-isle-cli/src/views/SignupPageView.vue

diff --git a/open-isle-cli/src/App.vue b/open-isle-cli/src/App.vue
index 733d2c336..f2104423f 100644
--- a/open-isle-cli/src/App.vue
+++ b/open-isle-cli/src/App.vue
@@ -1,9 +1,12 @@
 <template>
   <div id="app">
-    <HeaderComponent @toggle-menu="menuVisible = !menuVisible" />
+    <HeaderComponent
+      @toggle-menu="menuVisible = !menuVisible"
+      :show-menu-btn="!hideMenu"
+    />
 
     <div class="main-container">
-      <MenuComponent :visible="menuVisible" />
+      <MenuComponent :visible="!hideMenu && menuVisible" />
       <div class="content">
         <router-view />
       </div>
@@ -20,6 +23,11 @@ export default {
   components: { HeaderComponent, MenuComponent },
   data() {
     return { menuVisible: true }
+  },
+  computed: {
+    hideMenu() {
+      return ['/login', '/signup'].includes(this.$route.path)
+    }
   }
 }
 </script>
diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue
index 7dc8a3a27..8c28e3a95 100644
--- a/open-isle-cli/src/components/HeaderComponent.vue
+++ b/open-isle-cli/src/components/HeaderComponent.vue
@@ -1,8 +1,8 @@
 <template>
   <header class="header">
     <div class="header-content">
-      <button class="menu-btn" @click="$emit('toggle-menu')">
-        <i class="fas fa-bars"></i> 
+      <button v-if="showMenuBtn" class="menu-btn" @click="$emit('toggle-menu')">
+        <i class="fas fa-bars"></i>
       </button>
       <div class="logo-container" @click="goToHome">
         <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="60" height="60">
@@ -15,6 +15,12 @@
 <script>
 export default {
   name: 'HeaderComponent',
+  props: {
+    showMenuBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
   methods: {
     goToHome() {
       this.$router.push('/')
diff --git a/open-isle-cli/src/router/index.js b/open-isle-cli/src/router/index.js
index 42b5549c1..66b062893 100644
--- a/open-isle-cli/src/router/index.js
+++ b/open-isle-cli/src/router/index.js
@@ -3,6 +3,8 @@ import HomePageView from '../views/HomePageView.vue'
 import MessagePageView from '../views/MessagePageView.vue'
 import AboutPageView from '../views/AboutPageView.vue'
 import PostPageView from '../views/PostPageView.vue'
+import LoginPageView from '../views/LoginPageView.vue'
+import SignupPageView from '../views/SignupPageView.vue'
 
 const routes = [
   {
@@ -24,6 +26,16 @@ const routes = [
     path: '/posts/:id',
     name: 'post',
     component: PostPageView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginPageView
+  },
+  {
+    path: '/signup',
+    name: 'signup',
+    component: SignupPageView
   }
 ]
 
diff --git a/open-isle-cli/src/views/LoginPageView.vue b/open-isle-cli/src/views/LoginPageView.vue
new file mode 100644
index 000000000..3e5ef626b
--- /dev/null
+++ b/open-isle-cli/src/views/LoginPageView.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="login-page">
+    <h1>Login</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginPageView'
+}
+</script>
+
+<style scoped>
+.login-page {
+  padding: 20px;
+}
+</style>
diff --git a/open-isle-cli/src/views/SignupPageView.vue b/open-isle-cli/src/views/SignupPageView.vue
new file mode 100644
index 000000000..4d421f4e5
--- /dev/null
+++ b/open-isle-cli/src/views/SignupPageView.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="signup-page">
+    <h1>Sign Up</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SignupPageView'
+}
+</script>
+
+<style scoped>
+.signup-page {
+  padding: 20px;
+}
+</style>