Skip to content

Commit 7ef3df8

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Fix styles
1 parent 4b22b4d commit 7ef3df8

File tree

4 files changed

+155
-128
lines changed

4 files changed

+155
-128
lines changed

‎site/src/components/CustomLogo/CustomLogo.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { Interpolation, Theme } from "@emotion/react";
12
import { CoderIcon } from "components/Icons/CoderIcon";
23
import type { FC } from "react";
34
import { getApplicationName, getLogoURL } from "utils/appearance";
@@ -6,12 +7,13 @@ import { getApplicationName, getLogoURL } from "utils/appearance";
67
* Enterprise customers can set a custom logo for their Coder application. Use
78
* the custom logo wherever the Coder logo is used, if a custom one is provided.
89
*/
9-
export const CustomLogo: FC = () => {
10+
export const CustomLogo: FC<{ css?: Interpolation<Theme> }> = (props) => {
1011
const applicationName = getApplicationName();
1112
const logoURL = getLogoURL();
1213

1314
return logoURL ? (
1415
<img
16+
{...props}
1517
alt={applicationName}
1618
src={logoURL}
1719
// This prevent browser to display the ugly error icon if the
@@ -26,6 +28,6 @@ export const CustomLogo: FC = () => {
2628
className="application-logo"
2729
/>
2830
) : (
29-
<CoderIcon css={{ fontSize: 64, fill: "white" }} />
31+
<CoderIcon {...props} css={[{ fontSize: 64, fill: "white" }, props.css]} />
3032
);
3133
};

‎site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,10 @@ export const Success: Story = {
2222
spyOn(API, "changePasswordWithOTP").mockResolvedValueOnce();
2323
const canvas = within(canvasElement);
2424
const user = userEvent.setup();
25-
const newPasswordInput = await canvas.findByLabelText("New password *");
25+
const newPasswordInput = await canvas.findByLabelText("Password *");
2626
await user.type(newPasswordInput, "password");
27-
const confirmPasswordInput = await canvas.findByLabelText(
28-
"Confirm new password *",
29-
);
27+
const confirmPasswordInput =
28+
await canvas.findByLabelText("Confirm password *");
3029
await user.type(confirmPasswordInput, "password");
3130
await user.click(canvas.getByRole("button", { name: /reset password/i }));
3231
await canvas.findByText("Password reset successfully");
@@ -42,11 +41,10 @@ export const WrongConfirmationPassword: Story = {
4241
);
4342
const canvas = within(canvasElement);
4443
const user = userEvent.setup();
45-
const newPasswordInput = await canvas.findByLabelText("New password *");
44+
const newPasswordInput = await canvas.findByLabelText("Password *");
4645
await user.type(newPasswordInput, "password");
47-
const confirmPasswordInput = await canvas.findByLabelText(
48-
"Confirm new password *",
49-
);
46+
const confirmPasswordInput =
47+
await canvas.findByLabelText("Confirm password *");
5048
await user.type(confirmPasswordInput, "different-password");
5149
await user.click(canvas.getByRole("button", { name: /reset password/i }));
5250
await canvas.findByText("Passwords must match");
@@ -64,11 +62,10 @@ export const ServerError: Story = {
6462
);
6563
const canvas = within(canvasElement);
6664
const user = userEvent.setup();
67-
const newPasswordInput = await canvas.findByLabelText("New password *");
65+
const newPasswordInput = await canvas.findByLabelText("Password *");
6866
await user.type(newPasswordInput, "password");
69-
const confirmPasswordInput = await canvas.findByLabelText(
70-
"Confirm new password *",
71-
);
67+
const confirmPasswordInput =
68+
await canvas.findByLabelText("Confirm password *");
7269
await user.type(confirmPasswordInput, "password");
7370
await user.click(canvas.getByRole("button", { name: /reset password/i }));
7471
await canvas.findByText(serverError);

‎site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import type { Interpolation, Theme } from "@emotion/react";
22
import LoadingButton from "@mui/lab/LoadingButton";
33
import Button from "@mui/material/Button";
44
import TextField from "@mui/material/TextField";
5-
import { getErrorMessage } from "api/errors";
65
import { changePasswordWithOTP } from "api/queries/users";
6+
import { ErrorAlert } from "components/Alert/ErrorAlert";
77
import { CustomLogo } from "components/CustomLogo/CustomLogo";
8-
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
8+
import { displaySuccess } from "components/GlobalSnackbar/utils";
99
import { Stack } from "components/Stack/Stack";
1010
import { useFormik } from "formik";
1111
import type { FC } from "react";
@@ -53,18 +53,14 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
5353
const email = searchParams.get("email") ?? "";
5454
const otp = searchParams.get("otp") ?? "";
5555

56-
try {
57-
await changePasswordMutation.mutateAsync({
58-
email,
59-
one_time_passcode: otp,
60-
password: values.password,
61-
});
62-
displaySuccess("Password reset successfully");
63-
if (redirect) {
64-
navigate("/login");
65-
}
66-
} catch (error) {
67-
displayError(getErrorMessage(error, "Error resetting password"));
56+
await changePasswordMutation.mutateAsync({
57+
email,
58+
one_time_passcode: otp,
59+
password: values.password,
60+
});
61+
displaySuccess("Password reset successfully");
62+
if (redirect) {
63+
navigate("/login");
6864
}
6965
},
7066
});
@@ -78,21 +74,29 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
7874

7975
<div css={styles.root}>
8076
<main css={styles.container}>
81-
<CustomLogo />
77+
<CustomLogo css={styles.logo} />
8278
<h1
8379
css={{
80+
margin: 0,
81+
marginBottom: 24,
8482
fontSize: 20,
8583
fontWeight: 600,
8684
lineHeight: "28px",
8785
}}
8886
>
8987
Choose a new password
9088
</h1>
89+
{changePasswordMutation.error ? (
90+
<ErrorAlert
91+
error={changePasswordMutation.error}
92+
css={{ marginBottom: 24 }}
93+
/>
94+
) : null}
9195
<form css={{ width: "100%" }} onSubmit={form.handleSubmit}>
9296
<fieldset disabled={form.isSubmitting}>
9397
<Stack spacing={2.5}>
9498
<TextField
95-
label="New password"
99+
label="Password"
96100
autoFocus
97101
fullWidth
98102
required
@@ -101,7 +105,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
101105
/>
102106

103107
<TextField
104-
label="Confirm new password"
108+
label="Confirm password"
105109
fullWidth
106110
required
107111
type="password"
@@ -125,7 +129,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
125129
variant="text"
126130
to="/login"
127131
>
128-
Cancel
132+
Back to login
129133
</Button>
130134
</Stack>
131135
</Stack>
@@ -138,11 +142,15 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
138142
};
139143

140144
const styles = {
145+
logo: {
146+
marginBottom: 40,
147+
},
141148
root: {
142149
padding: 24,
143150
display: "flex",
144151
alignItems: "center",
145152
justifyContent: "center",
153+
flexDirection: "column",
146154
minHeight: "100%",
147155
textAlign: "center",
148156
},
@@ -152,7 +160,6 @@ const styles = {
152160
display: "flex",
153161
flexDirection: "column",
154162
alignItems: "center",
155-
gap: 16,
156163
},
157164
icon: {
158165
fontSize: 64,

0 commit comments

Comments
 (0)