Skip to content

feat(site): add descriptions for each auth method to the selection menu #9252

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 7 commits into from
Aug 23, 2023
Merged

feat(site): add descriptions for each auth method to the selection menu #9252

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
616d8ab
feat(site): add descriptions for each auth method to the selection menu
aslilac Aug 22, 2023
899e6aa
tweak link stuff
aslilac Aug 22, 2023
7df356b
...again
aslilac Aug 22, 2023
a1e1bba
cries
aslilac Aug 22, 2023
e944351
typo
aslilac Aug 22, 2023
618a3a7
typo
aslilac Aug 22, 2023
0a5c7d3
refactor to a map
aslilac Aug 23, 2023
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
152 changes: 86 additions & 66 deletions site/src/components/CreateUserForm/CreateUserForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import { Stack } from "../Stack/Stack"
import { ErrorAlert } from "components/Alert/ErrorAlert"
import { hasApiFieldErrors, isApiError } from "api/errors"
import MenuItem from "@mui/material/MenuItem"
import { makeStyles } from "@mui/styles"
import { Theme } from "@mui/material/styles"
import Link from "@mui/material/Link"

export const Language = {
emailLabel: "Email",
Expand All @@ -26,6 +29,37 @@ export const Language = {
cancel: "Cancel",
}

export const authMethodLanguage = {
password: {
displayName: "Password",
description: "Use an email address and password to login",
},
oidc: {
displayName: "OpenID Connect",
description: "Use an OpenID Connect provider for authentication",
},
github: {
displayName: "Github",
description: "Use Github OAuth for authentication",
},
none: {
displayName: "None",
description: (
<>
Disable authentication for this user (See the{" "}
<Link
target="_blank"
rel="noopener"
href="https://coder.com/docs/v2/latest/admin/auth#disable-built-in-authentication"
>
documentation
</Link>{" "}
for more details)
</>
),
},
}

export interface CreateUserFormProps {
onSubmit: (user: TypesGen.CreateUserRequest) => void
onCancel: () => void
Expand All @@ -46,22 +80,9 @@ const validationSchema = Yup.object({
otherwise: (schema) => schema,
}),
username: nameValidator(Language.usernameLabel),
login_type: Yup.string().oneOf(Object.keys(authMethodLanguage)),
})

const authMethodSelect = (
title: string,
value: string,
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- future will use this
description: string,
) => {
return (
<MenuItem key="value" id={"item-" + value} value={value}>
{title}
{/* TODO: Add description */}
</MenuItem>
)
}

export const CreateUserForm: FC<
React.PropsWithChildren<CreateUserFormProps>
> = ({ onSubmit, onCancel, error, isLoading, myOrgId, authMethods }) => {
Expand All @@ -73,7 +94,7 @@ export const CreateUserForm: FC<
username: "",
organization_id: myOrgId,
disable_login: false,
login_type: "password",
login_type: "",
},
validationSchema,
onSubmit,
Expand All @@ -83,41 +104,14 @@ export const CreateUserForm: FC<
error,
)

const methods = []
if (authMethods?.password.enabled) {
methods.push(
authMethodSelect(
"Password",
"password",
"User can provide their email and password to login.",
),
)
}
if (authMethods?.oidc.enabled) {
methods.push(
authMethodSelect(
"OpenID Connect",
"oidc",
"Uses an OpenID connect provider to authenticate the user.",
),
)
}
if (authMethods?.github.enabled) {
methods.push(
authMethodSelect(
"Github",
"github",
"Uses github oauth to authenticate the user.",
),
)
}
methods.push(
authMethodSelect(
"None",
"none",
"User authentication is disabled. This user an only be used if an api token is created for them.",
),
)
const styles = useStyles()

const methods = [
authMethods?.password.enabled && "password",
authMethods?.oidc.enabled && "oidc",
authMethods?.github.enabled && "github",
"none",
].filter(Boolean) as Array<keyof typeof authMethodLanguage>

return (
<FullPageForm title="Create user">
Expand All @@ -141,21 +135,6 @@ export const CreateUserForm: FC<
fullWidth
label={Language.emailLabel}
/>
<TextField
{...getFieldHelpers(
"password",
form.values.login_type === "password"
? ""
: "No password required for this login type",
)}
autoComplete="current-password"
fullWidth
id="password"
data-testid="password-input"
disabled={form.values.login_type !== "password"}
label={Language.passwordLabel}
type="password"
/>
<TextField
{...getFieldHelpers(
"login_type",
Expand All @@ -172,12 +151,53 @@ export const CreateUserForm: FC<
}
await form.setFieldValue("login_type", e.target.value)
}}
SelectProps={{
renderValue: (selected: unknown) =>
authMethodLanguage[selected as keyof typeof authMethodLanguage]
?.displayName ?? "",
}}
>
{methods}
{methods.map((value) => {
const language = authMethodLanguage[value]
return (
<MenuItem key={value} id={"item-" + value} value={value}>
<Stack spacing={0} maxWidth={400}>
{language.displayName}
<span className={styles.labelDescription}>
{language.description}
</span>
</Stack>
</MenuItem>
)
})}
</TextField>
<TextField
{...getFieldHelpers(
"password",
form.values.login_type === "password"
? ""
: "No password required for this login type",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the password is not required, why not hide this field?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jitter, mostly. on some level, seeing another field after the auth method prepares the user for "there is another potential step" even if it's disabled. if it's entirely hidden, they might just jump straight to the submit button.

)}
autoComplete="current-password"
fullWidth
id="password"
data-testid="password-input"
disabled={form.values.login_type !== "password"}
label={Language.passwordLabel}
type="password"
/>
</Stack>
<FormFooter onCancel={onCancel} isLoading={isLoading} />
</form>
</FullPageForm>
)
}

const useStyles = makeStyles<Theme>((theme) => ({
labelDescription: {
fontSize: 14,
color: theme.palette.text.secondary,
wordWrap: "normal",
whiteSpace: "break-spaces",
},
}))