3 files changed, 95 insertions, 0 deletions
diff --git a/src/app/login/LoginForm.tsx b/src/app/login/LoginForm.tsx
new file mode 100644
index 0000000..26d78dd
--- /dev/null
+++ b/src/app/login/LoginForm.tsx
@@ -0,0 +1,70 @@
+import {
+  Column,
+  Form,
+  FormButtons,
+  FormField,
+  FormSubmitButton,
+  Heading,
+  Icon,
+  PasswordField,
+  TextField,
+} from '@umami/react-zen';
+import { useRouter } from 'next/navigation';
+import { useMessages, useUpdateQuery } from '@/components/hooks';
+import { Logo } from '@/components/svg';
+import { setClientAuthToken } from '@/lib/client';
+import { setUser } from '@/store/app';
+
+export function LoginForm() {
+  const { formatMessage, labels, getErrorMessage } = useMessages();
+  const router = useRouter();
+  const { mutateAsync, error } = useUpdateQuery('/auth/login');
+
+  const handleSubmit = async (data: any) => {
+    await mutateAsync(data, {
+      onSuccess: async ({ token, user }) => {
+        setClientAuthToken(token);
+        setUser(user);
+        router.push('/');
+      },
+    });
+  };
+
+  return (
+    <Column justifyContent="center" alignItems="center" gap="6">
+      <Icon size="lg">
+        <Logo />
+      </Icon>
+      <Heading>umami</Heading>
+      <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
+        <FormField
+          label={formatMessage(labels.username)}
+          data-test="input-username"
+          name="username"
+          rules={{ required: formatMessage(labels.required) }}
+        >
+          <TextField autoComplete="username" />
+        </FormField>
+
+        <FormField
+          label={formatMessage(labels.password)}
+          data-test="input-password"
+          name="password"
+          rules={{ required: formatMessage(labels.required) }}
+        >
+          <PasswordField autoComplete="current-password" />
+        </FormField>
+        <FormButtons>
+          <FormSubmitButton
+            data-test="button-submit"
+            variant="primary"
+            style={{ flex: 1 }}
+            isDisabled={false}
+          >
+            {formatMessage(labels.login)}
+          </FormSubmitButton>
+        </FormButtons>
+      </Form>
+    </Column>
+  );
+}
diff --git a/src/app/login/LoginPage.tsx b/src/app/login/LoginPage.tsx
new file mode 100644
index 0000000..6f485e3
--- /dev/null
+++ b/src/app/login/LoginPage.tsx
@@ -0,0 +1,11 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { LoginForm } from './LoginForm';
+
+export function LoginPage() {
+  return (
+    <Column alignItems="center" height="100vh" backgroundColor="2" paddingTop="12">
+      <LoginForm />
+    </Column>
+  );
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..ea27735
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from 'next';
+import { LoginPage } from './LoginPage';
+
+export default async function () {
+  if (process.env.DISABLE_LOGIN || process.env.CLOUD_MODE) {
+    return null;
+  }
+
+  return <LoginPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Login',
+};