Merge pull request #5 from RicardoGEsteves/authentication-flow

feat: ✨ Sign up & improvements on user experience.

app/(main)/(auth)/sign-up/_components/sign-up.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+import { Icons } from "@/components/icons";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import UserAuthForm from "../../_components/user-auth-form";
+
+const SignUp = () => {
+  return (
+    <div className="container mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <Icons.logo className="mx-auto h-12 w-12" />
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Join SpreadIt community.
+        </h1>
+        <p className="text-sm max-w-xs mx-auto">
+          By continuing, you are creating a SpreadIt account and consenting to
+          our User Agreement and Privacy Policy.
+        </p>
+      </div>
+      <UserAuthForm />
+      <p className="px-8 text-center text-sm text-muted-foreground">
+        Already part of the SpreadIt community?{" "}
+        <Link
+          href="/sign-in"
+          className={cn(
+            buttonVariants({ variant: "link", size: "sm" }),
+            "text-sm text-muted-foreground hover:text-emerald-500"
+          )}
+        >
+          Sign In
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default SignUp;

app/(main)/(auth)/sign-up/page.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { ChevronLeft } from "lucide-react";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import SignUp from "./_components/sign-up";
+
+const SignUpPage = () => {
+  return (
+    <div className="absolute inset-0">
+      <div className="h-full max-w-2xl mx-auto flex flex-col items-center justify-center gap-20">
+        <Link
+          href="/"
+          className={cn(
+            buttonVariants({ variant: "outline" }),
+            "self-start -mt-20 text-emerald-500 hover:text-emerald-600"
+          )}
+        >
+          <ChevronLeft className="mr-2 h-4 w-4" />
+          Home
+        </Link>
+
+        <SignUp />
+      </div>
+    </div>
+  );
+};
+
+export default SignUpPage;

app/(main)/@authModal/(.)sign-in/page.tsx

@@ -0,0 +1,20 @@
+import CloseModal from "@/components/close-modal";
+import SignIn from "../../(auth)/sign-in/_components/sign-in";
+
+const InterceptSignInPage = () => {
+  return (
+    <div className="fixed inset-0 bg-foreground/20 z-10">
+      <div className="container flex items-center h-full max-w-lg mx-auto">
+        <div className="relative bg-background w-full h-fit py-20 px-2 rounded-lg">
+          <div className="absolute top-4 right-4">
+            <CloseModal />
+          </div>
+
+          <SignIn />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InterceptSignInPage;

app/(main)/@authModal/(.)sign-up/page.tsx

@@ -0,0 +1,20 @@
+import CloseModal from "@/components/close-modal";
+import SignUp from "../../(auth)/sign-up/_components/sign-up";
+
+const InterceptSignUpPage = () => {
+  return (
+    <div className="fixed inset-0 bg-foreground/20 z-10">
+      <div className="container flex items-center h-full max-w-lg mx-auto">
+        <div className="relative bg-background w-full h-fit py-20 px-2 rounded-lg">
+          <div className="absolute top-4 right-4">
+            <CloseModal />
+          </div>
+
+          <SignUp />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InterceptSignUpPage;

app/(main)/@authModal/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;

app/(main)/layout.tsx

@@ -2,12 +2,15 @@ import Navbar from "@/components/navigation/navbar";
 
 type MainLayoutProps = {
   children: React.ReactNode;
+  authModal?: React.ReactNode;
 };
 
-const MainLayout = ({ children }: MainLayoutProps) => {
+const MainLayout = ({ children, authModal }: MainLayoutProps) => {
   return (
     <>
       <Navbar />
+
+      {authModal}
       <div className="container max-w-7xl mx-auto h-full pt-12">{children}</div>
     </>
   );

components/close-modal.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "./ui/button";
+import { X } from "lucide-react";
+
+const CloseModal = () => {
+  const router = useRouter();
+
+  return (
+    <Button
+      variant="ghost"
+      className="h-6 w-6 p-0 rounded-md"
+      onClick={() => router.back()}
+    >
+      <X
+        aria-label="close modal"
+        className="h-4 w-4"
+      />
+    </Button>
+  );
+};
+
+export default CloseModal;