From 580d3654ef2b43fa05756d54784fbc2130a6c35b Mon Sep 17 00:00:00 2001
From: Dave Smith-Hayes <me@davesmithhayes.com>
Date: Wed, 13 Mar 2024 20:54:33 -0400
Subject: [PATCH] Add error messages, register form, user routes

---
 app/src/frontend/components/error-message.tsx |  9 ++++++
 app/src/frontend/components/login-form.tsx    | 11 ++-----
 app/src/frontend/components/register-form.tsx | 29 +++++++++++++++++++
 app/src/frontend/pages/register.tsx           | 10 +++++++
 app/src/handlers/{login.tsx => user.tsx}      | 14 ++++++---
 app/src/index.tsx                             |  9 +++---
 app/src/middleware/{config.ts => siteData.ts} |  5 ++--
 7 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 app/src/frontend/components/error-message.tsx
 create mode 100644 app/src/frontend/components/register-form.tsx
 create mode 100644 app/src/frontend/pages/register.tsx
 rename app/src/handlers/{login.tsx => user.tsx} (60%)
 rename app/src/middleware/{config.ts => siteData.ts} (75%)

diff --git a/app/src/frontend/components/error-message.tsx b/app/src/frontend/components/error-message.tsx
new file mode 100644
index 0000000..e6fd2ea
--- /dev/null
+++ b/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;
diff --git a/app/src/frontend/components/login-form.tsx b/app/src/frontend/components/login-form.tsx
index 96f71ae..6776b8c 100644
--- a/app/src/frontend/components/login-form.tsx
+++ b/app/src/frontend/components/login-form.tsx
@@ -1,17 +1,10 @@
 import { FC } from "hono/jsx"
-
-const Error = (props: { message: string }) => {
-  return (
-    <div class="form-error">
-      {props.message}
-    </div>
-  );
-};
+import ErrorMessage from "./error-message";
 
 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>
diff --git a/app/src/frontend/components/register-form.tsx b/app/src/frontend/components/register-form.tsx
new file mode 100644
index 0000000..ca84d25
--- /dev/null
+++ b/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>
+    </>
+  );
+};
+
diff --git a/app/src/frontend/pages/register.tsx b/app/src/frontend/pages/register.tsx
new file mode 100644
index 0000000..36022fb
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/app/src/handlers/login.tsx b/app/src/handlers/user.tsx
similarity index 60%
rename from app/src/handlers/login.tsx
rename to app/src/handlers/user.tsx
index 0698a44..1dfaea5 100644
--- a/app/src/handlers/login.tsx
+++ b/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;
diff --git a/app/src/index.tsx b/app/src/index.tsx
index 92f16be..2d2ce60 100644
--- a/app/src/index.tsx
+++ b/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 LoginHandler from './handlers/login';
+import UserHandler from './handlers/user';
 
 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;
diff --git a/app/src/middleware/config.ts b/app/src/middleware/siteData.ts
similarity index 75%
rename from app/src/middleware/config.ts
rename to app/src/middleware/siteData.ts
index 27ba1a9..b7a4ec5 100644
--- a/app/src/middleware/config.ts
+++ b/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 };