Add email to sign up

src/app/settings/page.tsx

@@ -15,6 +15,7 @@ export default function UserPage() {
   const [user, setUser] = useState<UserType>();
   const [profilePicture, setProfilePicture] = useState<string | null>(null);
   const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
   const [bannerPicture, setBannerPicture] = useState<string | null>(null);
   const [bio, setBio] = useState("");
   const [errors] = useState({});
@@ -48,6 +49,7 @@ export default function UserPage() {
         setBannerPicture(data.bannerPicture ?? "");
         setBio(data.bio ?? "");
         setName(data.name ?? "");
+        setEmail(data.email ?? "");
       } else {
         setUser(undefined);
       }
@@ -92,6 +94,7 @@ export default function UserPage() {
                   profilePicture: profilePicture,
                   bannerPicture: bannerPicture,
                   targetUserSlug: user.slug,
+                  email: email,
                 }),
                 method: "PUT",
                 headers: {
@@ -124,6 +127,16 @@ export default function UserPage() {
             onValueChange={setName}
           />
 
+          <Input
+            label="Email"
+            labelPlacement="outside"
+            name="email"
+            placeholder="Enter an email"
+            type="text"
+            value={email}
+            onValueChange={setEmail}
+          />
+
           <p>Bio</p>
           <Editor content={bio} setContent={setBio} />
 

src/app/signup/page.tsx

@@ -10,6 +10,7 @@ export default function UserPage() {
   const [password, setPassword] = useState("");
   const [password2, setPassword2] = useState("");
   const [errors, setErrors] = useState({});
+  const [email, setEmail] = useState("");
 
   return (
     <div className="absolute flex items-center justify-center top-0 left-0 w-screen h-screen">
@@ -66,12 +67,24 @@ export default function UserPage() {
             return;
           }
 
+          if (email) {
+            const regex = /.+@.+\..+/;
+            if (!email.match(regex)) {
+              setErrors({ email: "Invalid email" });
+              return;
+            }
+          }
+
           const response = await fetch(
             process.env.NEXT_PUBLIC_MODE === "PROD"
               ? "https://d2jam.com/api/v1/user"
               : "http://localhost:3005/api/v1/user",
             {
-              body: JSON.stringify({ username: username, password: password }),
+              body: JSON.stringify({
+                username: username,
+                password: password,
+                email: email,
+              }),
               method: "POST",
               headers: { "Content-Type": "application/json" },
               credentials: "include",
@@ -104,6 +117,16 @@ export default function UserPage() {
           onValueChange={setUsername}
         />
 
+        <Input
+          label="Email"
+          labelPlacement="outside"
+          name="email"
+          placeholder="Optional"
+          type="text"
+          value={email}
+          onValueChange={setEmail}
+        />
+
         <Input
           isRequired
           label="Password"