janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-26 13:54:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

separate setup from main page for faster load

Browse Source
This commit is contained in:
Janis Hutz
2023-07-17 15:43:25 +02:00
parent b30a3226a5
commit 7f08269796
30 changed files with 2441 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/webapp/setup/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,11 @@
/* eslint-env node */
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

28
src/webapp/setup/.gitignore vendored Normal file
View File

@@ -0,0 +1,28 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

35
src/webapp/setup/README.md Normal file
View File

@@ -0,0 +1,35 @@
# libreevent-setup
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

13
src/webapp/setup/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2025
src/webapp/setup/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
src/webapp/setup/package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "libreevent-setup",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"pinia": "^2.1.3",
"vue": "^3.3.4",
"vue-router": "^4.2.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"eslint": "^8.39.0",
"eslint-plugin-vue": "^9.11.0",
"vite": "^4.3.9"
}
}

BIN
src/webapp/setup/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

85
src/webapp/setup/src/App.vue Normal file
View File

@@ -0,0 +1,85 @@
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
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;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
}
</style>

73
src/webapp/setup/src/assets/base.css Normal file
View File

@@ -0,0 +1,73 @@
/* 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;
}

1
src/webapp/setup/src/assets/logo.svg Normal file
View File

@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

35
src/webapp/setup/src/assets/main.css Normal file
View File

@@ -0,0 +1,35 @@
@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;
}
}

14
src/webapp/setup/src/main.js Normal file
View File

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

23
src/webapp/setup/src/router/index.js Normal file
View File

@@ -0,0 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
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')
}
]
})
export default router

83
src/webapp/setup/src/router/setupRoutes.js Normal file
View File

@@ -0,0 +1,83 @@
/*
* libreevent - setupRoutes.js
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
export default {
path: '/setup',
name: 'setup',
component: () => import( '../views/setup/SetupView.vue' ),
meta: {
title: 'Login :: Admin - libreevent',
setupAuthRequired: true,
},
children: [
{
path: '',
name: 'setupStart',
component: () => import( '../views/setup/SetupStartView.vue' ),
meta: {
title: 'Start :: Setup - libreevent',
setupAuthRequired: true,
}
},
{
path: 'root',
name: 'setupRoot',
component: () => import( '../views/setup/SetupRootView.vue' ),
meta: {
title: 'Root account :: Setup - libreevent',
setupAuthRequired: true,
}
},
{
path: 'page',
name: 'setupPage',
component: () => import( '../views/setup/SetupPageView.vue' ),
meta: {
title: 'Landing page :: Setup - libreevent',
setupAuthRequired: true,
}
},
{
path: 'payments',
name: 'setupPayments',
component: () => import( '../views/setup/SetupPaymentsView.vue' ),
meta: {
title: 'Payments :: Setup - libreevent',
setupAuthRequired: true,
}
},
{
path: 'events',
name: 'setupEvents',
component: () => import( '../views/setup/SetupEventsView.vue' ),
meta: {
title: 'Events :: Setup - libreevent',
setupAuthRequired: true,
}
},
{
path: 'tos',
name: 'setupTOS',
component: () => import( '../views/setup/SetupTOSView.vue' ),
meta: {
title: 'TOS (Optional) :: Setup - libreevent',
setupAuthRequired: true,
}
},
{
path: 'complete',
name: 'setupComplete',
component: () => import( '../views/setup/SetupCompleteView.vue' ),
meta: {
title: 'Setup complete :: Setup - libreevent',
setupAuthRequired: true,
}
},
]
}

12
src/webapp/setup/src/stores/counter.js Normal file
View File

@@ -0,0 +1,12 @@
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 }
})

18
src/webapp/setup/src/views/SetupCompleteView.vue Normal file
View File

@@ -0,0 +1,18 @@
<!--
* libreevent - SetupCompleteView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<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>
<router-link to="/admin">To the admin panel</router-link>
</div>
</template>

39
src/webapp/setup/src/views/SetupEventsView.vue Normal file
View File

@@ -0,0 +1,39 @@
<!--
* libreevent - SetupEventsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h1>Events</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 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 { mapStores } from 'pinia';
export default {
data () {
return {
formData: {}
}
},
computed: {
...mapStores( useBackendStore )
},
methods: {
submit () {
this.backendStore.addVisitedSetupPages( 'complete', true );
this.$router.push( '/setup/tos' );
}
},
};
</script>

45
src/webapp/setup/src/views/SetupPageView.vue Normal file
View File

@@ -0,0 +1,45 @@
<!--
* libreevent - SetupPageView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<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>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>
<select name="template" id="template" v-for="option in options">
<option :value="option.id">{{ option.name }}</option>
</select><br>
<button @click="submit()">Continue</button>
</div>
</template>
<script>
import { useBackendStore } from '@/stores/backendStore';
import { mapStores } from 'pinia';
export default {
data () {
return {
options: { 'default': { 'id': 'default', 'name': 'Default' }},
}
},
computed: {
...mapStores( useBackendStore )
},
methods: {
submit () {
this.backendStore.addVisitedSetupPages( 'events', true );
this.$router.push( '/setup/payments' );
}
},
};
</script>

39
src/webapp/setup/src/views/SetupPaymentsView.vue Normal file
View File

@@ -0,0 +1,39 @@
<!--
* libreevent - SetupPaymentsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<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 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 { mapStores } from 'pinia';
export default {
data () {
return {
formData: {}
}
},
computed: {
...mapStores( useBackendStore )
},
methods: {
submit () {
this.backendStore.addVisitedSetupPages( 'tos', true );
this.$router.push( '/setup/events' );
}
},
};
</script>

54
src/webapp/setup/src/views/SetupRootView.vue Normal file
View File

@@ -0,0 +1,54 @@
<!--
* libreevent - SetupRootView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h1>Root account</h1>
<p>The root account is the most powerful account. Therefore, it should only be used if really necessary and should have a strong password. It also always requires Two Factor Authentication for added security. You may log into the root account by typing 'root' into the Email/Username field on the admin login screen.</p>
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#root-account" target="_blank">here</a></p>
<p>Password requirements:</p>
<ul style="list-style: none;">
<li>At least 15 characters long</li>
<li>At least 2 special characters</li>
<li>At least 2 numbers</li>
<li>At least 2 lower and 2 upper case letters</li>
</ul>
<form>
<label for="mail">Email address for 2FA</label><br>
<input type="email" name="mail" id="mail"><br>
<label for="password">Password</label><br>
<input type="email" name="password" id="password"><br>
<label for="password2">Confirm password</label><br>
<input type="email" name="password2" id="password2">
</form>
<button @click="submit()">Continue</button>
</div>
</template>
<script>
import { useBackendStore } from '@/stores/backendStore';
import { mapStores } from 'pinia';
export default {
data () {
return {
formData: {}
}
},
computed: {
...mapStores( useBackendStore )
},
methods: {
submit () {
this.backendStore.addVisitedSetupPages( 'payments', true );
this.$router.push( 'page' );
}
},
};
</script>

40
src/webapp/setup/src/views/SetupStartView.vue Normal file
View File

@@ -0,0 +1,40 @@
<!--
* libreevent - SetupStartView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<img src="@/assets/logo.png" alt="libreevent logo" style="height: 30vh;">
<h1>Welcome to libreǝvent!</h1>
<i style="font-size: small;">All links during setup open in separate tabs</i>
<p>Thank you for downloading libreǝvent, the free & open source event management solution. libreǝvent aims to help you save both time and money when hosting events, so you can focus on what really matters.</p>
<p>Let's start by setting it up. We strongly encourage you to also have a look at the extensive documentation of the setup process <a href="https://libreevent.janishutz.com/docs/setup/setup" target="_blank">here</a></p>
<router-link to="/setup/root" @click="setup();">Start setup</router-link>
</div>
</template>
<script>
import { useBackendStore } from '@/stores/backendStore';
import { mapStores } from 'pinia';
export default {
data () {
return {
formData: {}
}
},
computed: {
...mapStores( useBackendStore )
},
methods: {
setup () {
this.backendStore.addVisitedSetupPages( 'page', true );
}
},
};
</script>

38
src/webapp/setup/src/views/SetupTOSView.vue Normal file
View File

@@ -0,0 +1,38 @@
<!--
* libreevent - SetupTOSView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h3>Setting up TOS (optional)</h3>
<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 { mapStores } from 'pinia';
export default {
data () {
return {
formData: {}
}
},
computed: {
...mapStores( useBackendStore )
},
methods: {
submit () {
this.$router.push( '/setup/complete' );
}
},
};
</script>

76
src/webapp/setup/src/views/SetupView.vue Normal file
View File

@@ -0,0 +1,76 @@
<!--
* libreevent - SetupView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<nav class="setup-nav">
<router-link to="/setup">Start</router-link> |
<router-link to="/setup/root" @click="unlock( 'page' )">Root account</router-link> |
<router-link to="/setup/page" v-if="backendStore.getVisitedSetupPages[ 'page' ]" @click="unlock( 'payments' )">Landing page</router-link>
<a v-else class="inactive">Landing page</a> |
<router-link to="/setup/payments" v-if="backendStore.getVisitedSetupPages[ 'payments' ]" @click="unlock( 'events' )">Payments</router-link>
<a v-else class="inactive">Payments</a> |
<router-link to="/setup/events" v-if="backendStore.getVisitedSetupPages[ 'events' ]" @click="unlock( 'tos' )">Events</router-link>
<a v-else class="inactive">Events</a> |
<router-link to="/setup/tos" v-if="backendStore.getVisitedSetupPages[ 'tos' ]" @click="unlock( 'complete' )">TOS</router-link>
<a v-else class="inactive">TOS</a> |
<router-link to="/setup/complete" v-if="backendStore.getVisitedSetupPages[ 'complete' ]">Complete</router-link>
<a v-else class="inactive">Complete</a>
</nav>
<div class="main-view">
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'scale'" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</template>
<script>
import { useBackendStore } from '@/stores/backendStore';
import { mapStores } from 'pinia';
export default {
data () {
return {
formData: {}
}
},
computed: {
...mapStores( useBackendStore )
},
created () {
this.backendStore.loadVisitedSetupPages();
},
methods: {
unlock ( page ) {
this.backendStore.addVisitedSetupPages( page, true );
}
}
};
</script>
<style scoped>
.inactive {
color: var( --inactive-color );
cursor: not-allowed;
}
.setup-nav {
display: block;
}
</style>
<style>
nav {
display: none;
}
</style>

16
src/webapp/setup/vite.config.js Normal file
View File

@@ -0,0 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})