V2 password reset design (#4327)

* using new v2 buttons in password reset

* Forgot password UI

* Logo updates

* change error copy

* Fix tests

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

apps/web/components/ui/AuthContainer.tsx

@@ -17,7 +17,7 @@ interface Props {
 
 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-neutral-50 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center border-gray-200 bg-neutral-50 py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
         {props.showLogo && (
@@ -34,7 +34,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         </div>
       )}
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="mx-2 rounded-sm border border-neutral-200 bg-white px-4 py-8 sm:px-10">
+        <div className="mx-2 rounded-md border border-gray-300 bg-white px-4 py-8 sm:px-10">
           {props.children}
         </div>
         <div className="mt-4 text-center text-sm text-neutral-600">{props.footerText}</div>

apps/web/components/v2/ui/AuthContainer.tsx

@@ -17,23 +17,21 @@ interface Props {
 
 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-gray-100 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center bg-[#f3f4f6] py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
+      {props.showLogo && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img className="mb-auto h-4" src={LOGO} alt="Cal.com Logo" />
+      )}
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
-        {props.showLogo && (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img className="mx-auto h-6" src={LOGO} alt="Cal.com Logo" />
-        )}
-        {props.heading && (
-          <h2 className="font-cal mt-6 text-center text-3xl text-neutral-900">{props.heading}</h2>
-        )}
+        {props.heading && <h2 className="font-cal text-center text-3xl text-neutral-900">{props.heading}</h2>}
       </div>
       {props.loading && (
         <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
           <Loader />
         </div>
       )}
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div className="border-1 mx-2 rounded-md border-gray-200 bg-white px-4 py-8 sm:px-10">
           {props.children}
         </div>

apps/web/pages/api/auth/forgot-password.ts

@@ -28,7 +28,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     });
 
     if (!maybeUser) {
-      return res.status(400).json({ message: "Couldn't find an account for this email" });
+      // Don't leak information about whether an email is registered or not
+      return res
+        .status(200)
+        .json({ message: "If this email exists in our system, you should receive a Reset email." });
     }
 
     const maybePreviousRequest = await prisma.resetPasswordRequest.findMany({
@@ -64,9 +67,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     /** So we can test the password reset flow on CI */
     if (process.env.NEXT_PUBLIC_IS_E2E) {
-      return res.status(201).json({ message: "Reset Requested", resetLink });
+      return res.status(201).json({
+        message: "If this email exists in our system, you should receive a Reset email.",
+        resetLink,
+      });
     } else {
-      return res.status(201).json({ message: "Reset Requested" });
+      return res
+        .status(201)
+        .json({ message: "If this email exists in our system, you should receive a Reset email." });
     }
   } catch (reason) {
     // console.error(reason);

apps/web/pages/auth/forgot-password/[id].tsx

@@ -7,10 +7,12 @@ import React, { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
 import prisma from "@calcom/prisma";
+import { Button, Input, TextField } from "@calcom/ui/v2";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { HeadSeo } from "@components/seo/head-seo";
+import AuthContainer from "@components/v2/ui/AuthContainer";
 
 type Props = {
   id: string;
@@ -60,17 +62,12 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
         <div className="space-y-6">
           <div>
             <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
-              {t("success")}
+              {t("password_updated")}
             </h2>
           </div>
-          <p>{t("password_has_been_reset_login")}</p>
-          <Link href="/auth/login">
-            <button
-              type="button"
-              className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
-              {t("login")}
-            </button>
-          </Link>
+          <Button href="/auth/login" className="w-full justify-center">
+            {t("login")}
+          </Button>
         </div>
       </>
     );
@@ -103,102 +100,68 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
   }, [resetPasswordRequest]);
 
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
-      <HeadSeo title={t("reset_password")} description={t("change_your_password")} />
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="mx-2 space-y-6 rounded-lg bg-white px-4 py-8 shadow sm:px-10">
-          {isRequestExpired && <Expired />}
-          {!isRequestExpired && !success && (
-            <>
-              <div className="space-y-6">
-                <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
-                  {t("reset_password")}
-                </h2>
-                <p>{t("enter_new_password")}</p>
-                {error && <p className="text-red-600">{error.message}</p>}
-              </div>
-              <form
-                className="space-y-6"
-                onSubmit={async (e) => {
-                  e.preventDefault();
-
-                  if (!password) {
-                    return;
-                  }
-
-                  if (loading) {
-                    return;
-                  }
-
-                  setLoading(true);
-                  setError(null);
-                  setSuccess(false);
-
-                  await debouncedChangePassword({ password, requestId: resetPasswordRequest.id });
+    <AuthContainer
+      showLogo
+      title={t("reset_password")}
+      description={t("change_your_password")}
+      heading={!success ? t("reset_password") : undefined}>
+      {isRequestExpired && <Expired />}
+      {!isRequestExpired && !success && (
+        <>
+          <form
+            className="space-y-6"
+            onSubmit={async (e) => {
+              e.preventDefault();
+
+              if (!password) {
+                return;
+              }
+
+              if (loading) {
+                return;
+              }
+
+              setLoading(true);
+              setError(null);
+              setSuccess(false);
+
+              await debouncedChangePassword({ password, requestId: resetPasswordRequest.id });
+            }}
+            action="#">
+            <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
+            <div className="mt-1">
+              <TextField
+                label={t("new_password")}
+                onChange={(e) => {
+                  setPassword(e.target.value);
                 }}
-                action="#">
-                <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-                    {t("new_password")}
-                  </label>
-                  <div className="mt-1">
-                    <input
-                      onChange={(e) => {
-                        setPassword(e.target.value);
-                      }}
-                      id="password"
-                      name="password"
-                      type="password"
-                      autoComplete="password"
-                      required
-                      className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-black"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <button
-                    type="submit"
-                    disabled={loading}
-                    className={`flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 ${
-                      loading ? "cursor-not-allowed" : ""
-                    }`}>
-                    {loading && (
-                      <svg
-                        className="mr-3 -ml-1 h-5 w-5 animate-spin text-white"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24">
-                        <circle
-                          className="opacity-25"
-                          cx="12"
-                          cy="12"
-                          r="10"
-                          stroke="currentColor"
-                          strokeWidth="4"
-                        />
-                        <path
-                          className="opacity-75"
-                          fill="currentColor"
-                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                        />
-                      </svg>
-                    )}
-                    {t("submit")}
-                  </button>
-                </div>
-              </form>
-            </>
-          )}
-          {!isRequestExpired && success && (
-            <>
-              <Success />
-            </>
-          )}
-        </div>
-      </div>
-    </div>
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="password"
+                required
+              />
+            </div>
+
+            <div>
+              <Button
+                loading={loading}
+                color="primary"
+                type="submit"
+                disabled={loading}
+                className="w-full justify-center">
+                {t("reset_password")}
+              </Button>
+            </div>
+          </form>
+        </>
+      )}
+      {!isRequestExpired && success && (
+        <>
+          <Success />
+        </>
+      )}
+    </AuthContainer>
   );
 }
 

apps/web/pages/auth/forgot-password/index.tsx

@@ -5,13 +5,12 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { SyntheticEvent } from "react";
 
-import Button from "@calcom/ui/Button";
-import { EmailField } from "@calcom/ui/form/fields";
+import { EmailField, Button } from "@calcom/ui/v2";
 
 import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
 
-import AuthContainer from "@components/ui/AuthContainer";
+import AuthContainer from "@components/v2/ui/AuthContainer";
 
 export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   const { t, i18n } = useLocale();
@@ -75,33 +74,36 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
 
   const Success = () => {
     return (
-      <div className="space-y-6">
-        <p className="text-center">{t("check_email_reset_password")}</p>
+      <div className="space-y-6 text-sm leading-normal ">
+        <p className="">{t("password_reset_email", { email })}</p>
+        <p className="">{t("password_reset_leading")}</p>
         {error && <p className="text-center text-red-600">{error.message}</p>}
+        <Button color="secondary" className="w-full justify-center" href="/auth/login">
+          {t("back_to_signin")}
+        </Button>
       </div>
     );
   };
 
   return (
     <AuthContainer
-      title={t("forgot_password")}
+      showLogo
+      title={!success ? t("forgot_password") : t("reset_link_sent")}
+      heading={!success ? t("forgot_password") : t("reset_link_sent")}
       description={t("request_password_reset")}
-      heading={t("forgot_password")}
       footerText={
-        <>
-          {t("already_have_an_account")}{" "}
-          <Link href="/auth/login">
-            <a className="font-medium text-neutral-900">{t("login_instead")}</a>
-          </Link>
-        </>
+        !success && (
+          <>
+            <Link href="/auth/login">
+              <a className="font-medium text-neutral-900">{t("back_to_signin")}</a>
+            </Link>
+          </>
+        )
       }>
       {success && <Success />}
       {!success && (
         <>
-          <div className="space-y-6">
-            <p className="mb-4 text-sm text-gray-500">{t("reset_instructions")}</p>
-            {error && <p className="text-red-600">{error.message}</p>}
-          </div>
+          <div className="space-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
           <form className="space-y-6" onSubmit={handleSubmit} action="#">
             <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
             <EmailField

apps/web/playwright/auth/forgot-password.e2e.ts

@@ -15,7 +15,7 @@ test("Can reset forgotten password", async ({ page, users }) => {
   // Press Enter
   await Promise.all([
     page.waitForNavigation({
-      url: "/auth/forgot-password/*",
+      url: (u) => u.pathname.startsWith("/auth/forgot-password/"),
     }),
     page.press('input[name="email"]', "Enter"),
   ]);
@@ -28,14 +28,16 @@ test("Can reset forgotten password", async ({ page, users }) => {
   // Click text=Submit
   await page.click('button[type="submit"]');
 
-  await page.waitForSelector("text=Success", {
+  await page.waitForSelector("text=Password updated", {
     timeout: 3000,
   });
 
-  await expect(page.locator(`text=Success`)).toBeVisible();
-
+  await expect(page.locator(`text=Password updated`)).toBeVisible();
   // Click button:has-text("Login")
-  await Promise.all([page.waitForNavigation({ url: "/auth/login" }), page.click('button:has-text("Login")')]);
+  await Promise.all([
+    page.waitForNavigation({ url: (u) => u.pathname.startsWith("/auth/login") }),
+    page.click('a:has-text("Login")'),
+  ]);
 
   // Fill input[name="email"]
   await page.fill('input[name="email"]', `${user.username}@example.com`);

apps/web/public/static/locales/en/common.json

@@ -211,7 +211,7 @@
   "sign_in": "Sign in",
   "go_back_login": "Go back to the login page",
   "error_during_login": "An error occurred when logging you in. Head back to the login screen and try again.",
-  "request_password_reset": "Request Password Reset",
+  "request_password_reset": "Send reset email",
   "forgot_password": "Forgot Password?",
   "forgot": "Forgot?",
   "done": "Done",
@@ -1187,5 +1187,10 @@
   "add_new_form": "Add new form",
   "form_description": "Create your form to route a booker",
   "copy_link_to_form": "Copy link to form",
+  "back_to_signin": "Back to sign in",
+  "reset_link_sent": "Reset link sent",
+  "password_reset_email":"An email is on it’s way to {{email}} with instructions to reset your password.",
+  "password_reset_leading":"If you did not receive the email soon, check that the email address you entered is correct, check your spam folder or reach out to support if the issue persists.",
+  "password_updated":"Password updated!",
   "pending_payment": "Pending payment"
 }