Nov 3, 2023 · Nov 3, 2023 · Nov 3, 2023
diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx
          font-size: ${theme.spacing(4)};
          font-weight: 400;
          margin: 0;
          margin-bottom: ${theme.spacing(2)};
          margin-bottom: ${theme.spacing(4)};
          margin-top: ${theme.spacing(2)};
          line-height: 1.25;

diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
 import Box from "@mui/material/Box";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
 import { Stack } from "components/Stack/Stack";
 import { Welcome } from "components/Welcome/Welcome";
 import { type FormikContextType, useFormik } from "formik";
 import {
  getFormHelpers,
 import * as Yup from "yup";
 import type * as TypesGen from "api/typesGenerated";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { FormFields, VerticalForm } from "components/Form/Form";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import Link from "@mui/material/Link";
 import { docs } from "utils/docs";

 export const Language = {
  emailLabel: "Email",

  return (
    <SignInLayout>
      <Welcome message={Language.welcomeMessage} />
      <form onSubmit={form.handleSubmit}>
        <Stack>
      <header
        css={(theme) => ({
          textAlign: "center",
          marginBottom: theme.spacing(4),
        })}
      >
        <CoderIcon
          css={(theme) => ({
            color: theme.palette.text.primary,
            fontSize: theme.spacing(8),
          })}
        />
        <h1
          css={(theme) => ({
            fontWeight: 400,
            margin: 0,
            marginTop: theme.spacing(2),
          })}
        >
          Welcome to <strong>Coder</strong>
        </h1>
        <div
          css={(theme) => ({
            marginTop: theme.spacing(1.5),
            color: theme.palette.text.secondary,
          })}
        >
          Let&lsquo;s create your first admin user account
        </div>
      </header>
      <VerticalForm onSubmit={form.handleSubmit}>
        <FormFields>
          <TextField
            autoFocus
            {...getFieldHelpers("username")}
            onChange={onChangeTrimmed(form)}
            autoComplete="username"
            label={Language.passwordLabel}
            type="password"
          />
          <div css={{ borderRadius: 16 }}>
            <Box display="flex">
              <div>
                <Checkbox
                  id="trial"
                  name="trial"
                  defaultChecked
                  value={form.values.trial}
                  onChange={form.handleChange}
                  data-testid="trial"
                />
              </div>

              <Box>
                <Typography variant="h6" style={{ fontSize: 14 }}>
                  Start a 30-day free trial of Enterprise
                </Typography>
                <Typography variant="caption" color="textSecondary">
                  Get access to high availability, template RBAC, audit logging,
                  quotas, and more.
                </Typography>
              </Box>
            </Box>
          </div>
          <label
            htmlFor="trial"
            css={{
              display: "flex",
              cursor: "pointer",
              alignItems: "flex-start",
              gap: 4,
              marginTop: -4,
              marginBottom: 8,
            }}
          >
            <Checkbox
              id="trial"
              name="trial"
              value={form.values.trial}
              onChange={form.handleChange}
              data-testid="trial"
              size="small"
            />

            <div css={{ fontSize: 14, paddingTop: 4 }}>
              <span css={{ display: "block", fontWeight: 600 }}>
                Start a 30-day free trial of Enterprise
              </span>
              <span
                css={(theme) => ({
                  display: "block",
                  fontSize: 13,
                  color: theme.palette.text.secondary,
                  lineHeight: "1.6",
                })}
              >
                Get access to high availability, template RBAC, audit logging,
                quotas, and more.
              </span>
              <Link
                href={docs("/enterprise")}
                target="_blank"
                css={{ marginTop: 4, display: "inline-block", fontSize: 13 }}
              >
                Read more
              </Link>
            </div>
          </label>

          <LoadingButton
            fullWidth
            loading={isLoading}
            type="submit"
            data-testid="create"
            size="large"
            variant="contained"
            color="primary"
          >
            {Language.create}
          </LoadingButton>
        </Stack>
      </form>
        </FormFields>
      </VerticalForm>
    </SignInLayout>
  );
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,7 +37,7 @@ export const Welcome: FC<
		font-size: ${theme.spacing(4)};
		font-weight: 400;
		margin: 0;
		margin-bottom: ${theme.spacing(2)};
		margin-bottom: ${theme.spacing(4)};
		margin-top: ${theme.spacing(2)};
		line-height: 1.25;

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,6 @@
		import Box from "@mui/material/Box";
		import Checkbox from "@mui/material/Checkbox";
		import TextField from "@mui/material/TextField";
		import Typography from "@mui/material/Typography";
		import { SignInLayout } from "components/SignInLayout/SignInLayout";
		import { Stack } from "components/Stack/Stack";
		import { Welcome } from "components/Welcome/Welcome";
		import { type FormikContextType, useFormik } from "formik";
		import {
		getFormHelpers,
Expand All		@@ -14,6 +10,10 @@ import {
		import * as Yup from "yup";
		import type * as TypesGen from "api/typesGenerated";
		import LoadingButton from "@mui/lab/LoadingButton";
		import { FormFields, VerticalForm } from "components/Form/Form";
		import { CoderIcon } from "components/Icons/CoderIcon";
		import Link from "@mui/material/Link";
		import { docs } from "utils/docs";

		export const Language = {
		emailLabel: "Email",
Expand DownExpand Up		@@ -64,10 +64,40 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({

		return (
		<SignInLayout>
		<Welcome message={Language.welcomeMessage} />
		<form onSubmit={form.handleSubmit}>
		<Stack>
		<header
		css={(theme) => ({
		textAlign: "center",
		marginBottom: theme.spacing(4),
		})}
		>
		<CoderIcon
		css={(theme) => ({
		color: theme.palette.text.primary,
		fontSize: theme.spacing(8),
		})}
		/>
		<h1
		css={(theme) => ({
		fontWeight: 400,
		margin: 0,
		marginTop: theme.spacing(2),
		})}
		>
		Welcome to <strong>Coder</strong>
		</h1>
		<div
		css={(theme) => ({
		marginTop: theme.spacing(1.5),
		color: theme.palette.text.secondary,
		})}
		>
		Let‘s create your first admin user account
		</div>
		</header>
		<VerticalForm onSubmit={form.handleSubmit}>
		<FormFields>
		<TextField
		autoFocus
		{...getFieldHelpers("username")}
		onChange={onChangeTrimmed(form)}
		autoComplete="username"
Expand All		@@ -89,40 +119,65 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
		label={Language.passwordLabel}
		type="password"
		/>
		<div css={{ borderRadius: 16 }}>
		<Box display="flex">
		<div>
		<Checkbox
		id="trial"
		name="trial"
		defaultChecked
		value={form.values.trial}
		onChange={form.handleChange}
		data-testid="trial"
		/>
		</div>

		<Box>
		<Typography variant="h6" style={{ fontSize: 14 }}>
		Start a 30-day free trial of Enterprise
		</Typography>
		<Typography variant="caption" color="textSecondary">
		Get access to high availability, template RBAC, audit logging,
		quotas, and more.
		</Typography>
		</Box>
		</Box>
		</div>
		<label
		htmlFor="trial"
		css={{
		display: "flex",
		cursor: "pointer",
		alignItems: "flex-start",
		gap: 4,
		marginTop: -4,
		marginBottom: 8,
		}}
		>
		<Checkbox
		id="trial"
		name="trial"
		value={form.values.trial}
		onChange={form.handleChange}
		data-testid="trial"
		size="small"
		/>

		<div css={{ fontSize: 14, paddingTop: 4 }}>
		<span css={{ display: "block", fontWeight: 600 }}>
		Start a 30-day free trial of Enterprise
		</span>
		<span
		css={(theme) => ({
		display: "block",
		fontSize: 13,
		color: theme.palette.text.secondary,
		lineHeight: "1.6",
		})}
		>
		Get access to high availability, template RBAC, audit logging,
		quotas, and more.
		</span>
		<Link
		href={docs("/enterprise")}
		target="_blank"
		css={{ marginTop: 4, display: "inline-block", fontSize: 13 }}
		>
		Read more
		</Link>
		</div>
		</label>

		<LoadingButton
		fullWidth
		loading={isLoading}
		type="submit"
		data-testid="create"
		size="large"
		variant="contained"
		color="primary"
		>
		{Language.create}
		</LoadingButton>
		</Stack>
		</form>
		</FormFields>
		</VerticalForm>
		</SignInLayout>
		);
		};