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>
This commit is contained in:
parent
e6849174c1
commit
20fd45a3fd
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
<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 (!password) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
await debouncedChangePassword({ password, requestId: resetPasswordRequest.id });
|
||||
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>
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="password"
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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`);
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user