B2B-29: Create register-company form

app/(public)/register-company/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { MedReportTitle } from "@/components/MedReportTitle";
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import Image from "next/image";
+import medReportBigLogo from "@/assets/medReportBigLogo.png";
+import { SubmitButton } from "@/components/submit-button";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { companySchema } from "@/lib/validations/companySchema";
+import { CompanySubmitData } from "@/lib/types/company";
+import { submitCompanyRegistration } from "@/lib/services/register-company.service";
+import { useRouter } from "next/navigation";
+
+export default function RegisterCompany() {
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm({
+    resolver: yupResolver(companySchema),
+    mode: "onChange",
+  });
+
+  async function onSubmit(data: CompanySubmitData) {
+    const formData = new FormData();
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== undefined) formData.append(key, value);
+    });
+
+    try {
+      await submitCompanyRegistration(formData);
+      router.push("/register-company/success");
+    } catch (err: any) {
+      alert("Server validation error: " + err.message);
+    }
+  }
+
+  return (
+    <div className="flex flex-row border rounded-3xl border-border">
+      <div className="flex flex-col text-center py-14 px-12 w-1/2">
+        <MedReportTitle />
+        <h1 className="pt-8">Ettevõtte andmed</h1>
+        <p className="pt-2">
+          Pakkumise saamiseks palun sisesta ettevõtte andmed millega MedReport
+          kasutada kavatsed.
+        </p>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          noValidate
+          className="flex gap-4 flex-col text-left pt-8 px-6"
+        >
+          <div>
+            <Label>Ettevõtte nimi</Label>
+            <Input {...register("companyName")} />
+          </div>
+          <div>
+            <Label>Kontaktisik</Label>
+            <Input {...register("contactPerson")} />
+          </div>
+          <div>
+            <Label>E-mail</Label>
+            <Input type="email" {...register("email")}></Input>
+          </div>
+          <div>
+            <Label>Telefon</Label>
+            <Input type="tel" {...register("phone")} />
+          </div>
+          <SubmitButton
+            disabled={!isValid || isSubmitting}
+            pendingText="Saatmine..."
+            type="submit"
+            formAction={submitCompanyRegistration}
+            className="mt-4 hover:bg-primary/90"
+          >
+            Küsi pakkumist
+          </SubmitButton>
+        </form>
+      </div>
+      <div className="w-1/2">
+        <Image src={medReportBigLogo} alt="MedReport" priority />
+      </div>
+    </div>
+  );
+}

app/(public)/register-company/success/page.tsx

@@ -0,0 +1,21 @@
+import { MedReportTitle } from "@/components/MedReportTitle";
+import Image from "next/image";
+import sucess from "@/assets/success.png";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export default function CompanyRegistrationSuccess() {
+  return (
+    <div className="pt-2 px-16 pb-12 border rounded-3xl border-border">
+      <MedReportTitle />
+      <div className="flex flex-col items-center px-4">
+        <Image src={sucess} alt="Success" className="pt-6 pb-8" />
+        <h1 className="pb-2">Päring edukalt saadetud!</h1>
+        <p>Saadame teile esimesel võimalusel vastuse</p>
+      </div>
+      <Button className="w-full mt-8">
+        <Link href="/">Tagasi kodulehele</Link>
+      </Button>
+    </div>
+  );
+}

app/(public)/sign-in/page.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import React from "react";
+
+export default async function SignIn() {
+  return (
+    <div className="flex flex-col gap-2">
+      <Button variant="outline">
+        <Link href="/">Smart-ID</Link>
+      </Button>
+      <Button variant="outline">
+        <Link href="/">Mobiil-ID</Link>
+      </Button>
+      <Button variant="outline">
+        <Link href="/">ID-Kaart</Link>
+      </Button>
+      <Button variant="outline">
+        <Link href="/register-company">Loo ettevõtte konto</Link>
+      </Button>
+    </div>
+  );
+}

app/example/(auth-pages)/forgot-password/page.tsx

@@ -1,4 +1,4 @@
-import { forgotPasswordAction } from "@/app/actions";
+import { forgotPasswordAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";

app/example/(auth-pages)/sign-in/page.tsx

@@ -1,4 +1,4 @@
-import { signInAction } from "@/app/actions";
+import { signInAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";

app/example/(auth-pages)/sign-up/page.tsx

@@ -1,4 +1,4 @@
-import { signUpAction } from "@/app/actions";
+import { signUpAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";
@@ -24,7 +24,10 @@ export default async function Signup(props: {
         <h1 className="text-2xl font-medium">Sign up</h1>
         <p className="text-sm text text-foreground">
           Already have an account?{" "}
-          <Link className="text-primary font-medium underline" href="/sign-in">
+          <Link
+            className="text-primary font-medium underline"
+            href="/example/sign-in"
+          >
             Sign in
           </Link>
         </p>

app/example/globals.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/example/layout.tsx

@@ -0,0 +1,77 @@
+import DeployButton from "@/components/deploy-button";
+import { EnvVarWarning } from "@/components/env-var-warning";
+import HeaderAuth from "@/components/header-auth";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { hasEnvVars } from "@/utils/supabase/check-env-vars";
+import { Geist } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+import Link from "next/link";
+import "./globals.css";
+
+const defaultUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "http://localhost:3000";
+
+export const metadata = {
+  metadataBase: new URL(defaultUrl),
+  title: "Next.js and Supabase Starter Kit",
+  description: "The fastest way to build apps with Next.js and Supabase",
+};
+
+const geistSans = Geist({
+  display: "swap",
+  subsets: ["latin"],
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={geistSans.className} suppressHydrationWarning>
+      <body className="bg-background text-foreground">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <main className="min-h-screen flex flex-col items-center">
+            <div className="flex-1 w-full flex flex-col gap-20 items-center">
+              <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
+                <div className="w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm">
+                  <div className="flex gap-5 items-center font-semibold">
+                    <Link href={"/"}>Next.js Supabase Starter</Link>
+                    <div className="flex items-center gap-2">
+                      <DeployButton />
+                    </div>
+                  </div>
+                  {!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
+                </div>
+              </nav>
+              <div className="flex flex-col gap-20 max-w-5xl p-5">
+                {children}
+              </div>
+
+              <footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
+                <p>
+                  Powered by{" "}
+                  <a
+                    href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
+                    target="_blank"
+                    className="font-bold hover:underline"
+                    rel="noreferrer"
+                  >
+                    Supabase
+                  </a>
+                </p>
+                <ThemeSwitcher />
+              </footer>
+            </div>
+          </main>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/example/page.tsx

@@ -0,0 +1,16 @@
+import Hero from "@/components/hero";
+import ConnectSupabaseSteps from "@/components/tutorial/connect-supabase-steps";
+import SignUpUserSteps from "@/components/tutorial/sign-up-user-steps";
+import { hasEnvVars } from "@/utils/supabase/check-env-vars";
+
+export default async function Home() {
+  return (
+    <>
+      <Hero />
+      <main className="flex-1 flex flex-col gap-6 px-4">
+        <h2 className="font-medium text-xl mb-4">Next steps</h2>
+        {hasEnvVars ? <SignUpUserSteps /> : <ConnectSupabaseSteps />}
+      </main>
+    </>
+  );
+}

app/example/protected/page.tsx

@@ -11,7 +11,7 @@ export default async function ProtectedPage() {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return redirect("/sign-in");
+    return redirect("/example/sign-in");
   }
 
   return (

app/example/protected/reset-password/page.tsx

@@ -1,4 +1,4 @@
-import { resetPasswordAction } from "@/app/actions";
+import { resetPasswordAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";

app/globals.css

@@ -3,24 +3,48 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: 'Inter Display';
+    src: url('../fonts/InterDisplay-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Inter Display';
+    src: url('../fonts/InterDisplay-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: medium;
+    font-display: swap;
+  }
+
+  h1 {
+    @apply text-foreground text-2xl font-semibold tracking-tight
+  }
+
+  p {
+    @apply font-inter text-muted-foreground text-sm
+  }
+
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 240 10% 4%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --popover-foreground: 356 100% 97%;
+    --primary: 145 78% 18%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
     --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
+    --muted-foreground: 240 4% 41%;
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
+    --border: 240 6% 90%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
     --radius: 0.5rem;
@@ -30,33 +54,6 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
   }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
 }
 
 @layer base {
@@ -66,4 +63,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

app/layout.tsx

@@ -1,21 +1,22 @@
-import DeployButton from "@/components/deploy-button";
 import { EnvVarWarning } from "@/components/env-var-warning";
 import HeaderAuth from "@/components/header-auth";
-import { ThemeSwitcher } from "@/components/theme-switcher";
 import { hasEnvVars } from "@/utils/supabase/check-env-vars";
 import { Geist } from "next/font/google";
 import { ThemeProvider } from "next-themes";
-import Link from "next/link";
 import "./globals.css";
+import { Metadata } from "next";
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
   : "http://localhost:3000";
 
-export const metadata = {
+export const metadata: Metadata = {
   metadataBase: new URL(defaultUrl),
-  title: "Next.js and Supabase Starter Kit",
-  description: "The fastest way to build apps with Next.js and Supabase",
+  title: "MedReport",
+  description: "MedReport",
+  icons: {
+    icon: "icon.ico",
+  },
 };
 
 const geistSans = Geist({
@@ -41,33 +42,12 @@ export default function RootLayout({
             <div className="flex-1 w-full flex flex-col gap-20 items-center">
               <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
                 <div className="w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm">
-                  <div className="flex gap-5 items-center font-semibold">
-                    <Link href={"/"}>Next.js Supabase Starter</Link>
-                    <div className="flex items-center gap-2">
-                      <DeployButton />
-                    </div>
-                  </div>
                   {!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
                 </div>
               </nav>
               <div className="flex flex-col gap-20 max-w-5xl p-5">
                 {children}
               </div>
-
-              <footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
-                <p>
-                  Powered by{" "}
-                  <a
-                    href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
-                    target="_blank"
-                    className="font-bold hover:underline"
-                    rel="noreferrer"
-                  >
-                    Supabase
-                  </a>
-                </p>
-                <ThemeSwitcher />
-              </footer>
             </div>
           </main>
         </ThemeProvider>

app/page.tsx

@@ -1,16 +1,5 @@
-import Hero from "@/components/hero";
-import ConnectSupabaseSteps from "@/components/tutorial/connect-supabase-steps";
-import SignUpUserSteps from "@/components/tutorial/sign-up-user-steps";
-import { hasEnvVars } from "@/utils/supabase/check-env-vars";
+import { MedReportTitle } from "@/components/MedReportTitle";
 
 export default async function Home() {
-  return (
-    <>
-      <Hero />
-      <main className="flex-1 flex flex-col gap-6 px-4">
-        <h2 className="font-medium text-xl mb-4">Next steps</h2>
-        {hasEnvVars ? <SignUpUserSteps /> : <ConnectSupabaseSteps />}
-      </main>
-    </>
-  );
+  return <MedReportTitle />;
 }