Add navigation bar and logout button

This commit is contained in:
Lexi / Zoe 2021-07-27 20:02:36 +02:00
parent b24fe56c8a
commit e58036b2b3
Signed by: binaryDiv
GPG Key ID: F8D4956E224DA232
6 changed files with 95 additions and 31 deletions

View File

@ -15,22 +15,73 @@ body {
/* --- Header --- */ /* --- Header --- */
header { header {
margin: 1em; margin: 1em;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
} }
header h1 { header h1 {
margin: 1em; margin: 1em;
} }
/* --- Navigation bar --- */
nav {
}
nav ul {
display: flex;
padding: 0 1.5em;
border: 0;
border-bottom: 1px solid #000000;
}
nav ul li {
margin: 0 0 -1px -1px;
list-style: none;
z-index: 1;
}
nav a {
display: block;
width: 100%;
height: 100%;
padding: 0.5em 1em;
border: 1px solid #999999;
border-bottom-color: #000000;
}
nav a:link, nav a:visited {
background-color: #eeeeee;
color: blue;
text-decoration: none;
}
nav a:hover, nav a:focus {
background-color: #ffffff;
text-decoration: underline;
}
nav li.nav_current_page {
z-index: 10;
}
nav li.nav_current_page a {
background-color: #ffffff;
border-color: #000000;
border-bottom-color: #ffffff;
}
/* --- Main section --- */
main {
margin: 2em;
}
/* --- Login page --- */ /* --- Login page --- */
main.login_page { main.login_page {
margin: 2em; margin: 2em;
padding: 1em; padding: 1em;
border: 1px gray solid; border: 1px solid #666666;
width: auto;
}
main.login_page h2 {
margin: 0 0 0.5em 0;
} }
main.login_page table td { main.login_page table td {
@ -38,6 +89,10 @@ main.login_page table td {
} }
/* --- Text and other styling --- */ /* --- Text and other styling --- */
h2 {
margin: 0 0 0.5em 0;
}
.error { .error {
background: #ff4444; background: #ff4444;
width: 30em; width: 30em;

View File

@ -17,5 +17,9 @@ class BaseController
{ {
$this->view = $view; $this->view = $view;
$this->userHelper = $userHelper; $this->userHelper = $userHelper;
// Register globals
$twigEnv = $view->getEnvironment();
$twigEnv->addGlobal('current_user_name', $userHelper->isLoggedIn() ? $userHelper->getCurrentUser()->getUsername() : null);
} }
} }

View File

@ -59,14 +59,17 @@ class LoginController extends BaseController
$user = null; $user = null;
} }
if ($user !== null && password_verify($loginPassword, $user->getPasswordHash())) { if ($user === null || !password_verify($loginPassword, $user->getPasswordHash())) {
$_SESSION['username'] = $user->getUsername();
return $response
->withHeader('Location', '/')
->withStatus(303);
} else {
return $this->renderLoginPage($response, ['error' => 'Wrong username or password!']); return $this->renderLoginPage($response, ['error' => 'Wrong username or password!']);
} elseif (!$user->isActive()) {
return $this->renderLoginPage($response, ['error' => 'User is inactive!']);
} }
// Set login session
$_SESSION['username'] = $user->getUsername();
return $response
->withHeader('Location', '/')
->withStatus(303);
} }
public function logoutUser(Request $request, Response $response): Response public function logoutUser(Request $request, Response $response): Response

View File

@ -1,18 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8"/>
<title>{% block title %}Untitled page{% endblock %} - MailAccountAdmin</title> <title>{% block title %}Untitled page{% endblock %} - MailAccountAdmin</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css"/>
</head> </head>
<body> <body>
<header> <header>
<h1>MailAccountAdmin</h1> <h1>MailAccountAdmin</h1>
<div class="header_userstatus">
Hello, <b>{{ current_user_name }}</b>. | <a href="/logout">Logout</a>
</div>
</header> </header>
<nav>
<ul>
<li class="nav_current_page"><a href="/">Dashboard</a></li>
<li><a href="/domains">Domains</a></li>
<li><a href="/accounts">Accounts</a></li>
</ul>
</nav>
<main> <main>
{% block content %} {% block content %}
Nothing to see here... Nothing to see here...

View File

@ -6,15 +6,4 @@
<h2>Dashboard</h2> <h2>Dashboard</h2>
<p>Hello, {{ username }}!</p> <p>Hello, {{ username }}!</p>
<pre>
ID: {{ user.getId() }}
username: {{ user.getUsername() }}
password: {{ user.getPasswordHash() }}
is_active: {{ user.isActive() }}
created_at: {{ user.getCreatedAt() | date() }}
modified_at: {{ user.getModifiedAt() | date() }}
</pre>
<a href="/logout">Logout.</a>
{% endblock %} {% endblock %}

View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8"/>
<title>Login - MailAccountAdmin</title> <title>Login - MailAccountAdmin</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css"/>
</head> </head>
<body> <body>
@ -18,7 +18,7 @@
<form action="/login" method="POST"> <form action="/login" method="POST">
{% if error is defined %} {% if error is defined %}
<div class="error">{{ error }}</div> <div class="error">{{ error }}</div>
{% endif %} {% endif %}
<table> <table>
@ -32,7 +32,9 @@
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td><button type="submit">Login</button></td> <td>
<button type="submit">Login</button>
</td>
</tr> </tr>
</table> </table>
</form> </form>