@patternfly/react-core#FormAlert JavaScript Examples
The following examples show how to use
@patternfly/react-core#FormAlert.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: forgot-password.js From ibutsu-server with MIT License | 5 votes |
|
render() {
const signUpForAccountMessage = (
<LoginMainFooterBandItem>
Need an account? <NavLink to="/sign-up">Sign up.</NavLink>
</LoginMainFooterBandItem>
);
const forgotCredentials = (
<LoginMainFooterBandItem>
Already registered? <NavLink to="/login">Log in.</NavLink>
</LoginMainFooterBandItem>
);
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. Collect and display your test results, view artifacts, and monitor tests."
loginTitle="Recover your account"
loginSubtitle="Please type in your e-mail address and a reset link will be sent to it."
signUpForAccountMessage={signUpForAccountMessage}
forgotCredentials={forgotCredentials}
>
<Form>
{this.state.showAlert &&
<FormAlert>
<Alert variant={this.state.alertType} title={this.state.alertText} aria-live="polite" isInline/>
</FormAlert>
}
<FormGroup
label="Email address"
isRequired
fieldId="email"
validated={this.state.isValidEmail ? 'default' : 'error'}
helperText="The e-mail address you signed up with"
>
<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}
/>
</FormGroup>
<ActionGroup>
<Button variant="primary" isBlock onClick={this.onRecoverAccountClick}>Recover account</Button>
</ActionGroup>
</Form>
</LoginPage>
);
}
Example #2
| Source File: login.js From ibutsu-server with MIT License | 4 votes |
|
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>
);
}
Example #3
| Source File: reset-password.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const loginMessage = (
<LoginMainFooterBandItem>
Already registered? <NavLink to="/login">Log in.</NavLink>
</LoginMainFooterBandItem>
);
const forgotCredentials = (
<LoginMainFooterBandItem>
<NavLink to="/forgot-password">Forgot username or password?</NavLink>
</LoginMainFooterBandItem>
);
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. Collect and display your test results, view artifacts, and monitor tests."
loginTitle="Reset your password"
loginSubtitle="Please type in a secure password"
signUpForAccountMessage={loginMessage}
forgotCredentials={forgotCredentials}
>
<Form>
{this.state.showAlert &&
<FormAlert>
<Alert variant={this.state.alertType} title={this.state.alertText} aria-live="polite" isInline/>
</FormAlert>
}
<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} />
}
{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} />}
<Button variant="control" aria-label="Show password" onClick={this.onPasswordVisibleClick}>
{!this.state.isPasswordVisible && <EyeIcon/>}
{this.state.isPasswordVisible && <EyeSlashIcon/>}
</Button>
</InputGroup>
<PasswordErrorBoundary>
<Suspense fallback={""}>
<PasswordStrengthBar password={this.state.passwordValue}/>
</Suspense>
</PasswordErrorBoundary>
</FormGroup>
<FormGroup
label="Confirm password"
isRequired
fieldId="confirm-password"
helperText={this.state.confirmPasswordHelpText}
helperTextInvalid="Passwords do not match"
validated={this.state.confirmPasswordValidation}
>
<InputGroup>
{!this.state.isConfirmPasswordVisible && <TextInput isRequired type="password" id="confirm-password" name="confirm-password" aria-describedby="confirm-password-helper" value={this.state.confirmPasswordValue} onChange={this.onConfirmPasswordChange} validated={this.state.confirmPasswordValidation} />}
{this.state.isConfirmPasswordVisible && <TextInput isRequired type="text" id="confirm-password" name="confirm-password" aria-describedby="confirm-password-helper" value={this.state.confirmPasswordValue} onChange={this.onConfirmPasswordChange} validated={this.state.confirmPasswordValidation} />}
<Button variant="control" aria-label="Show password" onClick={this.onConfirmPasswordVisibleClick}>
{!this.state.isConfirmPasswordVisible && <EyeIcon/>}
{this.state.isConfirmPasswordVisible && <EyeSlashIcon/>}
</Button>
</InputGroup>
</FormGroup>
<ActionGroup>
<Button variant="primary" isBlock onClick={this.onResetButtonClick}>Reset Password</Button>
</ActionGroup>
</Form>
</LoginPage>
);
}
Example #4
| Source File: sign-up.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const loginMessage = (
<LoginMainFooterBandItem>
Already registered? <NavLink to="/login">Log in.</NavLink>
</LoginMainFooterBandItem>
);
const forgotCredentials = (
<LoginMainFooterBandItem>
<NavLink to="/forgot-password">Forgot username or password?</NavLink>
</LoginMainFooterBandItem>
);
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. Collect and display your test results, view artifacts, and monitor tests."
loginTitle="Register a new account"
loginSubtitle="Please type in your e-mail address and a secure password"
signUpForAccountMessage={loginMessage}
forgotCredentials={forgotCredentials}
>
<Form>
{this.state.showAlert &&
<FormAlert>
<Alert variant={this.state.alertType} title={this.state.alertText} aria-live="polite" isInline/>
</FormAlert>
}
<FormGroup
label="Email address"
isRequired
fieldId="email"
validated={this.state.isValidEmail ? 'default' : 'error'}
helperText="The e-mail address you want to use to log in"
>
<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}
/>
</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} />
}
{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} />}
<Button variant="control" aria-label="Show password" onClick={this.onPasswordVisibleClick}>
{!this.state.isPasswordVisible && <EyeIcon/>}
{this.state.isPasswordVisible && <EyeSlashIcon/>}
</Button>
</InputGroup>
<PasswordErrorBoundary>
<Suspense fallback={""}>
<PasswordStrengthBar password={this.state.passwordValue}/>
</Suspense>
</PasswordErrorBoundary>
</FormGroup>
<FormGroup
label="Confirm password"
isRequired
fieldId="confirm-password"
helperText={this.state.confirmPasswordHelpText}
helperTextInvalid="Passwords do not match"
validated={this.state.confirmPasswordValidation}
>
<InputGroup>
{!this.state.isConfirmPasswordVisible && <TextInput isRequired type="password" id="confirm-password" name="confirm-password" aria-describedby="confirm-password-helper" value={this.state.confirmPasswordValue} onChange={this.onConfirmPasswordChange} validated={this.state.confirmPasswordValidation} />}
{this.state.isConfirmPasswordVisible && <TextInput isRequired type="text" id="confirm-password" name="confirm-password" aria-describedby="confirm-password-helper" value={this.state.confirmPasswordValue} onChange={this.onConfirmPasswordChange} validated={this.state.confirmPasswordValidation} />}
<Button variant="control" aria-label="Show password" onClick={this.onConfirmPasswordVisibleClick}>
{!this.state.isConfirmPasswordVisible && <EyeIcon/>}
{this.state.isConfirmPasswordVisible && <EyeSlashIcon/>}
</Button>
</InputGroup>
</FormGroup>
<ActionGroup>
<Button variant="primary" isBlock onClick={this.onRegisterButtonClick}>Register</Button>
</ActionGroup>
</Form>
</LoginPage>
);
}
