feat: Allow modifying user email from settings #282
Conversation
github-actions
bot
added
frontend
|
Hey @ansen01-svg! I'll take a closer look at this soon. I appreciate you diving in here! |
evadecker
changed the title
There was a problem hiding this comment.
This is looking good so far @ansen01-svg! Would love to get some tests written for this.
| @@ -42,3 +42,5 @@ node_modules | |||
|
|
|||
| # Local files | |||
| *.local | |||
|
|
|||
| .env.local | |||
There was a problem hiding this comment.
.env.local is already in .gitignore, so you can leave the file as-is!
| users: typeof users; | ||
| userSettings: typeof userSettings; |
There was a problem hiding this comment.
Did the linter rearrange these? 🤔
| export const setEmail = userMutation({ | ||
| args: { email: v.optional(v.string()) }, | ||
| handler: async (ctx, args) => { | ||
| await ctx.db.patch(ctx.userId, { email: args.email }); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
We'll need to add a verification flow for changing emails and during signup. We can address that separately from this PR, but I've created a ticket: #286
| @@ -50,6 +50,13 @@ export const setName = userMutation({ | |||
| }, | |||
| }); | |||
|
|
|||
| export const setEmail = userMutation({ | |||
| args: { email: v.optional(v.string()) }, | |||
There was a problem hiding this comment.
We should check to make sure the email address is valid here, and throw an error if an empty string or invalid email are submitted.
There was a problem hiding this comment.
We should also update users.test.ts with a test for this new mutation.
There was a problem hiding this comment.
const ParamsSchema = z.object({
email: z.string().email(),
});
Should I implement this from Convex Auth docs with zod library or implement a regex?
There was a problem hiding this comment.
It would be great to add Zod so we can use it to validate other functions, too!
Here's a helpful guide: https://stack.convex.dev/typescript-zod-function-validation
We already have Convex helpers installed, but you'll need to install zod.
| @@ -0,0 +1,112 @@ | |||
| import { | |||
There was a problem hiding this comment.
We'll want to write a unit test for this component! I haven't written many tests for settings components yet, but now's a good time to start. You can see a test for a similar modal-style form submission component in EditQuestTimeRequiredModal and EditQuestCostsModal.
There was a problem hiding this comment.
This PR adds tests for other settings components and is a great place to look! #290
| }: EditEmailModalProps) => { | ||
| const updateEmail = useMutation(api.users.setEmail); | ||
| const [email, setEmail] = useState(defaultEmail); | ||
| const [error, setError] = useState<string>(); |
There was a problem hiding this comment.
| const [error, setError] = useState<string>(); | |
| const [error, setError] = useState(''); |
Nit!
| title="Email address" | ||
| description="This is the email we’ll use to contact you." |
There was a problem hiding this comment.
| title="Email address" | |
| description="This is the email we’ll use to contact you." | |
| title="Edit email address" | |
| description="What email would you like to use for Namesake?" |
| @@ -0,0 +1 @@ | |||
| export * from "./EditEmailSetting"; | |||
There was a problem hiding this comment.
This file can be renamed to index.ts (no x)
| label="Name" | ||
| name="name" | ||
| type="text" |
What changed?
Added email display in settings account page.
Why?
Users were unable to view their current email, or update the email.
How was this change made?
Added email edit section to /settings/account page.