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 1 commit
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
Next Next commit
feat(site): add descriptions for each auth method to the selection menu
  • Loading branch information
@aslilac
aslilac committed Aug 22, 2023
commit 616d8abe2a43ee0f936289851488a09bc71b8213
146 changes: 88 additions & 58 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,10 @@ 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"
import { Link as RouterLink } from "react-router-dom"

export const Language = {
emailLabel: "Email",
Expand All @@ -26,6 +30,38 @@ 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
component={RouterLink}
target="_blank"
rel="noopener"
to="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 +82,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 +96,7 @@ export const CreateUserForm: FC<
username: "",
organization_id: myOrgId,
disable_login: false,
login_type: "password",
login_type: "",
},
validationSchema,
onSubmit,
Expand All @@ -83,41 +106,34 @@ export const CreateUserForm: FC<
error,
)

const styles = useStyles()
// This, unfortunately, cannot be an actual component because mui requires
// that all `MenuItem`s but be direct children of the `Select` the belong to
const authMethodSelect = (value: keyof typeof authMethodLanguage) => {
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>
)
}

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

return (
<FullPageForm title="Create user">
Expand All @@ -141,21 +157,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 +173,41 @@ export const CreateUserForm: FC<
}
await form.setFieldValue("login_type", e.target.value)
}}
SelectProps={{
renderValue: (selected: unknown) =>
authMethodLanguage[selected as keyof typeof authMethodLanguage]
?.displayName ?? "",
}}
>
{methods}
</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",
},
}))