first setting up of vue

src/webapp/src/App.vue

@@ -1,18 +1,29 @@
 <template>
     <nav>
         <router-link to="/">Home</router-link> |
-        <router-link to="/about">About</router-link>
+        <router-link to="/tickets">Tickets</router-link> | 
+        <router-link to="/login">Account</router-link>
     </nav>
     <router-view />
 </template>
 
 <style>
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
 #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 nav {

src/webapp/src/router/index.js

@@ -1,22 +1,61 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 
+/* 
+    This is the Vue.js router file. Here, all valid routes are defined.
+*/
 const routes = [
     {
         path: '/',
         name: 'home',
-        component: HomeView
+        component: HomeView,
+        meta: {
+            title: 'Home - myevent'
+        }
     },
     {
-        path: '/about',
-        name: 'about',
-        component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue' )
+        path: '/tickets',
+        name: 'tickets',
+        component: () => import( '../views/OrderView.vue' ),
+        meta: {
+            title: 'Order ticket - myevent'
+        }
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import( '../views/LoginView.vue' ),
+        meta: {
+            title: 'Login - myevent'
+        }
+    },
+    {
+        path: '/admin/login',
+        name: 'adminLogin',
+        component: () => import( '../views/AdminLoginView.vue' ),
+        meta: {
+            title: 'Admin - myevent'
+        }
+    },
+    {
+        path: '/signup',
+        name: 'signup',
+        component: () => import( '../views/SignupView.vue' ),
+        meta: {
+            title: 'Signup - myevent'
+        }
     }
 ]
 
 const router = createRouter( {
     history: createWebHistory( process.env.BASE_URL ),
-    routes
+    routes,
+    
 } );
 
-export default router
+
+router.afterEach( ( to, from ) => {
+    document.title = to.meta.title ? to.meta.title : 'default title';
+} );
+
+export default router;

src/webapp/src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="about">
-        <h1>This is an about page</h1>
-    </div>
-</template>

src/webapp/src/views/AdminLoginView.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="login">
+        <div class="login-app">
+            <h1>Log into your account</h1>
+            <form>
+                <label for="username">Username</label><br>
+                <input type="text" v-model="formData[ 'username' ]" name="username" id="username" required><br><br>
+                <label for="username">Password</label><br>
+                <input type="text" v-model="formData[ 'password' ]" name="password" id="password" required>
+            </form>
+            <button @click="login();" class="button">Log in</button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                formData: {}
+            }
+        },
+        methods: {
+            login () {
+                
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .login {
+        background-color: green;
+        width: 100%;
+        height: 100%;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 0 1 auto;
+    }
+
+    .login-app {
+        background-color: white;
+        width: 40%;
+        height: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50px;
+    }
+
+    .button {
+        padding: 5px 10px;
+        margin-top: 2%;
+    }
+</style>

src/webapp/src/views/HomeView.vue

@@ -16,3 +16,9 @@ export default {
     }
 }
 </script>
+
+<style scoped>
+    img {
+        width: 20%;
+    }
+</style>

src/webapp/src/views/LoginView.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="login">
+        <div class="login-app">
+            <h1>Log into your account</h1>
+            <form>
+                <label for="username">Username</label><br>
+                <input type="text" v-model="formData[ 'username' ]" name="username" id="username" required><br><br>
+                <label for="username">Password</label><br>
+                <input type="text" v-model="formData[ 'password' ]" name="password" id="password" required>
+            </form>
+            <button @click="login();" class="button">Log in</button>
+            <router-link to="/signup" class="button">Sign up instead</router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                formData: {}
+            }
+        },
+        methods: {
+            login () {
+
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .login {
+        background-color: green;
+        width: 100%;
+        height: 100%;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 0 1 auto;
+    }
+
+    .login-app {
+        background-color: white;
+        width: 40%;
+        height: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50px;
+    }
+
+    .button {
+        padding: 5px 10px;
+        margin-top: 2%;
+    }
+</style>

src/webapp/src/views/OrderView.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="order">
+        <h1>Order tickets</h1>
+        <div class="order-app">
+            <ul>
+                <li>T</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .order-app {
+        text-align: justify;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    li {
+        border-color: black;
+        border-width: 1px;
+        height: fit-content;
+        border-style: solid;
+        padding: 10px;
+    }
+
+    ul {
+        list-style: none;
+        width: 80%;
+    }
+</style>

src/webapp/src/views/SignupView.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="login">
+        <div class="login-app">
+            <h1>Log into your account</h1>
+            <form>
+                <label for="username">Username</label><br>
+                <input type="text" v-model="formData[ 'username' ]" name="username" id="username" required><br><br>
+                <label for="username">Password</label><br>
+                <input type="text" v-model="formData[ 'password' ]" name="password" id="password" required>
+            </form>
+            <button @click="login();" class="button">Log in</button>
+            <router-link to="/signup" class="button">Sign up instead</router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                formData: {}
+            }
+        },
+        methods: {
+            login () {
+
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .login {
+        background-color: green;
+        width: 100%;
+        height: 100%;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 0 1 auto;
+    }
+
+    .login-app {
+        background-color: white;
+        width: 40%;
+        height: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50px;
+    }
+
+    .button {
+        padding: 5px 10px;
+        margin-top: 2%;
+    }
+</style>