Add login/registration forms

apps/webapp/src/App.tsx

@@ -12,6 +12,8 @@ import DashboardPage from './components/dashboard';
 import useProfileStore from './state/profileStore';
 import { usePostHog } from 'posthog-js/react';
 import { useEffect } from 'react';
+import RegisterPage from './routes/auth_.register';
+import LoginPage from './routes/auth_.login';
 
 const queryClient = new QueryClient();
 
@@ -34,6 +36,9 @@ function App() {
       <ThemeProvider defaultTheme='dark' storageKey='vite-ui-theme'>
         <Router>
           <Routes>
+            <Route path='/auth/register' element={<RegisterPage />} />
+            <Route path='/auth/login' element={<LoginPage />} />
+
             <Route path='/' element={<RootLayout />}>
               <Route index element={<ConnectionsPage />} />
               <Route path='/dashboard' element={<DashboardPage />} />

apps/webapp/src/components/auth/login/login-schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+import { registerSchema } from '../register/register-schema';
+
+export const loginSchema = registerSchema.pick({
+  email: true,
+  password: true,
+});
+
+export type LoginSchemaType = z.infer<typeof loginSchema>;

apps/webapp/src/components/auth/login/login-user-form.tsx

@@ -0,0 +1,90 @@
+import { useForm } from 'react-hook-form';
+import { Link, useNavigate } from 'react-router-dom';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { LoadingSpinner } from '@/components/connections/components/LoadingSpinner';
+
+import useLoginMutation from '@/hooks/mutations/useLoginMutation';
+import { type LoginSchemaType, loginSchema } from './login-schema';
+
+export const LoginUserForm = () => {
+  const navigate = useNavigate();
+  const { mutate: login, isPending: loginPending } = useLoginMutation();
+
+  const form = useForm<LoginSchemaType>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginSchemaType) => {
+    const loginData = {
+      email: data.email,
+      password: data.password,
+    };
+
+    login(loginData, {
+      onSuccess: () => {
+        navigate('/');
+      },
+    });
+  };
+
+  return (
+    <div className='mx-auto w-full max-w-sm lg:w-96'>
+      <div className='text-center'>
+        <Link to='/'>
+          <img src='/logo.png' className='w-14 mx-auto' />
+        </Link>
+        <h2 className='mt-6 text-3xl font-extrabold'>Login</h2>
+        <p className='mt-2 text-sm'>
+          Don&apos;t have an account?{' '}
+          <Link to='/auth/register' className='font-medium text-primary hover:text-primary/80'>
+            Register
+          </Link>
+        </p>
+      </div>
+
+      <Form {...form}>
+        <form className='space-y-6 mt-8' onSubmit={form.handleSubmit(onSubmit)}>
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel htmlFor='email'>Email</FormLabel>
+                <FormControl>
+                  <Input placeholder='[email protected]' autoComplete='email' {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name='password'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel htmlFor='password'>Password</FormLabel>
+                <FormControl>
+                  <Input placeholder='********' type='password' autoComplete='current-password' {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Link to='/auth/forgot-password' className='font-medium block text-sm text-primary hover:text-primary/80'>
+            Forgot your password?
+          </Link>
+
+          <Button type='submit' className='w-full' disabled={loginPending}>
+            {loginPending ? <LoadingSpinner className='' /> : 'Login'}
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+};

apps/webapp/src/components/auth/register/create-organization-form.tsx

@@ -0,0 +1,81 @@
+import { useForm } from "react-hook-form";
+import { Link, useNavigate } from "react-router-dom";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { LoadingSpinner } from "@/components/connections/components/LoadingSpinner";
+
+import useOrganisationMutation from "@/hooks/mutations/useOrganisationMutation";
+import {
+  type OrganizationFormSchemaType,
+  organizationFormSchema,
+} from "./create-organization-schema";
+
+export const CreateOrganizationForm = () => {
+  const navigate = useNavigate();
+  const { mutate, isPending } = useOrganisationMutation();
+
+  const form = useForm<OrganizationFormSchemaType>({
+    resolver: zodResolver(organizationFormSchema),
+  });
+
+  const onSubmit = (data: OrganizationFormSchemaType) => {
+    mutate(
+      { ...data, stripe_customer_id: "stripe-customer-76" },
+      {
+        onSuccess: () => navigate("/"),
+      }
+    );
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-sm lg:w-96">
+      <div className="text-center">
+        <Link to="/">
+          <img src="/logo.png" className="w-14 mx-auto" />
+        </Link>
+        <h2 className="mt-6 text-3xl font-extrabold">Create Organization</h2>
+      </div>
+
+      <Form {...form}>
+        <form className="space-y-6 mt-8" onSubmit={form.handleSubmit(onSubmit)}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel htmlFor="name">Name</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="organization"
+                    autoComplete="given-name"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button className="w-full" type="submit">
+            {isPending ? <LoadingSpinner className="" /> : "Create"}
+          </Button>
+        </form>
+      </Form>
+      <Link
+        to="/"
+        className="mt-4 text-sm font-medium text-primary hover:text-primary/80 text-center block mx-auto"
+      >
+        Skip For Now
+      </Link>
+    </div>
+  );
+};

apps/webapp/src/components/auth/register/create-organization-schema.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const organizationFormSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+});
+
+export type OrganizationFormSchemaType = z.infer<typeof organizationFormSchema>;

apps/webapp/src/components/auth/register/register-form.tsx

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+import { RegisterUserForm } from './register-user-form';
+import { CreateOrganizationForm } from './create-organization-form';
+
+export const RegisterForm = () => {
+  const [registered, setIsRegistered] = useState(false);
+
+  if (!registered) return <RegisterUserForm onSuccess={() => setIsRegistered(true)} />;
+
+  return <CreateOrganizationForm />;
+};

apps/webapp/src/components/auth/register/register-schema.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const registerSchema = z.object({
+  firstName: z.string().min(1, 'First name is required'),
+  lastName: z.string().min(1, 'Last name is required'),
+  email: z.string().min(1, 'Email is required').email('Email is invalid'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+
+export type RegisterSchemaType = z.infer<typeof registerSchema>;

apps/webapp/src/components/auth/register/register-user-form.tsx

@@ -0,0 +1,122 @@
+import { Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { LoadingSpinner } from '@/components/connections/components/LoadingSpinner';
+
+import useRegisterMutation from '@/hooks/mutations/useRegisterMutations';
+import useLoginMutation from '@/hooks/mutations/useLoginMutation';
+import { type RegisterSchemaType, registerSchema } from './register-schema';
+
+export const RegisterUserForm = ({ onSuccess }: { onSuccess: () => void }) => {
+  const { mutate: register, isPending: registerPending } = useRegisterMutation();
+  const { mutateAsync: login, isPending: loginPending } = useLoginMutation();
+
+  const form = useForm<RegisterSchemaType>({
+    resolver: zodResolver(registerSchema),
+  });
+
+  const onSubmit = (data: RegisterSchemaType) => {
+    register(data, {
+      onSuccess: async () => {
+        const loginData = {
+          email: data.email,
+          password: data.password,
+        };
+
+        await login(loginData, {
+          onSuccess: () => {
+            // Change Register Step To Create Organization
+            onSuccess();
+          },
+        });
+      },
+    });
+  };
+
+  return (
+    <div className='mx-auto w-full max-w-sm lg:w-96'>
+      <div className='text-center'>
+        <Link to='/'>
+          <img src='/logo.png' className='w-14 mx-auto' />
+        </Link>
+        <h2 className='mt-6 text-3xl font-extrabold'>Create an account</h2>
+        <p className='mt-2 text-sm'>
+          Already have an account?{' '}
+          <Link to='/auth/login' className='font-medium text-primary hover:text-primary/80'>
+            Login
+          </Link>
+        </p>
+      </div>
+
+      <Form {...form}>
+        <form className='space-y-6 mt-8' onSubmit={form.handleSubmit(onSubmit)}>
+          <div className='grid md:grid-cols-2 gap-4'>
+            <FormField
+              control={form.control}
+              name='firstName'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel htmlFor='firstName'>First name</FormLabel>
+                  <FormControl>
+                    <Input placeholder='Jane' autoComplete='given-name' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name='lastName'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel htmlFor='lastName'>Last name</FormLabel>
+                  <FormControl>
+                    <Input placeholder='Doe' autoComplete='family-name' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel htmlFor='email'>Email</FormLabel>
+                <FormControl>
+                  <Input placeholder='[email protected]' autoComplete='email' {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name='password'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel htmlFor='password'>Password</FormLabel>
+                <FormControl>
+                  <Input placeholder='********' type='password' autoComplete='current-password' {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Button type='submit' className='w-full' disabled={registerPending || loginPending}>
+            {registerPending || loginPending ? <LoadingSpinner className='' /> : 'Create account'}
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+};