wip

apps/remix/app/routes/_unauthenticated+/reset-password.$token.tsx

@@ -0,0 +1,55 @@
+import { Trans } from '@lingui/macro';
+import { Link, redirect } from 'react-router';
+
+import { getResetTokenValidity } from '@documenso/lib/server-only/user/get-reset-token-validity';
+
+import { ResetPasswordForm } from '~/components/forms/reset-password';
+
+import type { Route } from './+types/reset-password.$token';
+
+export function meta() {
+  return [{ title: 'Reset Password' }];
+}
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { token } = params;
+
+  const isValid = await getResetTokenValidity({ token });
+
+  if (!isValid) {
+    redirect('/reset-password');
+  }
+
+  return {
+    token,
+  };
+}
+
+export default function ResetPasswordPage({ loaderData }: Route.ComponentProps) {
+  const { token } = loaderData;
+
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-4xl font-semibold">
+          <Trans>Reset Password</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>Please choose your new password</Trans>
+        </p>
+
+        <ResetPasswordForm token={token} className="mt-4" />
+
+        <p className="text-muted-foreground mt-6 text-center text-sm">
+          <Trans>
+            Don't have an account?{' '}
+            <Link to="/signup" className="text-primary duration-200 hover:opacity-70">
+              Sign up
+            </Link>
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+}