many improvements

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

@@ -126,11 +126,20 @@ export const authOptions: AuthOptions = {
       if (trigger === "signIn") {
         token.id = user.id;
         token.username = (user as any).username;
-      } else if (trigger === "update" && session?.name && session?.username) {
-        // Note, that `session` can be any arbitrary object, remember to validate it!
-        token.name = session.name;
-        token.username = session.username.toLowerCase();
-        token.email = session.email.toLowerCase();
+      } else if (trigger === "update" && token.id) {
+        console.log(token);
+
+        const user = await prisma.user.findUnique({
+          where: {
+            id: token.id as number,
+          },
+        });
+
+        if (user) {
+          token.name = user.name;
+          token.username = user.username?.toLowerCase();
+          token.email = user.email?.toLowerCase();
+        }
       }
       return token;
     },

pages/api/auth/register.ts

@@ -11,7 +11,7 @@ interface Data {
 
 interface User {
   name: string;
-  username: string;
+  username?: string;
   email?: string;
   password: string;
 }
@@ -23,7 +23,7 @@ export default async function Index(
   const body: User = req.body;
 
   const checkHasEmptyFields = emailEnabled
-    ? !body.username || !body.password || !body.name || !body.email
+    ? !body.password || !body.name || !body.email
     : !body.username || !body.password || !body.name;
 
   if (checkHasEmptyFields)
@@ -31,30 +31,9 @@ export default async function Index(
       .status(400)
       .json({ response: "Please fill out all the fields." });
 
-  const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000);
-
-  // Remove user's who aren't verified for more than 10 minutes
-  if (emailEnabled)
-    await prisma.user.deleteMany({
-      where: {
-        OR: [
-          {
-            email: body.email,
-          },
-          {
-            username: body.username,
-          },
-        ],
-        createdAt: {
-          lt: tenMinutesAgo,
-        },
-        emailVerified: null,
-      },
-    });
-
   const checkUsername = RegExp("^[a-z0-9_-]{3,31}$");
 
-  if (!checkUsername.test(body.username))
+  if (!emailEnabled && !checkUsername.test(body.username || ""))
     return res.status(400).json({
       response:
         "Username has to be between 3-30 characters, no spaces and special characters are allowed.",
@@ -63,18 +42,11 @@ export default async function Index(
   const checkIfUserExists = await prisma.user.findFirst({
     where: emailEnabled
       ? {
-          OR: [
-            {
-              username: body.username.toLowerCase(),
-            },
-            {
-              email: body.email?.toLowerCase(),
-            },
-          ],
+          email: body.email?.toLowerCase(),
           emailVerified: { not: null },
         }
       : {
-          username: body.username.toLowerCase(),
+          username: (body.username as string).toLowerCase(),
         },
   });
 
@@ -86,8 +58,10 @@ export default async function Index(
     await prisma.user.create({
       data: {
         name: body.name,
-        username: body.username.toLowerCase(),
-        email: body.email?.toLowerCase(),
+        username: emailEnabled
+          ? undefined
+          : (body.username as string).toLowerCase(),
+        email: emailEnabled ? body.email?.toLowerCase() : undefined,
         password: hashedPassword,
       },
     });

pages/api/routes/users/index.ts

@@ -32,7 +32,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
       username: session.user.username,
     });
     return res.status(users.status).json({ response: users.response });
-  } else if (req.method === "PUT" && !req.body.password) {
+  } else if (req.method === "PUT") {
     const updated = await updateUser(req.body, session.user);
     return res.status(updated.status).json({ response: updated.response });
   }

pages/choose-username.tsx

@@ -0,0 +1,108 @@
+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";
+import useAccountStore from "@/store/account";
+
+export default function Subscribe() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const [inputedUsername, setInputedUsername] = useState("");
+
+  const { data, status, update } = useSession();
+
+  const { updateAccount, account } = useAccountStore();
+
+  useEffect(() => {
+    console.log(data?.user);
+  }, [status]);
+
+  async function submitUsername() {
+    setSubmitLoader(true);
+
+    const redirectionToast = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...account,
+      username: inputedUsername,
+    });
+
+    if (response.ok) {
+      toast.success("Username Applied!");
+
+      update({
+        id: data?.user.id,
+      });
+
+      signOut();
+    } else toast.error(response.data as string);
+    toast.dismiss(redirectionToast);
+    setSubmitLoader(false);
+  }
+
+  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 justify-between items-center mb-5">
+          <Image
+            src="/linkwarden.png"
+            width={1694}
+            height={483}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+
+          <div className="text-center">
+            <p className="text-3xl text-sky-500">One Last Step...</p>
+            <p className="font-semibold text-sky-400">
+              Please choose a username to start using your account.
+            </p>
+          </div>
+        </div>
+
+        <div>
+          <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
+            Username
+          </p>
+
+          <input
+            type="text"
+            placeholder="john"
+            value={inputedUsername}
+            onChange={(e) => setInputedUsername(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>
+
+        <p className="text-gray-500 text-center">
+          Note that you will have to log back in to complete the process.
+        </p>
+        <div>
+          <p className="text-md text-gray-500 mt-1">
+            Feel free to reach out to us at{" "}
+            <a className="font-semibold" href="mailto:hello@linkwarden.app">
+              hello@linkwarden.app
+            </a>{" "}
+            in case of any issues.
+          </p>
+        </div>
+
+        <SubmitButton
+          onClick={submitUsername}
+          label="Choose Username"
+          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>
+    </>
+  );
+}

pages/register.tsx

@@ -9,7 +9,7 @@ const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
 type FormData = {
   name: string;
-  username: string;
+  username?: string;
   email?: string;
   password: string;
   passwordConfirmation: string;
@@ -20,7 +20,7 @@ export default function Register() {
 
   const [form, setForm] = useState<FormData>({
     name: "",
-    username: "",
+    username: emailEnabled ? undefined : "",
     email: emailEnabled ? "" : undefined,
     password: "",
     passwordConfirmation: "",
@@ -31,7 +31,6 @@ export default function Register() {
       if (emailEnabled) {
         return (
           form.name !== "" &&
-          form.username !== "" &&
           form.email !== "" &&
           form.password !== "" &&
           form.passwordConfirmation !== ""
@@ -122,19 +121,21 @@ export default function Register() {
           />
         </div>
 
-        <div>
-          <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
-            Username
-          </p>
+        {emailEnabled ? undefined : (
+          <div>
+            <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
+              Username
+            </p>
 
-          <input
-            type="text"
-            placeholder="john"
-            value={form.username}
-            onChange={(e) => setForm({ ...form, username: 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>
+            <input
+              type="text"
+              placeholder="john"
+              value={form.username}
+              onChange={(e) => setForm({ ...form, username: 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>
+        )}
 
         {emailEnabled ? (
           <div>

pages/subscribe.tsx

@@ -12,10 +12,6 @@ export default function Subscribe() {
   const { data, status } = useSession();
   const router = useRouter();
 
-  useEffect(() => {
-    console.log(data?.user);
-  }, [status]);
-
   async function loginUser() {
     setSubmitLoader(true);
 
@@ -52,7 +48,7 @@ export default function Subscribe() {
             You will be redirected to Stripe.
           </p>
           <p className="text-md text-gray-500 mt-1">
-            feel free to reach out to us at{" "}
+            Feel free to reach out to us at{" "}
             <a className="font-semibold" href="mailto:hello@linkwarden.app">
               hello@linkwarden.app
             </a>{" "}