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

start styling setup

Browse Source
This commit is contained in:
Janis Hutz
2023-08-24 16:12:20 +02:00
parent fa5d53aef4
commit 1705128482
7 changed files with 154 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/server/config/settings.config.json
View File

@@ -1,5 +1,5 @@
{
"init":true,
"init":false,
"twoFA":"enforce",
"setupKey":"hello world",
"twoFAMode":"enhanced",

69
src/webapp/setup/src/App.vue
View File

@@ -7,7 +7,7 @@
</template>
<style>
:root, :root.light {
:root {
--primary-color: #2c3e50;
--accent-background: rgb(30, 30, 82);
--secondary-color: white;
@@ -23,21 +23,6 @@
--PI: 3.14159265358979;
}
:root.dark {
--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);
}
@media ( prefers-color-scheme: dark ) {
:root {
--primary-color: white;
@@ -60,16 +45,6 @@
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%;
@@ -136,6 +111,48 @@
.clr-open {
border: black solid 1px !important;
}
.button {
margin-top: 2%;
background: linear-gradient(90deg, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214), rgb(30, 36, 131), rgb(41, 128, 109), rgb(146, 50, 47));
background-size: 300px;
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
transition: all 3s;
font-size: 75%;
color: white;
margin-bottom: 5vh;
font-size: 125%;
}
.button:hover {
background-size: 200%;
background-position: -100%;
}
input {
width: 50%;
padding: 10px;
border-radius: 500px;
border-style: solid;
text-align: center;
margin-bottom: 20px;
}
.wrapper {
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content {
width: 60vw;
font-size: 110%;
}
</style>
<script>

82
src/webapp/setup/src/views/BasicSetupView.vue
View File

@@ -8,46 +8,48 @@
-->
<template>
<div>
<h1>Basic Setup</h1>
<p>To make setting up the database and email accounts easier, you can enter the required values below.</p>
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#basic-setup" target="_blank">here</a></p>
<h2>Database</h2>
<p>A database is a piece of software that specializes in storing data. libreevent can use most SQL based databases as well as a custom JSON-based database. You are strongly encouraged to use a SQL based database, as they perform significantly better. Read more
<a href="https://libreevent.janishutz.com/docs/setup/installation#database">here</a>
</p>
<form>
<label for="host">Database host name</label><br>
<input type="url" name="host" id="host"><br>
<label for="database">Database name</label><br>
<input type="text" name="database" id="database"><br>
<label for="user">Database user</label><br>
<input type="text" name="user" id="user"><br>
<label for="password">Password</label><br>
<input type="password" name="password" id="password"><br>
<label for="port">Database port (default usually fine)</label><br>
<input type="number" name="port" id="port" min="1" value="3306" max="65535"><br>
</form>
<h2>Email</h2>
<h3>Account</h3>
<form>
<label for="host">SMTP Server</label><br>
<input type="url" name="host" id="host"><br>
<label for="port">SMTP Port (default usually fine)</label><br>
<input type="number" name="port" id="port" value="587" min="1" max="65535"><br>
<label for="user">Email account name</label><br>
<input type="email" name="user" id="user"><br>
<label for="pass">Password</label><br>
<input type="password" name="pass" id="pass"><br>
</form>
<h3>Display</h3>
<form>
<label for="display">Display name (what is shown to user in from field)</label><br>
<input type="url" name="display" id="display"><br>
<label for="dpEmail">Email address to show</label><br>
<input type="text" name="dpEmail" id="dpEmail"><br>
</form>
<button @click="submit()">Continue</button>
<div class="wrapper">
<div class="content">
<h1>Basic Setup</h1>
<p>To make setting up the database and email accounts easier, you can enter the required values below.</p>
<p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#basic-setup" target="_blank">here</a></p>
<h2>Database</h2>
<p>A database is a piece of software that specializes in storing data. libreevent can use most SQL based databases as well as a custom JSON-based database. You are strongly encouraged to use a SQL based database, as they perform significantly better. Read more
<a href="https://libreevent.janishutz.com/docs/setup/installation#database">here</a>
</p>
<form>
<label for="host">Database host name</label><br>
<input type="url" name="host" id="host"><br>
<label for="database">Database name</label><br>
<input type="text" name="database" id="database"><br>
<label for="user">Database user</label><br>
<input type="text" name="user" id="user"><br>
<label for="password">Password</label><br>
<input type="password" name="password" id="password"><br>
<label for="port">Database port (default usually fine)</label><br>
<input type="number" name="port" id="port" min="1" value="3306" max="65535"><br>
</form>
<h2>Email</h2>
<h3>Account</h3>
<form>
<label for="host">SMTP Server</label><br>
<input type="url" name="host" id="host"><br>
<label for="port">SMTP Port (default usually fine)</label><br>
<input type="number" name="port" id="port" value="587" min="1" max="65535"><br>
<label for="user">Email account name</label><br>
<input type="email" name="user" id="user"><br>
<label for="pass">Password</label><br>
<input type="password" name="pass" id="pass"><br>
</form>
<h3>Display</h3>
<form>
<label for="display">Display name (what is shown to user in from field)</label><br>
<input type="url" name="display" id="display"><br>
<label for="dpEmail">Email address to show</label><br>
<input type="text" name="dpEmail" id="dpEmail"><br>
</form>
<button @click="submit()" class="button">Continue</button>
</div>
</div>
</template>

37
src/webapp/setup/src/views/SetupCompleteView.vue
View File

@@ -8,20 +8,35 @@
-->
<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>Please restart the node.js application to have it load the actual user interface for libreevent and finish setup. You may then log in at <a :href="windowURL" target="_blank">{{ windowURL }}</a></p>
<p>In the admin panel, there are a few things you still need to change. You may find a list of all things <a href="https://libreevent.janishutz.com/docs/setup/afterSetup" target="_blank">here</a></p>
<ul>
<li>Choose a payment gateway and set it up</li>
<li>Create a event location and an event</li>
<li>Create other admin accounts with less privileges</li>
</ul>
<div class="wrapper">
<div class="content">
<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>Please restart the node.js application to have it load the actual user interface for libreevent and finish setup. You may then log in at <a :href="windowURL" target="_blank">{{ windowURL }}</a>. You may open that link now and then come back to that page once libreevent is restarted.</p>
<p>In the admin panel, there are a few things you still need to change. You may find a list of all things <a href="https://libreevent.janishutz.com/docs/setup/afterSetup" target="_blank">here</a></p>
<div class="list-wrapper">
<ul>
<li>Choose a payment gateway and set it up</li>
<li>Create a event location and an event</li>
<li>Create other admin accounts with less privileges</li>
</ul>
</div>
</div>
</div>
</template>
<style scoped>
ul {
text-align: justify;
}
.list-wrapper {
display: flex;
justify-content: center;
}
</style>
<script>
export default {
data () {

20
src/webapp/setup/src/views/SetupPageView.vue
View File

@@ -8,17 +8,19 @@
-->
<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" 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>
<div class="wrapper">
<div class="content">
<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" 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>
<select name="template" id="template" v-for="option in options">
<option :value="option.id">{{ option.name }}</option>
</select><br>
<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>
<button @click="submit()" class="button">Continue</button>
</div>
</div>
</template>

42
src/webapp/setup/src/views/SetupRootView.vue
View File

@@ -8,26 +8,28 @@
-->
<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="password" name="password" id="password"><br>
<label for="password2">Confirm password</label><br>
<input type="password" name="password2" id="password2">
</form>
<button @click="submit()">Continue</button>
<div class="wrapper">
<div class="content">
<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="password" name="password" id="password"><br>
<label for="password2">Confirm password</label><br>
<input type="password" name="password2" id="password2">
</form>
<button @click="submit()" class="button">Continue</button>
</div>
</div>
</template>

16
src/webapp/setup/src/views/SetupStartView.vue
View File

@@ -8,13 +8,15 @@
-->
<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>
<button @click="setup();">Start setup</button>
<div class="wrapper">
<div class="content">
<img src="@/assets/logo.png" alt="libreevent logo" style="height: 40vh;">
<h1 class="title">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 do the setup (and all administrative tasks for that matter) on a PC and 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>
<button @click="setup();" class="button">Start setup</button>
</div>
</div>
</template>