finish moving setup to own webapp

src/webapp/setup/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "serve": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"

src/webapp/setup/src/App.vue

@@ -1,85 +1,154 @@
-<script setup>
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <header>
+    <router-view v-slot="{ Component, route }">
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+        <transition :name="route.meta.transition || 'scale'" mode="out-in">
-
+            <component :is="Component" />
-    <div class="wrapper">
+        </transition>
-      <HelloWorld msg="You did it!" />
+    </router-view>
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
 </template>
 
-<style scoped>
+<style>
-header {
+    :root, :root.light {
-  line-height: 1.5;
+        --primary-color: #2c3e50;
-  max-height: 100vh;
+        --accent-background: rgb(30, 30, 82);
+        --secondary-color: white;
+        --background-color: white;
+        --popup-color: rgb(224, 224, 224);
+        --accent-color: #42b983;
+        --hover-color: rgb(165, 165, 165);
+        --accent-background-hover: rgb(124, 140, 236);
+        --overlay-color: rgba(0, 0, 0, 0.7);
+        --inactive-color: rgb(100, 100, 100);
+        --highlight-backdrop: rgb(143, 134, 192);
+        --hint-color: rgb(174, 210, 221);
+        --PI: 3.14159265358979;
     }
 
-.logo {
+    :root.dark {
-  display: block;
+        --primary-color: white;
-  margin: 0 auto 2rem;
+        --accent-background: rgb(56, 56, 112);
+        --secondary-color: white;
+        --background-color: rgb(32, 32, 32);
+        --popup-color: rgb(58, 58, 58);
+        --accent-color: #42b983;
+        --hover-color: rgb(83, 83, 83);
+        --accent-background-hover: #4380a8;
+        --overlay-color: rgba(104, 104, 104, 0.575);
+        --inactive-color: rgb(190, 190, 190);
+        --highlight-backdrop: rgb(85, 63, 207);
+        --hint-color: rgb(88, 91, 110);
+    }
+
+    @media ( prefers-color-scheme: dark ) {
+        :root {
+            --primary-color: white;
+            --accent-background: rgb(56, 56, 112);
+            --secondary-color: white;
+            --background-color: rgb(32, 32, 32);
+            --popup-color: rgb(58, 58, 58);
+            --accent-color: #42b983;
+            --hover-color: rgb(83, 83, 83);
+            --accent-background-hover: #4380a8;
+            --overlay-color: rgba(104, 104, 104, 0.575);
+            --inactive-color: rgb(190, 190, 190);
+            --highlight-backdrop: rgb(85, 63, 207);
+            --hint-color: rgb(88, 91, 110);
+        }
+    }
+
+    ::selection {
+        background-color: var( --highlight-backdrop );
+        color: var( --secondary-color );
+    }
+
+    #themeSelector {
+        background-color: rgba( 0, 0, 0, 0 );
+        color: var( --primary-color );
+        font-size: 130%;
+        padding: 0;
+        margin: 0;
+        border: none;
+        cursor: pointer;
+    }
+
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    #app {
+        transition: 0.5s;
+        background-color: var( --background-color );
+        font-family: Avenir, Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: var( --primary-color );
+        height: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
     nav {
-  width: 100%;
+        padding: 30px;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
     }
 
     nav a {
-  display: inline-block;
+        font-weight: bold;
-  padding: 0 1rem;
+        color: var( --primary-color );
-  border-left: 1px solid var(--color-border);
     }
 
-nav a:first-of-type {
+    nav a.router-link-exact-active {
-  border: 0;
+        color: #42b983;
     }
 
-@media (min-width: 1024px) {
+    .scale-enter-active,
-  header {
+    .scale-leave-active {
-    display: flex;
+        transition: all 0.5s ease;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
     }
 
-  .logo {
+    .scale-enter-from,
-    margin: 0 2rem 0 0;
+    .scale-leave-to {
+        opacity: 0;
+        transform: scale(0.9);
     }
 
-  header .wrapper {
+    .fade-enter-active,
-    display: flex;
+    .fade-leave-active {
-    place-items: flex-start;
+        transition: opacity 0.4s ease;
-    flex-wrap: wrap;
     }
 
-  nav {
+    .fade-enter-from,
-    text-align: left;
+    .fade-leave-to {
-    margin-left: -1rem;
+        opacity: 0;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
     }
+
+    .material-symbols-outlined {
+        font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 48
+    }
+
+    .clr-open {
+        border: black solid 1px !important;
     }
 </style>
+
+<script>
+export default {
+    created () {
+        this.theme = localStorage.getItem( 'theme' ) ? localStorage.getItem( 'theme' ) : '';
+        if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || this.theme === '&#9788;' ) {
+            document.documentElement.classList.add( 'dark' );
+            this.theme = '&#9788;';
+        } else {
+            document.documentElement.classList.add( 'light' );
+            this.theme = '&#9789;';
+        }
+    }
+}
+</script>

src/webapp/setup/src/assets/base.css

@@ -1,73 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/webapp/setup/src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/webapp/setup/src/assets/main.css

@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/webapp/setup/src/main.js

@@ -1,14 +1,12 @@
-import './assets/main.css'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 
-import { createApp } from 'vue'
+import App from './App.vue';
-import { createPinia } from 'pinia'
+import router from './router';
 
-import App from './App.vue'
+const app = createApp( App );
-import router from './router'
 
-const app = createApp(App)
+app.use( createPinia() );
+app.use( router );
 
-app.use(createPinia())
+app.mount('#app');
-app.use(router)
-
-app.mount('#app')

src/webapp/setup/src/router/index.js

@@ -1,23 +1,36 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
-import HomeView from '../views/HomeView.vue'
+import { useBackendStore } from '@/stores/backendStore';
+import HomeView from '../views/HomeView.vue';
+import setupRoutes from './setupRoutes';
 
-const router = createRouter({
+let routes = [
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
     {
         path: '/',
         name: 'home',
-      component: HomeView
+        component: HomeView,
-    },
+        meta: {
-    {
+            title: 'Welcome to libreevent!'
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // 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')
         }
+    },
 ]
+
+routes.push( setupRoutes );
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: routes
 } )
 
+router.beforeEach( ( to ) => {
+    let backendStore = useBackendStore();
+    backendStore.loadVisitedSetupPages();
+    if ( to.name.substring( 0, 5 ) === 'setup' && !backendStore.getVisitedSetupPages[ to.name.substring( 5 ).toLowerCase() ] && to.name.substring( 5 ).toLowerCase() !== 'start' && to.name.substring( 5 ).toLowerCase() !== 'root' ) {
+        return { name: 'setupStart' };
+    }
+} );
+
+router.afterEach( ( to ) => {
+    document.title = to.meta.title ? to.meta.title : 'libreevent';
+} );
+
 export default router

src/webapp/setup/src/router/setupRoutes.js

@@ -10,16 +10,16 @@
 export default {
     path: '/setup',
     name: 'setup',
-    component: () => import( '../views/setup/SetupView.vue' ),
+    component: () => import( '../views/SetupView.vue' ),
     meta: {
-        title: 'Login :: Admin - libreevent',
+        title: 'Setup :: Admin - libreevent',
         setupAuthRequired: true,
     },
     children: [
         {
             path: '',
             name: 'setupStart',
-            component: () => import( '../views/setup/SetupStartView.vue' ),
+            component: () => import( '../views/SetupStartView.vue' ),
             meta: {
                 title: 'Start :: Setup - libreevent',
                 setupAuthRequired: true,
@@ -28,7 +28,7 @@ export default {
         {
             path: 'root',
             name: 'setupRoot',
-            component: () => import( '../views/setup/SetupRootView.vue' ),
+            component: () => import( '../views/SetupRootView.vue' ),
             meta: {
                 title: 'Root account :: Setup - libreevent',
                 setupAuthRequired: true,
@@ -37,7 +37,7 @@ export default {
         {
             path: 'page',
             name: 'setupPage',
-            component: () => import( '../views/setup/SetupPageView.vue' ),
+            component: () => import( '../views/SetupPageView.vue' ),
             meta: {
                 title: 'Landing page :: Setup - libreevent',
                 setupAuthRequired: true,
@@ -46,7 +46,7 @@ export default {
         {
             path: 'payments',
             name: 'setupPayments',
-            component: () => import( '../views/setup/SetupPaymentsView.vue' ),
+            component: () => import( '../views/SetupPaymentsView.vue' ),
             meta: {
                 title: 'Payments :: Setup - libreevent',
                 setupAuthRequired: true,
@@ -55,7 +55,7 @@ export default {
         {
             path: 'events',
             name: 'setupEvents',
-            component: () => import( '../views/setup/SetupEventsView.vue' ),
+            component: () => import( '../views/SetupEventsView.vue' ),
             meta: {
                 title: 'Events :: Setup - libreevent',
                 setupAuthRequired: true,
@@ -64,7 +64,7 @@ export default {
         {
             path: 'tos',
             name: 'setupTOS',
-            component: () => import( '../views/setup/SetupTOSView.vue' ),
+            component: () => import( '../views/SetupTOSView.vue' ),
             meta: {
                 title: 'TOS (Optional) :: Setup - libreevent',
                 setupAuthRequired: true,
@@ -73,7 +73,7 @@ export default {
         {
             path: 'complete',
             name: 'setupComplete',
-            component: () => import( '../views/setup/SetupCompleteView.vue' ),
+            component: () => import( '../views/SetupCompleteView.vue' ),
             meta: {
                 title: 'Setup complete :: Setup - libreevent',
                 setupAuthRequired: true,

src/webapp/setup/src/stores/backendStore.js

@@ -0,0 +1,26 @@
+/*
+*				libreevent - backendStore.js
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+import { defineStore } from "pinia";
+
+export const useBackendStore = defineStore ( 'backend', {
+    state: () => ( { 'visitedSetupPages': {} } ),
+    getters: {
+        getVisitedSetupPages: ( state ) => state.visitedSetupPages,
+    },
+    actions: { 
+        addVisitedSetupPages ( page, data ) {
+            this.visitedSetupPages[ page ] = data;
+            sessionStorage.setItem( 'visitedSetupPages', JSON.stringify( this.visitedSetupPages ) );
+        },
+        loadVisitedSetupPages () {
+            this.visitedSetupPages = sessionStorage.getItem( 'visitedSetupPages' ) ? JSON.parse( sessionStorage.getItem( 'visitedSetupPages' ) ) : {};
+        }
+    }
+} );

src/webapp/setup/src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

src/webapp/setup/src/views/HomeView.vue

@@ -0,0 +1,51 @@
+<!--
+*				libreevent - HomeView.vue
+*
+*	Created by Janis Hutz 07/17/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
+<template>
+    <div class="home">
+        <img alt="Libreevent logo" src="../assets/logo.png">
+        <h1>Welcome to libreǝvent!</h1>
+        <p>Let's start the setup by entering the setup key below! You may define a setup key in the config file of libreevent. See <a href="https://libreevent.janishutz.com/docs/setup/setup" target="_blank">here</a> for more instructions</p>
+        <form>
+            <label for="key">Your setup key</label><br>
+            <input type="text" v-model="formData[ 'key' ]" required name="key" id="key">
+        </form>
+        <button @click="setup();" class="button">Start setup</button>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                formData: {},
+            }
+        },
+        methods: {
+            setup () {
+                this.$router.push( '/setup' );
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    img {
+        height: 40vh;
+    }
+
+    .home {
+        height: 100vh;
+        width: 100vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+</style>

src/webapp/setup/src/views/SetupCompleteView.vue

@@ -12,7 +12,16 @@
         <img src="@/assets/logo.png" alt="libreevent logo" style="height: 30vh;">
         <h1>Setup complete!</h1>
         <p>Congratulations on finishing the setup of libreǝvent!</p>
-        <p>It is now time to head to the admin panel to add more accounts and to familiarise yourself with the admin portal</p>
+        <p>Please restart the node.js application to have it load the actual user interface for libreevent. You may then log in at <a :href="windowURL" target="_blank">{{ windowURL }}</a></p>
-        <router-link to="/admin">To the admin panel</router-link>
     </div>
 </template>
+
+<script>
+     export default {
+        data () {
+            return {
+                windowURL: location.protocol + '//' + location.host +'/admin/login',
+            }
+        },
+    };
+</script>

src/webapp/setup/src/views/SetupEventsView.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-    import { useBackendStore } from '@/stores/backendStore';
+    import { useBackendStore } from '@/stores/backendStore.js';
     import { mapStores } from 'pinia';
 
     export default {

src/webapp/setup/src/views/SetupPageView.vue

@@ -10,7 +10,7 @@
 <template>
     <div>
         <h1>Landing page</h1>
-        <p>The landing page is the page your customers see when they visit your webpage. You may select a page template <a href="https://libreevent.janishutz.com/docs/homepage/templates">here</a>.</p>
+        <p>The landing page is the page your customers see when they visit your webpage. You may select a page template <a href="https://libreevent.janishutz.com/docs/homepage/templates" target="_blank">here</a>.</p>
         <p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#page-setup" target="_blank">here</a></p>
 
         <label for="template">Choose a template</label><br>
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-    import { useBackendStore } from '@/stores/backendStore';
+    import { useBackendStore } from '@/stores/backendStore.js';
     import { mapStores } from 'pinia';
 
     export default {

src/webapp/setup/src/views/SetupPaymentsView.vue

@@ -10,14 +10,14 @@
 <template>
     <div>
         <h1>Setting up payment methods</h1>
-        <p>You may choose all of the below payment methods, but we recommend to only select one payment gateway for simplicity. Recommended: Either Stripe or Adyen. See the comparison of the different payment methods <a href="https://libreevent.janishutz.com/docs/payments">here</a></p>
+        <p>You may choose all of the below payment methods, but we recommend to only select one payment gateway for simplicity. Recommended: Either Stripe or Adyen. See the comparison of the different payment methods <a href="https://libreevent.janishutz.com/docs/payments" target="_blank">here</a></p>
         <p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#payment-methods" target="_blank">here</a></p>
         <button @click="submit()">Continue</button>
     </div>
 </template>
 
 <script>
-    import { useBackendStore } from '@/stores/backendStore';
+    import { useBackendStore } from '@/stores/backendStore.js';
     import { mapStores } from 'pinia';
 
     export default {

src/webapp/setup/src/views/SetupRootView.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-    import { useBackendStore } from '@/stores/backendStore';
+    import { useBackendStore } from '@/stores/backendStore.js';
     import { mapStores } from 'pinia';
 
     export default {

src/webapp/setup/src/views/SetupStartView.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-    import { useBackendStore } from '@/stores/backendStore';
+    import { useBackendStore } from '@/stores/backendStore.js';
     import { mapStores } from 'pinia';
 
     export default {

src/webapp/setup/src/views/SetupTOSView.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-    import { useBackendStore } from '@/stores/backendStore';
+    import { useBackendStore } from '@/stores/backendStore.js';
     import { mapStores } from 'pinia';
 
     export default {

src/webapp/setup/src/views/SetupView.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-    import { useBackendStore } from '@/stores/backendStore';
+    import { useBackendStore } from '@/stores/backendStore.js';
     import { mapStores } from 'pinia';
 
     export default {

src/webapp/setup/vite.config.js

@@ -11,6 +11,9 @@ export default defineConfig({
     resolve: {
         alias: {
             '@': fileURLToPath( new URL( './src', import.meta.url ) )
-    }
+        },
+    },
+    server: {
+        'port': 8080
     }
 })

src/webapp/src/components/initial.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="home">
-        <img alt="Vue logo" src="../assets/logo.png">
-        <div>
-            <h1>Welcome to libreǝvent!</h1>
-            <p>Let's start the setup by entering the setup key below! You may define a setup key in the config file of libreevent. See <a href="https://libreevent.janishutz.com/docs/setup/setup" target="_blank">here</a> for more instructions</p>
-            <form>
-                <label for="key">Your setup key</label><br>
-                <input type="text" v-model="formData[ 'key' ]" required name="key" id="key">
-            </form>
-            <button @click="setup();" class="button">Start setup</button>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                formData: {},
-            }
-        },
-        methods: {
-            setup () {
-                this.$router.push( '/setup' );
-            }
-        },
-    }
-</script>
-
-<style scoped>
-    img {
-        width: 20%;
-    }
-</style>

src/webapp/src/views/HomeView.vue

@@ -8,12 +8,12 @@
 -->
 
 <template>
-    <initial></initial>
+    <div>
+        <h1>Welcome!</h1>
+    </div>
 </template>
 
 <script>
-    import initial from '@/components/initial.vue';
-
     export default {
         data () {
             return {
@@ -25,8 +25,5 @@
                 
             }
         },
-        components: {
-            initial
-        }
     };
 </script>