public render()

in packages/app/client/src/ui/dialogs/botSettingsEditor/botSettingsEditor.tsx [105:168]
62 lines of code
5 McCabe index (conditional complexity)

  public render() {
    const { name, dirty, secret, revealSecret, encryptKey } = this.state;
    const disabled = !name || !dirty;
    const error = !name ? 'The bot name is required' : '';
    return (
      <Dialog cancel={this.onCancel} title="Bot Settings" className={styles.main}>
        <TextField label="Name" value={name} required={true} onChange={this.onInputChange} errorMessage={error} />

        <Row align={RowAlignment.Bottom}>
          <Checkbox
            className={styles.encryptKeyCheckBox}
            label="Encrypt keys stored in your bot configuration."
            checked={encryptKey}
            onChange={this.onEncryptKeyChange}
          />
          <LinkButton
            ariaLabel="Learn more about bot file encryption"
            className={styles.dialogLink}
            linkRole={true}
            onClick={this.onLearnMoreEncryptionClick}
          >
            &nbsp;Learn more.
          </LinkButton>
        </Row>
        <Row align={RowAlignment.Bottom}>
          <TextField
            inputContainerClassName={styles.key}
            label="Secret "
            placeholder="Your keys are not encrypted"
            inputRef={this.setSecretInputRef}
            value={secret}
            readOnly={true}
            id="key-input"
            type={revealSecret ? 'text' : 'password'}
          />
          &nbsp;
          <ul className={styles.actionsList}>
            <li>
              <LinkButton className={styles.dialogLink} disabled={!encryptKey} onClick={this.onRevealSecretClick}>
                {revealSecret ? 'Hide' : 'Show'}
              </LinkButton>
            </li>
            <li>
              <LinkButton className={styles.dialogLink} disabled={!encryptKey} onClick={this.onCopyClick}>
                Copy
              </LinkButton>
            </li>
            {/* <li>
              <LinkButton
                className={styles.dialogLink}
                onClick={this.onResetClick}>
                Generate new secret
              </LinkButton>
            </li> */}
          </ul>
        </Row>

        <DialogFooter>
          <DefaultButton text="Cancel" onClick={this.onCancel} />
          <PrimaryButton text="Save" onClick={this.onSaveClick} disabled={disabled} />
        </DialogFooter>
      </Dialog>
    );
  }