page for list of rooms

frontend/src/App.vue

@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import { onBeforeMount, ref } from 'vue';
 import Login from './components/Login.vue';
+import HomePage from './components/HomePage.vue';
+
+const page = ref<number>(0);
+
+onBeforeMount(async () => {
+    const loggedIn = await cookieStore.get("loggedIn");
+    if (loggedIn?.value == "true") {
+        page.value = 1;
+    }
+})
 </script>
 
 <template>
-  <Login />
+    <Login v-if="page == 0" @next-page="page++"/>
+    <HomePage v-if="page == 1" @add-slot="page++"/>
 </template>

frontend/src/components/HomePage.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue';
+
+const rooms = ref();
+
+defineEmits(['addSlot']);
+onBeforeMount(async () => {
+    const res = await fetch("http://localhost:3000/currentRooms", {
+        method: "GET",
+        headers: new Headers({'content-type': 'application/json'})
+    });
+    rooms.value = await res.json();
+});
+</script>
+<template>
+    <header>
+        <h1>What's free in my free?</h1>
+        <button @click="$emit('addSlot')">Add new slot</button>
+    </header>
+    <article>
+        <h2>Free Rooms:</h2>
+        <p v-if="rooms.records.length == 0">No free rooms right now</p>
+        <ul v-for="(slot, index) in rooms.records">
+            <li :id="index">{{ slot }}</li>
+        </ul>
+    </article>
+</template>

frontend/src/components/Login.vue

@@ -3,23 +3,40 @@ import { ref } from 'vue';
 
 const email = ref<string>("");
 const pass = ref<string>("");
+const text = ref<string>("");
 
-function login(e: SubmitEvent) {
+const emit = defineEmits(['nextPage']);
+
+async function login(e: SubmitEvent) {
+    text.value = "";
     e.preventDefault();
-    fetch("http://localhost:3000/login", {
+    const res = await fetch("http://localhost:3000/login", {
         method: "POST",
         body: JSON.stringify({ email: email.value, pass: pass.value }),
         headers: new Headers({'content-type': 'application/json'})
     });
+    if (res.ok) {
+        cookieStore.set("loggedIn", "true");
+        emit('nextPage');
+    } else {
+        text.value = await res.text();
+    }
 }
 
-function signup(e: Event) {
+async function signup(e: Event) {
+    text.value = "";
     e.preventDefault();
-    fetch("http://localhost:3000/createUser", {
+    const res = await fetch("http://localhost:3000/createUser", {
         method: "POST",
         body: JSON.stringify({ email: email.value, pass: pass.value, name: email.value.split("@")[0] }),
         headers: new Headers({'content-type': 'application/json'})
     });
+    if (res.ok) {
+        cookieStore.set("loggedIn", "true");
+        emit('nextPage');
+    } else {
+        text.value = await res.text();
+    }
 } 
 
 </script>
@@ -32,5 +49,6 @@ function signup(e: Event) {
         <input type="password" id="pass" v-model="pass"/> <br>
         <button type="submit">Sign in</button> <br>
         <button type="button" @click="signup">Sign up</button>
+        <p>{{ text }}</p>
     </form>
 </template>

frontend/src/main.ts

@@ -1,5 +1,6 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
 // import './style.css'
-import App from './App.vue'
+import App from './App.vue';
+import VueCookies from 'vue-cookies';
 
-createApp(App).mount('#app')
+createApp(App).use(VueCookies).mount('#app');