added login page and functionality

slaeforms/app.py

@@ -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 ()

slaeforms/static/styles.css

@@ -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 */
+    width: 66vw;
-    max-width: 1690px; /* Maximum width to keep it from getting too wide on large screens */
+    /* 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 */
+    padding: 12px 24px;
-    font-size: 25px; /* Increased font size */
+    /* Increased padding for a bigger button */
-    border: none; /* Removes default border */
+    font-size: 25px;
-    border-radius: 8px; /* Optional: rounds the corners of the button */
+    /* 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{
+.textarea-label {
-    align-self: flex-start; /* Aligns the label to the start of the container */
+    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 */
+    width: 100px;
-    height: 70px; /* Set a specific height for the buttons */
+    /* 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 */
+    display: inline-flex;
-    justify-content: center; /* Center contents horizontally */
+    /* Display button contents as a flexbox */
-    align-items: center; /* Center contents vertically */
+    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 */
+    width: auto;
-    height: auto; /* Make the image fill its container */
+    /* Make the image fill its container */
-    display: block; /* Remove any extra space around the image */
+    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 */
+iframe {
-    display:block;
+    /* 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 {
+.likert input:focus+span {
-    outline: auto 1px; /*-webkit-focus-ring-color*/
+    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 */
+    table-layout: auto;
-    width: auto; /* Adjusts the table width to the content */
+    /* 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 {

slaeforms/templates/login.html

@@ -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>

slaeforms/templates/standard_template.html

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

slaeforms/templates/test_page0.html

@@ -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>