k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

B2B-29: Create register-company form

Browse Source 
B2B-29: Create register-company form
This commit is contained in:
danelkungla
2025-06-03 18:45:09 +03:00
committed by GitHub
parent 657a36a298 1caf02bf4a
commit 2ce37ea99b
34 changed files with 339 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/(auth-pages)/forgot-password/page.tsx
View File

@@ -1,37 +0,0 @@
import { forgotPasswordAction } from "@/app/actions";
import { FormMessage, Message } from "@/components/form-message";
import { SubmitButton } from "@/components/submit-button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import Link from "next/link";
import { SmtpMessage } from "../smtp-message";
export default async function ForgotPassword(props: {
searchParams: Promise<Message>;
}) {
const searchParams = await props.searchParams;
return (
<>
<form className="flex-1 flex flex-col w-full gap-2 text-foreground [&>input]:mb-6 min-w-64 max-w-64 mx-auto">
<div>
<h1 className="text-2xl font-medium">Reset Password</h1>
<p className="text-sm text-secondary-foreground">
Already have an account?{" "}
<Link className="text-primary underline" href="/sign-in">
Sign in
</Link>
</p>
</div>
<div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
<Label htmlFor="email">Email</Label>
<Input name="email" placeholder="you@example.com" required />
<SubmitButton formAction={forgotPasswordAction}>
Reset Password
</SubmitButton>
<FormMessage message={searchParams} />
</div>
</form>
<SmtpMessage />
</>
);
}

9
app/(auth-pages)/layout.tsx
View File

@@ -1,9 +0,0 @@
export default async function Layout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="max-w-7xl flex flex-col gap-12 items-start">{children}</div>
);
}

44
app/(auth-pages)/sign-in/page.tsx
View File

@@ -1,44 +0,0 @@
import { signInAction } from "@/app/actions";
import { FormMessage, Message } from "@/components/form-message";
import { SubmitButton } from "@/components/submit-button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import Link from "next/link";
export default async function Login(props: { searchParams: Promise<Message> }) {
const searchParams = await props.searchParams;
return (
<form className="flex-1 flex flex-col min-w-64">
<h1 className="text-2xl font-medium">Sign in</h1>
<p className="text-sm text-foreground">
Don't have an account?{" "}
<Link className="text-foreground font-medium underline" href="/sign-up">
Sign up
</Link>
</p>
<div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
<Label htmlFor="email">Email</Label>
<Input name="email" placeholder="you@example.com" required />
<div className="flex justify-between items-center">
<Label htmlFor="password">Password</Label>
<Link
className="text-xs text-foreground underline"
href="/forgot-password"
>
Forgot Password?
</Link>
</div>
<Input
type="password"
name="password"
placeholder="Your password"
required
/>
<SubmitButton pendingText="Signing In..." formAction={signInAction}>
Sign in
</SubmitButton>
<FormMessage message={searchParams} />
</div>
</form>
);
}

51
app/(auth-pages)/sign-up/page.tsx
View File

@@ -1,51 +0,0 @@
import { signUpAction } from "@/app/actions";
import { FormMessage, Message } from "@/components/form-message";
import { SubmitButton } from "@/components/submit-button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import Link from "next/link";
import { SmtpMessage } from "../smtp-message";
export default async function Signup(props: {
searchParams: Promise<Message>;
}) {
const searchParams = await props.searchParams;
if ("message" in searchParams) {
return (
<div className="w-full flex-1 flex items-center h-screen sm:max-w-md justify-center gap-2 p-4">
<FormMessage message={searchParams} />
</div>
);
}
return (
<>
<form className="flex flex-col min-w-64 max-w-64 mx-auto">
<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">
Sign in
</Link>
</p>
<div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
<Label htmlFor="email">Email</Label>
<Input name="email" placeholder="you@example.com" required />
<Label htmlFor="password">Password</Label>
<Input
type="password"
name="password"
placeholder="Your password"
minLength={6}
required
/>
<SubmitButton formAction={signUpAction} pendingText="Signing up...">
Sign up
</SubmitButton>
<FormMessage message={searchParams} />
</div>
</form>
<SmtpMessage />
</>
);
}

25
app/(auth-pages)/smtp-message.tsx
View File

@@ -1,25 +0,0 @@
import { ArrowUpRight, InfoIcon } from "lucide-react";
import Link from "next/link";
export function SmtpMessage() {
return (
<div className="bg-muted/50 px-5 py-3 border rounded-md flex gap-4">
<InfoIcon size={16} className="mt-0.5" />
<div className="flex flex-col gap-1">
<small className="text-sm text-secondary-foreground">
<strong> Note:</strong> Emails are rate limited. Enable Custom SMTP to
increase the rate limit.
</small>
<div>
<Link
href="https://supabase.com/docs/guides/auth/auth-smtp"
target="_blank"
className="text-primary/50 hover:text-primary flex items-center text-sm gap-1"
>
Learn more <ArrowUpRight size={14} />
</Link>
</div>
</div>
</div>
);
}

91
app/(public)/register-company/page.tsx Normal file
View File

@@ -0,0 +1,91 @@
"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: unknown) {
if (err instanceof Error) {
alert("Server validation error: " + err.message);
}
alert("Server validation error");
}
}
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>
);
}

21
app/(public)/register-company/success/page.tsx Normal file
View File

@@ -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>
);
}

22
app/(public)/sign-in/page.tsx Normal file
View File

@@ -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>
);
}

134
app/actions.ts
View File

@@ -1,134 +0,0 @@
"use server";
import { encodedRedirect } from "@/utils/utils";
import { createClient } from "@/utils/supabase/server";
import { headers } from "next/headers";
import { redirect } from "next/navigation";
export const signUpAction = async (formData: FormData) => {
const email = formData.get("email")?.toString();
const password = formData.get("password")?.toString();
const supabase = await createClient();
const origin = (await headers()).get("origin");
if (!email || !password) {
return encodedRedirect(
"error",
"/sign-up",
"Email and password are required",
);
}
const { error } = await supabase.auth.signUp({
email,
password,
options: {
emailRedirectTo: `${origin}/auth/callback`,
},
});
if (error) {
console.error(error.code + " " + error.message);
return encodedRedirect("error", "/sign-up", error.message);
} else {
return encodedRedirect(
"success",
"/sign-up",
"Thanks for signing up! Please check your email for a verification link.",
);
}
};
export const signInAction = async (formData: FormData) => {
const email = formData.get("email") as string;
const password = formData.get("password") as string;
const supabase = await createClient();
const { error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) {
return encodedRedirect("error", "/sign-in", error.message);
}
return redirect("/protected");
};
export const forgotPasswordAction = async (formData: FormData) => {
const email = formData.get("email")?.toString();
const supabase = await createClient();
const origin = (await headers()).get("origin");
const callbackUrl = formData.get("callbackUrl")?.toString();
if (!email) {
return encodedRedirect("error", "/forgot-password", "Email is required");
}
const { error } = await supabase.auth.resetPasswordForEmail(email, {
redirectTo: `${origin}/auth/callback?redirect_to=/protected/reset-password`,
});
if (error) {
console.error(error.message);
return encodedRedirect(
"error",
"/forgot-password",
"Could not reset password",
);
}
if (callbackUrl) {
return redirect(callbackUrl);
}
return encodedRedirect(
"success",
"/forgot-password",
"Check your email for a link to reset your password.",
);
};
export const resetPasswordAction = async (formData: FormData) => {
const supabase = await createClient();
const password = formData.get("password") as string;
const confirmPassword = formData.get("confirmPassword") as string;
if (!password || !confirmPassword) {
encodedRedirect(
"error",
"/protected/reset-password",
"Password and confirm password are required",
);
}
if (password !== confirmPassword) {
encodedRedirect(
"error",
"/protected/reset-password",
"Passwords do not match",
);
}
const { error } = await supabase.auth.updateUser({
password: password,
});
if (error) {
encodedRedirect(
"error",
"/protected/reset-password",
"Password update failed",
);
}
encodedRedirect("success", "/protected/reset-password", "Password updated");
};
export const signOutAction = async () => {
const supabase = await createClient();
await supabase.auth.signOut();
return redirect("/sign-in");
};

24
app/auth/callback/route.ts
View File

@@ -1,24 +0,0 @@
import { createClient } from "@/utils/supabase/server";
import { NextResponse } from "next/server";
export async function GET(request: Request) {
// The `/auth/callback` route is required for the server-side auth flow implemented
// by the SSR package. It exchanges an auth code for the user's session.
// https://supabase.com/docs/guides/auth/server-side/nextjs
const requestUrl = new URL(request.url);
const code = requestUrl.searchParams.get("code");
const origin = requestUrl.origin;
const redirectTo = requestUrl.searchParams.get("redirect_to")?.toString();
if (code) {
const supabase = await createClient();
await supabase.auth.exchangeCodeForSession(code);
}
if (redirectTo) {
return NextResponse.redirect(`${origin}${redirectTo}`);
}
// URL to redirect to after sign up process completes
return NextResponse.redirect(`${origin}/protected`);
}

BIN
app/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

63
app/globals.css
View File

@@ -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;
}
}
}

BIN
app/icon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

34
app/layout.tsx
View File

@@ -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>

BIN
app/opengraph-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 283 KiB

15
app/page.tsx
View File

@@ -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 />;
}

38
app/protected/page.tsx
View File

@@ -1,38 +0,0 @@
import FetchDataSteps from "@/components/tutorial/fetch-data-steps";
import { createClient } from "@/utils/supabase/server";
import { InfoIcon } from "lucide-react";
import { redirect } from "next/navigation";
export default async function ProtectedPage() {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
return redirect("/sign-in");
}
return (
<div className="flex-1 w-full flex flex-col gap-12">
<div className="w-full">
<div className="bg-accent text-sm p-3 px-5 rounded-md text-foreground flex gap-3 items-center">
<InfoIcon size="16" strokeWidth={2} />
This is a protected page that you can only see as an authenticated
user
</div>
</div>
<div className="flex flex-col gap-2 items-start">
<h2 className="font-bold text-2xl mb-4">Your user details</h2>
<pre className="text-xs font-mono p-3 rounded border max-h-32 overflow-auto">
{JSON.stringify(user, null, 2)}
</pre>
</div>
<div>
<h2 className="font-bold text-2xl mb-4">Next steps</h2>
<FetchDataSteps />
</div>
</div>
);
}

37
app/protected/reset-password/page.tsx
View File

@@ -1,37 +0,0 @@
import { resetPasswordAction } from "@/app/actions";
import { FormMessage, Message } from "@/components/form-message";
import { SubmitButton } from "@/components/submit-button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default async function ResetPassword(props: {
searchParams: Promise<Message>;
}) {
const searchParams = await props.searchParams;
return (
<form className="flex flex-col w-full max-w-md p-4 gap-2 [&>input]:mb-4">
<h1 className="text-2xl font-medium">Reset password</h1>
<p className="text-sm text-foreground/60">
Please enter your new password below.
</p>
<Label htmlFor="password">New password</Label>
<Input
type="password"
name="password"
placeholder="New password"
required
/>
<Label htmlFor="confirmPassword">Confirm password</Label>
<Input
type="password"
name="confirmPassword"
placeholder="Confirm password"
required
/>
<SubmitButton formAction={resetPasswordAction}>
Reset password
</SubmitButton>
<FormMessage message={searchParams} />
</form>
);
}

BIN
app/twitter-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 283 KiB

16
assets/MedReportSmallLogo.tsx Normal file
View File

@@ -0,0 +1,16 @@
export const MedReportSmallLogo = () => {
return (
<svg
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.7002 11.7002C15.7296 11.7002 11.7002 15.7296 11.7002 20.7002H8.10059C8.10059 13.7414 13.7414 8.10059 20.7002 8.10059V11.7002ZM12.8994 0.299805C12.8994 7.25859 7.25859 12.8994 0.299805 12.8994V9.2998C5.27037 9.2998 9.2998 5.27037 9.2998 0.299805H12.8994Z"
fill="#0A5328"
/>
</svg>
);
};

BIN
assets/medReportBigLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/success.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

10
components/MedReportTitle.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { MedReportSmallLogo } from "@/assets/MedReportSmallLogo";
export const MedReportTitle = () => (
<div className="flex gap-2 justify-center">
<MedReportSmallLogo />
<span className="text-foreground text-lg font-semibold tracking-tighter">
MedReport
</span>
</div>
);

7
components/header-auth.tsx
View File

@@ -1,4 +1,4 @@
import { signOutAction } from "@/app/actions";
import { signOutAction } from "@/app/example/actions";
import { hasEnvVars } from "@/utils/supabase/check-env-vars";
import Link from "next/link";
import { Badge } from "./ui/badge";
@@ -41,7 +41,7 @@ export default async function AuthButton() {
disabled
className="opacity-75 cursor-none pointer-events-none"
>
<Link href="/sign-up">Sign up</Link>
<Link href="example/sign-up">Sign up</Link>
</Button>
</div>
</div>
@@ -62,9 +62,6 @@ export default async function AuthButton() {
<Button asChild size="sm" variant={"outline"}>
<Link href="/sign-in">Sign in</Link>
</Button>
<Button asChild size="sm" variant={"default"}>
<Link href="/sign-up">Sign up</Link>
</Button>
</div>
);
}

9
components/ui/button.tsx
View File

@@ -5,11 +5,12 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default:
"bg-primary text-primary-foreground font-inter font-medium hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
@@ -30,7 +31,7 @@ const buttonVariants = cva(
variant: "default",
size: "default",
},
},
}
);
export interface ButtonProps
@@ -49,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
/>
);
},
}
);
Button.displayName = "Button";

2
components/ui/label.tsx
View File

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
"text-sm text-foreground font-inter font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
);
const Label = React.forwardRef<

BIN
fonts/InterDisplay-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/InterDisplay-Regular.woff2 Normal file
View File

Binary file not shown.

31
lib/services/register-company.service.ts Normal file
View File

@@ -0,0 +1,31 @@
"use server";
import * as yup from "yup";
import { companySchema } from "@/lib/validations/companySchema";
export async function submitCompanyRegistration(formData: FormData) {
const data = {
companyName: formData.get("companyName")?.toString() || "",
contactPerson: formData.get("contactPerson")?.toString() || "",
email: formData.get("email")?.toString() || "",
phone: formData.get("phone")?.toString() || "",
};
try {
await companySchema.validate(data, { abortEarly: false });
console.log("Valid data:", data);
} catch (validationError) {
if (validationError instanceof yup.ValidationError) {
const errors = validationError.inner.map((err) => ({
path: err.path,
message: err.message,
}));
throw new Error(
"Validation failed: " +
errors.map((e) => `${e.path}: ${e.message}`).join(", ")
);
}
throw validationError;
}
}

6
lib/types/company.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface CompanySubmitData {
companyName: string;
contactPerson: string;
email: string;
phone?: string;
}

8
lib/validations/companySchema.ts Normal file
View File

@@ -0,0 +1,8 @@
import * as yup from "yup";
export const companySchema = yup.object({
companyName: yup.string().required("Company name is required"),
contactPerson: yup.string().required("Contact person is required"),
email: yup.string().email("Invalid email").required("Email is required"),
phone: yup.string().optional(),
});

81
package-lock.json generated
View File

@@ -24,15 +24,18 @@
"xml-js": "^1.6.11"
},
"devDependencies": {
"@hookform/resolvers": "^5.0.1",
"@types/node": "22.10.2",
"@types/react": "^19.0.2",
"@types/react-dom": "19.0.2",
"postcss": "8.4.49",
"react-hook-form": "^7.57.0",
"supabase": "^2.23.4",
"tailwind-merge": "^2.5.2",
"tailwindcss": "3.4.17",
"tailwindcss-animate": "^1.0.7",
"typescript": "5.7.2"
"typescript": "5.7.2",
"yup": "^1.6.1"
}
},
"node_modules/@alloc/quick-lru": {
@@ -90,6 +93,18 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
},
"node_modules/@hookform/resolvers": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.0.1.tgz",
"integrity": "sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==",
"dev": true,
"dependencies": {
"@standard-schema/utils": "^0.3.0"
},
"peerDependencies": {
"react-hook-form": "^7.55.0"
}
},
"node_modules/@img/sharp-darwin-arm64": {
"version": "0.34.1",
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz",
@@ -1267,6 +1282,12 @@
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="
},
"node_modules/@standard-schema/utils": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
"dev": true
},
"node_modules/@supabase/auth-js": {
"version": "2.69.1",
"resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.69.1.tgz",
@@ -2965,6 +2986,12 @@
"node": "^18.17.0 || >=20.5.0"
}
},
"node_modules/property-expr": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
"dev": true
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3010,6 +3037,22 @@
"react": "^19.0.0"
}
},
"node_modules/react-hook-form": {
"version": "7.57.0",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.57.0.tgz",
"integrity": "sha512-RbEks3+cbvTP84l/VXGUZ+JMrKOS8ykQCRYdm5aYsxnDquL0vspsyNhGRO7pcH6hsZqWlPOjLye7rJqdtdAmlg==",
"dev": true,
"engines": {
"node": ">=18.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
},
"node_modules/react-remove-scroll": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
@@ -3583,6 +3626,12 @@
"node": ">=0.8"
}
},
"node_modules/tiny-case": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
"dev": true
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3595,6 +3644,12 @@
"node": ">=8.0"
}
},
"node_modules/toposort": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
"dev": true
},
"node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -3611,6 +3666,18 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
},
"node_modules/type-fest": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
"dev": true,
"engines": {
"node": ">=12.20"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/typescript": {
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
@@ -3902,6 +3969,18 @@
"engines": {
"node": ">= 14"
}
},
"node_modules/yup": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz",
"integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==",
"dev": true,
"dependencies": {
"property-expr": "^2.0.5",
"tiny-case": "^1.0.3",
"toposort": "^2.0.2",
"type-fest": "^2.19.0"
}
}
}
}

5
package.json
View File

@@ -25,14 +25,17 @@
"xml-js": "^1.6.11"
},
"devDependencies": {
"@hookform/resolvers": "^5.0.1",
"@types/node": "22.10.2",
"@types/react": "^19.0.2",
"@types/react-dom": "19.0.2",
"react-hook-form": "^7.57.0",
"postcss": "8.4.49",
"supabase": "^2.23.4",
"tailwind-merge": "^2.5.2",
"tailwindcss": "3.4.17",
"tailwindcss-animate": "^1.0.7",
"typescript": "5.7.2"
"typescript": "5.7.2",
"yup": "^1.6.1"
}
}

3
tailwind.config.ts
View File

@@ -72,6 +72,9 @@ const config = {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
fontFamily: {
inter: ['"Inter Display"', "Geist"],
},
},
},
plugins: [require("tailwindcss-animate")],