Start adding some handlers for routes.

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

@@ -1,6 +1,6 @@
 import { FC } from "hono/jsx"
 
-const Error: FC = (props) => {
+const Error = (props: { message: string }) => {
   return (
     <div class="form-error">
       {props.message}

app/src/frontend/pages/home.tsx

@@ -0,0 +1,9 @@
+import { Layout } from "../layout";
+
+export const HomePage = (props) => {
+  return (
+    <Layout title="Home">
+      <div>Welcome to Slovocast</div>
+    </Layout>
+  );
+};

app/src/frontend/pages/login.tsx

@@ -1,11 +1,11 @@
 import { Layout } from '../layout';
+import { LoginForm } from '../components/login-form';
 
-const LoginPage = (props: { error?: any }) => {
+export const LoginPage = (props: { error?: any }) => {
   return (
     <Layout title="Login">
-      <LoginForm action="/login" error=error />
+      <LoginForm action="/login" error={props.error} />
     </Layout>
   );
 };
 
-export default LoginPage;

app/src/handlers/login.tsx

@@ -0,0 +1,28 @@
+import { Hono } from 'hono';
+import { Context } from 'hono';
+import { LoginPage } from '../frontend/pages/login';
+
+const LoginHandler = new Hono();
+
+LoginHandler.get('/login', async (c: Context) => {
+  return c.html(<LoginPage />);
+});
+
+LoginHandler.post('/login', async (c: Context) => {
+  const form = await c.req.formData();
+
+  // validate form
+  if (form.has('login')) {
+    if (form.get('email') == 'me@davesmithhayes.com') {
+      if (form.get('password') == 'test') {
+        c.set('auth', true);
+        return c.redirect('/');
+      }
+    }
+  }
+
+  c.set('login-errors', {});
+  return c.redirect('/login');
+});
+
+export default LoginHandler;

app/src/index.tsx

@@ -1,35 +1,17 @@
 import { Hono } from 'hono';
-import Layout from './frontend/layout';
+import { configMiddleware } from './middleware/config';
-import { SiteConfig, configMiddleware } from './middleware/config';
+import { HomePage } from './frontend/pages/home';
-import LoginForm from './frontend/user/login';
+import { LoginPage } from './frontend/pages/login';
+import LoginHandler from './handlers/login';
 
 const app = new Hono();
 app.use(configMiddleware);
 
 app.get('/', async (c) => {
-  const siteData: SiteConfig = c.get('config');
+  return c.html(<HomePage />);
-
-  const layout = (
-    <Layout siteData={siteData}>
-      <main>
-        <h1>Welcome to Slovocast</h1>
-      </main>
-    </Layout>
-  );
- 
-  return c.html(layout);
 });
 
-app.get('/login', async (c) => {
+// Handlers
-  const config: SiteConfig = c.get('config');
+app.route('/*', LoginHandler);
-
-  return c.html(
-    <Layout siteData={config}>
-      <main>
-        <LoginForm action="/login" />
-      </main>
-    </Layout>
-  );
-});
 
 export default app;