updated start site

start site has now user and admin login panels
added custom css for start page
dashboard is now splitted in cateogies
implemendet LiveReload
added fallback 'falseInput.html' page

pom.xml

@@ -51,6 +51,11 @@
 				</exclusion>
 			</exclusions>
 		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-devtools</artifactId>
+			<optional>true</optional>
+		</dependency>
 	</dependencies>
 
 	<build>

src/main/java/com/github/cato447/AbizeitungVotingSystem/controller/VotingController.java

@@ -87,9 +87,9 @@ public class VotingController {
                 LOGGER.error(name + " is not allowed to vote");
                 return "errors/notRegistered.html";
             }
+        } else {
+            return "errors/falseInput";
         }
-        LOGGER.error("Wrong input format detected: " + name);
-        return "errors/wrongEmail.html";
     }
 
     @RequestMapping("/processVote")
@@ -99,20 +99,19 @@ public class VotingController {
     }
 
     @RequestMapping("/dashboard")
-    public String AccessDashboard(@RequestParam String name, @RequestParam String password, Model model){
+    public String AccessDashboard(@RequestParam String password, Model model){
         try {
-            if (name.equals("admin")) {
                 if (password.equals("admin")) {
                     List<Voter> voters = voterRepository.findAll();
                     List<Candidate> candidates = candidateRepository.findAll();
+                    List<Category> categories = categoryRepository.findAll();
                     model.addAttribute("voters", voters);
-                    model.addAttribute("candidates", candidates);
+                    model.addAttribute("categories", categories);
                     return "dashboard.html";
                 } else {
                     LOGGER.error("Wrong Password");
                 }
                 LOGGER.error("Wrong Username");
-            }
         } catch (Exception e) {
             LOGGER.fatal("voters table is not existing!");
         }

src/main/resources/static/styles/start.css

@@ -1,150 +1,3 @@
-body {
-    background-color: rgb(44, 49, 54);
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-input {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -300%);
-    display: block;
-    width: 70vw;
-    opacity: 0;
-    pointer-events: none;
-    transition: all .5s cubic-bezier(.4, .25, .8, .3);
-}
-
-input {
-    padding: .25rem 0;
-    border: 0;
-    border-bottom: 1px solid #bb1515;
-    outline: 0;
-    background: transparent;
-    color: #fff;
-    font-size: 3rem;
-    line-height: 4rem;
-    letter-spacing: .125rem;
-    transition: all .5s cubic-bezier(.4, .25, .8, .3);
-}
-
-input::selection {
-    background: rgba(#bb1515, 0.25);
-}
-
-.signup-button {
-    padding: .25em 0;
-    border: 0;
-    border-radius: 12px;
-    outline: 0;
-    background: #bb1515;
-    color: #fff;
-    font-size: 2rem;
-    line-height: 3.6rem;
-    letter-spacing: .0625rem;
-    box-shadow: 0 3px 5px 1px rgba(#000, 0.25);
-    text-shadow: 0 -2px 0 rgba(#000, 0.25), 0 1px 0 rgba(#fff, 0.2);
-}
-
-input:focus,
-button:focus {
-    opacity: 1;
-    transform: translate(-50%, -100%);
-    pointer-events: auto;
-    transition: all .4s cubic-bezier(.1, .45, .1, .85) .5s;
-    z-index: 10;
-}
-
-input:focus~input,
-input:focus~button {
-    transform: translate(-50%, 500%);
-    transition: all .5s ease-in;
-}
-
-input:focus~label .label-text {
-    transform: translate(-50%, 300%);
-    transition: all .5s ease-in;
-}
-
-input:focus~.tip {
-    opacity: 1;
-}
-
-input:focus~.signup-button,
-button:focus~.signup-button {
-    opacity: 0;
-}
-
-input:focus+label .label-text {
-    opacity: 1;
-    transform: translate(-50%, -100%);
-    transition: all .3s cubic-bezier(.1, .45, .1, .85) .4s;
-}
-
-input:focus+label .nav-dot:before {
-    background: darken(#bb1515, 5%);
-    box-shadow: 0 0 0 .15rem #111, 0 0 .05rem .26rem #bb1515;
-}
-
-.tip {
-    position: fixed;
-    top: 57%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 70%;
-    opacity: 0;
-    color: #fff;
-    font-size: .875rem;
-    font-weight: 300;
-    letter-spacing: .125rem;
-    text-transform: uppercase;
-    text-align: right;
-    transition: opacity .25s .5s;
-}
-
-.signup-button,
-.signup-button-trigger {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -100%);
-    width: 70vw;
-    padding: .25rem 0;
-    line-height: 3.6rem;
-    text-align: center;
-    pointer-events: none;
-    cursor: pointer;
-    transition: opacity .4s .3s;
-}
-
-.signup-button-trigger {
-    opacity: 0;
-    pointer-events: auto;
-}
-
-.label-text {
-    position: fixed;
-    top: calc(50% - 4rem);
-    left: 50%;
-    transform: translate(-50%, -300%);
-    width: 70vw;
-    padding: 3.125rem 0 1.5rem;
-    text-transform: uppercase;
-    color: #fff;
-    opacity: 0;
-    font-size: 1.125rem;
-    font-weight: 300;
-    letter-spacing: .125rem;
-    pointer-events: none;
-    transition: all .4s cubic-bezier(.4, .25, .8, .3) .05s;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 html,
 body {
     width: 100%;
@@ -153,8 +6,62 @@ body {
     font-family: 'Lato', sans-serif;
 }
 
-form {
+div.userLogin {
-    width: 100%;
+    position: absolute;
-    height: 100%;
+    left: 50%;
-    overflow: hidden;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+div.adminLogin {
+    position: absolute;
+    right: 10%;
+    bottom: 10%;
+    -webkit-transform: translate(-10%, -10%);
+    transform: translate(-10%, -10%);
+}
+
+input.email_input {
+    background-color: transparent;
+    border: transparent;
+    border-bottom: 2px solid red;
+    color: #FFF;
+    font-size: xx-large;
+    width: fit-content;
+}
+
+input.password_input {
+    background-color: transparent;
+    border: transparent;
+    color: #FFF;
+    font-size: medium;
+    width: fit-content;
+}
+
+label {
+    color: #FFF;
+    display: block;
+}
+
+#signup_button {
+    display: block;
+    margin: auto;
+    padding: .25em 0;
+    border: 0;
+    outline: 0;
+    background: #bb1515;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 2rem;
+    width: 500px;
+    letter-spacing: .0625rem;
+    border-radius: 12px;
+    box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25);
+    text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+@media only screen and (max-device-width: 1024px) {
+    input.email_input {
+        font-size: large;
+    }
 }

src/main/resources/templates/dashboard.html

@@ -36,20 +36,19 @@
         </div>
 
         <h1>Kandidaten Liste</h1>
-        <div class="candidateTable">
+        <div th:each="category : ${categories}" th:id="${category.id}">
+            <h2 th:text="${category.name}"></h2>
             <table class="tableCandidates" border="5">
                 <tr>
                     <th>Id</th>
                     <th>Name</th>
                     <th>Votes</th>
-                    <th>Category</th>
                 </tr>
 
-                <tr th:each="candidate: ${candidates}">
+                <tr th:each="candidate: ${category.candidateList}" th:id="${category.id} + '_' + ${candidate.id}">
                     <td th:text="${candidate.id}"></td>
                     <td th:text="${candidate.name}"></td>
                     <td th:text="${candidate.votes}"></td>
-                    <td th:text="${candidate.category}"></td>
                 </tr>
             </table>
         </div>

src/main/resources/templates/start.html

@@ -5,19 +5,43 @@
     <meta charset="UTF-8">
     <title>Abizeitung 2020/2021 Voting</title>
     <link th:href="@{/styles/start.css}" rel="stylesheet" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
 </head>
 
 <body>
+    <script>
+        window.addEventListener("load", function() {
+            document.getElementById("signup_button").addEventListener("click", test);
+        });
+
+        function test() {
+            let input_field = document.getElementById("email_input");
+            let input = input_field.value;
+            if (!input.match("[a-z]+\\.[a-z]+@adolfinum+\\.de$")) {
+                input_field.value = "";
+                alert("Die Email-Adresse \"" + input + "\" entspricht nicht den Vorgaben");
+            }
+        }
+    </script>
+
+    <div class="userLogin">
         <form action="#" th:action="@{/vote}" method="post">
-        <input id="input-1" type="text" placeholder="name.nachname@adolfinum.de" name="name" required autofocus />
+            <label for="email_input">
-        <label for="input-1">
                 <span class="label-text">Adolfinum E-Mail</span>
-          <div class="signup-button-trigger">Sign Up</div>
             </label>
-        <p class="tip">Press Enter</p>
+            <input class="email_input" id="email_input" type="text" placeholder="name.nachname@adolfinum.de" name="name" required autofocus />
-        <div class="signup-button">Abstimmen</div>
+            <p></p>
+            <button type="submit" id="signup_button">Abstimmen</button>
         </form>
+    </div>
+    <div class="adminLogin">
+        <form action="#" th:action="@{/dashboard}" method="post">
+            <input class="password_input" id="password_input" type="password" placeholder="••••••" name="password" required autofocus />
+            <p></p>
+            <button type="submit" id="login_button">Login</button>
+        </form>
+    </div>
 </body>
 
 </html>