Add navigation bar and logout button
This commit is contained in:
parent
b24fe56c8a
commit
e58036b2b3
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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())) {
|
||||||
|
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();
|
$_SESSION['username'] = $user->getUsername();
|
||||||
return $response
|
return $response
|
||||||
->withHeader('Location', '/')
|
->withHeader('Location', '/')
|
||||||
->withStatus(303);
|
->withStatus(303);
|
||||||
} else {
|
|
||||||
return $this->renderLoginPage($response, ['error' => 'Wrong username or password!']);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function logoutUser(Request $request, Response $response): Response
|
public function logoutUser(Request $request, Response $response): Response
|
||||||
|
|
|
||||||
|
|
@ -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...
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue