Moved frontend stuff to main area

2025-10-30 03:09:58 +00:00 · 2025-04-25 20:16:15 +02:00
parent 4c2b4bf5d0
commit 7717ac3b7a
9 changed files with 53 additions and 22 deletions
--- a/application/init.py
+++ b/application/init.py
@@ -2,6 +2,7 @@ from flask import Flask
 from flask_migrate import Migrate
 from flask_sqlalchemy import SQLAlchemy
 from pyplatex import ANPR  # type: ignore
+from authlib.integrations.flask_client import OAuth

 # Web Server
 app = Flask(__name__)
@@ -17,3 +18,25 @@ migrate = Migrate(app, db)

 # ANPR instance
 anpr = ANPR()
+
+# Keycloak
+oauth = OAuth(app=app)
+url = "http://192.168.69.1:8180"
+keycloak: ... = oauth.register(
+    name="keycloak",
+    client_id="ProjectIOT",
+    client_secret="IWKfsx2aLHCMr0iUaZOuws6UwiYrVQ60",
+    authorize_url=(f"{url}/realms/ProjectIOT/protocol/openid-connect/auth"),
+    authorize_params=None,
+    access_token_url=(
+        f"{url}/realms/ProjectIOT/protocol/openid-connect/token"
+    ),
+    refresh_token_url=(
+        f"{url}/realms/ProjectIOT/protocol/openid-connect/token"
+    ),
+    api_base_url=(f"{url}/realms/ProjectIOT/protocol/openid-connect"),
+    client_kwargs={"scope": "openid profile email"},
+    server_metadata_url=(
+        "{url}/realms/ProjectIOT/.well-known/openid-configuration"
+    ),
+)
--- a/application/auth/views.py
+++ b/application/auth/views.py
@@ -1,3 +1,30 @@
-from flask import Blueprint
+from flask import Blueprint, session, redirect, url_for, render_template
+from application import keycloak

 auth_blueprint = Blueprint("auth", __name__, template_folder="templates")
+
+
+@auth_blueprint.route("/demo")
+def demo():
+    return render_template("login.html")
+
+
+@auth_blueprint.route("/")
+def home():
+    user = session.get("user")
+    if user:
+        return f'Hello, {user["name"]}'
+    return redirect(url_for("auth.login"))
+
+
+@auth_blueprint.route("/login")
+def login():
+    redirect_uri = url_for("auth.auth", _external=True)
+    return keycloak.authorize_redirect(redirect_uri)
+
+
+@auth_blueprint.route("/auth")
+def auth():
+    user = keycloak.userinfo()
+    session["user"] = user
+    return redirect(url_for("auth.home"))
--- a/application/dashboard/templates/dashboard.html
+++ b/application/dashboard/templates/dashboard.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Bedankt voor de moeite. <br>Dit zijn de ingevulde gegevens:</h1>
+<ul>
+    <li>Naam: {{ session['naam'] }}</li>
+    <li>Geslacht: {{ session['geslacht'] }}</li>
+    <li>Instrument: {{ session['instrument'] }}</li>
+    <li>Plaats: {{ session['plaats'] }}</li>
+    <li>Feedback: {{ session['feedback'] }}</li>
+</ul>
+</body>
+</html>
--- a/application/dashboard/templates/login.html
+++ b/application/dashboard/templates/login.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <title>Login</title>
+    <style>
+        .rounded-input {
+            border-radius: 20px; 
+        }
+
+        .split-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 50vh;
+            background-color: #424D66;
+            z-index: -1;
+        }
+        @keyframes moveLeftRight {
+            0% {
+                transform: translateX(0); 
+            }
+            100% {
+                transform: translateX(1366px); 
+            }
+        }
+        .logo {
+            margin-top: 70px;
+            width: 770px; 
+            height: auto;
+        }
+        .car-image-container {
+            position: fixed;
+            bottom: 33px;
+        }
+        .animate {
+            animation: moveLeftRight 15s infinite alternate;
+        }
+    </style>
+</head>
+<body>
+    <div class="split-background">
+    <div class="container-fluid text-center">
+        <img src="../static/images/logo-light.png" alt="Logo" class="logo" class="img-fluid mt-5">
+            </div>
+                </div>
+                    <div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+                        <div class="col-md-6 col-lg-4">
+                            <form method="POST" class="p-5 border rounded-input shadow-sm bg-white bg-opacity-75">
+                                <div class=" p-4 border rounded-input shadow-sm bg-white">
+                                    <label for="username" class="form-label text-center w-100">Username</label>
+                                            <input type="text" class="form-control rounded-input" id="username" name="username" required>
+                                                <label for="password" class="form-label text-center w-100">Password</label>
+                                                    <input type="password" class="form-control rounded-input" id="password" name="password" required>
+                                                <br>
+                                            <div class="d-grid">
+                                        <button type="submit" class="btn btn-dark rounded-input px-4 mx-auto w-50">Sign in</button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                        <div class="car-image-container">
+                        <img src="../static/images/car.png" alt="Moving Image" class="animate">
+                        </div>
+                    <footer class="py-3 bg-dark text-white fixed-bottom"">
+                <div class="container text-center">
+            <span class="text-muted"> </span>
+        </div>
+    </footer>
+</body>
+</html>
--- a/application/static/images/car.png
+++ b/application/static/images/car.png
--- a/application/static/images/logo-light.png
+++ b/application/static/images/logo-light.png