render()

in addons/addon-base-ui/packages/base-ui/src/parts/Login.js [148:258]
102 lines of code
10 McCabe index (conditional complexity)

  render() {
    const error = !!(this.usernameError || this.passwordError || this.authenticationProviderError);

    const authenticationProviderOptions = this.authProviderOptions;
    const selectedAuthenticationProviderId = this.props.authentication.selectedAuthenticationProviderId;

    const renderAuthenticationProviders = () => {
      // Display authenticationProviderOptions only if there are more than one to choose from
      // if there is only one authentication provider available then use that
      if (authenticationProviderOptions && authenticationProviderOptions.length > 1) {
        return (
          <Form.Field error={!!this.usernameError} required>
            <Select
              placeholder="Select Authentication Provider"
              options={authenticationProviderOptions}
              defaultValue={selectedAuthenticationProviderId}
              onChange={this.handleAuthenticationProviderChange}
            />
            {this.authenticationProviderError && (
              <Label basic color="red" pointing className="float-left mb2">
                {this.authenticationProviderError}
              </Label>
            )}
          </Form.Field>
        );
      }
      return '';
    };

    const collectUserNamePassword = this.props.authentication.shouldCollectUserNamePassword;
    const renderBrandingLogo = <Image centered src={this.props.assets.images.loginImage} />;
    return (
      <div className="login-form animated fadeIn">
        <Grid textAlign="center" style={{ height: '100%' }} verticalAlign="middle">
          <Grid.Column style={{ maxWidth: 450 }}>
            <Form
              error={error}
              size="large"
              loading={this.loading}
              onSubmit={e => {
                e.preventDefault();
                e.stopPropagation();
              }}
            >
              <Segment stacked>
                {renderBrandingLogo}
                <Header as="h3" textAlign="center">
                  {branding.login.title}
                  <Header.Subheader>{branding.login.subtitle}</Header.Subheader>
                </Header>

                {renderAuthenticationProviders()}

                {collectUserNamePassword && (
                  <Form.Field error={!!this.usernameError} required>
                    <Input
                      fluid
                      icon="user"
                      iconPosition="left"
                      placeholder="Username"
                      data-testid="username"
                      value={this.username}
                      onChange={this.handleChange('username')}
                    />
                    {this.usernameError && (
                      <Label basic color="red" pointing className="float-left mb2">
                        {this.usernameError}
                      </Label>
                    )}
                  </Form.Field>
                )}

                {collectUserNamePassword && (
                  <Form.Field error={!!this.passwordError} required>
                    <Input
                      fluid
                      icon="lock"
                      iconPosition="left"
                      placeholder="Password"
                      data-testid="password"
                      value={this.password}
                      type="password"
                      onChange={this.handleChange('password')}
                    />
                    {this.passwordError && (
                      <Label basic color="red" pointing className="float-left mb2">
                        {this.passwordError}
                      </Label>
                    )}
                  </Form.Field>
                )}

                <Button
                  data-testid="login"
                  type="submit"
                  color="blue"
                  fluid
                  basic
                  size="large"
                  className="mb2"
                  onClick={this.handleLogin}
                >
                  Login
                </Button>
              </Segment>
            </Form>
          </Grid.Column>
        </Grid>
      </div>
    );
  }