coder · BrunoQuaresma · Oct 18, 2024 · Oct 15, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/coderd/database/migrations/000266_update_forgot_password_notification.down.sql b/coderd/database/migrations/000266_update_forgot_password_notification.down.sql
diff --git a/coderd/database/migrations/000266_update_forgot_password_notification.up.sql b/coderd/database/migrations/000266_update_forgot_password_notification.up.sql
@@ -0,0 +1,10 @@
+UPDATE notification_templates
+SET
+    title_template = E'Reset your password for Coder',
+    body_template = E'Hi {{.UserName}},\n\nA request to reset the password for your Coder account has been made.\n\nIf you did not request to reset your password, you can ignore this message.',
+    actions = '[{
+		"label": "Reset password",
+		"url": "{{ base_url }}/reset-password/change?otp={{.Labels.one_time_passcode}}&email={{ .UserEmail }}"
+	}]'::jsonb
+WHERE
+    id = '62f86a30-2330-4b61-a26d-311ff3b608cf'
@@ -2167,6 +2167,18 @@ class ApiMethods {
 		);
 		return res.data;
 	};
+
+	requestOneTimePassword = async (
+		req: TypesGen.RequestOneTimePasscodeRequest,
+	) => {
+		await this.axios.post<void>("/api/v2/users/otp/request", req);
+	};
+
+	changePasswordWithOTP = async (
+		req: TypesGen.ChangePasswordWithOneTimePasscodeRequest,
+	) => {
+		await this.axios.post<void>("/api/v2/users/otp/change-password", req);
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,

@@ -3,6 +3,7 @@ import type {
 	AuthorizationRequest,
 	GenerateAPIKeyResponse,
 	GetUsersResponse,
+	RequestOneTimePasscodeRequest,
 	UpdateUserAppearanceSettingsRequest,
 	UpdateUserPasswordRequest,
 	UpdateUserProfileRequest,
@@ -253,3 +254,16 @@ export const updateAppearanceSettings = (
 		},
 	};
 };
+
+export const requestOneTimePassword = () => {
+	return {
+		mutationFn: (req: RequestOneTimePasscodeRequest) =>
+			API.requestOneTimePassword(req),
+	};
+};
+
+export const changePasswordWithOTP = () => {
+	return {
+		mutationFn: API.changePasswordWithOTP,
+	};
+};
@@ -0,0 +1,33 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import { CoderIcon } from "components/Icons/CoderIcon";
+import type { FC } from "react";
+import { getApplicationName, getLogoURL } from "utils/appearance";
+
+/**
+ * Enterprise customers can set a custom logo for their Coder application. Use
+ * the custom logo wherever the Coder logo is used, if a custom one is provided.
+ */
+export const CustomLogo: FC<{ css?: Interpolation<Theme> }> = (props) => {
+	const applicationName = getApplicationName();
+	const logoURL = getLogoURL();
+
+	return logoURL ? (
+		<img
+			{...props}
+			alt={applicationName}
+			src={logoURL}
+			// This prevent browser to display the ugly error icon if the
+			// image path is wrong or user didn't finish typing the url
+			onError={(e) => {
+				e.currentTarget.style.display = "none";
+			}}
+			onLoad={(e) => {
+				e.currentTarget.style.display = "inline";
+			}}
+			css={{ maxWidth: 200 }}
+			className="application-logo"
+		/>
+	) : (
+		<CoderIcon {...props} css={[{ fontSize: 64, fill: "white" }, props.css]} />
+	);
+};
@@ -1,11 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import type { AuthMethods, BuildInfoResponse } from "api/typesGenerated";
-import { CoderIcon } from "components/Icons/CoderIcon";
+import { CustomLogo } from "components/CustomLogo/CustomLogo";
 import { Loader } from "components/Loader/Loader";
 import { type FC, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { getApplicationName, getLogoURL } from "utils/appearance";
 import { retrieveRedirect } from "utils/redirect";
 import { SignInForm } from "./SignInForm";
 import { TermsOfServiceLink } from "./TermsOfServiceLink";
@@ -32,37 +31,14 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
 	// This allows messages to be displayed at the top of the sign in form.
 	// Helpful for any redirects that want to inform the user of something.
 	const message = new URLSearchParams(location.search).get("message");
-	const applicationName = getApplicationName();
-	const logoURL = getLogoURL();
-	const applicationLogo = logoURL ? (
-		<img
-			alt={applicationName}
-			src={logoURL}
-			// This prevent browser to display the ugly error icon if the
-			// image path is wrong or user didn't finish typing the url
-			onError={(e) => {
-				e.currentTarget.style.display = "none";
-			}}
-			onLoad={(e) => {
-				e.currentTarget.style.display = "inline";
-			}}
-			css={{
-				maxWidth: "200px",
-			}}
-			className="application-logo"
-		/>
-	) : (
-		<CoderIcon fill="white" opacity={1} css={styles.icon} />
-	);
-
 	const [tosAccepted, setTosAccepted] = useState(false);
 	const tosAcceptanceRequired =
 		authMethods?.terms_of_service_url && !tosAccepted;
 
 	return (
 		<div css={styles.root}>
 			<div css={styles.container}>
-				{applicationLogo}
+				<CustomLogo />
 				{isLoading ? (
 					<Loader />
 				) : tosAcceptanceRequired ? (

@@ -1,8 +1,10 @@
 import LoadingButton from "@mui/lab/LoadingButton";
+import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
 import type { FC } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
 import * as Yup from "yup";
 import { Language } from "./SignInForm";
@@ -65,6 +67,17 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
 				>
 					{Language.passwordSignIn}
 				</LoadingButton>
+				<Link
+					component={RouterLink}
+					to="/reset-password"
+					css={{
+						fontSize: 12,
+						fontWeight: 500,
+						lineHeight: "16px",
+					}}
+				>
+					Forgot password?
+				</Link>
 			</Stack>
 		</form>
 	);

@@ -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<typeof ChangePasswordPage> = {
+	title: "pages/ResetPasswordPage/ChangePasswordPage",
+	component: ChangePasswordPage,
+	args: { redirect: false },
+	decorators: [withGlobalSnackbar],
+};
+
+export default meta;
+type Story = StoryObj<typeof ChangePasswordPage>;
+
+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);
+	},
+};