562: reset password feature by DarrellRoberts · Pull Request #771 · need4deed-org/fe

DarrellRoberts · 2026-07-07T16:13:46Z

Description

Adds a feature to reset password which follows these steps:

User clicks "forgot password" on /login
User taken to /forgotten-password where they are prompted to enter their email
User inputs email and clicks submit which sends an email to their address with following path: /reset-password?token=[token]
User navigates to this link and inputs their new password and confirms it.
After submit, it changes the password and takes user back to /login

Related Issues

Closes #562

Changes

How to manually test

Start be local dev
Create a user
On fe go to /login and click "forgot password?". Ensure you're sending data to be localhost
Enter email of the user you created and submit
In the terminal logs of be you'll see the email link
Copy the path of the email link e.g. /reset-password?token=[token] and paste it into the fe so that you have: localhost:3000/en/reset-password?token=[token]
Enter new password and submit
On success you'll be taken to /login where you can test your new password which should work

Screenshots / Demos

/forgotten-password

On success

/reset-password?token=[token]

Checklist

WITHIN THE SCOPE OF AN ISSUE; No unnecessary files included
Tests added/updated
Documentation updated
CI passes

DarrellRoberts · 2026-07-07T16:16:23Z

-  display: flex;
-  justify-content: center;
-`;
-
 interface LoginFormProps {


refactored LoginForm to put styles in one shared file

DarrellRoberts · 2026-07-07T16:17:22Z

-    </PageLayout>
+    <LoginLayout heading={t("dashboard.login.login")}>
+      <LoginController />
+    </LoginLayout>
  );


refactored Login to use a shared layout as I use this also for /forgotten-password and /reset-password pages

DarrellRoberts · 2026-07-07T16:25:22Z

+
+interface ResetPasswordData {
+  newPassword: string;
+  confirmPassword: string;


confirmPassword not needed in the be (it does nothing). Still wanted another password value so that the user could essentially double-check what they're changing their password to.
This is so in the form it triggers a fe error if newPassword and confirmPassword do not match

kiborrdis · 2026-07-09T14:47:57Z

+          onChange: ({ value }) => (!value ? t("dashboard.login.emailMissing") : undefined),
+          onChangeAsyncDebounceMs: 500,
+          onChangeAsync: async ({ value }) => {
+            await new Promise((resolve) => setTimeout(resolve, 500));


Why do we need this onChangeAsync with synthetic wait?
IT feels like it's easier to add to onChange, or just use some email validator

good point, I just copied the email field from the Login without questioning this so have tidied it up

kiborrdis · 2026-07-09T14:49:52Z

+    },
+  });
+  const schema = createResetPasswordSchema(t);
+  console.log("s", schema);


Probably better to remove

kiborrdis · 2026-07-09T15:17:37Z

+        name="confirmPassword"
+        validators={{
+          onChange: ({ value, fieldApi }) => {
+            const resultValue = schema.shape.newPassword.safeParse(value);


About all validation in this file:

I think it's better to try form level validation
https://tanstack.com/form/v1/docs/framework/react/guides/validation
As far as i understand it's the docs for a newer version, but still worth a try to do it like that.

Otherwise I would propose to wrap it in a function. It will remove code duplication with other validators, and will make reading this file easier. For confrimPassword matching with newPassword, I feel, if form level validation wont work, it's easier and more readable to make a check in place

I see what you mean and good suggestion. I find it easier to stick to the zod Schema pattern particularly as we're using it for other validators for user-defined inputs (e.g. on the Profile edits).

I've wrapped the validation logic in one function and it does look a lot cleaner

I meant using form level validation with zod. Based on that I believe, it's probably possible to do something like that

const form = useForm({ defaultValues: { newPassword: "", confirmPassword: "", token: urlTokenParam || "", }, onSubmit: async ({ value }) => { resetPassword(value); }, validators: { onChange: ({ value }) => { const result = schema.safeParse(value); if (!result.success) { const errors = toErrors(result.error.issues); // where toErrors transforms zod format to { 'key1': 'errormessage1', 'key2': 'errormessage2', ...etc } return { fields: errors, } } }, }, });

There is even some package for tanstack/react-form that does that. But it's sus, it's not in their main branch

It also would solve the issue with current code I just thought of: if user typed in a password, then matching confirmPassword, then changed the password, confirmPassword field will not raise an error. I actually didnt run your code and tried, but it feels like it will behave like that

I'm totally okay leaving validation per field. But it's worth checking and fixing this "changing password after you typed in proper confirmPassword" thing

kiborrdis · 2026-07-09T15:19:30Z

+      confirmPassword: z.string().min(1, { message: t("dashboard.login.passwordMissing") }),
+    })
+    .refine((data) => data.newPassword === data.confirmPassword, {
+      message: "dashboard.login.passwordNotMatching",


Why not t("dashboard.login.passwordNotMatching") here? You would avoid all this startsWith('.dashboard') unpleasantness from component

ye good point, have change this and removed the startsWith('.dashboard') from the component

kiborrdis · 2026-07-09T15:25:48Z

+            textColor={form.state.canSubmit && !isPending ? "var(--color-white)" : "var(--color-grey-400)"}
+            textHoverColor="var(--color-magnolia)"
+            disabled={
+              !form.state.canSubmit || !form.state.values.newPassword || !form.state.values.confirmPassword || isPending


I'm almost sure, you can use form.state.isValid instead newPassword and confirmPassword checks. Maybe even omit isValid, since there is a chance it's included in canSubmit

very true, it would seem that this is indeed covered by the canSubmit so have simplified it to that

…async

DarrellRoberts · 2026-07-10T15:25:30Z

thanks @kiborrdis ! Have implemented the changes

DarrellRoberts added 2 commits July 7, 2026 13:03

adds forgot- and resetpassword pages

220cdba

refactors & adds i18n locales

cc85eaa

DarrellRoberts self-assigned this Jul 7, 2026

DarrellRoberts commented Jul 7, 2026

View reviewed changes

changes names on ForgotPasswordForm

599d629

DarrellRoberts commented Jul 7, 2026

View reviewed changes

DarrellRoberts added 2 commits July 7, 2026 21:14

removes use client from pages

1986ddd

rearranges login dir

5ffc35f

kiborrdis reviewed Jul 9, 2026

View reviewed changes

DarrellRoberts and others added 2 commits July 10, 2026 17:14

refactors reset pwd validators, removes consolelog & removes onchange…

19efe8e

…async

Merge branch 'develop' into darrell/feat/forgot-password

5976229

Merge branch 'develop' into darrell/feat/forgot-password

b488608

need4deed merged commit 9f51182 into develop Jul 13, 2026
1 check passed

need4deed deleted the darrell/feat/forgot-password branch July 13, 2026 09:09

Uh oh!

Conversation

DarrellRoberts commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Changes

How to manually test

Screenshots / Demos

/forgotten-password

On success

/reset-password?token=[token]

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kiborrdis Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DarrellRoberts commented Jul 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

DarrellRoberts commented Jul 7, 2026 •

edited

Loading

kiborrdis Jul 9, 2026 •

edited

Loading