first setting up of vue

src/server/app.js

@@ -16,7 +16,6 @@ const bodyParser = require( 'body-parser' );
 const cookieParser = require( 'cookie-parser' );
 const favicon = require( 'serve-favicon' );
 const http = require( 'http' );
-const serveStatic = require( 'serve-static' );
 
 // const env = process.env.PROD || false;
 
@@ -35,44 +34,11 @@ app.use( expressSession( {
 app.use( bodyParser.urlencoded( { extended: false } ) );
 app.use( bodyParser.json() );
 app.use( cookieParser() );
-app.use( favicon( path.join( __dirname + '/ui/assets/logo.png' ) ) );
+// app.use( favicon( path.join( __dirname + '/ui/assets/logo.png' ) ) );
-app.use( serveStatic( __dirname + '/admin/ui/modules' ) );
+app.use( express.static( 'ui' ) );
 
-require( './admin/routes.js' )( app, settings ); // admin route
+// require( './admin/routes.js' )( app, settings ); // admin route
 
-if ( settings[ 'init' ] ) {
-    if ( root !== '/' ) {
-        app.get( '/', ( request, response ) => {
-            let lang = request.query.lang || 'en';
-            response.sendFile( path.join( __dirname + '/ui/html/' + lang + '/index.html' ) );
-        } );
-    }
-} else {
-    app.get( '/', ( request, response ) => {
-        response.sendFile( path.join( __dirname + '/ui/html/index.html' ) );
-    } );
-}
-
-
-// Assets route for logo, etc
-app.get( '/assets/:file', ( request, response ) => {
-    response.sendFile( path.join( __dirname + '/ui/assets/' + request.params.file ) );
-} );
-
-
-
-// CSS route for all user-facing CSS files
-app.get( '/css/:file', ( request, response ) => {
-    response.sendFile( path.join( __dirname + '/ui/css/' + request.params.file ) );
-} );
-
-
-
-// create 404 handler
-// eslint-disable-next-line no-unused-vars
-app.use( ( request, response, next ) => {
-    response.sendFile( path.join( __dirname + '/ui/html/en/errorResponses/404.html' ) );
-} );
 
 const PORT = process.env.PORT || 8080;
 http.createServer( app ).listen( PORT );

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',
+        path: '/tickets',
-        name: 'about',
+        name: 'tickets',
-        component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue' )
+        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>