feat: email and password login feature (#260)

* feat: email and password login feature

* fix: some updates

* feat: add password input component

* fix: build error

* chore: some minor improvements

---------

Co-authored-by: Puru D <[email protected]>

Author: anikdhabal

package-lock.json

@@ -61,8 +61,10 @@
     "@trpc/next": "^10.45.2",
     "@trpc/react-query": "^10.43.6",
     "@trpc/server": "^10.43.6",
+    "@types/bcryptjs": "^2.4.6",
     "@types/papaparse": "^5.3.14",
     "@wojtekmaj/react-hooks": "^1.18.1",
+    "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",

package.json

@@ -0,0 +1,28 @@
+/*
+  Warnings:
+
+  - The required column `id` was added to the `VerificationToken` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
+
+*/
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "password" TEXT;
+
+-- AlterTable
+ALTER TABLE "VerificationToken" ADD COLUMN     "id" TEXT NOT NULL,
+ADD CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("id");
+
+-- CreateTable
+CREATE TABLE "PasswordResetToken" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "PasswordResetToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PasswordResetToken_token_key" ON "PasswordResetToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PasswordResetToken_email_token_key" ON "PasswordResetToken"("email", "token");

prisma/migrations/20240421083719_implement_email_password_login_feature/migration.sql

@@ -51,6 +51,7 @@ model User {
   id            String    @id @default(cuid())
   name          String?
   email         String?   @unique
+  password      String?
   emailVerified DateTime?
   image         String?
 
@@ -60,13 +61,23 @@ model User {
 }
 
 model VerificationToken {
+  id         String   @id @default(cuid())
   identifier String
   token      String   @unique
   expires    DateTime
 
   @@unique([identifier, token])
 }
 
+model PasswordResetToken {
+  id      String   @id @default(cuid())
+  email   String
+  token   String   @unique
+  expires DateTime
+
+  @@unique([email, token])
+}
+
 model Company {
   id                   String   @id @default(cuid())
   name                 String

prisma/schema.prisma

@@ -1,6 +1,7 @@
 import type { MemberStatusEnum } from "@/prisma/enums";
 import { db } from "@/server/db";
 import { faker } from "@faker-js/faker";
+import bcrypt from "bcryptjs";
 import colors from "colors";
 colors.enable();
 
@@ -63,11 +64,14 @@ const seedTeam = async () => {
 
   team.forEach(async (t) => {
     // const { name, email, image, title, status, isOnboarded } = t
+    const salt = await bcrypt.genSalt(10);
+    const hashedPassword = await bcrypt.hash("P@ssw0rd!", salt);
     const { name, email, title, status, isOnboarded } = t;
     const user = await db.user.create({
       data: {
         name,
         email,
+        password: hashedPassword,
         // image,
       },
     });

prisma/seeds/team.ts

@@ -9,7 +9,7 @@ export default async function AuthenticatedLayout({
   const session = await getServerAuthSession();
 
   if (!session) {
-    redirect("/login");
+    redirect("/signin");
   }
   return <>{children}</>;
 }

src/app/(authenticated)/layout.tsx

@@ -0,0 +1,8 @@
+import { type Metadata } from "next";
+import CheckEmailComponent from "@/components/onboarding/check-email";
+export const metadata: Metadata = {
+  title: "Check Email",
+};
+export default function CheckEmail() {
+  return <CheckEmailComponent />;
+}

src/app/(unauthenticated)/check-email/page.tsx

@@ -0,0 +1,10 @@
+import EmailSent from "@/components/onboarding/email-sent";
+
+import { type Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Email Sent",
+};
+export default function EmailSentPage() {
+  return <EmailSent />;
+}

src/app/(unauthenticated)/email-sent/page.tsx

@@ -0,0 +1,9 @@
+import ForgotPassword from "@/components/onboarding/forgot-password";
+import { type Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Forgot Password",
+};
+export default function ForgotPasswordPage() {
+  return <ForgotPassword />;
+}

src/app/(unauthenticated)/forgot-password/page.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { RiCheckboxCircleLine } from "@remixicon/react";
+
+export const metadata: Metadata = {
+  title: "Password Updated",
+};
+
+export default function PasswordUpdated() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
+      <div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
+        <div className="flex flex-col gap-y-2 text-center">
+          <RiCheckboxCircleLine className="h-10 w-auto" />
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Password Updated
+          </h1>
+
+          <p className="text-sm text-muted-foreground">
+            Your password has been updated successfully.
+          </p>
+
+          <Link href="/" className="mt-4">
+            <Button size="lg">Return to sign in</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(unauthenticated)/password-updated/page.tsx

@@ -0,0 +1,18 @@
+import { type Metadata } from "next";
+import { ResetPasswordForm } from "@/components/onboarding/reset-password";
+
+export const metadata: Metadata = {
+  title: "Reset Password",
+};
+
+export type PageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function ResetPasswordPage({
+  params: { token },
+}: PageProps) {
+  return <ResetPasswordForm token={token} />;
+}

src/app/(unauthenticated)/reset-password/[token]/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export const metadata: Metadata = {
+  title: "Reset Password'",
+};
+
+export default function EmailVerificationWithoutTokenPage() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
+      <div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
+        <div className="flex flex-col gap-y-2 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Uh oh! Looks like you&apos;re missing a token
+          </h1>
+
+          <p className="text-sm text-muted-foreground">
+            It seems that there is no token provided, if you are trying to reset
+            your password please follow the link in your email.
+          </p>
+
+          <Link href="/" className="mt-4">
+            <Button size="lg">Go back home</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(unauthenticated)/reset-password/page.tsx

@@ -0,0 +1,24 @@
+import SignInForm from "@/components/onboarding/signin";
+import { IS_GOOGLE_AUTH_ENABLED } from "@/constants/auth";
+import { getServerAuthSession } from "@/server/auth";
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+  title: "Sign In",
+  description: "Sign In to Captable, Inc.",
+};
+
+export default async function SignIn() {
+  const session = await getServerAuthSession();
+
+  if (session?.user) {
+    if (session?.user?.companyPublicId) {
+      return redirect(`/${session.user.companyPublicId}`);
+    } else {
+      return redirect("/onboarding");
+    }
+  }
+
+  return <SignInForm isGoogleAuthEnabled={IS_GOOGLE_AUTH_ENABLED} />;
+}

src/app/(unauthenticated)/signin/page.tsx

@@ -0,0 +1,24 @@
+import SignUpForm from "@/components/onboarding/signup";
+import { IS_GOOGLE_AUTH_ENABLED } from "@/constants/auth";
+import { getServerAuthSession } from "@/server/auth";
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+  title: "Sign Up",
+  description: "Sign Up to Captable, Inc.",
+};
+
+export default async function SignIn() {
+  const session = await getServerAuthSession();
+
+  if (session?.user) {
+    if (session?.user?.companyPublicId) {
+      return redirect(`/${session.user.companyPublicId}`);
+    } else {
+      return redirect("/onboarding");
+    }
+  }
+
+  return <SignUpForm isGoogleAuthEnabled={IS_GOOGLE_AUTH_ENABLED} />;
+}

src/app/(unauthenticated)/signup/page.tsx

@@ -0,0 +1,18 @@
+import { type Metadata } from "next";
+import VerifyEmail from "@/components/onboarding/verify-email";
+
+export const metadata: Metadata = {
+  title: "Verify Email",
+};
+
+export type PageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function VerifyEmailPage({
+  params: { token },
+}: PageProps) {
+  return <VerifyEmail token={token} />;
+}

src/app/(unauthenticated)/verify-email/[token]/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export const metadata: Metadata = {
+  title: "Verify Email",
+};
+
+export default function EmailVerificationWithoutTokenPage() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
+      <div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
+        <div className="flex flex-col gap-y-2 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Uh oh! Looks like you&apos;re missing a token
+          </h1>
+
+          <p className="text-sm text-muted-foreground">
+            It seems that there is no token provided, if you are trying to
+            verify your email please follow the link in your email.
+          </p>
+
+          <Link href="/" className="mt-4">
+            <Button size="lg">Go back home</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(unauthenticated)/verify-email/page.tsx

@@ -8,5 +8,5 @@ export default async function HomePage() {
     return redirect(`/${session.user.companyPublicId}`);
   }
 
-  return redirect("/login");
+  return redirect("/signin");
 }

src/app/login/page.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 export const CaptableLogo = ({ className }: { className?: string }) => {
   return (
     <Image
-      className={cn("rounded", className)}
+      className={cn(className)}
       height={500}
       width={500}
       src={logo}