implemented stripe for the cloud instance

pages/api/archives/[...params].ts

@@ -15,6 +15,11 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
 
   if (!session?.user?.username)
     return res.status(401).json({ response: "You must be logged in." });
+  else if (session?.user?.isSubscriber === false)
+    res.status(401).json({
+      response:
+        "You are not a subscriber, feel free to reach out to us at hello@linkwarden.app in case of any issues.",
+    });
 
   const collectionIsAccessible = await getPermission(
     session.user.id,

pages/api/auth/[...nextauth].ts

@@ -9,46 +9,45 @@ import { PrismaAdapter } from "@auth/prisma-adapter";
 import { Adapter } from "next-auth/adapters";
 import sendVerificationRequest from "@/lib/api/sendVerificationRequest";
 import { Provider } from "next-auth/providers";
+import checkSubscription from "@/lib/api/checkSubscription";
 
-let email;
+const emailEnabled =
+  process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
 
 const providers: Provider[] = [
   CredentialsProvider({
     type: "credentials",
-    credentials: {
-      username: {
-        label: "Username",
-        type: "text",
-      },
-      password: {
-        label: "Password",
-        type: "password",
-      },
-    },
+    credentials: {},
     async authorize(credentials, req) {
       if (!credentials) return null;
 
+      const { username, password } = credentials as {
+        username: string;
+        password: string;
+      };
+
       const findUser = await prisma.user.findFirst({
-        where: {
-          OR: [
-            {
-              username: credentials.username.toLowerCase(),
+        where: emailEnabled
+          ? {
+              OR: [
+                {
+                  username: username.toLowerCase(),
+                },
+                {
+                  email: username?.toLowerCase(),
+                },
+              ],
+              emailVerified: { not: null },
+            }
+          : {
+              username: username.toLowerCase(),
             },
-            {
-              email: credentials.username.toLowerCase(),
-            },
-          ],
-          emailVerified: { not: null },
-        },
       });
 
       let passwordMatches: boolean = false;
 
       if (findUser?.password) {
-        passwordMatches = bcrypt.compareSync(
-          credentials.password,
-          findUser.password
-        );
+        passwordMatches = bcrypt.compareSync(password, findUser.password);
       }
 
       if (passwordMatches) {
@@ -58,14 +57,13 @@ const providers: Provider[] = [
   }),
 ];
 
-if (process.env.EMAIL_SERVER && process.env.EMAIL_FROM)
+if (emailEnabled)
   providers.push(
     EmailProvider({
       server: process.env.EMAIL_SERVER,
       from: process.env.EMAIL_FROM,
-      maxAge: 600,
+      maxAge: 1200,
       sendVerificationRequest(params) {
-        email = params.identifier;
         sendVerificationRequest(params);
       },
     })
@@ -75,6 +73,7 @@ export const authOptions: AuthOptions = {
   adapter: PrismaAdapter(prisma) as Adapter,
   session: {
     strategy: "jwt",
+    maxAge: 30 * 24 * 60 * 60, // 30 days
   },
   providers,
   pages: {
@@ -85,11 +84,43 @@ export const authOptions: AuthOptions = {
     session: async ({ session, token }: { session: Session; token: JWT }) => {
       session.user.id = parseInt(token.id as string);
       session.user.username = token.username as string;
+      session.user.isSubscriber = token.isSubscriber as boolean;
 
       return session;
     },
     // Using the `...rest` parameter to be able to narrow down the type based on `trigger`
-    jwt({ token, trigger, session, user }) {
+    async jwt({ token, trigger, session, user }) {
+      const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+      const PRICE_ID = process.env.PRICE_ID;
+
+      console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaa", token);
+
+      const secondsInTwoWeeks = 1209600;
+      const subscriptionIsTimesUp =
+        token.subscriptionCanceledAt &&
+        new Date() >
+          new Date(
+            ((token.subscriptionCanceledAt as number) + secondsInTwoWeeks) *
+              1000
+          );
+
+      if (STRIPE_SECRET_KEY && PRICE_ID && (trigger || subscriptionIsTimesUp)) {
+        console.log("EXECUTED!!!");
+        const subscription = await checkSubscription(
+          STRIPE_SECRET_KEY,
+          token.email as string,
+          PRICE_ID
+        );
+
+        subscription.isSubscriber;
+
+        if (subscription.subscriptionCanceledAt) {
+          token.subscriptionCanceledAt = subscription.subscriptionCanceledAt;
+        } else token.subscriptionCanceledAt = undefined;
+
+        token.isSubscriber = subscription.isSubscriber;
+      }
+
       if (trigger === "signIn") {
         token.id = user.id;
         token.username = (user as any).username;

pages/api/auth/register.ts

@@ -2,7 +2,7 @@ import { prisma } from "@/lib/api/db";
 import type { NextApiRequest, NextApiResponse } from "next";
 import bcrypt from "bcrypt";
 
-const EmailProvider =
+const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
 
 interface Data {
@@ -22,7 +22,7 @@ export default async function Index(
 ) {
   const body: User = req.body;
 
-  const checkHasEmptyFields = EmailProvider
+  const checkHasEmptyFields = emailEnabled
     ? !body.username || !body.password || !body.name || !body.email
     : !body.username || !body.password || !body.name;
 
@@ -34,7 +34,7 @@ export default async function Index(
   const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000);
 
   // Remove user's who aren't verified for more than 10 minutes
-  if (EmailProvider)
+  if (emailEnabled)
     await prisma.user.deleteMany({
       where: {
         OR: [
@@ -53,10 +53,12 @@ export default async function Index(
     });
 
   const checkIfUserExists = await prisma.user.findFirst({
-    where: EmailProvider
+    where: emailEnabled
       ? {
           OR: [
-            { username: body.username.toLowerCase() },
+            {
+              username: body.username.toLowerCase(),
+            },
             {
               email: body.email?.toLowerCase(),
             },

pages/api/avatar/[id].ts

@@ -11,17 +11,22 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   const userName = session?.user.username?.toLowerCase();
   const queryId = Number(req.query.id);
 
-  if (!queryId)
-    return res
-      .setHeader("Content-Type", "text/plain")
-      .status(401)
-      .send("Invalid parameters.");
-
   if (!userId || !userName)
     return res
       .setHeader("Content-Type", "text/plain")
       .status(401)
       .send("You must be logged in.");
+  else if (session?.user?.isSubscriber === false)
+    res.status(401).json({
+      response:
+        "You are not a subscriber, feel free to reach out to us at hello@linkwarden.app in case of any issues.",
+    });
+
+  if (!queryId)
+    return res
+      .setHeader("Content-Type", "text/plain")
+      .status(401)
+      .send("Invalid parameters.");
 
   if (userId !== queryId) {
     const targetUser = await prisma.user.findUnique({

pages/api/payment/index.ts

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
+import paymentCheckout from "@/lib/api/paymentCheckout";
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+  const PRICE_ID = process.env.PRICE_ID;
+  const session = await getServerSession(req, res, authOptions);
+
+  if (!session?.user?.username)
+    return res.status(401).json({ response: "You must be logged in." });
+  else if (!STRIPE_SECRET_KEY || !PRICE_ID) {
+    return res.status(400).json({ response: "Payment is disabled." });
+  }
+
+  if (req.method === "GET") {
+    const users = await paymentCheckout(
+      STRIPE_SECRET_KEY,
+      session?.user.email,
+      "register",
+      PRICE_ID
+    );
+    return res.status(users.status).json({ response: users.response });
+  }
+}

pages/api/routes/collections/index.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
-import { authOptions } from "pages/api/auth/[...nextauth]";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import getCollections from "@/lib/api/controllers/collections/getCollections";
 import postCollection from "@/lib/api/controllers/collections/postCollection";
 import updateCollection from "@/lib/api/controllers/collections/updateCollection";
@@ -14,7 +14,11 @@ export default async function collections(
 
   if (!session?.user?.username) {
     return res.status(401).json({ response: "You must be logged in." });
-  }
+  } else if (session?.user?.isSubscriber === false)
+    res.status(401).json({
+      response:
+        "You are not a subscriber, feel free to reach out to us at hello@linkwarden.app in case of any issues.",
+    });
 
   if (req.method === "GET") {
     const collections = await getCollections(session.user.id);

pages/api/routes/links/index.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
-import { authOptions } from "pages/api/auth/[...nextauth]";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import getLinks from "@/lib/api/controllers/links/getLinks";
 import postLink from "@/lib/api/controllers/links/postLink";
 import deleteLink from "@/lib/api/controllers/links/deleteLink";
@@ -11,7 +11,11 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
 
   if (!session?.user?.username) {
     return res.status(401).json({ response: "You must be logged in." });
-  }
+  } else if (session?.user?.isSubscriber === false)
+    res.status(401).json({
+      response:
+        "You are not a subscriber, feel free to reach out to us at hello@linkwarden.app in case of any issues.",
+    });
 
   if (req.method === "GET") {
     const links = await getLinks(session.user.id, req?.query?.body as string);

pages/api/routes/tags/index.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
-import { authOptions } from "pages/api/auth/[...nextauth]";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import getTags from "@/lib/api/controllers/tags/getTags";
 
 export default async function tags(req: NextApiRequest, res: NextApiResponse) {
@@ -8,7 +8,11 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
 
   if (!session?.user?.username) {
     return res.status(401).json({ response: "You must be logged in." });
-  }
+  } else if (session?.user?.isSubscriber === false)
+    res.status(401).json({
+      response:
+        "You are not a subscriber, feel free to reach out to us at hello@linkwarden.app in case of any issues.",
+    });
 
   if (req.method === "GET") {
     const tags = await getTags(session.user.id);

pages/api/routes/users/index.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
-import { authOptions } from "pages/api/auth/[...nextauth]";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import getUsers from "@/lib/api/controllers/users/getUsers";
 import updateUser from "@/lib/api/controllers/users/updateUser";
 
@@ -9,7 +9,11 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
 
   if (!session?.user.username) {
     return res.status(401).json({ response: "You must be logged in." });
-  }
+  } else if (session?.user?.isSubscriber === false)
+    res.status(401).json({
+      response:
+        "You are not a subscriber, feel free to reach out to us at hello@linkwarden.app in case of any issues.",
+    });
 
   const lookupUsername = req.query.username as string;
   const isSelf = session.user.username === lookupUsername ? true : false;
@@ -18,7 +22,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
     const users = await getUsers(lookupUsername, isSelf, session.user.username);
     return res.status(users.status).json({ response: users.response });
   } else if (req.method === "PUT" && !req.body.password) {
-    const updated = await updateUser(req.body, session.user.id);
+    const updated = await updateUser(req.body, session.user);
     return res.status(updated.status).json({ response: updated.response });
   }
 }

pages/forgot.tsx

@@ -39,7 +39,7 @@ export default function Forgot() {
 
   return (
     <>
-      <div className="p-5 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+      <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
         <div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
           <Image
             src="/linkwarden.png"
@@ -49,7 +49,7 @@ export default function Forgot() {
             className="h-12 w-fit"
           />
           <div className="text-center sm:text-right">
-            <p className="text-3xl font-bold text-sky-500">Password Reset</p>
+            <p className="text-3xl text-sky-500">Password Reset</p>
           </div>
         </div>
 

pages/login.tsx

@@ -10,7 +10,7 @@ interface FormData {
   password: string;
 }
 
-const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
 export default function Login() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -46,7 +46,7 @@ export default function Login() {
 
   return (
     <>
-      <div className="p-5 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+      <div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
         <div className="text-right flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
           <Image
             src="/linkwarden.png"
@@ -56,7 +56,7 @@ export default function Login() {
             className="h-12 w-fit"
           />
           <div className="text-center sm:text-right">
-            <p className="text-3xl font-bold text-sky-500">Welcome back</p>
+            <p className="text-3xl text-sky-500">Welcome back</p>
             <p className="text-md font-semibold text-sky-400">
               Sign in to your account
             </p>
@@ -66,7 +66,7 @@ export default function Login() {
         <div>
           <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
             Username
-            {EmailProvider ? "/Email" : undefined}
+            {emailEnabled ? "/Email" : undefined}
           </p>
 
           <input
@@ -85,12 +85,12 @@ export default function Login() {
 
           <input
             type="password"
-            placeholder="***********"
+            placeholder="••••••••••••••"
             value={form.password}
             onChange={(e) => setForm({ ...form, password: e.target.value })}
             className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
           />
-          {EmailProvider && (
+          {emailEnabled && (
             <div className="w-fit ml-auto mt-1">
               <Link href={"/forgot"} className="text-gray-500 font-semibold">
                 Forgot Password?

pages/register.tsx

@@ -5,7 +5,7 @@ import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import Image from "next/image";
 
-const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
 type FormData = {
   name: string;
@@ -21,14 +21,14 @@ export default function Register() {
   const [form, setForm] = useState<FormData>({
     name: "",
     username: "",
-    email: EmailProvider ? "" : undefined,
+    email: emailEnabled ? "" : undefined,
     password: "",
     passwordConfirmation: "",
   });
 
   async function registerUser() {
     const checkHasEmptyFields = () => {
-      if (EmailProvider) {
+      if (emailEnabled) {
         return (
           form.name !== "" &&
           form.username !== "" &&
@@ -78,7 +78,7 @@ export default function Register() {
           if (form.email) await sendConfirmation();
 
           toast.success(
-            EmailProvider
+            emailEnabled
               ? "User Created! Please check you email."
               : "User Created!"
           );
@@ -95,7 +95,7 @@ export default function Register() {
 
   return (
     <>
-      <div className="p-5 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+      <div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
         <div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
           <Image
             src="/linkwarden.png"
@@ -105,7 +105,7 @@ export default function Register() {
             className="h-12 w-fit"
           />
           <div className="text-center sm:text-right">
-            <p className="text-3xl font-bold text-sky-500">Get started</p>
+            <p className="text-3xl text-sky-500">Get started</p>
             <p className="text-md font-semibold text-sky-400">
               Create a new account
             </p>
@@ -140,7 +140,7 @@ export default function Register() {
           />
         </div>
 
-        {EmailProvider ? (
+        {emailEnabled ? (
           <div>
             <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
               Email
@@ -156,29 +156,29 @@ export default function Register() {
           </div>
         ) : undefined}
 
-        <div className="flex item-center gap-5">
-          <div>
+        <div className="flex item-center gap-2">
+          <div className="w-full">
             <p className="text-sm text-sky-500 w-fit font-semibold  mb-1">
               Password
             </p>
 
             <input
               type="password"
-              placeholder="***********"
+              placeholder="••••••••••••••"
               value={form.password}
               onChange={(e) => setForm({ ...form, password: e.target.value })}
               className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
             />
           </div>
 
-          <div>
+          <div className="w-full">
             <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
               Confirm Password
             </p>
 
             <input
               type="password"
-              placeholder="***********"
+              placeholder="••••••••••••••"
               value={form.passwordConfirmation}
               onChange={(e) =>
                 setForm({ ...form, passwordConfirmation: e.target.value })

pages/subscribe.tsx

@@ -0,0 +1,72 @@
+import SubmitButton from "@/components/SubmitButton";
+import { signOut } from "next-auth/react";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+
+export default function Subscribe() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const { data, status } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    console.log(data?.user);
+  }, [status]);
+
+  async function loginUser() {
+    setSubmitLoader(true);
+
+    const redirectionToast = toast.loading("Redirecting to Stripe...");
+
+    const res = await fetch("/api/payment");
+    const data = await res.json();
+
+    console.log(data);
+    router.push(data.response);
+  }
+
+  return (
+    <>
+      <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+        <div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
+          <Image
+            src="/linkwarden.png"
+            width={1694}
+            height={483}
+            alt="Linkwarden"
+            className="h-12 w-fit"
+          />
+          <div className="text-center sm:text-right">
+            <p className="text-3xl text-sky-500">14 days free trial</p>
+            <p className="text-md font-semibold text-sky-400">
+              Then $5/month afterwards
+            </p>
+          </div>
+        </div>
+
+        <div>
+          <p className="text-md text-gray-500 mt-1">
+            You will be redirected to Stripe.
+          </p>
+        </div>
+
+        <SubmitButton
+          onClick={loginUser}
+          label="Complete your Subscription"
+          className="mt-2 w-full text-center"
+          loading={submitLoader}
+        />
+
+        <div
+          onClick={() => signOut()}
+          className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
+        >
+          Sign Out
+        </div>
+      </div>
+    </>
+  );
+}