Merge pull request #39 from m4sc0/9-ask-user-for-name-on-signup

Ask user for name on signup

Author: andreasmolnardev

app/(config-wrapper)/settings/account/page.tsx

@@ -116,7 +116,7 @@ export default function AccountSettingsPage() {
       <div className="content grid grid-cols-[auto_1fr_auto] font-medium gap-2 items-center">
         <section className="frosted flex rounded-lg justify-center col-span-full p-2 items-center gap-6">
           <FontAwesomeIcon icon={faCircleUser} className="text-4xl" />
-          <span>Lorem, ipsum.</span>
+          <span>{JSON.parse(localStorage.getItem('pb_user') ?? "").name ?? 'Lorem ipsum'}</span>
         </section>
 
         <h2 className="text-xl col-span-full">Authentication</h2>

app/api/v1/auth/signup/route.ts

@@ -5,7 +5,7 @@ import { promises as fs } from 'fs';
 
 export async function POST(request: Request) {
     try {
-        const { email, password, passwordConfirm } = await request.json();
+        const { name, email, password, passwordConfirm } = await request.json();
 
         if (!email || !password || !passwordConfirm) {
             return new NextResponse(JSON.stringify({ error: 'All fields are required' }), {
@@ -21,10 +21,26 @@ export async function POST(request: Request) {
             });
         }
 
+        // using localpart of email as fallback
+        let newName;
+        if (name === "" || !name && typeof email === "string") {
+            const localPart = email.split("@")[0];
+            // a little transformation can't be missing
+            newName = localPart
+                .replace(/[._-]+/g, ' ')
+                .trim()
+                .split(' ')
+                .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()) // capitalize
+                .join(' ');
+        } else {
+            newName = name;
+        }
+
         const pb = getServerPB();
 
         // 1. Create the user
         const user = await pb.collection('users').create({
+            newName,
             email,
             password,
             passwordConfirm,

components/auth/SignupForm.tsx

@@ -13,6 +13,7 @@ import { faCircleCheck, faExclamationTriangle } from "@fortawesome/free-solid-sv
 import { setTimeout } from "timers"
 
 export default function SignupCard() {
+  const [name, setName] = useState("");
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [confirmPassword, setConfirmPassword] = useState("")
@@ -46,6 +47,7 @@ export default function SignupCard() {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
+          name,
           email,
           password,
           passwordConfirm: confirmPassword,
@@ -61,6 +63,7 @@ export default function SignupCard() {
 
         setTimeout(() => {
           // Clear the form fields
+          setName("")
           setEmail("")
           setPassword("")
           setConfirmPassword("")
@@ -106,6 +109,16 @@ export default function SignupCard() {
             </Alert>
           )}
 
+          <div className="grid gap-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              type="text"
+              placeholder="John Doe"
+              value={name}
+              onChange={(e) => setName(e.target.value)} 
+            />
+          </div>
           <div className="grid gap-2">
             <Label htmlFor="email">Email</Label>
             <Input