UI - admin authentication and bootstrap update

ui/entrypoint.py

@@ -30,12 +30,13 @@ app.jinja_env.globals.update(form_service_gen_multiple_values=utils.form_service
 # Login management
 login_manager = LoginManager()
 login_manager.init_app(app)
-user = User(vars["ADMIN_USERNAME"], vars["ADMIN_PASSWRD"])
+login_manager.login_view = "login"
+user = User(vars["ADMIN_USERNAME"], vars["ADMIN_PASSWORD"])
 app.config["USER"] = user
 
 @login_manager.user_loader
 def load_user(user_id):
-    return User.get(user_id)
+    return User(user_id, vars["ADMIN_PASSWORD"])
 
 @app.route('/login', methods=["GET", "POST"])
 def login() :

ui/requirements.txt

@@ -3,3 +3,4 @@ requests
 docker
 flask-login
 bcrypt
+gunicorn

ui/src/User.py

@@ -3,14 +3,11 @@ import flask_login, bcrypt
 class User(flask_login.UserMixin) :
 
     def __init__(self, id, password) :
-        self.is_authenticated   = True
-        self.is_active          = True
-        self.is_anonymous       = False
         self.__id               = id
-        self.__password         = bcrypt.hashpw(password, bcrypt.gensalt())
+        self.__password         = bcrypt.hashpw(password.encode("utf-8"), bcrypt.gensalt())
     
     def get_id(self) :
         return self.__id
 
     def check_password(self, password) :
-        return bcrypt.checkpw(password, self.__password)
+        return bcrypt.checkpw(password.encode("utf-8"), self.__password)

ui/static/css/custom.css

@@ -15,3 +15,26 @@
 main > .container {
 	padding: 100px 15px 0;
 }
+
+.form-signin {
+	width: 100%;
+	max-width: 330px;
+	padding: 15px;
+	margin: auto;
+  }
+  
+  .form-signin .form-floating:focus-within {
+	z-index: 2;
+  }
+
+.form-signin input[name="username"] {
+	margin-bottom: -1px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+  }
+  
+  .form-signin input[name="password"] {
+	margin-bottom: 10px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+  }

ui/templates/base.html

@@ -9,13 +9,9 @@
 
 		{% include "menu.html" %}
 
-		<main class="flex-shrink-0">
+		<div class="container d-flex justify-content-center align-items-center" style="height: 100%;">
-			<div class="container">
+			{% block content %}{% endblock %}
-
+		</div>
-				{% block content %}{% endblock %}
-
-			</div>
-		</main>
 
 		{% include "footer.html" %}
 

ui/templates/login.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+
+
+<div class="form-signin">
+	<div class="text-center">
+		<img src="img/logo.png" class="mb-4" style="max-width: 200px;">
+	</div>
+	<h1 class="h3 mb-3 fw-normal">Authentication required</h1>
+	<form action="login" method="POST">
+		<div class="form-floating">
+			<input type="text" id="username" class="form-control" name="username" placeholder="user">
+			<label for="username">Username</label>
+		</div>
+		<div class="form-floating">
+			<input type="password" id="password" class="form-control" name="password" placeholder="p@ssw0rd">
+			<label for="password">Password</label>
+		</div>
+		<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
+	</form>
+</div>
+
+
+{% endblock %}

ui/templates/menu.html

@@ -2,6 +2,7 @@
 	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
 		<div class="container-fluid">
 			<a class="navbar-brand" href="#">bunkerized-nginx-ui</a>
+			{% if current_user.is_authenticated %}
 			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
 				<span class="navbar-toggler-icon"></span>
 			</button>
@@ -18,6 +19,7 @@
 					</li>
 				</ul>
 			</div>
+			{% endif %}
 		</div>
 	</nav>
 </header>