Namespace /reset route to /login/forgot-password (bigcommerce#1410)

* Move /reset route to /login/forgot-password

* feat: update translations and link to forgot-password page

* fix: update test

* fix: test

* chore: add changeset

* fix: remove unused route from middleware

---------

Co-authored-by: Jorge Moya <[email protected]>

.changeset/chatty-cougars-smoke.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Move /reset page to /login/forgot-password in order to reduce top-level routes.

core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx

@@ -121,9 +121,9 @@ export const LoginForm = () => {
           </FormSubmit>
           <Link
             className="my-5 inline-flex items-center justify-start font-semibold text-primary hover:text-secondary md:my-0"
-            href="/reset"
+            href="/login/forgot-password"
           >
-            {t('Form.resetPassword')}
+            {t('Form.forgotPassword')}
           </Link>
         </div>
       </Form>

core/app/[locale]/(default)/(auth)/reset/_actions/reset-password.ts → core/app/[locale]/(default)/(auth)/login/forgot-password/_actions/reset-password.ts

@@ -37,7 +37,7 @@ export const resetPassword = async ({
   path,
   reCaptchaToken,
 }: SubmitResetPasswordForm) => {
-  const t = await getTranslations('Reset');
+  const t = await getTranslations('Login.ForgotPassword');
 
   try {
     const parsedData = ResetPasswordSchema.parse({

core/app/[locale]/(default)/(auth)/reset/_components/reset-password-form/index.tsx → core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx

@@ -34,7 +34,7 @@ interface FormStatus {
 }
 
 const SubmitButton = () => {
-  const t = useTranslations('Reset.Form');
+  const t = useTranslations('Login.ForgotPassword.Form');
 
   const { pending } = useFormStatus();
 
@@ -52,7 +52,7 @@ const SubmitButton = () => {
 };
 
 export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
-  const t = useTranslations('Reset.Form');
+  const t = useTranslations('Login.ForgotPassword.Form');
 
   const form = useRef<HTMLFormElement>(null);
   const [formStatus, setFormStatus] = useState<FormStatus | null>(null);

core/app/[locale]/(default)/(auth)/reset/page.tsx → core/app/[locale]/(default)/(auth)/login/forgot-password/page.tsx

@@ -24,15 +24,15 @@ const ResetPageQuery = graphql(
 );
 
 export async function generateMetadata() {
-  const t = await getTranslations('Reset');
+  const t = await getTranslations('Login.ForgotPassword');
 
   return {
     title: t('title'),
   };
 }
 
 export default async function Reset() {
-  const t = await getTranslations('Reset');
+  const t = await getTranslations('Login.ForgotPassword');
 
   const { data } = await client.fetch({
     document: ResetPageQuery,

core/messages/en.json

@@ -32,7 +32,7 @@
       "entePasswordMessage": "Enter your password",
       "submitting": "Submitting...",
       "logIn": "Log in",
-      "resetPassword": "Forgot your password?"
+      "forgotPassword": "Forgot your password?"
     },
     "CreateAccount": {
       "heading": "New customer?",
@@ -43,6 +43,22 @@
       "ordersTracking":  "Track new orders",
       "wishlists": "Save items to your Wishlist",
       "createLink": "Create Account "
+    },
+    "ForgotPassword": {
+      "title": "Forgot password",
+      "heading": "Forgot password",
+      "Form": {
+        "description": "Enter the email associated with your account below. We'll send you instructions to reset your password.",
+        "emailLabel": "Email",
+        "emailValidationMessage": "Enter a valid email such as [email protected]",
+        "recaptchaText": "Pass ReCAPTCHA check",
+        "confirmResetPassword": "If the email address {email} is linked to an account in our store, we have sent you a password reset email. Please check your inbox and spam folder if you don't see it.",
+        "submitting": "Submitting...",
+        "submit": "Reset password"
+      },
+      "Errors": {
+        "error":"Unknown error."
+      }
     }
   },
   "Register": {
@@ -60,22 +76,6 @@
       "error": "Something went wrong. Please try again later."
     }
   },
-  "Reset": {
-    "title": "Reset password",
-    "heading": "Reset password",
-    "Form": {
-      "description": "Enter the email associated with your account below. We'll send you instructions to reset your password.",
-      "emailLabel": "Email",
-      "emailValidationMessage": "Enter a valid email such as [email protected]",
-      "recaptchaText": "Pass ReCAPTCHA check",
-      "confirmResetPassword": "If the email address {email} is linked to an account in our store, we have sent you a password reset email. Please check your inbox and spam folder if you don't see it.",
-      "submitting": "Submitting...",
-      "submit": "Reset password"
-    },
-    "Errors": {
-      "error":"Unknown error."
-    }
-  },
   "FacetedGroup": {
     "MobileSideNav": {
       "filters": "Filters",

core/middlewares/with-auth.ts

@@ -4,7 +4,7 @@ import { auth } from '~/auth';
 
 import { type MiddlewareFactory } from './compose-middlewares';
 
-const AUTH_PATHS = ['/login/', '/register/', '/reset/', '/change-password/'];
+const AUTH_PATHS = ['/login/', '/register/', '/change-password/'];
 
 export const withAuth: MiddlewareFactory = (next) => {
   return async (request, event) => {

core/tests/ui/e2e/reset.spec.ts → core/tests/ui/e2e/forgot-password.spec.ts

@@ -4,10 +4,10 @@ import { expect, test } from '~/tests/fixtures';
 
 const email = faker.internet.email({ provider: 'example.com' });
 
-test('Reset password', async ({ page }) => {
-  await page.goto('/reset');
+test('Forgot password', async ({ page }) => {
+  await page.goto('/login/forgot-password');
 
-  await page.getByRole('heading', { name: 'Reset password' }).waitFor();
+  await page.getByRole('heading', { name: 'Forgot password' }).waitFor();
 
   await page.getByLabel('Email').fill(email);