first commit

common/resources/client/auth/ui/reset-password-page.tsx

@@ -0,0 +1,80 @@
+import {Link, useParams} from 'react-router-dom';
+import {useForm} from 'react-hook-form';
+import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
+import {Button} from '../../ui/buttons/button';
+import {Form} from '../../ui/forms/form';
+import {LinkStyle} from '../../ui/buttons/external-link';
+import {AuthLayout} from './auth-layout/auth-layout';
+import {
+  ResetPasswordPayload,
+  useResetPassword,
+} from '../requests/reset-password';
+import {Trans} from '../../i18n/trans';
+import {StaticPageTitle} from '../../seo/static-page-title';
+
+export function ResetPasswordPage() {
+  const {token} = useParams();
+  const form = useForm<ResetPasswordPayload>({defaultValues: {token}});
+  const resetPassword = useResetPassword(form);
+
+  const heading = <Trans message="Reset your account password" />;
+
+  const message = (
+    <Trans
+      values={{
+        a: parts => (
+          <Link className={LinkStyle} to="/register">
+            {parts}
+          </Link>
+        ),
+      }}
+      message="Don't have an account? <a>Sign up.</a>"
+    />
+  );
+
+  return (
+    <AuthLayout heading={heading} message={message}>
+      <StaticPageTitle>
+        <Trans message="Reset Password" />
+      </StaticPageTitle>
+      <Form
+        form={form}
+        onSubmit={payload => {
+          resetPassword.mutate(payload);
+        }}
+      >
+        <FormTextField
+          className="mb-32"
+          name="email"
+          type="email"
+          label={<Trans message="Email" />}
+          required
+        />
+        <FormTextField
+          className="mb-32"
+          name="password"
+          type="password"
+          label={<Trans message="New password" />}
+          required
+        />
+        <FormTextField
+          className="mb-32"
+          name="password_confirmation"
+          type="password"
+          label={<Trans message="Confirm password" />}
+          required
+        />
+        <Button
+          className="block w-full"
+          type="submit"
+          variant="flat"
+          color="primary"
+          size="md"
+          disabled={resetPassword.isPending}
+        >
+          <Trans message="Reset password" />
+        </Button>
+      </Form>
+    </AuthLayout>
+  );
+}