Skip to content

feat(site): add forgot password link #15108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Oct 18, 2024
Merged

feat(site): add forgot password link #15108

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
dd9cfae
Add request OTP flow
BrunoQuaresma Oct 15, 2024
648935a
Add change password flow
BrunoQuaresma Oct 16, 2024
c125320
Update email template
BrunoQuaresma Oct 16, 2024
893efec
Fix lint
BrunoQuaresma Oct 16, 2024
7276781
Add tests
BrunoQuaresma Oct 16, 2024
1c4bdee
Fix fmt
BrunoQuaresma Oct 16, 2024
4d7ec36
Remove unecessary files
BrunoQuaresma Oct 17, 2024
4b22b4d
Fix migration numbers
BrunoQuaresma Oct 17, 2024
7ef3df8
Fix styles
BrunoQuaresma Oct 17, 2024
c0d3a6c
Update golden files
BrunoQuaresma Oct 17, 2024
c279704
Update message with @stirby copy
BrunoQuaresma Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix styles
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Oct 17, 2024
commit 7ef3df8d266d11c46005668846f0d7319a80b303
6 changes: 4 additions & 2 deletions site/src/components/CustomLogo/CustomLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import { CoderIcon } from "components/Icons/CoderIcon";
import type { FC } from "react";
import { getApplicationName, getLogoURL } from "utils/appearance";
Expand All @@ -6,12 +7,13 @@ 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 = () => {
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
Expand All @@ -26,6 +28,6 @@ export const CustomLogo: FC = () => {
className="application-logo"
/>
) : (
<CoderIcon css={{ fontSize: 64, fill: "white" }} />
<CoderIcon {...props} css={[{ fontSize: 64, fill: "white" }, props.css]} />
);
};
21 changes: 9 additions & 12 deletions site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,10 @@ export const Success: Story = {
spyOn(API, "changePasswordWithOTP").mockResolvedValueOnce();
const canvas = within(canvasElement);
const user = userEvent.setup();
const newPasswordInput = await canvas.findByLabelText("New password *");
const newPasswordInput = await canvas.findByLabelText("Password *");
await user.type(newPasswordInput, "password");
const confirmPasswordInput = await canvas.findByLabelText(
"Confirm new 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");
Expand All @@ -42,11 +41,10 @@ export const WrongConfirmationPassword: Story = {
);
const canvas = within(canvasElement);
const user = userEvent.setup();
const newPasswordInput = await canvas.findByLabelText("New password *");
const newPasswordInput = await canvas.findByLabelText("Password *");
await user.type(newPasswordInput, "password");
const confirmPasswordInput = await canvas.findByLabelText(
"Confirm new 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");
Expand All @@ -64,11 +62,10 @@ export const ServerError: Story = {
);
const canvas = within(canvasElement);
const user = userEvent.setup();
const newPasswordInput = await canvas.findByLabelText("New password *");
const newPasswordInput = await canvas.findByLabelText("Password *");
await user.type(newPasswordInput, "password");
const confirmPasswordInput = await canvas.findByLabelText(
"Confirm new 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);
Expand Down
45 changes: 26 additions & 19 deletions site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ 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 { getErrorMessage } from "api/errors";
import { changePasswordWithOTP } from "api/queries/users";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { CustomLogo } from "components/CustomLogo/CustomLogo";
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
import { displaySuccess } from "components/GlobalSnackbar/utils";
import { Stack } from "components/Stack/Stack";
import { useFormik } from "formik";
import type { FC } from "react";
Expand Down Expand Up @@ -53,18 +53,14 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
const email = searchParams.get("email") ?? "";
const otp = searchParams.get("otp") ?? "";

try {
await changePasswordMutation.mutateAsync({
email,
one_time_passcode: otp,
password: values.password,
});
displaySuccess("Password reset successfully");
if (redirect) {
navigate("/login");
}
} catch (error) {
displayError(getErrorMessage(error, "Error resetting password"));
await changePasswordMutation.mutateAsync({
email,
one_time_passcode: otp,
password: values.password,
});
displaySuccess("Password reset successfully");
if (redirect) {
navigate("/login");
}
},
});
Expand All @@ -78,21 +74,29 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {

<div css={styles.root}>
<main css={styles.container}>
<CustomLogo />
<CustomLogo css={styles.logo} />
<h1
css={{
margin: 0,
marginBottom: 24,
fontSize: 20,
fontWeight: 600,
lineHeight: "28px",
}}
>
Choose a new password
</h1>
{changePasswordMutation.error ? (
<ErrorAlert
error={changePasswordMutation.error}
css={{ marginBottom: 24 }}
/>
) : null}
<form css={{ width: "100%" }} onSubmit={form.handleSubmit}>
<fieldset disabled={form.isSubmitting}>
<Stack spacing={2.5}>
<TextField
label="New password"
label="Password"
autoFocus
fullWidth
required
Expand All @@ -101,7 +105,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
/>

<TextField
label="Confirm new password"
label="Confirm password"
fullWidth
required
type="password"
Expand All @@ -125,7 +129,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
variant="text"
to="/login"
>
Cancel
Back to login
</Button>
</Stack>
</Stack>
Expand All @@ -138,11 +142,15 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
};

const styles = {
logo: {
marginBottom: 40,
},
root: {
padding: 24,
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
minHeight: "100%",
textAlign: "center",
},
Expand All @@ -152,7 +160,6 @@ const styles = {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 16,
},
icon: {
fontSize: 64,
Expand Down
Loading
Loading