8000 feat(site): add ability to create tokens from account tokens page by Kira-Pilot · Pull Request #6608 · coder/coder · GitHub
[go: up one dir, main page]

Skip to content

feat(site): add ability to create tokens from account tokens page #6608

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.

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 12 commits into from
Mar 16, 2023
Prev Previous commit
Next Next commit
refined date field
  • Loading branch information
Kira-Pilot committed Mar 14, 2023
commit a11b252a72c5d6d5ac91284647d3371ce0e7a7a6
4 changes: 3 additions & 1 deletion site/src/i18n/en/tokensPage.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,14 @@
"lifetimeSection": {
"title": "Expiration",
"description": "The token will expire on {{date}}.",
"emptyDescription": "Please set a token expiration.",
"7": "7 days",
"30": "30 days",
"60": "60 days",
"90": "90 days",
"custom": "Custom",
"noExpiration": "No expiration"
"noExpiration": "No expiration",
"expiresOn": "Expires on"
},
"fields": {
"name": "Name",
Expand Down
112 changes: 82 additions & 30 deletions site/src/pages/CreateTokenPage/CreateTokenPage.tsx
8000
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,35 @@ import { useMutation } from "@tanstack/react-query"
import { createToken } from "api/api"
import i18next from "i18next"
import dayjs from "dayjs"
import makeStyles from "@material-ui/core/styles/makeStyles"

const NANO_HOUR = 3600000000000

const lifetimes = [
const lifetimeDayArr = [
{
label: i18next.t("tokensPage:createToken.lifetimeSection.7"),
lifetimeDays: 7,
value: 7,
},
{
label: i18next.t("tokensPage:createToken.lifetimeSection.30"),
lifetimeDays: 30,
value: 30,
},
{
label: i18next.t("tokensPage:createToken.lifetimeSection.60"),
lifetimeDays: 60,
value: 60,
},
{
label: i18next.t("tokensPage:createToken.lifetimeSection.90"),
lifetimeDays: 90,
value: 90,
},
{
label: i18next.t("tokensPage:createToken.lifetimeSection.custom"),
lifetimeDays: 120, // fix
},
{
label: i18next.t("tokensPage:createToken.lifetimeSection.noExpiration"),
lifetimeDays: 365 * 290, // fix
value: "custom",
},
// {
// label: i18next.t("tokensPage:createToken.lifetimeSection.noExpiration"),
// value: 365 * 290, // fix
// },
]

interface CreateTokenData {
Expand All @@ -60,20 +61,30 @@ const initialValues: CreateTokenData = {
}

const CreateTokenPage: FC = () => {
Copy link
Member Author

Choose a reason for hiding this comment

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

Will add some visual stories/tests for this new form

const styles = useStyles()
const { t } = useTranslation("tokensPage")
const navigate = useNavigate()
const navigateBack = () => navigate(-1)

const useCreateToken = () => useMutation(createToken)

const [formError, setFormError] = useState<unknown | undefined>(undefined)
const [expDate, setExpDate] = useState<string>(
dayjs().add(initialValues.lifetime, "days").utc().format("MMMM DD, YYYY"),
)
const [lifetimeDays, setLifetimeDays] = useState<number | string>(30)
const [expDays, setExpDays] = useState<number>(1)

const { mutate: saveToken, isLoading, isError } = useCreateToken()

useEffect(() => {
if (lifetimeDays !== "custom") {
void form.setFieldValue("lifetime", lifetimeDays)
} else {
void form.setFieldValue("lifetime", expDays)
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- adding form will cause an infinite loop
}, [lifetimeDays, expDays])

const onCreateSuccess = () => {
displaySuccess(t("createToken.createSuccess"))
navigateBack()
navigate("/settings/tokens")
}

const onCreateError = (error: unknown) => {
Expand All @@ -98,12 +109,6 @@ const CreateTokenPage: FC = () => {
},
})

useEffect(() => {
setExpDate(
dayjs().add(form.values.lifetime, "days").utc().format("MMMM DD, YYYY"),
)
}, [form.values.lifetime])

const getFieldHelpers = getFormHelpers<CreateTokenData>(form, formError)

return (
Expand All @@ -119,6 +124,7 @@ const CreateTokenPage: FC = () => {
<FormSection
title={t("createToken.nameSection.title")}
description={t("createToken.nameSection.description")}
className={styles.formSection}
>
<FormFields>
<TextField
Expand All @@ -134,32 +140,69 @@ const CreateTokenPage: FC = () => {
</FormSection>
<FormSection
title={t("createToken.lifetimeSection.title")}
description={t("createToken.lifetimeSection.description", {
date: expDate,
})}
description={
form.values.lifetime
? t("createToken.lifetimeSection.description", {
date: dayjs()
.add(form.values.lifetime, "days")
.utc()
.format("MMMM DD, YYYY"),
})
: t("createToken.lifetimeSection.emptyDescription")
}
className={styles.formSection}
>
<FormFields>
<TextField
{...getFieldHelpers("lifetime")}
onChange={(event) => {
void setLifetimeDays(event.target.value)
}}
InputLabelProps={{
shrink: true,
}}
label={t("createToken.fields.lifetime")}
select
defaultValue={30}
required
autoFocus
fullWidth
>
{lifetimes.map((lifetime) => (
<MenuItem key={lifetime.label} value={lifetime.lifetimeDays}>
{lifetime.label}
{lifetimeDayArr.map((lt) => (
<MenuItem key={lt.label} value={lt.value}>
{lt.label}
</MenuItem>
))}
</TextField>
</FormFields>
<FormFields>
{lifetimeDays === "custom" && (
<TextField
onChange={(event) => {
const lt = Math.ceil(
dayjs(event.target.value).diff(dayjs(), "day", true),
)
setExpDays(lt)
}}
label={t("createToken.lifetimeSection.expiresOn")}
type="date"
className={styles.expField}
defaultValue={dayjs()
.add(expDays, "day")
.format("YYYY-MM-DD")}
autoFocus
inputProps={{
min: dayjs().add(1, "day").format("YYYY-MM-DD"),
required: true,
}}
InputLabelProps={{
shrink: true,
required: true,
}}
/>
)}
</FormFields>
</FormSection>
<FormFooter
onCancel={navigateBack}
onCancel={() => navigate("/settings/tokens")}
isLoading={isLoading}
submitLabel={
isError
Expand All @@ -173,4 +216,13 @@ const CreateTokenPage: FC = () => {
)
}

const useStyles = makeStyles((theme) => ({
formSection: {
gap: 0,
},
expField: {
marginLeft: theme.spacing(2),
},
}))

export default CreateTokenPage
0