create a dedicated password reset page (#2023)

2026-01-19 20:09:35 +01:00
parent 7e50e99351
commit afe957ba59
35 changed files with 914 additions and 32 deletions
--- a/commafeed-client/src/pages/auth/PasswordResetPage.tsx
+++ b/commafeed-client/src/pages/auth/PasswordResetPage.tsx
@@ -0,0 +1,119 @@
+import { msg } from "@lingui/core/macro"
+import { useLingui } from "@lingui/react"
+import { Trans } from "@lingui/react/macro"
+import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, Title } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { useState } from "react"
+import { useAsyncCallback } from "react-async-hook"
+import { Link, useSearchParams } from "react-router-dom"
+import { client, errorToStrings } from "@/app/client"
+import { Alert } from "@/components/Alert"
+import { useValidationRules } from "@/hooks/useValidationRules"
+import { PageTitle } from "@/pages/PageTitle"
+
+interface PasswordResetFormValues {
+    password: string
+    passwordConfirmation: string
+}
+
+export function PasswordResetPage() {
+    const [message, setMessage] = useState("")
+    const [searchParams] = useSearchParams()
+    const { _ } = useLingui()
+    const validationRules = useValidationRules()
+
+    const email = searchParams.get("email") ?? ""
+    const token = searchParams.get("token") ?? ""
+
+    const form = useForm<PasswordResetFormValues>({
+        initialValues: {
+            password: "",
+            passwordConfirmation: "",
+        },
+        validate: {
+            password: validationRules.password,
+            passwordConfirmation: (value, values) => (value === values.password ? null : _(msg`Passwords do not match`)),
+        },
+        validateInputOnChange: true,
+    })
+
+    const resetPassword = useAsyncCallback(client.user.passwordResetCallback, {
+        onSuccess: () => {
+            setMessage(_(msg`Your password has been changed. You can now log in with your new password.`))
+            form.reset()
+        },
+    })
+
+    const isMissingParams = !email || !token
+
+    return (
+        <Container size="xs">
+            <PageTitle />
+            <Paper>
+                <Title order={2} mb="md">
+                    <Trans>Reset Password</Trans>
+                </Title>
+
+                {resetPassword.error && (
+                    <Box mb="md">
+                        <Alert messages={errorToStrings(resetPassword.error)} />
+                    </Box>
+                )}
+
+                {isMissingParams && (
+                    <Box mb="md">
+                        <Alert messages={[_(msg`Invalid password reset link. Please request a new one.`)]} />
+                    </Box>
+                )}
+
+                {message && (
+                    <Box mb="md">
+                        <Alert level="success" messages={[message]} />
+                    </Box>
+                )}
+
+                {!isMissingParams && !message && (
+                    <form
+                        onSubmit={form.onSubmit(values => {
+                            resetPassword.execute({
+                                email,
+                                token,
+                                password: values.password,
+                            })
+                        })}
+                    >
+                        <Stack>
+                            <PasswordInput
+                                label={<Trans>New Password</Trans>}
+                                placeholder={_(msg`New Password`)}
+                                {...form.getInputProps("password")}
+                                size="md"
+                                required
+                            />
+
+                            <PasswordInput
+                                label={<Trans>Confirm Password</Trans>}
+                                placeholder={_(msg`Confirm Password`)}
+                                {...form.getInputProps("passwordConfirmation")}
+                                size="md"
+                                required
+                            />
+
+                            <Button type="submit" loading={resetPassword.loading}>
+                                <Trans>Reset Password</Trans>
+                            </Button>
+                        </Stack>
+                    </form>
+                )}
+
+                <Center mt="md">
+                    <Group>
+                        <Anchor component={Link} to="/login">
+                            <Trans>Back to log in</Trans>
+                        </Anchor>
+                    </Group>
+                </Center>
+            </Paper>
+        </Container>
+    )
+}