- {applicationLogo}
+ = ({
>
{Language.passwordSignIn}
+
+ Forgot password?
+
);
diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
new file mode 100644
index 0000000000..d59ead3a59
--- /dev/null
+++ b/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, spyOn, userEvent, within } from "@storybook/test";
+import { API } from "api/api";
+import { mockApiError } from "testHelpers/entities";
+import { withGlobalSnackbar } from "testHelpers/storybook";
+import ChangePasswordPage from "./ChangePasswordPage";
+
+const meta: Meta = {
+ title: "pages/ResetPasswordPage/ChangePasswordPage",
+ component: ChangePasswordPage,
+ args: { redirect: false },
+ decorators: [withGlobalSnackbar],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Success: Story = {
+ play: async ({ canvasElement }) => {
+ spyOn(API, "changePasswordWithOTP").mockResolvedValueOnce();
+ const canvas = within(canvasElement);
+ const user = userEvent.setup();
+ const newPasswordInput = await canvas.findByLabelText("Password *");
+ await user.type(newPasswordInput, "password");
+ const confirmPasswordInput =
+ await canvas.findByLabelText("Confirm password *");
+ await user.type(confirmPasswordInput, "password");
+ await user.click(canvas.getByRole("button", { name: /reset password/i }));
+ await canvas.findByText("Password reset successfully");
+ },
+};
+
+export const WrongConfirmationPassword: Story = {
+ play: async ({ canvasElement }) => {
+ spyOn(API, "changePasswordWithOTP").mockRejectedValueOnce(
+ mockApiError({
+ message: "New password should be different from the old password",
+ }),
+ );
+ const canvas = within(canvasElement);
+ const user = userEvent.setup();
+ const newPasswordInput = await canvas.findByLabelText("Password *");
+ await user.type(newPasswordInput, "password");
+ const confirmPasswordInput =
+ await canvas.findByLabelText("Confirm password *");
+ await user.type(confirmPasswordInput, "different-password");
+ await user.click(canvas.getByRole("button", { name: /reset password/i }));
+ await canvas.findByText("Passwords must match");
+ },
+};
+
+export const ServerError: Story = {
+ play: async ({ canvasElement }) => {
+ const serverError =
+ "New password should be different from the old password";
+ spyOn(API, "changePasswordWithOTP").mockRejectedValueOnce(
+ mockApiError({
+ message: serverError,
+ }),
+ );
+ const canvas = within(canvasElement);
+ const user = userEvent.setup();
+ const newPasswordInput = await canvas.findByLabelText("Password *");
+ await user.type(newPasswordInput, "password");
+ const confirmPasswordInput =
+ await canvas.findByLabelText("Confirm password *");
+ await user.type(confirmPasswordInput, "password");
+ await user.click(canvas.getByRole("button", { name: /reset password/i }));
+ await canvas.findByText(serverError);
+ },
+};
diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
new file mode 100644
index 0000000000..077bc39da8
--- /dev/null
+++ b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
@@ -0,0 +1,174 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import LoadingButton from "@mui/lab/LoadingButton";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import { changePasswordWithOTP } from "api/queries/users";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { CustomLogo } from "components/CustomLogo/CustomLogo";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { Stack } from "components/Stack/Stack";
+import { useFormik } from "formik";
+import type { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import { useMutation } from "react-query";
+import {
+ Link as RouterLink,
+ useNavigate,
+ useSearchParams,
+} from "react-router-dom";
+import { getApplicationName } from "utils/appearance";
+import { getFormHelpers } from "utils/formUtils";
+import * as yup from "yup";
+
+const validationSchema = yup.object({
+ password: yup.string().required("Password is required"),
+ confirmPassword: yup
+ .string()
+ .required("Confirm password is required")
+ .test("passwords-match", "Passwords must match", function (value) {
+ return this.parent.password === value;
+ }),
+});
+
+type ChangePasswordChangeProps = {
+ // This is used to prevent redirection when testing the page in Storybook and
+ // capturing Chromatic snapshots.
+ redirect?: boolean;
+};
+
+const ChangePasswordPage: FC = ({ redirect }) => {
+ const navigate = useNavigate();
+ const applicationName = getApplicationName();
+ const changePasswordMutation = useMutation(changePasswordWithOTP());
+ const [searchParams] = useSearchParams();
+
+ const form = useFormik({
+ initialValues: {
+ password: "",
+ confirmPassword: "",
+ },
+ validateOnBlur: false,
+ validationSchema,
+ onSubmit: async (values) => {
+ const email = searchParams.get("email") ?? "";
+ const otp = searchParams.get("otp") ?? "";
+
+ await changePasswordMutation.mutateAsync({
+ email,
+ one_time_passcode: otp,
+ password: values.password,
+ });
+ displaySuccess("Password reset successfully");
+ if (redirect) {
+ navigate("/login");
+ }
+ },
+ });
+ const getFieldHelpers = getFormHelpers(form);
+
+ return (
+ <>
+
+ Reset Password - {applicationName}
+
+
+ >;
+
+export default ChangePasswordPage;
diff --git a/site/src/pages/ResetPasswordPage/RequestOTPPage.stories.tsx b/site/src/pages/ResetPasswordPage/RequestOTPPage.stories.tsx
new file mode 100644
index 0000000000..5f75f607ab
--- /dev/null
+++ b/site/src/pages/ResetPasswordPage/RequestOTPPage.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { spyOn, userEvent, within } from "@storybook/test";
+import { API } from "api/api";
+import { mockApiError } from "testHelpers/entities";
+import { withGlobalSnackbar } from "testHelpers/storybook";
+import RequestOTPPage from "./RequestOTPPage";
+
+const meta: Meta = {
+ title: "pages/ResetPasswordPage/RequestOTPPage",
+ component: RequestOTPPage,
+ decorators: [withGlobalSnackbar],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Success: Story = {
+ play: async ({ canvasElement }) => {
+ spyOn(API, "requestOneTimePassword").mockResolvedValueOnce();
+ const canvas = within(canvasElement);
+ const user = userEvent.setup();
+ const emailInput = await canvas.findByLabelText(/email/i);
+ await user.type(emailInput, "admin@coder.com");
+ await user.click(canvas.getByRole("button", { name: /reset password/i }));
+ },
+};
+
+export const ServerError: Story = {
+ play: async ({ canvasElement }) => {
+ spyOn(API, "requestOneTimePassword").mockRejectedValueOnce(
+ mockApiError({
+ message: "Error requesting password change",
+ }),
+ );
+ const canvas = within(canvasElement);
+ const user = userEvent.setup();
+ const emailInput = await canvas.findByLabelText(/email/i);
+ await user.type(emailInput, "admin@coder.com");
+ await user.click(canvas.getByRole("button", { name: /reset password/i }));
+ },
+};
diff --git a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
new file mode 100644
index 0000000000..0a097971b6
--- /dev/null
+++ b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
@@ -0,0 +1,193 @@
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import LoadingButton from "@mui/lab/LoadingButton";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import { getErrorMessage } from "api/errors";
+import { requestOneTimePassword } from "api/queries/users";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { CustomLogo } from "components/CustomLogo/CustomLogo";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { Stack } from "components/Stack/Stack";
+import type { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import { useMutation } from "react-query";
+import { Link as RouterLink } from "react-router-dom";
+import { getApplicationName } from "utils/appearance";
+
+const RequestOTPPage: FC = () => {
+ const applicationName = getApplicationName();
+ const requestOTPMutation = useMutation(requestOneTimePassword());
+
+ return (
+ <>
+
+ Reset Password - {applicationName}
+
+
+
+ {
+ requestOTPMutation.mutate({ email });
+ }}
+ />
+ )}
+
+
+ );
+};
+
+type RequestOTPProps = {
+ error: unknown;
+ onRequest: (email: string) => void;
+ isRequesting: boolean;
+};
+
+const RequestOTP: FC = ({
+ error,
+ onRequest,
+ isRequesting,
+}) => {
+ return (
+ >;
+
+export default RequestOTPPage;
diff --git a/site/src/router.tsx b/site/src/router.tsx
index 526be40a2b..2531c823b9 100644
--- a/site/src/router.tsx
+++ b/site/src/router.tsx
@@ -287,6 +287,12 @@ const DeploymentNotificationsPage = lazy(
"./pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage"
),
);
+const RequestOTPPage = lazy(
+ () => import("./pages/ResetPasswordPage/RequestOTPPage"),
+);
+const ChangePasswordPage = lazy(
+ () => import("./pages/ResetPasswordPage/ChangePasswordPage"),
+);
const RoutesWithSuspense = () => {
return (
@@ -348,6 +354,10 @@ export const router = createBrowserRouter(
+
{/* Dashboard routes */}
+
+
+
+
+ );
+};
+
+const styles = {
+ logo: {
+ marginBottom: 40,
+ },
+ root: {
+ padding: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexDirection: "column",
+ minHeight: "100%",
+ textAlign: "center",
+ },
+ container: {
+ width: "100%",
+ maxWidth: 320,
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ },
+ icon: {
+ fontSize: 64,
+ },
+ footer: (theme) => ({
+ fontSize: 12,
+ color: theme.palette.text.secondary,
+ marginTop: 24,
+ }),
+} satisfies Record
+
+ );
+};
+
+const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => {
+ const theme = useTheme();
+
+ return (
+
+
+ + Enter your email to reset the password +
+ {error ?
+
+ );
+};
+
+const styles = {
+ logo: {
+ marginBottom: 40,
+ },
+ root: {
+ padding: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexDirection: "column",
+ minHeight: "100%",
+ textAlign: "center",
+ },
+ container: {
+ width: "100%",
+ maxWidth: 320,
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ },
+ icon: {
+ fontSize: 64,
+ },
+ footer: (theme) => ({
+ fontSize: 12,
+ color: theme.palette.text.secondary,
+ marginTop: 24,
+ }),
+} satisfies Record
+
+ + If the account{" "} + + {email} + {" "} + exists, you will get an email with instructions on resetting your + password. +
+ ++ Contact your deployment administrator if you encounter issues. +
+ + +