render()

in components/base-ui/packages/base-ui/lib/parts/Login.js [150:274]

• 113 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">
        {/*
        Heads up! The styles below are necessary for the correct render of this example.
        You can do same with CSS, the main idea is that all the elements up to the `Grid`
        below must have a height of 100%.
      */}
        <style>
          {`
        body > div#root,
        body > div#root > div,
        body > div#root > div > div.login-form {
          height: 100%;
        }
      `}
        </style>
        <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}
                >
                  {i18n(keys.LOGIN)}
                </Button>
              </Segment>
            </Form>
          </Grid.Column>
        </Grid>
      </div>
    );
  }