From 8ada2c26f774699e45eea8a58da9c1057fbd2819 Mon Sep 17 00:00:00 2001
From: Aleksandra <alexsandra.sikora@gmail.com>
Date: Wed, 17 Aug 2022 17:25:57 +0200
Subject: [PATCH] Include ResetPasswordPage in new app template (#3743)

---
 .changeset/long-lobsters-drop.md              |  5 ++
 .../mailers/forgotPasswordMailer.ts           |  2 +-
 .../toolkit-app/pages/auth/reset-password.tsx | 66 +++++++++++++++++++
 .../app/mailers/forgotPasswordMailer.ts       |  2 +-
 .../app/pages/auth/reset-password.tsx         | 62 +++++++++++++++++
 5 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/long-lobsters-drop.md
 create mode 100644 apps/toolkit-app/pages/auth/reset-password.tsx
 create mode 100644 packages/generator/templates/app/pages/auth/reset-password.tsx

diff --git a/.changeset/long-lobsters-drop.md b/.changeset/long-lobsters-drop.md
new file mode 100644
index 0000000000..cc4e1e4941
--- /dev/null
+++ b/.changeset/long-lobsters-drop.md
@@ -0,0 +1,5 @@
+---
+"@blitzjs/generator": patch
+---
+
+Include ResetPasswordPage in new app template
diff --git a/apps/toolkit-app/mailers/forgotPasswordMailer.ts b/apps/toolkit-app/mailers/forgotPasswordMailer.ts
index 5005e42fe4..baace45b9a 100644
--- a/apps/toolkit-app/mailers/forgotPasswordMailer.ts
+++ b/apps/toolkit-app/mailers/forgotPasswordMailer.ts
@@ -13,7 +13,7 @@ type ResetPasswordMailer = {
 export function forgotPasswordMailer({ to, token }: ResetPasswordMailer) {
   // In production, set APP_ORIGIN to your production server origin
   const origin = process.env.APP_ORIGIN || process.env.BLITZ_DEV_SERVER_ORIGIN
-  const resetUrl = `${origin}/reset-password?token=${token}`
+  const resetUrl = `${origin}/auth/reset-password?token=${token}`
 
   const msg = {
     from: "TODO@example.com",
diff --git a/apps/toolkit-app/pages/auth/reset-password.tsx b/apps/toolkit-app/pages/auth/reset-password.tsx
new file mode 100644
index 0000000000..2df1c5e7e4
--- /dev/null
+++ b/apps/toolkit-app/pages/auth/reset-password.tsx
@@ -0,0 +1,66 @@
+import Layout from "app/core/layouts/Layout"
+import { LabeledTextField } from "app/core/components/LabeledTextField"
+import { Form, FORM_ERROR } from "app/core/components/Form"
+import { ResetPassword } from "app/auth/validations"
+import resetPassword from "app/auth/mutations/resetPassword"
+import { BlitzPage, Routes } from "@blitzjs/next"
+import { useRouter } from "next/router"
+import { useMutation } from "@blitzjs/rpc"
+import Link from "next/link"
+
+const ResetPasswordPage: BlitzPage = () => {
+  const router = useRouter()
+  const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword)
+
+  return (
+    <div>
+      <h1>Set a New Password</h1>
+
+      {isSuccess ? (
+        <div>
+          <h2>Password Reset Successfully</h2>
+          <p>
+            Go to the <Link href={Routes.Home()}>homepage</Link>
+          </p>
+        </div>
+      ) : (
+        <Form
+          submitText="Reset Password"
+          schema={ResetPassword}
+          initialValues={{
+            password: "",
+            passwordConfirmation: "",
+            token: router.query.token as string,
+          }}
+          onSubmit={async (values) => {
+            try {
+              await resetPasswordMutation(values)
+            } catch (error: any) {
+              if (error.name === "ResetPasswordError") {
+                return {
+                  [FORM_ERROR]: error.message,
+                }
+              } else {
+                return {
+                  [FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.",
+                }
+              }
+            }
+          }}
+        >
+          <LabeledTextField name="password" label="New Password" type="password" />
+          <LabeledTextField
+            name="passwordConfirmation"
+            label="Confirm New Password"
+            type="password"
+          />
+        </Form>
+      )}
+    </div>
+  )
+}
+
+ResetPasswordPage.redirectAuthenticatedTo = "/"
+ResetPasswordPage.getLayout = (page) => <Layout title="Reset Your Password">{page}</Layout>
+
+export default ResetPasswordPage
diff --git a/packages/generator/templates/app/mailers/forgotPasswordMailer.ts b/packages/generator/templates/app/mailers/forgotPasswordMailer.ts
index 5005e42fe4..baace45b9a 100644
--- a/packages/generator/templates/app/mailers/forgotPasswordMailer.ts
+++ b/packages/generator/templates/app/mailers/forgotPasswordMailer.ts
@@ -13,7 +13,7 @@ type ResetPasswordMailer = {
 export function forgotPasswordMailer({ to, token }: ResetPasswordMailer) {
   // In production, set APP_ORIGIN to your production server origin
   const origin = process.env.APP_ORIGIN || process.env.BLITZ_DEV_SERVER_ORIGIN
-  const resetUrl = `${origin}/reset-password?token=${token}`
+  const resetUrl = `${origin}/auth/reset-password?token=${token}`
 
   const msg = {
     from: "TODO@example.com",
diff --git a/packages/generator/templates/app/pages/auth/reset-password.tsx b/packages/generator/templates/app/pages/auth/reset-password.tsx
new file mode 100644
index 0000000000..9efff8cdaa
--- /dev/null
+++ b/packages/generator/templates/app/pages/auth/reset-password.tsx
@@ -0,0 +1,62 @@
+import Layout from "app/core/layouts/Layout"
+import { LabeledTextField } from "app/core/components/LabeledTextField"
+import { Form, FORM_ERROR } from "app/core/components/Form"
+import { ResetPassword } from "app/auth/validations"
+import resetPassword from "app/auth/mutations/resetPassword"
+import { BlitzPage, Routes } from "@blitzjs/next"
+import { useRouter } from "next/router"
+import { useMutation } from "@blitzjs/rpc"
+import Link from "next/link"
+
+const ResetPasswordPage: BlitzPage = () => {
+  const router = useRouter()
+  const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword)
+
+  return (
+    <div>
+      <h1>Set a New Password</h1>
+
+      {isSuccess ? (
+        <div>
+          <h2>Password Reset Successfully</h2>
+          <p>
+            Go to the <Link href={Routes.Home()}>homepage</Link>
+          </p>
+        </div>
+      ) : (
+        <Form
+          submitText="Reset Password"
+          schema={ResetPassword}
+          initialValues={{ password: "", passwordConfirmation: "", token: router.query.token as string }}
+          onSubmit={async (values) => {
+            try {
+              await resetPasswordMutation(values)
+            } catch (error: any) {
+              if (error.name === "ResetPasswordError") {
+                return {
+                  [FORM_ERROR]: error.message,
+                }
+              } else {
+                return {
+                  [FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.",
+                }
+              }
+            }
+          }}
+        >
+          <LabeledTextField name="password" label="New Password" type="password" />
+          <LabeledTextField
+            name="passwordConfirmation"
+            label="Confirm New Password"
+            type="password"
+          />
+        </Form>
+      )}
+    </div>
+  )
+}
+
+ResetPasswordPage.redirectAuthenticatedTo = "/"
+ResetPasswordPage.getLayout = (page) => <Layout title="Reset Your Password">{page}</Layout>
+
+export default ResetPasswordPage