stef_buwalda/ProjectIOT
1
0
Fork 0
mirror of https://github.com/StefBuwalda/ProjectIOT.git synced 2025-10-30 19:29:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added login functionality and login required

Browse Source
This commit is contained in:
Stef
2025-05-31 12:05:53 +02:00
parent c30d32b10f
commit 1ac625ccbd
10 changed files with 251 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
application/dashboard/templates/base.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,57 +8,65 @@
<title>Admin Dashboard</title>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script>
<style>
body.dark-mode {
background-color: #181a1b !important;
color: #e0e0e0 !important;
}
body.dark-mode {
background-color: #181a1b !important;
color: #e0e0e0 !important;
}
.dark-mode .card,
.dark-mode .table {
background-color: #23272b !important;
color: #e0e0e0 !important;
}
.dark-mode .table thead,
.dark-mode .table tbody,
.dark-mode .table th,
.dark-mode .table td,
.dark-mode .table tr {
background-color: #23272b !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
.dark-mode .card-title,
.dark-mode .display-4,
.dark-mode h5 {
color: #e0e0e0 !important;
}
.dark-mode input {
background-color: #23272b !important;
color: #e0e0e0 !important;
border: 1px solid #444 !important;
}
.dark-mode .btn {
background-color: #444 !important;
color: #e0e0e0 !important;
border-color: #666 !important;
}
.dark-mode .btn:hover {
background-color: #222 !important;
color: #fff !important;
}
.dark-mode .logout-btn {
background-color: #212529 !important;
color: #fff !important;
border-color: #212529 !important;
}
.dark-mode .logout-btn:hover {
background-color: #353738 !important;
color: #fff !important;
}
</style>
.dark-mode .card,
.dark-mode .table {
background-color: #23272b !important;
color: #e0e0e0 !important;
}
.dark-mode .table thead,
.dark-mode .table tbody,
.dark-mode .table th,
.dark-mode .table td,
.dark-mode .table tr {
background-color: #23272b !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
.dark-mode .card-title,
.dark-mode .display-4,
.dark-mode h5 {
color: #e0e0e0 !important;
}
.dark-mode input {
background-color: #23272b !important;
color: #e0e0e0 !important;
border: 1px solid #444 !important;
}
.dark-mode .btn {
background-color: #444 !important;
color: #e0e0e0 !important;
border-color: #666 !important;
}
.dark-mode .btn:hover {
background-color: #222 !important;
color: #fff !important;
}
.dark-mode .logout-btn {
background-color: #212529 !important;
color: #fff !important;
border-color: #212529 !important;
}
.dark-mode .logout-btn:hover {
background-color: #353738 !important;
color: #fff !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
@@ -65,7 +74,8 @@ body.dark-mode {
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<img src="{{ url_for('static', filename='images/warpnet-logo.png') }}" alt="Logo" class="img-fluid mt-3 mb-3">
<img src="{{ url_for('static', filename='images/warpnet-logo.png') }}" alt="Logo"
class="img-fluid mt-3 mb-3">
<hr style="border: 1px solid white; margin-top: 0;">
</li>
<li class="nav-item">
@@ -78,34 +88,37 @@ body.dark-mode {
</li>
</ul>
<div class="d-flex justify-content-center mt-3">
<a href="/auth/demo" class="btn btn-sm btn-dark logout-btn" style="width: 200px;">Logout</a>
<button id="darkModeToggle" class="btn btn-secondary btn-sm" style="position: fixed; top: 10px; right: 10px; z-index: 9999;">
<a href="{{ url_for('auth.logout') }}" class=" btn btn-sm btn-dark logout-btn"
style="width: 200px;">Logout</a>
<button id="darkModeToggle" class="btn btn-secondary btn-sm"
style="position: fixed; top: 10px; right: 10px; z-index: 9999;">
Toggle Theme
</button>
</div>
</div>
</div>
{%block content%}
{%block content%}
{% endblock %}
</div>
{% endblock %}
</div>
</div>
</div>
<script>
document.getElementById('darkModeToggle').onclick = function() {
document.body.classList.toggle('dark-mode');
if(document.body.classList.contains('dark-mode')) {
localStorage.setItem('darkMode', 'enabled');
} else {
localStorage.setItem('darkMode', 'disabled');
}
};
document.getElementById('darkModeToggle').onclick = function () {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('darkMode', 'enabled');
} else {
localStorage.setItem('darkMode', 'disabled');
}
};
if(localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
}
</script>
if (localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
}
</script>
</body>
</html>
</html>