From 170512848280ead860b89572066edb88ab511968 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Thu, 24 Aug 2023 16:12:20 +0200
Subject: [PATCH] start styling setup

---
 src/server/config/settings.config.json        |  2 +-
 src/webapp/setup/src/App.vue                  | 69 ++++++++++------
 src/webapp/setup/src/views/BasicSetupView.vue | 82 ++++++++++---------
 .../setup/src/views/SetupCompleteView.vue     | 37 ++++++---
 src/webapp/setup/src/views/SetupPageView.vue  | 20 +++--
 src/webapp/setup/src/views/SetupRootView.vue  | 42 +++++-----
 src/webapp/setup/src/views/SetupStartView.vue | 16 ++--
 7 files changed, 154 insertions(+), 114 deletions(-)

diff --git a/src/server/config/settings.config.json b/src/server/config/settings.config.json
index 34134b8..14df040 100644
--- a/src/server/config/settings.config.json
+++ b/src/server/config/settings.config.json
@@ -1,5 +1,5 @@
 {
-	"init":true,
+	"init":false,
 	"twoFA":"enforce",
 	"setupKey":"hello world",
 	"twoFAMode":"enhanced",
diff --git a/src/webapp/setup/src/App.vue b/src/webapp/setup/src/App.vue
index a089940..7495848 100644
--- a/src/webapp/setup/src/App.vue
+++ b/src/webapp/setup/src/App.vue
@@ -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>
diff --git a/src/webapp/setup/src/views/BasicSetupView.vue b/src/webapp/setup/src/views/BasicSetupView.vue
index 589db55..7456775 100644
--- a/src/webapp/setup/src/views/BasicSetupView.vue
+++ b/src/webapp/setup/src/views/BasicSetupView.vue
@@ -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>
 
diff --git a/src/webapp/setup/src/views/SetupCompleteView.vue b/src/webapp/setup/src/views/SetupCompleteView.vue
index 5289842..b80360d 100644
--- a/src/webapp/setup/src/views/SetupCompleteView.vue
+++ b/src/webapp/setup/src/views/SetupCompleteView.vue
@@ -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 () {
diff --git a/src/webapp/setup/src/views/SetupPageView.vue b/src/webapp/setup/src/views/SetupPageView.vue
index 35f28db..a36067f 100644
--- a/src/webapp/setup/src/views/SetupPageView.vue
+++ b/src/webapp/setup/src/views/SetupPageView.vue
@@ -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>
 
diff --git a/src/webapp/setup/src/views/SetupRootView.vue b/src/webapp/setup/src/views/SetupRootView.vue
index 61aad6d..544c138 100644
--- a/src/webapp/setup/src/views/SetupRootView.vue
+++ b/src/webapp/setup/src/views/SetupRootView.vue
@@ -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>
 
diff --git a/src/webapp/setup/src/views/SetupStartView.vue b/src/webapp/setup/src/views/SetupStartView.vue
index 11157eb..876fa83 100644
--- a/src/webapp/setup/src/views/SetupStartView.vue
+++ b/src/webapp/setup/src/views/SetupStartView.vue
@@ -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>