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; box-sizing: border-box;
} }
.error { .flash {
padding: 0.5em; padding: 0.5em;
box-sizing: border-box;
margin-bottom: 1em;
color: #fff;
}
.error {
border: 1px solid #140505; border: 1px solid #140505;
border-radius: 5px;
background-color: #C32727; background-color: #C32727;
} }

View File

@ -17,6 +17,6 @@ class DashboardPage extends Controller
{ {
// get the user details // get the user details
// get the channels // 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 // start the session
$this->session->set('user', [ 'id' => $user->getId(), 'authenticated' => true ]); $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 protected static function users(App $app): void
{ {
$app->get('/users/register', RegisterUserPage::class) $app->get('/register', RegisterUserPage::class)
->setName('user-register-page'); ->setName('user-register-page');
$app->post('/users/register', RegisterUserAction::class) $app->post('/register', RegisterUserAction::class)
->add(VerifyPasswordMiddleware::class) ->add(VerifyPasswordMiddleware::class)
->setName('user-register-action'); ->setName('user-register-action');

View File

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

View File

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

View File

@ -2,7 +2,7 @@
{% block content %} {% block content %}
<div> <div>
<form action="/users/register" method="post"> <form action="/register" method="post" id="login-form">
<div> <div>
<label for="name">Name<br> <label for="name">Name<br>
<input name="name" type="text" required> <input name="name" type="text" required>
@ -20,8 +20,25 @@
<input name="checked_password" type="password" required> <input name="checked_password" type="password" required>
</div> </div>
<div> <div>
<input type="submit" label="Submit"> <button type="submit">Register</button>
</div> </div>
</form> </form>
</div> </div>
{% endblock %} {% 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 %}