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
This commit is contained in:
@@ -51,6 +51,11 @@
|
||||
</exclusion>
|
||||
</exclusions>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-devtools</artifactId>
|
||||
<optional>true</optional>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
|
||||
<build>
|
||||
|
||||
+5
-6
@@ -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!");
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
div.userLogin {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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="input-1">
|
||||
<label for="email_input">
|
||||
<span class="label-text">Adolfinum E-Mail</span>
|
||||
<div class="signup-button-trigger">Sign Up</div>
|
||||
</label>
|
||||
<p class="tip">Press Enter</p>
|
||||
<div class="signup-button">Abstimmen</div>
|
||||
<input class="email_input" id="email_input" type="text" placeholder="name.nachname@adolfinum.de" name="name" required autofocus />
|
||||
<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>
|
||||
Reference in New Issue
Block a user