Add error messages, register form, user routes

app/src/frontend/components/error-message.tsx

@@ -0,0 +1,9 @@
+const ErrorMessage = (props: { message: string }) => {
+  return (
+    <div class="form-error">
+      {props.message}
+    </div>
+  );
+};
+
+export default ErrorMessage;

app/src/frontend/components/login-form.tsx

@@ -1,17 +1,10 @@
 import { FC } from "hono/jsx"
-
+import ErrorMessage from "./error-message";
-const Error = (props: { message: string }) => {
-  return (
-    <div class="form-error">
-      {props.message}
-    </div>
-  );
-};
 
 export const LoginForm: FC = (props) => {
   return (
     <>
-      {props.error ? <Error message={props.error.message} /> : null}
+      {props.error ? <ErrorMessage message={props.error.message} /> : null}
       <form action="/login" method="POST">
         <label for="email">
           <div>Email</div>

app/src/frontend/components/register-form.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'hono/jsx';
+import ErrorMessage from './error-message';
+
+
+export const RegisterForm: FC = (props) => {
+  return (
+    <>
+      {props.error ? <ErrorMessage message={props.error.message} /> : null}
+      <form action="/register" method="POST">
+        <label for="email">
+          <div>Email</div>
+          <input type="text" name="email" required />
+        </label>
+        <label for="password">
+          <div>Password</div>
+          <input type="password" name="password" required />
+        </label>
+        <label for="password-confirm">
+          <div>Confirm Password</div>
+          <input type="password" name="password-confirm" require />
+        </label>
+        <div>
+          <input type="submit" name="login" value="Login" />
+        </div>
+      </form>
+    </>
+  );
+};
+

app/src/frontend/pages/register.tsx

@@ -0,0 +1,10 @@
+import { RegisterForm } from '../components/register-form';
+import { Layout } from '../layout';
+
+export const RegisterPage = (props: { error?: any }) => {
+  return (
+    <Layout title="Register">
+      <RegisterForm action="/register" error={props.error}>
+    </Layout>
+  );
+};

app/src/handlers/user.tsx

@@ -1,15 +1,16 @@
 import { Hono } from 'hono';
 import { Context } from 'hono';
 import { LoginPage } from '../frontend/pages/login';
+import { RegisterPage } from '../frontend/pages/register';
 
-const LoginHandler = new Hono();
+const UserHandler = new Hono();
 
-LoginHandler.get('/login', async (c: Context) => {
+UserHandler.get('/login', async (c: Context) => {
   const errors = c.get('login-errors');
   return c.html(<LoginPage error={errors} />);
 });
 
-LoginHandler.post('/login', async (c: Context) => {
+UserHandler.post('/login', async (c: Context) => {
   const form = await c.req.formData();
 
   // validate form
@@ -26,4 +27,9 @@ LoginHandler.post('/login', async (c: Context) => {
   return c.redirect('/login');
 });
 
-export default LoginHandler;
+UserHandler.get('/register', async (c: Context) => {
+  const errors = c.get('register-errors');
+  return c.html(<RegisterPage error={errors} />);
+})
+
+export default UserHandler;

app/src/index.tsx

@@ -1,17 +1,16 @@
 import { Hono } from 'hono';
-import { configMiddleware } from './middleware/config';
+import { siteDataMiddleware } from './middleware/siteData';
 import { HomePage } from './frontend/pages/home';
-import { LoginPage } from './frontend/pages/login';
+import UserHandler from './handlers/user';
-import LoginHandler from './handlers/login';
 
 const app = new Hono();
-app.use(configMiddleware);
+app.use(siteDataMiddleware);
 
 app.get('/', async (c) => {
   return c.html(<HomePage />);
 });
 
 // Handlers
-app.route('', LoginHandler);
+app.route('', UserHandler);
 
 export default app;

app/src/middleware/siteData.ts

@@ -1,4 +1,3 @@
-import { Hono } from 'hono';
 import { Context } from 'hono';
 import SiteData from '../model/SiteData';
 
@@ -11,9 +10,9 @@ const config: SiteData = {
   copyright: `Copyright ${currentYear} Slovocast`,
 };
 
-const configMiddleware = async function(c: Context, next) {
+const siteDataMiddleware = async function(c: Context, next: CallableFunction) {
   c.set('config', config);
   await next();
 };
 
-export { configMiddleware };
+export { siteDataMiddleware };