feat: update account form.

missionmike · missionmike · commit 8959ebd50088 · 2024-12-10T23:33:54.000Z
diff --git a/__tests__/app/api/account.route.test.ts b/__tests__/app/api/account.route.test.ts
@@ -77,7 +77,15 @@ describe("User Profile Update Endpoint", () => {
     });
     expect(prisma.user.update).toHaveBeenCalledWith({
       where: { id: "user123" },
-      data: { name: "New Name", slug: "new-slug" },
+      data: {
+        name: "New Name",
+        slug: "new-slug",
+        displayEmail: null,
+        title: null,
+        location: null,
+        siteTitle: null,
+        siteDescription: null,
+      },
     });
   });
 
diff --git a/src/app/account/AccountForm.tsx b/src/app/account/AccountForm.tsx
@@ -1,12 +1,40 @@
 "use client";
 
 import { CodeInline } from "@/components/CodeInline";
+import { LoadingOverlay } from "@/components/LoadingOverlay";
+import { MessageDialog } from "@/components/MessageDialog";
 import { Box, Button, TextField, Typography } from "@mui/material";
 import { useState } from "react";
 
-const AccountForm = ({ name, slug }: { name: string; slug: string }) => {
-  const [formData, setFormData] = useState({ name, slug });
-  const [errors, setErrors] = useState<{ name?: string; slug?: string }>({});
+const AccountForm = ({
+  name,
+  slug,
+  displayEmail,
+  title,
+  location,
+  siteTitle,
+  siteDescription,
+}: {
+  name: string;
+  slug: string;
+  displayEmail: string;
+  title: string;
+  location: string;
+  siteTitle: string;
+  siteDescription: string;
+}) => {
+  const [formData, setFormData] = useState({
+    name,
+    slug,
+    displayEmail,
+    title,
+    location,
+    siteTitle,
+    siteDescription,
+  });
+  const [errors, setErrors] = useState<{ name?: string; slug?: string; displayEmail?: string }>({});
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState("");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -34,7 +62,7 @@ const AccountForm = ({ name, slug }: { name: string; slug: string }) => {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    const { name, slug } = formData;
+    const { name, slug, displayEmail } = formData;
 
     if (!name.trim() || !slug.trim()) {
       setErrors({
@@ -44,6 +72,13 @@ const AccountForm = ({ name, slug }: { name: string; slug: string }) => {
       return;
     }
 
+    if (displayEmail.trim()?.length > 0 && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(displayEmail)) {
+      setErrors({ displayEmail: "Invalid email address" });
+      return;
+    }
+
+    setLoading(true);
+
     // Send the form data to the next.js API route to
     // update the user's account information. Use POST method.
     fetch("/api/account", {
@@ -53,73 +88,153 @@ const AccountForm = ({ name, slug }: { name: string; slug: string }) => {
       },
       body: JSON.stringify(formData),
     })
-      .then((res) => {
+      .then(async (res) => {
         if (!res.ok) {
-          alert("Failed to submit the form!");
+          const { error } = await res.json();
+          setMessage(error);
           return;
         }
 
-        alert("Form submitted successfully!");
+        setMessage("Saved!");
       })
       .catch((err) => {
-        // eslint-disable-next-line no-console
-        console.error(err);
-        alert("Failed to submit the form!");
+        setMessage(err.message);
+      })
+      .finally(() => {
+        setLoading(false);
       });
   };
 
   return (
-    <Box
-      component="form"
-      onSubmit={handleSubmit}
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 2,
-        mt: 4,
-      }}
-    >
-      <Typography variant="body2" color="textSecondary">
-        Displayed on your public resume.
-      </Typography>
-      <TextField
-        label="Full Name"
-        name="name"
-        value={formData.name}
-        onChange={handleChange}
-        error={!!errors.name}
-        helperText={errors.name ? errors.name : " "}
-        fullWidth
-      />
-      <Typography variant="body2" color="textSecondary">
-        Used to generate your public resume URL, e.g.{" "}
-        <CodeInline>
-          https://openresume.org/r/<strong>your-custom-slug</strong>/
-        </CodeInline>
-        . If you change it, an automatic redirect will <strong>not</strong> be created, so please
-        update your shared links.
-      </Typography>
-      <TextField
-        label="Slug"
-        name="slug"
-        value={formData.slug}
-        onChange={handleChange}
-        error={!!errors.slug}
-        helperText={errors.slug ? errors.slug : " "}
-        fullWidth
+    <Box>
+      <LoadingOverlay open={loading} message="Submitting form..." />
+      <MessageDialog
+        open={message?.length > 0}
+        message={message}
+        onClose={() => setMessage("")}
+        onConfirm={() => setMessage("")}
       />
-      <Button
-        type="submit"
-        variant="contained"
-        color="primary"
-        fullWidth
+      <Box
+        component="form"
+        onSubmit={handleSubmit}
         sx={{
-          mt: 2,
-          width: "200px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          mt: 4,
         }}
       >
-        Save
-      </Button>
+        <Typography variant="body2" color="textSecondary">
+          Displayed on your public resume.
+        </Typography>
+        <TextField
+          label="Full Name"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+          error={!!errors.name}
+          helperText={errors.name ? errors.name : " "}
+          fullWidth
+        />
+        <Typography variant="body2" color="textSecondary">
+          Used to generate your public resume URL, e.g.{" "}
+          <CodeInline>
+            https://openresume.org/r/
+            <strong>
+              {formData?.slug ? formData.slug : "your-custom-slug"}
+            </strong>/
+          </CodeInline>
+          . If you change it, an automatic redirect will <strong>not</strong> be created, so please
+          update your shared links.
+        </Typography>
+        <TextField
+          label="Slug"
+          name="slug"
+          value={formData.slug}
+          onChange={handleChange}
+          error={!!errors.slug}
+          helperText={errors.slug ? errors.slug : " "}
+          fullWidth
+        />
+        <Typography variant="body2" color="textSecondary">
+          Your display email is publicly visible on your resume!
+        </Typography>
+        <TextField
+          label="Display Email"
+          name="displayEmail"
+          value={formData.displayEmail}
+          onChange={handleChange}
+          error={!!errors.displayEmail}
+          helperText={errors.displayEmail ? errors.displayEmail : " "}
+          fullWidth
+        />
+        <Typography variant="body2" color="textSecondary">
+          Your Title is the job title you&apos;re looking for, or identify as. Example:{" "}
+          <strong>Software Engineer</strong>
+        </Typography>
+        <TextField
+          label="Title"
+          name="title"
+          value={formData.title}
+          onChange={handleChange}
+          fullWidth
+        />
+        <Typography variant="body2" color="textSecondary">
+          Your Location is where you are currently located. General is advised. Example:{" "}
+          <strong>Los Angeles, CA</strong>
+        </Typography>
+        <TextField
+          label="Location"
+          name="location"
+          value={formData.location}
+          onChange={handleChange}
+          fullWidth
+        />
+        <Typography variant="body2" color="textSecondary">
+          Your Site Title is the title of your personal website. Example:{" "}
+          <strong>{formData?.name ? formData.name : "John Doe"} | OpenResume</strong>{" "}
+          <em>
+            This is used in the title tag of your website as well as for social media sharing.
+          </em>
+        </Typography>
+        <TextField
+          label="Site Title"
+          name="siteTitle"
+          value={formData.siteTitle}
+          onChange={handleChange}
+          fullWidth
+        />
+        <Typography variant="body2" color="textSecondary">
+          Your Site Description is a short description of your personal website. Example:{" "}
+          <strong>
+            {formData?.name ? formData.name : "John Doe"} is a seasoned professional with 10 years
+            experience.
+          </strong>{" "}
+          <em>
+            This is used in the meta description tag of your website as well as for social media
+            sharing.
+          </em>
+        </Typography>
+        <TextField
+          label="Site Description"
+          name="siteDescription"
+          value={formData.siteDescription}
+          onChange={handleChange}
+          fullWidth
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          color="primary"
+          fullWidth
+          sx={{
+            mt: 2,
+            width: "200px",
+          }}
+        >
+          Save
+        </Button>
+      </Box>
     </Box>
   );
 };
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -37,7 +37,15 @@ const Page = async () => {
         <Typography component="h1" variant="h4">
           Account Settings
         </Typography>
-        <AccountForm name={user?.name || ""} slug={user?.slug || ""} />
+        <AccountForm
+          name={user?.name || ""}
+          slug={user?.slug || ""}
+          displayEmail={user?.displayEmail || ""}
+          title={user?.title || ""}
+          location={user?.location || ""}
+          siteTitle={user?.siteTitle || ""}
+          siteDescription={user?.siteDescription || ""}
+        />
       </Box>
     </Container>
   );
diff --git a/src/app/api/account/route.ts b/src/app/api/account/route.ts
@@ -10,7 +10,8 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
 
-    const { name, slug } = await req.json();
+    const { name, slug, displayEmail, title, location, siteTitle, siteDescription } =
+      await req.json();
     if (!name || !slug) {
       return NextResponse.json({ error: "Name and slug are required" }, { status: 400 });
     }
@@ -28,8 +29,11 @@ export async function POST(req: NextRequest) {
       where: {
         slug,
       },
+      select: {
+        id: true,
+      },
     });
-    if (existingUser) {
+    if (existingUser && existingUser.id !== session.user.id) {
       return NextResponse.json({ error: "Slug is already taken" }, { status: 400 });
     }
 
@@ -38,8 +42,13 @@ export async function POST(req: NextRequest) {
         id: session.user.id,
       },
       data: {
-        name,
-        slug,
+        name: name || null,
+        slug: slug || null,
+        displayEmail: displayEmail || null,
+        title: title || null,
+        location: location || null,
+        siteTitle: siteTitle || null,
+        siteDescription: siteDescription || null,
       },
     });
 
diff --git a/src/components/LoadingOverlay.tsx b/src/components/LoadingOverlay.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { Backdrop, CircularProgress, Typography, Box } from "@mui/material";
+
+export const LoadingOverlay = ({ open = false, message = "Loading...", zIndex = 9999 }) => {
+  return (
+    <Backdrop
+      sx={{
+        color: "#fff",
+        zIndex: zIndex,
+        flexDirection: "column",
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+      }}
+      open={open}
+    >
+      <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center">
+        <CircularProgress color="inherit" />
+        <Typography
+          variant="body1"
+          sx={{
+            marginTop: 2,
+            color: "white",
+          }}
+        >
+          {message}
+        </Typography>
+      </Box>
+    </Backdrop>
+  );
+};
diff --git a/src/components/MessageDialog.tsx b/src/components/MessageDialog.tsx
