Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added login page and functionality

Browse Source
This commit is contained in:
Jan Dickmann 2024-06-27 18:44:55 +02:00
parent 2f6a42d39a
commit 46f5979aef
5 changed files with 143 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
slaeforms/app.py
View File

@ -40,6 +40,7 @@ app.secret_key = b"29fe9e8edd407c5491d4f1c05632d9fa33e26ed8734a3f5e080ebac3772a5
UPLOAD_FOLDER = 'uploads'
EXPORT_FOLDER = 'exports'
PASSWORD = '#1ACGmsjd'
#csrf = CSRFProtect(app) #enable CSRF protection globally
@ -569,6 +570,22 @@ def show_tables():
# Root page -----------------------------
@app.route("/login", methods=["GET","POST"])
def login():
if request.method == "POST":
if request.form["password"] == PASSWORD:
session["logged_in"] = True
return redirect("/")
return render_template("login.html")
@app.route("/logout")
def logout():
session["logged_in"] = False
return redirect("/")
def has_no_empty_params(rule):
defaults = rule.defaults if rule.defaults is not None else ()
arguments = rule.arguments if rule.arguments is not None else ()

144
slaeforms/static/styles.css
View File

@ -1,5 +1,3 @@
body {
margin: 0;
background-color: #a4b5ff;
@ -18,7 +16,7 @@ dialog {
width: 66%;
}
dialog .iframe-container{
dialog .iframe-container {
border-top: 1px solid #ccc;
margin-top: 20px;
}
@ -41,7 +39,8 @@ dialog .iframe-container{
padding: 8px;
position: fixed;
top: 30px;
left: min(calc(66vw + 30px + 34vw / 2),calc(1720px + calc(100vw - 1690px) / 2)); /*first is the normal case, second if 66vw is more than 1690 */
left: min(calc(66vw + 30px + 34vw / 2), calc(1720px + calc(100vw - 1690px) / 2));
/*first is the normal case, second if 66vw is more than 1690 */
}
.infoButtonIcon {
@ -50,16 +49,47 @@ dialog .iframe-container{
}
.login-container {
width: 300px;
background: #6cd1e1;
border-radius: 10px;
padding: 10px;
align-content: center;
margin-top: 40vh;
margin-left: auto;
margin-right: auto;
margin-bottom: 50vh;
text-align: center;
}
.login-elements {
display: inline-block;
width: 90%;
}
#loginbutton {
cursor: pointer;
padding: 12px 24px;
/* Increased padding for a bigger button */
font-size: 25px;
/* Increased font size */
border: none;
/* Removes default border */
border-radius: 8px;
/* Optional: rounds the corners of the button */
}
.container {
margin: 0 auto;
/* height: 100vh;*/
width: 66vw; /* You can adjust this width as needed */
max-width: 1690px; /* Maximum width to keep it from getting too wide on large screens */
width: 66vw;
/* You can adjust this width as needed */
max-width: 1690px;
/* Maximum width to keep it from getting too wide on large screens */
padding: 20px;
background-color: #7b8cdb; /* Just for visual differentiation */
background-color: #7b8cdb;
/* Just for visual differentiation */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@ -101,10 +131,12 @@ select {
.button-container input {
display: block;
width: 100%;
margin-top: 30px; /* Adjust as needed for spacing */
margin-top: 30px;
/* Adjust as needed for spacing */
margin-right: 0;
margin-left: auto;
}
.button-container {
margin: 0 auto;
width: 60%;
@ -117,14 +149,20 @@ select {
#submitbutton {
cursor: pointer;
padding: 12px 24px; /* Increased padding for a bigger button */
font-size: 25px; /* Increased font size */
border: none; /* Removes default border */
border-radius: 8px; /* Optional: rounds the corners of the button */
padding: 12px 24px;
/* Increased padding for a bigger button */
font-size: 25px;
/* Increased font size */
border: none;
/* Removes default border */
border-radius: 8px;
/* Optional: rounds the corners of the button */
width: auto;
}
#submitbutton:hover {
background-color: #0056b3; /* Darker shade for hover effect */
background-color: #0056b3;
/* Darker shade for hover effect */
}
@ -132,13 +170,15 @@ select {
margin: auto;
width: 60%;
}
.textarea-container textarea{
.textarea-container textarea {
width: 100%;
margin: 1.5rem auto;
}
.textarea-label{
align-self: flex-start; /* Aligns the label to the start of the container */
.textarea-label {
align-self: flex-start;
/* Aligns the label to the start of the container */
}
/* Helper */
@ -151,7 +191,8 @@ select {
text-align: center;
}
h2,h3 {
h2,
h3 {
text-align: center;
}
@ -160,7 +201,7 @@ h2,h3 {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
}
.compressWidth {
width: 60%;
@ -170,8 +211,10 @@ h2,h3 {
/* Video recording controls */
.videocontrols {
width: 100px; /* Set a specific width for the buttons */
height: 70px; /* Set a specific height for the buttons */
width: 100px;
/* Set a specific width for the buttons */
height: 70px;
/* Set a specific height for the buttons */
background-color: #cae4ff;
border: none;
color: white;
@ -180,9 +223,12 @@ h2,h3 {
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
display: inline-flex; /* Display button contents as a flexbox */
justify-content: center; /* Center contents horizontally */
align-items: center; /* Center contents vertically */
display: inline-flex;
/* Display button contents as a flexbox */
justify-content: center;
/* Center contents horizontally */
align-items: center;
/* Center contents vertically */
text-align: center;
}
@ -191,9 +237,12 @@ h2,h3 {
max-height: 65%;
text-align: center;
margin: auto;
width: auto; /* Make the image fill its container */
height: auto; /* Make the image fill its container */
display: block; /* Remove any extra space around the image */
width: auto;
/* Make the image fill its container */
height: auto;
/* Make the image fill its container */
display: block;
/* Remove any extra space around the image */
}
.columncontainer {
@ -204,21 +253,24 @@ h2,h3 {
width: 100%;
border: 3px solid black;
}
.columnright {
width: 100%;
border: 3px solid black;
}
/* Video recording video and youtube iframe */
video { /* Video should not be bigger than 100% */
video {
/* Video should not be bigger than 100% */
max-width: 100%;
width: auto;
height: auto;
margin: auto auto;
}
iframe { /* center the iframe, mostly unnecessary */
display:block;
iframe {
/* center the iframe, mostly unnecessary */
display: block;
}
.iframe-container iframe {
@ -231,14 +283,16 @@ iframe { /* center the iframe, mostly unnecessary */
.iframe-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
}
.video-container {
max-width: 100%;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
overflow: hidden;
}
@ -249,9 +303,9 @@ iframe { /* center the iframe, mostly unnecessary */
-webkit-transform: rotateY(180deg);
/* Firefox */
-moz-transform: rotateY(180deg);
}
}
/* Double Video */
/* Double Video */
.dv_button {
display: inline-block;
width: 10%;
@ -259,11 +313,13 @@ iframe { /* center the iframe, mostly unnecessary */
margin: auto 10px;
text-align: center;
}
.dv_half {
display: inline-block;
width: 45%;
margin: auto;
}
.double_video_container {
width: 100%;
display: flex;
@ -292,10 +348,11 @@ iframe { /* center the iframe, mostly unnecessary */
aspect-ratio: 1.5 / 1;
}
.likercontainer{
.likercontainer {
margin: 30px auto;
text-align: center;
}
.likert span {
border-radius: 5px;
display: flex;
@ -310,13 +367,14 @@ iframe { /* center the iframe, mostly unnecessary */
transition: background .2s ease-in-out;
}
.likert input:checked + span {
.likert input:checked+span {
outline: black auto 1px;
background: transparent;
}
.likert input:focus + span {
outline: auto 1px; /*-webkit-focus-ring-color*/
.likert input:focus+span {
outline: auto 1px;
/*-webkit-focus-ring-color*/
}
.likert span:hover {
@ -336,15 +394,19 @@ iframe { /* center the iframe, mostly unnecessary */
table {
border-collapse: collapse;
margin: 20px 0;
table-layout: auto; /* Allows columns to adjust to their content */
width: auto; /* Adjusts the table width to the content */
table-layout: auto;
/* Allows columns to adjust to their content */
width: auto;
/* Adjusts the table width to the content */
}
th, td {
th,
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
word-wrap: break-word; /* Ensures content wraps and doesn't overflow */
word-wrap: break-word;
/* Ensures content wraps and doesn't overflow */
}
th {

21
slaeforms/templates/login.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Login Page</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div class="container">
<div class="login-container" >
<p>Some pages require you to be logged in.</p>
<form action="http://localhost:5000/login" method="post">
<input class="login-elements" type="password" value="" name="password" placeholder="password">
<input class="login-elements" id="loginbutton" type="submit" value="submit";/>
</form></div>
</div>
</body>
</html>

2
slaeforms/templates/standard_template.html
View File

@ -36,7 +36,7 @@
</div>
</div>
<button class="dv_button">Play Videos</button>
<div class="dv_half">
<div class="iframe-container">

2
slaeforms/templates/test_page0.html
View File

@ -13,7 +13,7 @@
<p>This is just a test page for the single page option of the json configuration, but without something to submit</p>
<form action="http://localhost:5000/send_json" method="post">
<input type="hidden" name="submittedString" value="Hello, backend!">
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
<input id="submitbutton" type = "submit" value = "submit";/>
</form>
</div>
</body>