@patternfly/react-core#LoginMainFooterLinksItem JavaScript Examples

render() {
    const socialMediaLoginContent = (
      <React.Fragment>
        {this.state.externalLogins.keycloak &&
        <LoginMainFooterLinksItem onClick={this.onKeycloakLogin} href="#" linkComponentProps={{ 'aria-label': `Login with ${this.getKeycloakName()}`, 'title': `Login with ${this.getKeycloakName()}` }}>
            {this.getKeycloakIcon()}
          </LoginMainFooterLinksItem>
        }
        {this.state.externalLogins.google &&
          <GoogleLogin
            clientId={this.state.externalLogins.google.client_id}
            scope={this.state.externalLogins.google.scope}
            redirectUri={this.state.externalLogins.google.redirect_uri}
            onSuccess={this.onGoogleLogin}
            onFailure={(response) => console.error(response)}
            render={renderProps => (
              <LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with Google', 'title': 'Login with Google' }}>
                <GoogleIcon size="lg" />
              </LoginMainFooterLinksItem>
            )}
          />
        }
        {this.state.externalLogins.github &&
          <OAuth2Login
            isCrossOrigin={true}
            authorizationUrl={this.state.externalLogins.github.authorization_url}
            responseType="code"
            clientId={this.state.externalLogins.github.client_id}
            redirectUri={this.state.externalLogins.github.redirect_uri}
            scope={this.state.externalLogins.github.scope}
            onSuccess={this.onOAuth2Success}
            onFailure={(response) => console.error(response)}
            render={renderProps => (
              <LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with GitHub', 'title': 'Login with GitHub' }}>
                <GithubIcon size="lg" />
              </LoginMainFooterLinksItem>
            )}
          />
        }
        {this.state.externalLogins.facebook &&
          <FacebookLogin
            appId={this.state.externalLogins.facebook.app_id}
            onSuccess={this.onFacebookLogin}
            onFail={(response) => console.error(response)}
            // useRedirect={true}
            dialogParams={{redirect_uri: this.state.externalLogins.facebook.redirect_uri, response_type: 'code'}}
            render={(renderProps) => (
              <LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with Facebook' }}>
                <FacebookIcon size="lg" />
              </LoginMainFooterLinksItem>
            )}
          />
        }
        {this.state.externalLogins.gitlab &&
            <OAuth2Login
              isCrossOrigin={true}
              authorizationUrl={this.state.externalLogins.gitlab.authorization_url}
              responseType="code"
              clientId={this.state.externalLogins.gitlab.client_id}
              redirectUri={this.state.externalLogins.gitlab.redirect_uri}
              scope={this.state.externalLogins.gitlab.scope}
              onSuccess={this.onOAuth2Success}
              onFailure={(response) => console.error(response)}
              render={renderProps => (
                <LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with GitLab', 'title': 'Login with GitLab' }}>
                  <GitlabIcon size="lg" />
                </LoginMainFooterLinksItem>
              )}
            />
        }
      </React.Fragment>
    );

    const signUpForAccountMessage = (
      <LoginMainFooterBandItem>
        Need an account? <NavLink to="/sign-up">Sign up.</NavLink>
      </LoginMainFooterBandItem>
    );
    const forgotCredentials = (
      <LoginMainFooterBandItem>
        <NavLink to="/forgot-password">Forgot username or password?</NavLink>
      </LoginMainFooterBandItem>
    );
    const loginWithUserDescription = 'Please use your e-mail address and password, or login via one of the icons below the Log In button.';
    const loginWithoutUserDescription = 'Log in via one of the icons below.';

    const backgroundImages = {
      lg: '/images/pfbg_1200.jpg',
      sm: '/images/pfbg_768.jpg',
      sm2x: '/images/[email protected]',
      xs: '/images/pfbg_576.jpg',
      xs2x: '/images/[email protected]'
    };

    return (
      <LoginPage
        footerListVariants="inline"
        brandImgSrc="/images/ibutsu-wordart-164.png"
        brandImgAlt="Ibutsu"
        backgroundImgSrc={backgroundImages}
        backgroundImgAlt="Background image"
        textContent="Ibutsu is an open source test result aggregation tool. Collect and display your test results, view artifacts, and monitor tests."
        loginTitle="Log in to your account"
        loginSubtitle={this.state.loginSupport.user ? loginWithUserDescription : loginWithoutUserDescription}
        socialMediaLoginContent={socialMediaLoginContent}
        signUpForAccountMessage={this.state.loginSupport.user ? signUpForAccountMessage : ''}
        forgotCredentials={this.state.loginSupport.user ? forgotCredentials : ''}
      >
        {this.state.loginSupport.user &&
        <Form>
          <FormAlert>
          {this.state.alert && this.state.alert.message &&
            <Alert
              variant={this.state.alert.status || 'info'}
              title={this.state.alert.message}
              aria-live="polite"
              isInline
            />
          }
          </FormAlert>
          <FormGroup
            label="Email address"
            isRequired
            fieldId="email"
            validated={this.state.isValidEmail ? 'default' : 'error'}
          >
            <TextInput
              isRequired
              type="email"
              id="email"
              name="email"
              validated={this.state.isValidEmail ? 'default' : 'error'}
              aria-describedby="email-helper"
              value={this.state.emailValue}
              onChange={this.onEmailChange}
              onKeyPress={this.onEnterKeyPress}
            />
          </FormGroup>
          <FormGroup
            label="Password"
            isRequired
            fieldId="password"
            validated={this.state.isValidPassword ? 'default' : 'error'}
          >
            <InputGroup>
              {!this.state.isPasswordVisible &&
              <TextInput
                isRequired
                type="password"
                id="password"
                name="password"
                validated={this.state.isValidPassword ? 'default' : 'error'}
                aria-describedby="password-helper"
                value={this.state.passwordValue}
                onChange={this.onPasswordChange}
                onKeyPress={this.onEnterKeyPress} />
              }
              {this.state.isPasswordVisible &&
              <TextInput
                isRequired
                type="text"
                id="password"
                name="password"
                validated={this.state.isValidPassword ? 'default' : 'error'}
                aria-describedby="password-helper"
                value={this.state.passwordValue}
                onChange={this.onPasswordChange}
                onKeyPress={this.onEnterKeyPress} />
              }
              <Button variant="control" aria-label="Show password" onClick={this.onPasswordVisibleClick}>
                {!this.state.isPasswordVisible && <EyeIcon/>}
                {this.state.isPasswordVisible && <EyeSlashIcon/>}
              </Button>
            </InputGroup>
          </FormGroup>
          <ActionGroup>
            <Button
              variant="primary"
              isBlock
              isLoading={this.state.isLoggingIn}
              isDisabled={this.state.isLoggingIn}
              onClick={this.onLoginButtonClick}
            >
              {this.state.isLoggingIn ? 'Logging in...' : 'Log In'}
            </Button>
          </ActionGroup>
        </Form>
        }
      </LoginPage>
    );
  }