feat: Allow modifying user email from settings

.changeset/eight-yaks-itch.md

@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Added email display in account settings page.

.gitignore

@@ -42,3 +42,5 @@ node_modules
 
 # Local files
 *.local
+
+.env.local

convex/_generated/api.d.ts

@@ -25,8 +25,8 @@ import type * as seed from "../seed.js";
 import type * as topics from "../topics.js";
 import type * as userFormData from "../userFormData.js";
 import type * as userQuests from "../userQuests.js";
-import type * as userSettings from "../userSettings.js";
 import type * as users from "../users.js";
+import type * as userSettings from "../userSettings.js";
 import type * as validators from "../validators.js";
 
 /**
@@ -50,8 +50,8 @@ declare const fullApi: ApiFromModules<{
   topics: typeof topics;
   userFormData: typeof userFormData;
   userQuests: typeof userQuests;
-  userSettings: typeof userSettings;
   users: typeof users;
+  userSettings: typeof userSettings;
   validators: typeof validators;
 }>;
 export declare const api: FilterApi<

convex/users.ts

@@ -50,6 +50,13 @@ export const setName = userMutation({
   },
 });
 
+export const setEmail = userMutation({
+  args: { email: v.optional(v.string()) },
+  handler: async (ctx, args) => {
+    await ctx.db.patch(ctx.userId, { email: args.email });
+  },
+});
+
 export const setResidence = userMutation({
   args: { residence: jurisdiction },
   handler: async (ctx, args) => {

src/components/settings/EditEmailSetting/EditEmailSetting.tsx

@@ -0,0 +1,112 @@
+import {
+  Banner,
+  Button,
+  Form,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  TextField,
+} from "@/components/common";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { SettingsItem } from "../SettingsItem";
+
+type EditEmailModalProps = {
+  defaultEmail: string;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSubmit: () => void;
+};
+
+const EditEmailModal = ({
+  defaultEmail,
+  isOpen,
+  onOpenChange,
+  onSubmit,
+}: EditEmailModalProps) => {
+  const updateEmail = useMutation(api.users.setEmail);
+  const [email, setEmail] = useState(defaultEmail);
+  const [error, setError] = useState<string>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError(undefined);
+
+    try {
+      setIsSubmitting(true);
+      await updateEmail({ email: email.trim() });
+      onSubmit();
+      toast.success("Email updated.");
+    } catch (err) {
+      setError("Failed to update email. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader
+        title="Email address"
+        description="This is the email we’ll use to contact you."
+      />
+      <Form onSubmit={handleSubmit} className="w-full">
+        {error && <Banner variant="danger">{error}</Banner>}
+        <TextField
+          label="Email"
+          name="email"
+          type="email"
+          value={email}
+          onChange={(value) => {
+            setEmail(value);
+            setError(undefined);
+          }}
+          className="w-full"
+          isRequired
+        />
+        <ModalFooter>
+          <Button
+            variant="secondary"
+            isDisabled={isSubmitting}
+            onPress={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" variant="primary" isDisabled={isSubmitting}>
+            Save
+          </Button>
+        </ModalFooter>
+      </Form>
+    </Modal>
+  );
+};
+
+type EditEmailSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditEmailSetting = ({ user }: EditEmailSettingProps) => {
+  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Email address"
+      description="This is the email we’ll use to contact you."
+    >
+      <Button icon={Pencil} onPress={() => setIsEmailModalOpen(true)}>
+        {user?.email ?? "Set email"}
+      </Button>
+      <EditEmailModal
+        isOpen={isEmailModalOpen}
+        onOpenChange={setIsEmailModalOpen}
+        defaultEmail={user.email ?? ""}
+        onSubmit={() => setIsEmailModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};

src/components/settings/EditEmailSetting/index.tsx

@@ -0,0 +1 @@
+export * from "./EditEmailSetting";

src/components/settings/EditNameSetting/EditNameSetting.tsx

@@ -63,8 +63,9 @@ const EditNameModal = ({
       <Form onSubmit={handleSubmit} className="w-full">
         {error && <Banner variant="danger">{error}</Banner>}
         <TextField
-          name="name"
           label="Name"
+          name="name"
+          type="text"
           value={name}
           onChange={(value) => {
             setName(value);

src/components/settings/index.ts

@@ -1,6 +1,7 @@
 export * from "./DeleteAccountSetting";
 export * from "./EditBirthplaceSetting";
 export * from "./EditNameSetting";
+export * from "./EditEmailSetting";
 export * from "./EditMinorSetting";
 export * from "./EditResidenceSetting";
 export * from "./EditThemeSetting";

src/routes/_authenticated/settings/account.tsx

@@ -2,6 +2,7 @@ import { PageHeader } from "@/components/app";
 import {
   DeleteAccountSetting,
   EditBirthplaceSetting,
+  EditEmailSetting,
   EditMinorSetting,
   EditNameSetting,
   EditResidenceSetting,
@@ -30,6 +31,7 @@ function SettingsAccountRoute() {
         <>
           <SettingsGroup title="Personal Information">
             <EditNameSetting user={user} />
+            <EditEmailSetting user={user} />
             <EditMinorSetting user={user} />
             <EditResidenceSetting user={user} />
             <EditBirthplaceSetting user={user} />