Work out some styles and move the register routes around.

This commit is contained in:
Dave Smith-Hayes 2024-11-08 09:07:29 -05:00
parent 7805ce9f80
commit 82735d41fd
7 changed files with 36 additions and 8 deletions

View File

@ -41,9 +41,15 @@ main {
box-sizing: border-box;
}
.error {
.flash {
padding: 0.5em;
box-sizing: border-box;
margin-bottom: 1em;
color: #fff;
}
.error {
border: 1px solid #140505;
border-radius: 5px;
background-color: #C32727;
}

View File

@ -17,6 +17,6 @@ class DashboardPage extends Controller
{
// get the user details
// get the channels
return $this->render('dashboard.twig');
return $this->render('dashboard.twig', [ 'session' => $this->session ]);
}
}

View File

@ -35,6 +35,6 @@ class LoginUserAction extends Controller
// start the session
$this->session->set('user', [ 'id' => $user->getId(), 'authenticated' => true ]);
return $this->render('dashboard.twig');
return $this->render('dashboard.twig', [ 'logged_in' => true ]);
}
}

View File

@ -33,9 +33,9 @@ class Routes
*/
protected static function users(App $app): void
{
$app->get('/users/register', RegisterUserPage::class)
$app->get('/register', RegisterUserPage::class)
->setName('user-register-page');
$app->post('/users/register', RegisterUserAction::class)
$app->post('/register', RegisterUserAction::class)
->add(VerifyPasswordMiddleware::class)
->setName('user-register-action');

View File

@ -7,6 +7,8 @@
<meta name="keywords" value="{{ page_tags }}">
{% endblock %}
<link rel="stylesheet" href="static/main.css">
{% block head_js %}{% endblock %}
</head>
<body>
<div class="container">
@ -21,6 +23,7 @@
<li><a href="/dashboard">Dashboard</a></li>
{% else %}
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
{% endif %}
</ul>
</nav>
@ -36,5 +39,7 @@
{% endblock %}
</footer>
</div>
{% block body_js %}{% endblock %}
</body>
</html>

View File

@ -12,7 +12,7 @@
<input name="password" type="password" required>
</div>
<div>
<input type="submit" label="Submit">
<button type="submit">Login</button>
</div>
</form>
</div>

View File

@ -2,7 +2,7 @@
{% block content %}
<div>
<form action="/users/register" method="post">
<form action="/register" method="post" id="login-form">
<div>
<label for="name">Name<br>
<input name="name" type="text" required>
@ -20,8 +20,25 @@
<input name="checked_password" type="password" required>
</div>
<div>
<input type="submit" label="Submit">
<button type="submit">Register</button>
</div>
</form>
</div>
{% endblock %}
{% block body_js %}
<script type="javascript">
const form = document.getElementById("login-form");
form.addEventListener('submit', function (e) {
e.preventDefault();
// validate form
const [p1] = document.querySelector('input[name="password"]');
const [p2] = document.querySelector('input[name="checked_password"]');
if (p1.getAttribute("value") == p2.getAttribute("value")) {
return this.submit();
}
});
</script>
{% endblock %}