possibly final commit to this branch

This commit is contained in:
2023-04-07 16:18:21 +02:00
parent 8728e9b9c5
commit 9e76e0b4b5
22 changed files with 249 additions and 7 deletions

View File

@@ -9,7 +9,7 @@
const path = require( 'path' ); const path = require( 'path' );
const pwdmanager = require( './pwdmanager.js' ); const pwdmanager = require( './pwdmanager.js' );
const fs = require( 'fs' );
module.exports = ( app, settings ) => { module.exports = ( app, settings ) => {
/* /*
@@ -27,6 +27,12 @@ module.exports = ( app, settings ) => {
response.sendFile( path.join( __dirname + '/ui/js/loginLangPack.js' ) ); response.sendFile( path.join( __dirname + '/ui/js/loginLangPack.js' ) );
} ); } );
app.get( '/admin/js/:file', ( request, response ) => {
if ( request.session.loggedIn ) {
response.sendFile( path.join( __dirname + '/ui/js/' + request.params.file ) );
}
} );
app.get( '/admin/css/:file', ( request, response ) => { app.get( '/admin/css/:file', ( request, response ) => {
response.sendFile( path.join( __dirname + '/ui/css/' + request.params.file ) ); response.sendFile( path.join( __dirname + '/ui/css/' + request.params.file ) );
} ); } );
@@ -72,6 +78,17 @@ module.exports = ( app, settings ) => {
} }
} ); } );
/*
Send admin panel modules to UI as UI uses Vue.js Router
*/
app.get( '/admin/panel/modules', ( request, response ) => {
let panelModules = { 'home': fs.readFileSync( path.join( __dirname + '/ui/panel/home.html' ) ).toString() };
if ( request.session.loggedIn ) {
response.send( panelModules );
}
} );
app.get( '/admin/setup', ( request, response ) => { app.get( '/admin/setup', ( request, response ) => {
if ( request.session.loggedIn ) { if ( request.session.loggedIn ) {
response.sendFile( path.join( __dirname + '/ui/setup.html' ) ); response.sendFile( path.join( __dirname + '/ui/setup.html' ) );

View File

@@ -0,0 +1,72 @@
:root, :root.light {
--background-color: rgb(202, 223, 255);
--secondary-background: white;
--primary-color: black;
--primary-inverse: white;
--secondary-color: blue;
--secondary-hover: darkblue;
}
:root.dark {
--background-color: rgb(42, 44, 56);
--secondary-background: rgb(19, 20, 32);
--primary-color: white;
--primary-inverse: black;
--secondary-color: rgb(94, 94, 226);
--secondary-hover: rgb(155, 155, 255);
}
@media ( prefers-color-scheme: dark ) {
:root {
--background-color: rgb(42, 44, 56);
--secondary-background: rgb(19, 20, 32);
--primary-color: white;
--secondary-color: rgb(94, 94, 226);
--secondary-hover: rgb(155, 155, 255);
}
}
body {
background-color: var(--background-color);
font-family: sans-serif;
font-size: calc(12pt + 0.35vw);
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
text-decoration: none;
color: white;
background-color: var(--secondary-color);
padding: 15px;
border-radius: 30px;
transition: 1s;
cursor: pointer;
}
.button:hover {
transition: ease-in-out 0.2s;
color: var(--primary-inverse);
background-color: var(--secondary-hover);
border-radius: 5px;
}
.input {
padding: 1%;
width: 80%;
margin-bottom: 3%;
border-radius: 10px;
}
.selector {
background-color: lightblue;
border-radius: 20px;
padding: 0.5%;
border-style: solid;
border-color: blue;
}

View File

@@ -0,0 +1,35 @@
/* eslint-disable no-undef */
fetch( '/admin/panel/modules' ).then( res => {
res.json().then( data => {
const Home = { template: data[ 'home' ] };
const About = { template: '<div>About</div>' };
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = VueRouter.createRouter( {
history: VueRouter.createWebHashHistory(),
routes,
} );
const app = Vue.createApp( {
data() {
return {
};
},
watch: {
$route ( to, from ) {
console.log( 'changing route' );
}
},
} );
app.use( router );
app.mount( '#app' );
} );
} );

View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/admin/css/style.css">
<title>Admin panel :: myevent</title>
</head>
<body>
<div id="top">
<select name="lang" id="lang" class="selector" onchange="changeLang();">
<option value="en">English</option>
<option value="de">Deutsch</option>
</select>
<select name="theme" id="theme" class="selector" onchange="toggleTheme();">
<option value="system">System theme</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<div id="content">
<router-view></router-view>
</div>
</div>
<!-- Load vue.js and app -->
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="/admin/js/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let themeSelector = document.getElementById( 'theme' );
if ( sessionStorage.getItem( 'theme' ) ) {
themeSelector.value = sessionStorage.getItem( 'theme' );
}
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || themeSelector.value === 'dark' ) {
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
};
setTimeout( activate, 500 );
function activate () {
$( 'body' ).css( 'transition', '0.5s' );
}
function toggleTheme () {
sessionStorage.setItem( 'theme', themeSelector.value );
if ( themeSelector.value === 'dark' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else if ( themeSelector.value === 'light' ) {
document.documentElement.classList.remove( 'dark' );
document.documentElement.classList.add( 'light' );
} else if ( themeSelector.value === 'system' ) {
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.remove( 'dark' );
document.documentElement.classList.add( 'light' );
}
}
}
</script>
</body>
</html>

View File

View File

View File

@@ -0,0 +1,3 @@
<div>
Hello World!
</div>

View File

View File

View File

View File

@@ -107,7 +107,6 @@
<button class="button" style="margin-bottom: 1.5%; margin-top: 2%;">Preview</button> <button class="button" style="margin-bottom: 1.5%; margin-top: 2%;">Preview</button>
<button class="button" style="margin-bottom: 3%;">Continue</button> <button class="button" style="margin-bottom: 3%;">Continue</button>
</div> </div>
</div> </div>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

View File

@@ -16,12 +16,13 @@ const bodyParser = require( 'body-parser' );
const cookieParser = require( 'cookie-parser' ); const cookieParser = require( 'cookie-parser' );
const favicon = require( 'serve-favicon' ); const favicon = require( 'serve-favicon' );
const http = require( 'http' ); const http = require( 'http' );
const serveStatic = require( 'serve-static' );
// const env = process.env.PROD || false; // const env = process.env.PROD || false;
const root = process.env.ROOT || '/order'; const root = process.env.ROOT || '/order';
const settings = fs.readFileSync( path.join( __dirname + '/config.json' ) ); const settings = JSON.parse( fs.readFileSync( path.join( __dirname + '/config.json' ) ) );
// initialise express with middlewares // initialise express with middlewares
@@ -35,6 +36,7 @@ app.use( bodyParser.urlencoded( { extended: false } ) );
app.use( bodyParser.json() ); app.use( bodyParser.json() );
app.use( cookieParser() ); 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' ) );
require( './admin/routes.js' )( app, settings ); // admin route require( './admin/routes.js' )( app, settings ); // admin route

View File

@@ -1,3 +1,3 @@
{ {
"init":false "init":true
} }

View File

@@ -14,7 +14,8 @@
"cookie-parser": "^1.4.6", "cookie-parser": "^1.4.6",
"express": "^4.18.2", "express": "^4.18.2",
"express-session": "^1.17.3", "express-session": "^1.17.3",
"serve-favicon": "^2.5.0" "serve-favicon": "^2.5.0",
"serve-static": "^1.15.0"
}, },
"devDependencies": { "devDependencies": {
"acorn": "^8.8.2", "acorn": "^8.8.2",

View File

@@ -46,7 +46,8 @@
"cookie-parser": "^1.4.6", "cookie-parser": "^1.4.6",
"express": "^4.18.2", "express": "^4.18.2",
"express-session": "^1.17.3", "express-session": "^1.17.3",
"serve-favicon": "^2.5.0" "serve-favicon": "^2.5.0",
"serve-static": "^1.15.0"
}, },
"scripts": { "scripts": {
"test": "test.js" "test": "test.js"

View File

@@ -1,2 +1,2 @@
# How it works # How it works
This page gives you a somewhat detailed overview on how the system operates. Note that this page is not made with user-legibility in mind, as this page is oriented to give possible contributors an introduction to the project to help them getting started. This page gives you a somewhat detailed overview on how the system operates. Note that this page is not made with user-legibility in mind, as this page is oriented to give possible contributors an introduction to the project to help them getting started. Therefore we expect you to have quite decent understanding of the underlying programming languages and concepts.

View File

@@ -0,0 +1,35 @@
# Setup of myevent
At this point we assume you've completed the initial install of myevent. If not, you may find a guide on how to do it [here](/setup/getting-started). Let's get started setting up your event management system!
## Connecting to the server
As discussed in the previous part where we installed the system, you can connect to your server simply by opening a web browser and typing your domain name into the address field. After that you should be greeted by the myevent post-install landing page. Please click onto the button saying 'To the admin panel' and log in with the following credentials:
Username: setup
Password: myevent-setup
*Note: This is only available during the setup process of myevent and will afterwards be deactivated to ensure safety of the system.*
## Setting up the root account
This is the most powerful account in this system. From it you can control EVERY aspect of your system.
**Remark: You may (and definitely should) add other accounts with less privileges after completing setup and only use the root account when it is actually necessary**
Please choose an email address to which you want to link the root account. Two-Factor-Authentication is ALWAYS required when logging into an account that has root privileges to ensure a higher degree of security, so please ensure you have access to that email address at all times.
When choosing a password, please ensure it meets the minimum requirements of the system or let the system generate one for you by clicking the 'generate password' button, which will generate a password that fulfills all requirements and exceeds the minimum requirements for password length. In the table below, you may see all the password requirements:
Factor | Requirement
--------------------|--------------------------------------------------
Length | At least 15 characters
Special characters | At least 2 required
Numbers | At least 2 required
Upper / Lower case | At least 2 upper & 2 lower case letters required
Please avoid using easy to guess combinations like names & birth dates of you or your relatives, zip codes & cities and obvious words like 'password', 'myevent', 'admin', 'root' and your organisation / event's name.
## Page setup
After having set up the root account and confirmed the email address, it is now time to set the name of the webpage. For this, you'll need to enter your organisation's name and choose the offered languages. Note that for every language you select, you need to add a promotional text if you choose to add a homepage. If you selected a homepage, you have to insert a promotional text and you have to select a homepage-template from one that is available [here](/homepage/templates). You also have to upload some images at this stage.
## Payment methods
Now it is time to set up some payment methods. You may find advantages / disadvantages of each payment gateway [here](/payments). It is advised to only choose one payment gateway which provides lots of different payment options, but cost of usage can also be a factor to consider. You may add more payment options by downloading a plugin through the plugin installer in the admin panel.