auto assign username upon registration

components/ModalContent/NewUserModal.tsx

@@ -88,23 +88,28 @@ export default function NewUserModal({ onClose }: Props) {
 
           {emailEnabled ? (
             <div>
-              <p className="mb-2">Username</p>
+              <p className="mb-2">Email</p>
               <TextInput
-                placeholder="john"
+                placeholder="johnny@example.com"
                 className="bg-base-200"
-                onChange={(e) => setForm({ ...form, username: e.target.value })}
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
-                value={form.username}
+                value={form.email}
               />
             </div>
           ) : undefined}
 
           <div>
-            <p className="mb-2">Email</p>
+            <p className="mb-2">
+              Username{" "}
+              {emailEnabled && (
+                <span className="text-xs text-neutral">(Optional)</span>
+              )}
+            </p>
             <TextInput
-              placeholder="johnny@example.com"
+              placeholder="john"
               className="bg-base-200"
-              onChange={(e) => setForm({ ...form, email: e.target.value })}
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
-              value={form.email}
+              value={form.username}
             />
           </div>
 

layouts/AuthRedirect.tsx

@@ -32,19 +32,6 @@ export default function AuthRedirect({ children }: Props) {
         router.push("/subscribe").then(() => {
           setRedirect(false);
         });
-      }
-      // Redirect to "/choose-username" if user is authenticated and is either a subscriber OR subscription is undefiend, and doesn't have a username
-      else if (
-        emailEnabled &&
-        status === "authenticated" &&
-        account.subscription?.active &&
-        stripeEnabled &&
-        account.id &&
-        !account.username
-      ) {
-        router.push("/choose-username").then(() => {
-          setRedirect(false);
-        });
       } else if (
         status === "authenticated" &&
         account.id &&

lib/api/controllers/users/postUser.ts

@@ -72,6 +72,9 @@ export default async function postUser(
   });
 
   if (!checkIfUserExists) {
+    const autoGeneratedUsername =
+      "user" + Math.round(Math.random() * 1000000000);
+
     const saltRounds = 10;
 
     const hashedPassword = bcrypt.hashSync(body.password, saltRounds);
@@ -85,7 +88,9 @@ export default async function postUser(
       const user = await prisma.user.create({
         data: {
           name: body.name,
-          username: (body.username as string).toLowerCase().trim(),
+          username: emailEnabled
+            ? autoGeneratedUsername
+            : (body.username as string).toLowerCase().trim(),
           email: emailEnabled ? body.email?.toLowerCase().trim() : undefined,
           password: hashedPassword,
           emailVerified: new Date(),
@@ -121,7 +126,7 @@ export default async function postUser(
         data: {
           name: body.name,
           username: emailEnabled
-            ? undefined
+            ? autoGeneratedUsername
             : (body.username as string).toLowerCase().trim(),
           email: emailEnabled ? body.email?.toLowerCase().trim() : undefined,
           password: hashedPassword,

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

@@ -1,7 +1,6 @@
 import { prisma } from "@/lib/api/db";
 import NextAuth from "next-auth/next";
 import CredentialsProvider from "next-auth/providers/credentials";
-import { AuthOptions } from "next-auth";
 import bcrypt from "bcrypt";
 import EmailProvider from "next-auth/providers/email";
 import { PrismaAdapter } from "@auth/prisma-adapter";

pages/choose-username.tsx

@@ -1,93 +0,0 @@
-import SubmitButton from "@/components/SubmitButton";
-import { signOut } from "next-auth/react";
-import { FormEvent, useState } from "react";
-import { toast } from "react-hot-toast";
-import { useSession } from "next-auth/react";
-import useAccountStore from "@/store/account";
-import CenteredForm from "@/layouts/CenteredForm";
-import TextInput from "@/components/TextInput";
-import AccentSubmitButton from "@/components/AccentSubmitButton";
-
-export default function ChooseUsername() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const [inputedUsername, setInputedUsername] = useState("");
-
-  const { data, status, update } = useSession();
-
-  const { updateAccount, account } = useAccountStore();
-
-  async function submitUsername(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    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,
-      });
-    } else toast.error(response.data as string);
-    toast.dismiss(redirectionToast);
-    setSubmitLoader(false);
-  }
-
-  return (
-    <CenteredForm>
-      <form onSubmit={submitUsername}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
-          <p className="text-3xl text-center font-extralight">
-            Choose a Username
-          </p>
-
-          <div className="divider my-0"></div>
-
-          <div>
-            <p className="text-sm w-fit font-semibold mb-1">Username</p>
-
-            <TextInput
-              autoFocus
-              placeholder="john"
-              value={inputedUsername}
-              className="bg-base-100"
-              onChange={(e) => setInputedUsername(e.target.value)}
-            />
-          </div>
-          <div>
-            <p className="text-md text-neutral mt-1">
-              Feel free to reach out to us at{" "}
-              <a
-                className="font-semibold underline"
-                href="mailto:support@linkwarden.app"
-              >
-                support@linkwarden.app
-              </a>{" "}
-              in case of any issues.
-            </p>
-          </div>
-
-          <AccentSubmitButton
-            type="submit"
-            label="Complete Registration"
-            className="mt-2 w-full"
-            loading={submitLoader}
-          />
-
-          <div
-            onClick={() => signOut()}
-            className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
-          >
-            Sign Out
-          </div>
-        </div>
-      </form>
-    </CenteredForm>
-  );
-}