export default function CreateToken()

in packages/app/src/create-token.tsx [42:155]
83 lines of code
3 McCabe index (conditional complexity)

export default function CreateToken() {
  const tokens = useTokens();
  const [state, setState] = React.useState({
    monorepo: false,
    packageName: '',
  })

  function handleChange(event) {
    const checkboxes = ['monorepo'];
    const value = checkboxes.includes(event.target.name) ? event.target.checked : event.target.value;
    setState({
      ...state,
      [event.target.name]: value
    });
  }

  async function createTTLToken() {
    await tokens.create('ttl');
    window.scrollTo(0, 0)
  }

  async function createReleaseBackedToken(event) {
    event.preventDefault();
    await tokens.create('release', {
      monorepo: state.monorepo
    });
    window.scrollTo(0, 0)
  }

  async function createPackageToken(event) {
    event.preventDefault();
    await tokens.create('package', {
      packageName: state.packageName
    });
    window.scrollTo(0, 0)
  }

  return (
    <main>
      <CssBaseline />
      <Nav />
      <Container maxWidth="md">
        <h2>Create token</h2>
        <p>Choose from one of the following token types:</p>
        <Box sx={{ flexGrow: 1 }}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Item>
                <div style={{textAlign: 'left'}}>
                  <h3>24 hour temporary token</h3>
                  <p className="token-description">
                    If you are publishing from your workstation, or running the npm CLI
                    directly, this is likely the best option.
                  </p>
                  <ButtonGroup variant="contained" aria-label="outlined primary button group">
                    <Button data-testid="ttl" onClick={createTTLToken}>
                      Create Token
                    </Button>
                  </ButtonGroup>
                </div>
              </Item>
            </Grid>
            <Grid item xs={12}>
              <Item>
                <div style={{textAlign: 'left'}}>
                <h3>Release-backed token</h3>
                <p className="token-description">
                  A publication will only be permitted if a corresponding release is
                  found on GitHub.
                </p>
                <form onSubmit={createReleaseBackedToken}>
                  <FormGroup>
                    <FormControlLabel control={<Checkbox name="monorepo" onChange={handleChange} />} label="Support monorepo style tags" />
                  </FormGroup>
                  <ButtonGroup variant="contained" aria-label="outlined primary button group">
                    <Button data-testid="release" type="submit">Create Token</Button>
                  </ButtonGroup>
                </form>
                </div>
              </Item>
            </Grid>
            <Grid item xs={12}>
              <Item>
                <div style={{textAlign: 'left'}}>
                <h3>Package specific publish token.</h3>
                  <p className="token-description">
                    Package tokens do not timeout, but can only publish a single package.
                    Use these for build automation, etc.
                  </p>
                  <form onSubmit={createPackageToken}>
                    <FormGroup>
                      <TextField
                        required
                        placeholder="@googleapis/leftpad"
                        name="packageName"
                        label="Package Name"
                        autoComplete='off'
                        helperText="Full name of packge token supports"
                        onChange={handleChange}
                      />
                    </FormGroup>
                    <ButtonGroup variant="contained" aria-label="outlined primary button group">
                      <Button data-testid="package" type="submit">Create Token</Button>
                    </ButtonGroup>
                  </form>
                </div>
              </Item>
            </Grid>
          </Grid>
        </Box>
      </Container>
    </main>
  );
}