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\nUse the link below to reset your password.\n\nIf you did not make this request, 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'
diff --git a/...cations/testdata/rendered-templates/smtp/TemplateUserRequestedOneTimePasscode.html.golden b/...cations/testdata/rendered-templates/smtp/TemplateUserRequestedOneTimePasscode.html.golden
@@ -1,6 +1,6 @@
 From: system@coder.com
 To: bobby@coder.com
-Subject: Your One-Time Passcode for Coder.
+Subject: Reset your password for Coder
 Message-Id: 02ee4935-73be-4fa1-a290-ff9999026b13@blush-whale-48
 Date: Fri, 11 Oct 2024 09:03:06 +0000
 Content-Type: multipart/alternative;  boundary=bbe61b741255b6098bb6b3c1f41b885773df633cb18d2a3002b68e4bc9c4
@@ -12,13 +12,13 @@ Content-Type: text/plain; charset=UTF-8
 
 Hi Bobby,
 
-A request to reset the password for your Coder account has been made. Your =
-one-time passcode is:
+Use the link below to reset your password.
 
-fad9020b-6562-4cdb-87f1-0486f1bea415
+If you did not make this request, you can ignore this message.
 
-If you did not request to reset your password, you can ignore this message.
 
+Reset password: http://test.com/reset-password/change?otp=3Dfad9020b-6562-4=
+cdb-87f1-0486f1bea415&email=3Dbobby@coder.com
 
 --bbe61b741255b6098bb6b3c1f41b885773df633cb18d2a3002b68e4bc9c4
 Content-Transfer-Encoding: quoted-printable
@@ -30,7 +30,7 @@ Content-Type: text/html; charset=UTF-8
     <meta charset=3D"UTF-8" />
     <meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
 =3D1.0" />
-    <title>Your One-Time Passcode for Coder.</title>
+    <title>Reset your password for Coder</title>
   </head>
   <body style=3D"margin: 0; padding: 0; font-family: -apple-system, system-=
 ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarel=
@@ -45,21 +45,24 @@ er Logo" style=3D"height: 40px;" />
       </div>
       <h1 style=3D"text-align: center; font-size: 24px; font-weight: 400; m=
 argin: 8px 0 32px; line-height: 1.5;">
-        Your One-Time Passcode for Coder.
+        Reset your password for Coder
       </h1>
       <div style=3D"line-height: 1.5;">
         <p>Hi Bobby,</p>
 
-<p>A request to reset the password for your Coder account has been made. Yo=
-ur one-time passcode is:</p>
+<p>Use the link below to reset your password.</p>
 
-<p><strong>fad9020b-6562-4cdb-87f1-0486f1bea415</strong></p>
-
-<p>If you did not request to reset your password, you can ignore this messa=
-ge.</p>
+<p>If you did not make this request, you can ignore this message.</p>
       </div>
       <div style=3D"text-align: center; margin-top: 32px;">
        =20
+        <a href=3D"http://test.com/reset-password/change?otp=3Dfad9020b-656=
+2-4cdb-87f1-0486f1bea415&email=3Dbobby@coder.com" style=3D"display: inline-=
+block; padding: 13px 24px; background-color: #020617; color: #f8fafc; text-=
+decoration: none; border-radius: 8px; margin: 0 4px;">
+          Reset password
+        </a>
+       =20
       </div>
       <div style=3D"border-top: 1px solid #e2e8f0; color: #475569; font-siz=
 e: 12px; margin-top: 64px; padding-top: 24px; line-height: 1.6;">

diff --git a/...ions/testdata/rendered-templates/webhook/TemplateUserRequestedOneTimePasscode.json.golden b/...ions/testdata/rendered-templates/webhook/TemplateUserRequestedOneTimePasscode.json.golden
@@ -9,14 +9,19 @@
     "user_email": "bobby@coder.com",
     "user_name": "Bobby",
     "user_username": "bobby",
-    "actions": [],
+    "actions": [
+      {
+        "label": "Reset password",
+        "url": "http://test.com/reset-password/change?otp=00000000-0000-0000-0000-000000000000\u0026email=bobby@coder.com"
+      }
+    ],
     "labels": {
       "one_time_passcode": "00000000-0000-0000-0000-000000000000"
     },
     "data": null
   },
-  "title": "Your One-Time Passcode for Coder.",
-  "title_markdown": "Your One-Time Passcode for Coder.",
-  "body": "Hi Bobby,\n\nA request to reset the password for your Coder account has been made. Your one-time passcode is:\n\n00000000-0000-0000-0000-000000000000\n\nIf you did not request to reset your password, you can ignore this message.",
-  "body_markdown": "Hi Bobby,\n\nA request to reset the password for your Coder account has been made. Your one-time passcode is:\n\n**00000000-0000-0000-0000-000000000000**\n\nIf you did not request to reset your password, you can ignore this message."
+  "title": "Reset your password for Coder",
+  "title_markdown": "Reset your password for Coder",
+  "body": "Hi Bobby,\n\nUse the link below to reset your password.\n\nIf you did not make this request, you can ignore this message.",
+  "body_markdown": "Hi Bobby,\n\nUse the link below to reset your password.\n\nIf you did not make this request, you can ignore this message."
 }
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -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,

diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -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,
+	};
+};
diff --git a/site/src/components/CustomLogo/CustomLogo.tsx b/site/src/components/CustomLogo/CustomLogo.tsx
@@ -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]} />
+	);
+};
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
@@ -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 ? (

diff --git a/site/src/pages/LoginPage/PasswordSignInForm.tsx b/site/src/pages/LoginPage/PasswordSignInForm.tsx
@@ -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>
 	);

diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx 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<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);
+	},
+};