web: add test login and signup page

web/src/App.vue

@@ -37,6 +37,8 @@ import HelloWorld from './components/HelloWorld.vue'
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/login">Login</RouterLink>
+        <RouterLink to="/Signup">Signup</RouterLink>
       </nav>
     </div>
   </header>

web/src/router/index.ts

@@ -40,6 +40,16 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/LoginView.vue')
+    },
+    {
+      path: '/signup',
+      name: 'signup',
+      component: () => import('../views/SignupView.vue')
     }
   ]
 })

web/src/views/LoginView.vue

@@ -0,0 +1,83 @@
+<!--
+ MIT License
+
+ Copyright (c) 2024 vinchent <vinchent@vinchent.xyz>
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+-->
+<template>
+  <div class="login-container">
+    <h2>Login</h2>
+    <form @submit.prevent="handleLogin">
+      <div class="form-group">
+        <label for="email">Email:</label>
+        <input type="text" id="email" v-model="email" required />
+      </div>
+      <div class="form-group">
+        <label for="password">Password:</label>
+        <input type="password" id="password" v-model="password" required />
+      </div>
+      <button type="submit">Login</button>
+    </form>
+    <p v-if="error" class="error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+
+const email = ref('')
+const password = ref('')
+const error = ref('')
+
+const router = useRouter()
+
+const handleLogin = async () => {
+  try {
+    const response = await axios.post('http://localhost:8000/v1/session/create', {
+      email: email.value,
+      password: password.value
+    })
+
+    if (response.status === 200) {
+      // Clear error message
+      error.value = ''
+      // Redirect to dashboard or another route
+      router.push('/about')
+    } else {
+      error.value = 'Invalid email or password'
+    }
+  } catch (err) {
+    error.value = 'An error occurred. Please try again.'
+    console.error(err)
+  }
+}
+</script>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

web/src/views/SignupView.vue

@@ -0,0 +1,95 @@
+<!--
+ MIT License
+
+ Copyright (c) 2024 vinchent <vinchent@vinchent.xyz>
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+-->
+<template>
+  <div class="signup-container">
+    <h2>Signup</h2>
+    <form @submit.prevent="handleSignup">
+      <div class="form-group">
+        <label for="email">Email:</label>
+        <input type="text" id="email" v-model="email" required />
+      </div>
+      <div class="form-group">
+        <label for="password">Password:</label>
+        <input type="password" id="password" v-model="password" required />
+      </div>
+      <div class="form-group">
+        <label for="first_name">First Name:</label>
+        <input type="first_name" id="first_name" v-model="first_name" required />
+      </div>
+      <div class="form-group">
+        <label for="last_name">Last Name:</label>
+        <input type="last_name" id="last_name" v-model="last_name" required />
+      </div>
+      <button type="submit">Signup</button>
+    </form>
+    <p v-if="error" class="error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+
+const first_name = ref('')
+const last_name = ref('')
+const email = ref('')
+const password = ref('')
+const error = ref('')
+
+const router = useRouter()
+
+const handleSignup = async () => {
+  try {
+    const response = await axios.post('http://localhost:8000/v1/user/create', {
+      email: email.value,
+      password: password.value,
+      first_name: first_name.value,
+      last_name: last_name.value
+    })
+
+    if (response.status === 200) {
+      // Clear error message
+      error.value = ''
+      // Redirect to dashboard or another route
+      router.push('/login')
+    } else {
+      error.value = 'Failed to signup'
+    }
+  } catch (err) {
+    error.value = 'An error occurred. Please try again.'
+    console.error(err)
+  }
+}
+</script>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>