feat: add login

packages/bolt/app/routes/_index.tsx

@@ -1,13 +1,24 @@
-import type { MetaFunction } from '@remix-run/cloudflare';
+import { json, redirect, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/cloudflare';
 import { ClientOnly } from 'remix-utils/client-only';
 import { BaseChat } from '~/components/chat/BaseChat';
 import { Chat } from '~/components/chat/Chat.client';
 import { Header } from '~/components/Header';
+import { isAuthenticated } from '~/lib/.server/sessions';
 
 export const meta: MetaFunction = () => {
   return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }];
 };
 
+export async function loader({ request, context }: LoaderFunctionArgs) {
+  const authenticated = await isAuthenticated(request, context.cloudflare.env);
+
+  if (import.meta.env.DEV || authenticated) {
+    return json({});
+  }
+
+  return redirect('/login');
+}
+
 export default function Index() {
   return (
     <div className="flex flex-col h-full w-full">

packages/bolt/app/routes/login.tsx

@@ -0,0 +1,90 @@
+import {
+  json,
+  redirect,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+  type TypedResponse,
+} from '@remix-run/cloudflare';
+import { Form, useActionData } from '@remix-run/react';
+import { verifyPassword } from '~/lib/.server/login';
+import { createUserSession, isAuthenticated } from '~/lib/.server/sessions';
+
+interface Errors {
+  password?: string;
+}
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+  const authenticated = await isAuthenticated(request, context.cloudflare.env);
+
+  if (authenticated) {
+    return redirect('/');
+  }
+
+  return json({});
+}
+
+export async function action({ request, context }: ActionFunctionArgs): Promise<TypedResponse<{ errors?: Errors }>> {
+  const formData = await request.formData();
+  const password = String(formData.get('password'));
+
+  const errors: Errors = {};
+
+  if (!password) {
+    errors.password = 'Please provide a password';
+  }
+
+  if (!verifyPassword(password, context.cloudflare.env)) {
+    errors.password = 'Invalid password';
+  }
+
+  if (Object.keys(errors).length > 0) {
+    return json({ errors });
+  }
+
+  return redirect('/', await createUserSession(request, context.cloudflare.env));
+}
+
+export default function Login() {
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="max-w-md w-full space-y-8 p-10 bg-white rounded-lg shadow">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Login</h2>
+        </div>
+        <Form className="mt-8 space-y-6" method="post" noValidate>
+          <div>
+            <label htmlFor="password" className="sr-only">
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="off"
+              data-1p-ignore
+              required
+              className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none"
+              placeholder="Password"
+            />
+            {actionData?.errors?.password ? (
+              <em className="flex items-center space-x-1.5 p-2 mt-2 bg-negative-200 text-negative-600 rounded-lg">
+                <div className="i-ph:x-circle text-xl"></div>
+                <span>{actionData?.errors.password}</span>
+              </em>
+            ) : null}
+          </div>
+          <div>
+            <button
+              type="submit"
+              className="w-full text-white bg-accent-600 hover:bg-accent-700 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+            >
+              Login
+            </button>
+          </div>
+        </Form>
+      </div>
+    </div>
+  );
+}