feat(frontend): add logout btn, improve login flow

frontend/src/api.ts

@@ -54,6 +54,7 @@ export async function login(payload: ILoginPayload) {
     loading: 'Logging in...',
     success(response) {
       isSuccess = true
+      location.href = '/'
       // @ts-ignore
       return `Welcome ${response.user.name}!`
     },
@@ -83,6 +84,7 @@ export async function register(payload: IRegisterPayload) {
     loading: 'Creating your account...',
     success() {
       isSuccess = true
+      location.href = '/login'
       return `Successfully registered!`
     },
     error: (error) => {
@@ -102,6 +104,7 @@ export async function logout() {
   toast.promise(logout, {
     loading: 'Loading...',
     success() {
+      location.href = '/'
       return `You have been logged out.`
     },
     error: () => {

frontend/src/components/Auth/Logout.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { logout } from '@/api';
+</script>
+
+<template>
+  <button @click="logout" class="button" type="button">
+    Logout
+  </button>
+</template>

frontend/src/components/EldenRing/Builder.vue

@@ -444,7 +444,7 @@ const onSubmit = handleSubmit((values) => {
       </div>
     </div>
 
-    <div class="flex justify-center mt-12">
+    <div class="flex justify-center my-12">
       <button class="button" type="submit">
         Create
       </button>

frontend/src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import '@/styles/globals.scss'
 import { Toaster } from 'vue-sonner'
 import { SquareMenu } from 'lucide-vue-next'
+import Logout from '@/components/Auth/Logout.vue'
 
 interface Props {
   title: string;
@@ -34,7 +35,12 @@ const { user } = Astro.locals;
             </picture>
           </a>
 
-          {user && <h1>Welcome {user.name}!</h1>}
+          {user && (
+            <div class="flex gap-x-4 items-center">
+              <h1>Welcome {user.name}!</h1>
+              <Logout client:visible />
+            </div>
+          )}
         </div>
 
         <!-- Desktop nav -->