Skip to content

Commit f7b8238

Browse files
kylecarbskylecarbs
committed
Add stories and display auth methods error
1 parent db07849 commit f7b8238

File tree

6 files changed

+67
-20
lines changed

6 files changed

+67
-20
lines changed

‎site/src/components/SignIn/SignInForm.stories.tsx

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,26 @@ SignedOut.args = {
2424
}
2525

2626
export const Loading = Template.bind({})
27-
Loading.args = { ...SignedOut.args, isLoading: true }
27+
Loading.args = {
28+
...SignedOut.args,
29+
isLoading: true,
30+
authMethods: {
31+
github: true,
32+
password: true,
33+
},
34+
}
35+
36+
export const WithLoginError = Template.bind({})
37+
WithLoginError.args = { ...SignedOut.args, authErrorMessage: "Email or password was invalid" }
2838

29-
export const WithError = Template.bind({})
30-
WithError.args = { ...SignedOut.args, authErrorMessage: "Email or password was invalid" }
39+
export const WithAuthMethodsError = Template.bind({})
40+
WithAuthMethodsError.args = { ...SignedOut.args, methodsErrorMessage: "Failed to fetch auth methods" }
41+
42+
export const WithGithub = Template.bind({})
43+
WithGithub.args = {
44+
...SignedOut.args,
45+
authMethods: {
46+
password: true,
47+
github: true,
48+
},
49+
}

‎site/src/components/SignIn/SignInForm.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ export const Language = {
2727
emailInvalid: "Please enter a valid email address.",
2828
emailRequired: "Please enter an email address.",
2929
authErrorMessage: "Incorrect email or password.",
30-
basicSignIn: "Sign In",
30+
methodsErrorMessage: "Unable to fetch auth methods.",
31+
passwordSignIn: "Sign In",
3132
githubSignIn: "GitHub",
3233
}
3334

@@ -53,11 +54,18 @@ const useStyles = makeStyles((theme) => ({
5354
export interface SignInFormProps {
5455
isLoading: boolean
5556
authErrorMessage?: string
57+
methodsErrorMessage?: string
5658
authMethods?: AuthMethods
5759
onSubmit: ({ email, password }: { email: string; password: string }) => Promise<void>
5860
}
5961

60-
export const SignInForm: React.FC<SignInFormProps> = ({ authMethods, isLoading, authErrorMessage, onSubmit }) => {
62+
export const SignInForm: React.FC<SignInFormProps> = ({
63+
authMethods,
64+
isLoading,
65+
authErrorMessage,
66+
methodsErrorMessage,
67+
onSubmit,
68+
}) => {
6169
const styles = useStyles()
6270

6371
const form: FormikContextType<BuiltInAuthFormValues> = useFormik<BuiltInAuthFormValues>({
@@ -95,9 +103,10 @@ export const SignInForm: React.FC<SignInFormProps> = ({ authMethods, isLoading,
95103
variant="outlined"
96104
/>
97105
{authErrorMessage && <FormHelperText error>{Language.authErrorMessage}</FormHelperText>}
106+
{methodsErrorMessage && <FormHelperText error>{Language.methodsErrorMessage}</FormHelperText>}
98107
<div className={styles.submitBtn}>
99108
<LoadingButton color="primary" loading={isLoading} fullWidth type="submit" variant="contained">
100-
{isLoading ? "" : Language.basicSignIn}
109+
{isLoading ? "" : Language.passwordSignIn}
101110
</LoadingButton>
102111
</div>
103112
</form>

‎site/src/pages/login.test.tsx

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,14 @@ describe("SignInPage", () => {
1616
return res(ctx.status(401), ctx.json({ message: "no user here" }))
1717
}),
1818
)
19-
// only leave password auth enabled by default
20-
server.use(
21-
rest.get("/api/v2/users/authmethods", (req, res, ctx) => {
22-
return res(
23-
ctx.status(200),
24-
ctx.json({
25-
password: true,
26-
github: false,
27-
}),
28-
)
29-
}),
30-
)
3119
})
3220

3321
it("renders the sign-in form", async () => {
3422
// When
3523
render(<SignInPage />)
3624

3725
// Then
38-
await screen.findByText(Language.basicSignIn)
26+
await screen.findByText(Language.passwordSignIn)
3927
})
4028

4129
it("shows an error message if SignIn fails", async () => {
@@ -54,7 +42,7 @@ describe("SignInPage", () => {
5442
await userEvent.type(email, "test@coder.com")
5543
await userEvent.type(password, "password")
5644
// Click sign-in
57-
const signInButton = await screen.findByText(Language.basicSignIn)
45+
const signInButton = await screen.findByText(Language.passwordSignIn)
5846
act(() => signInButton.click())
5947

6048
// Then
@@ -63,6 +51,23 @@ describe("SignInPage", () => {
6351
expect(history.location.pathname).toEqual("/login")
6452
})
6553

54+
it("shows an error if fetching auth methods fails", async () => {
55+
// Given
56+
server.use(
57+
// Make login fail
58+
rest.get("/api/v2/users/authmethods", async (req, res, ctx) => {
59+
return res(ctx.status(500), ctx.json({ message: "nope" }))
60+
}),
61+
)
62+
63+
// When
64+
render(<SignInPage />)
65+
66+
// Then
67+
const errorMessage = await screen.findByText(Language.methodsErrorMessage)
68+
expect(errorMessage).toBeDefined()
69+
})
70+
6671
it("shows github authentication when enabled", async () => {
6772
// Given
6873
server.use(
@@ -81,6 +86,7 @@ describe("SignInPage", () => {
8186
render(<SignInPage />)
8287

8388
// Then
89+
await screen.findByText(Language.passwordSignIn)
8490
await screen.findByText(Language.githubSignIn)
8591
})
8692
})

‎site/src/pages/login.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ export const SignInPage: React.FC = () => {
3535
const isLoading = authState.hasTag("loading")
3636
const redirectTo = retrieveRedirect(location.search)
3737
const authErrorMessage = authState.context.authError ? (authState.context.authError as Error).message : undefined
38+
const getMethodsError = authState.context.getMethodsError
39+
? (authState.context.getMethodsError as Error).message
40+
: undefined
3841

3942
const onSubmit = async ({ email, password }: { email: string; password: string }) => {
4043
authSend({ type: "SIGN_IN", email, password })
@@ -51,6 +54,7 @@ export const SignInPage: React.FC = () => {
5154
authMethods={authState.context.methods}
5255
isLoading={isLoading}
5356
authErrorMessage={authErrorMessage}
57+
methodsErrorMessage={getMethodsError}
5458
onSubmit={onSubmit}
5559
/>
5660
</div>

‎site/src/test_helpers/entities.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
AuthMethods,
23
BuildInfoResponse,
34
Organization,
45
Pager,
@@ -97,3 +98,8 @@ export const MockUserAgent: UserAgent = {
9798
ip_address: "11.22.33.44",
9899
os: "Windows 10",
99100
}
101+
102+
export const MockAuthMethods: AuthMethods = {
103+
password: true,
104+
github: false,
105+
}

‎site/src/test_helpers/handlers.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ export const handlers = [
4242
rest.get("/api/v2/users/me/keys", async (req, res, ctx) => {
4343
return res(ctx.status(200), ctx.json(M.MockAPIKey))
4444
}),
45+
rest.get("/api/v2/users/authmethods", async (req, res, ctx) => {
46+
return res(ctx.status(200), ctx.json(M.MockAuthMethods))
47+
}),
4548

4649
// workspaces
4750
rest.get("/api/v2/workspaces/:workspaceId", async (req, res, ctx) => {

0 commit comments

Comments
 (0)