public render()

in packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.tsx [109:244]
131 lines of code
12 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const { secret, bot, endpoint, encryptKey, isAzureGov, revealSecret } = this.state;
    const secretCriteria = encryptKey ? secret : true;

    const requiredFieldsCompleted = bot && endpoint.endpoint && bot.name && secretCriteria;

    const endpointWarning = this.validateEndpoint(endpoint.endpoint);
    endpointWarning && this.announceEndpointWarning(endpointWarning);
    const endpointPlaceholder = "Your bot's endpoint (ex: http://localhost:3978/api/messages)";

    // TODO - localization
    return (
      <Dialog className={dialogStyles.main} title="New bot configuration" cancel={this.onCancel}>
        <div className={styles.botCreateForm}>
          <TextField
            value={this.state.bot.name}
            data-prop="name"
            onChange={this.onInputChange}
            label={'Bot name'}
            required={true}
            name={'create-bot-name'}
          />
          <TextField
            onChange={this.onInputChange}
            data-prop="endpoint"
            placeholder={endpointPlaceholder}
            label={'Endpoint URL'}
            required={true}
            value={this.state.endpoint.endpoint}
            name={'create-bot-url'}
          />
          {endpointWarning && <span className={styles.endpointWarning}>{endpointWarning}</span>}
          <Row className={styles.multiInputRow}>
            <TextField
              inputContainerClassName={dialogStyles.inputContainer}
              data-prop="appId"
              label="Microsoft App ID"
              onChange={this.onInputChange}
              placeholder="Optional"
              value={endpoint.appId}
            />
            <TextField
              inputContainerClassName={dialogStyles.inputContainer}
              label="Microsoft App password"
              ariaLabel={isLinux() ? 'Microsoft App' : null}
              data-prop="appPassword"
              onChange={this.onInputChange}
              placeholder="Optional"
              type="password"
              value={endpoint.appPassword}
            />
          </Row>
          <Row align={RowAlignment.Bottom}>
            <Checkbox label="Azure for US Government" checked={isAzureGov} onChange={this.onChannelServiceChange} />
            <LinkButton
              ariaLabel="Learn more about Azure for US Government."
              className={dialogStyles.dialogLink}
              linkRole={true}
              onClick={this.onAzureGovLinkClick}
            >
              &nbsp;Learn more.
            </LinkButton>
          </Row>
          <Row align={RowAlignment.Bottom}>
            <Checkbox
              className={dialogStyles.encryptKeyCheckBox}
              label="Encrypt keys stored in your bot configuration.&nbsp;"
              checked={encryptKey}
              onChange={this.onEncryptKeyChange}
            />
            <LinkButton
              ariaLabel="Learn more about bot file encryption"
              className={dialogStyles.dialogLink}
              linkRole={true}
              onClick={this.onBotEncryptionLinkClick}
            >
              Learn more.
            </LinkButton>
          </Row>
          <Row align={RowAlignment.Bottom} justify={RowJustification.Left}>
            <TextField
              aria-label="Bot encryption key"
              inputContainerClassName={dialogStyles.key}
              inputRef={this.setSecretInputRef}
              label="Secret "
              value={secret}
              placeholder={encryptKey ? '' : 'Your keys are not encrypted'}
              disabled={true}
              id="key-input"
              type={revealSecret ? 'text' : 'password'}
            />
            &nbsp;
            <ul className={dialogStyles.actionsList} role="region">
              <li>
                <LinkButton
                  ariaLabel={revealSecret ? 'Hide secret' : 'Show secret'}
                  className={dialogStyles.dialogLink}
                  disabled={!encryptKey}
                  onClick={this.onRevealSecretClick}
                >
                  {revealSecret ? 'Hide' : 'Show'}
                </LinkButton>
              </li>
              <li>
                <LinkButton
                  ariaLabel="Copy secret"
                  className={dialogStyles.dialogLink}
                  disabled={!encryptKey}
                  onClick={this.onCopyClick}
                >
                  Copy
                </LinkButton>
              </li>
              {/* <li>
                <LinkButton
                  className={dialogStyles.dialogLink}
                  onClick={ this.onResetClick }>
                  Generate new secret
                </LinkButton>
              </li> */}
            </ul>
          </Row>
        </div>

        <DialogFooter>
          <DefaultButton text="Cancel" onClick={this.onCancel} />
          <PrimaryButton
            text="Save and connect"
            onClick={this.onSaveAndConnect}
            disabled={!requiredFieldsCompleted}
            name={'create-bot-save'}
          />
        </DialogFooter>
      </Dialog>
    );
  }