From a93903e81c87f9b4eda964134285e82a8b3a7534 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 26 Sep 2025 12:24:50 +0800
Subject: [PATCH] Add callout for reset password email (#38999)

* Add callout for reset password email

* nit
---
 .../components/interfaces/SignIn/ForgotPasswordWizard.tsx  | 6 ++++++
 apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx | 7 ++++++-
 apps/studio/pages/forgot-password.tsx                      | 5 +++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
index 11f39cba3a..2cc021b1ff 100644
--- a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
+++ b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
@@ -10,6 +10,7 @@ import { useResetPasswordMutation } from 'data/misc/reset-password-mutation'
 import { BASE_PATH } from 'lib/constants'
 import { auth } from 'lib/gotrue'
 import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 const forgotPasswordSchema = z.object({
@@ -78,6 +79,11 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
         className="flex flex-col pt-4 space-y-4"
         onSubmit={codeForm.handleSubmit(onCodeEntered)}
       >
+        <Admonition
+          type="default"
+          title="Check your email for a reset code"
+          description="You'll receive an email if an account associated with the email address exists"
+        />
         <FormField_Shadcn_
           control={codeForm.control}
           name="code"
diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
index 5697db039e..c1e09f73f7 100644
--- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
@@ -175,7 +175,12 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
             </li>
           )}
           <li>
-            <Link href="/logout">Force sign out and clear cookies</Link>
+            <Link
+              href="/logout"
+              className="text-sm transition text-foreground-light hover:text-foreground"
+            >
+              Force sign out and clear cookies
+            </Link>
           </li>
           <li>
             <Link
diff --git a/apps/studio/pages/forgot-password.tsx b/apps/studio/pages/forgot-password.tsx
index 03f7a5a75f..8952cd12cc 100644
--- a/apps/studio/pages/forgot-password.tsx
+++ b/apps/studio/pages/forgot-password.tsx
@@ -1,6 +1,7 @@
+import Link from 'next/link'
+
 import { ForgotPasswordWizard } from 'components/interfaces/SignIn/ForgotPasswordWizard'
 import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
-import Link from 'next/link'
 import type { NextPageWithLayout } from 'types'
 
 const ForgotPasswordPage: NextPageWithLayout = () => {
@@ -23,7 +24,7 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
 ForgotPasswordPage.getLayout = (page) => (
   <ForgotPasswordLayout
     heading="Forgot your password?"
-    subheading="Type in your email and we'll send you a code to reset the password"
+    subheading="Enter your email and we'll send you a code to reset the password"
   >
     {page}
   </ForgotPasswordLayout>