diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPage.md b/packages/react-core/src/components/LoginPage/examples/LoginPage.md
index 453caed16e7..c95f590a257 100644
--- a/packages/react-core/src/components/LoginPage/examples/LoginPage.md
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPage.md
@@ -19,336 +19,13 @@ propComponents:
---
import brandImg2 from './brandImgColor2.svg';
-import {
- LoginFooterItem,
- LoginForm,
- LoginMainFooterBandItem,
- LoginMainFooterLinksItem,
- LoginPage,
- ListItem
-} from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
## Examples
### Basic
-```js isFullscreen
-import React from 'react';
-import brandImg from './brandImgColor.svg';
-import {
- LoginFooterItem,
- LoginForm,
- LoginMainFooterBandItem,
- LoginMainFooterLinksItem,
- LoginPage,
- BackgroundImageSrc,
- ListItem
-} from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-class SimpleLoginPage extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- showHelperText: false,
- usernameValue: '',
- isValidUsername: true,
- passwordValue: '',
- isValidPassword: true,
- isRememberMeChecked: false
- };
-
- this.handleUsernameChange = value => {
- this.setState({ usernameValue: value });
- };
-
- this.handlePasswordChange = passwordValue => {
- this.setState({ passwordValue });
- };
-
- this.onRememberMeClick = () => {
- this.setState({ isRememberMeChecked: !this.state.isRememberMeChecked });
- };
-
- this.onLoginButtonClick = event => {
- event.preventDefault();
- this.setState({ isValidUsername: !!this.state.usernameValue });
- this.setState({ isValidPassword: !!this.state.passwordValue });
- this.setState({ showHelperText: !this.state.usernameValue || !this.state.passwordValue });
- };
- }
-
- render() {
- const helperText = (
-
-
- Invalid login credentials.
-
- );
-
- const socialMediaLoginContent = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- const signUpForAccountMessage = (
-
- Need an account? Sign up.
-
- );
- const forgotCredentials = (
-
- Forgot username or password?
-
- );
-
- const listItem = (
-
-
- Terms of Use
-
-
- Help
-
-
- Privacy Policy
-
-
- );
-
- const loginForm = (
- }
- usernameLabel="Username"
- usernameValue={this.state.usernameValue}
- onChangeUsername={this.handleUsernameChange}
- isValidUsername={this.state.isValidUsername}
- passwordLabel="Password"
- passwordValue={this.state.passwordValue}
- onChangePassword={this.handlePasswordChange}
- isValidPassword={this.state.isValidPassword}
- rememberMeLabel="Keep me logged in for 30 days."
- isRememberMeChecked={this.state.isRememberMeChecked}
- onChangeRememberMe={this.onRememberMeClick}
- onLoginButtonClick={this.onLoginButtonClick}
- loginButtonLabel="Log in"
- />
- );
-
- const images = {
- lg: '/assets/images/pfbg_1200.jpg',
- sm: '/assets/images/pfbg_768.jpg',
- sm2x: '/assets/images/pfbg_768@2x.jpg',
- xs: '/assets/images/pfbg_576.jpg',
- xs2x: '/assets/images/pfbg_576@2x.jpg'
- };
-
- return (
-
- {loginForm}
-
- );
- }
-}
+```ts file='./LoginPageBasic.tsx' isFullscreen
```
### Show/hide password
-```js isFullscreen
-import React from 'react';
-import brandImg from './brandImgColor.svg';
-import {
- LoginFooterItem,
- LoginForm,
- LoginMainFooterBandItem,
- LoginMainFooterLinksItem,
- LoginPage,
- BackgroundImageSrc,
- ListItem
-} from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-class HideShowPasswordPage extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- showHelperText: false,
- usernameValue: '',
- isValidUsername: true,
- passwordValue: '',
- isValidPassword: true,
- isRememberMeChecked: false
- };
-
- this.handleUsernameChange = value => {
- this.setState({ usernameValue: value });
- };
-
- this.handlePasswordChange = passwordValue => {
- this.setState({ passwordValue });
- };
-
- this.onRememberMeClick = () => {
- this.setState({ isRememberMeChecked: !this.state.isRememberMeChecked });
- };
-
- this.onLoginButtonClick = event => {
- event.preventDefault();
- this.setState({ isValidUsername: !!this.state.usernameValue });
- this.setState({ isValidPassword: !!this.state.passwordValue });
- this.setState({ showHelperText: !this.state.usernameValue || !this.state.passwordValue });
- };
- }
-
- render() {
- const helperText = (
-
-
- Invalid login credentials.
-
- );
-
- const socialMediaLoginContent = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- const signUpForAccountMessage = (
-
- Need an account? Sign up.
-
- );
- const forgotCredentials = (
-
- Forgot username or password?
-
- );
-
- const listItem = (
-
-
- Terms of Use
-
-
- Help
-
-
- Privacy Policy
-
-
- );
-
- const loginForm = (
- }
- usernameLabel="Username"
- usernameValue={this.state.usernameValue}
- onChangeUsername={this.handleUsernameChange}
- isValidUsername={this.state.isValidUsername}
- passwordLabel="Password"
- passwordValue={this.state.passwordValue}
- isShowPasswordEnabled
- onChangePassword={this.handlePasswordChange}
- isValidPassword={this.state.isValidPassword}
- rememberMeLabel="Keep me logged in for 30 days."
- isRememberMeChecked={this.state.isRememberMeChecked}
- onChangeRememberMe={this.onRememberMeClick}
- onLoginButtonClick={this.onLoginButtonClick}
- loginButtonLabel="Log in"
- />
- );
-
- const images = {
- lg: '/assets/images/pfbg_1200.jpg',
- sm: '/assets/images/pfbg_768.jpg',
- sm2x: '/assets/images/pfbg_768@2x.jpg',
- xs: '/assets/images/pfbg_576.jpg',
- xs2x: '/assets/images/pfbg_576@2x.jpg'
- };
-
- return (
-
- {loginForm}
-
- );
- }
-}
+```ts file='./LoginPageShowHidePassword.tsx' isFullscreen
```
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
new file mode 100644
index 00000000000..7946751c4ed
--- /dev/null
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import brandImg2 from './brandImgColor2.svg';
+import {
+ LoginFooterItem,
+ LoginForm,
+ LoginMainFooterBandItem,
+ LoginMainFooterLinksItem,
+ LoginPage,
+ ListItem,
+ ListVariant
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const SimpleLoginPage: React.FunctionComponent = () => {
+ const [showHelperText, setShowHelperText] = React.useState(false);
+ const [username, setUsername] = React.useState('');
+ const [isValidUsername, setIsValidUsername] = React.useState(true);
+ const [password, setPassword] = React.useState('');
+ const [isValidPassword, setIsValidPassword] = React.useState(true);
+ const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
+
+ const handleUsernameChange = (value: string) => {
+ setUsername(value);
+ };
+
+ const handlePasswordChange = (value: string) => {
+ setPassword(value);
+ };
+
+ const onRememberMeClick = () => {
+ setIsRememberMeChecked(!isRememberMeChecked);
+ };
+
+ const onLoginButtonClick = (event: React.MouseEvent) => {
+ event.preventDefault();
+ setIsValidUsername(!!username);
+ setIsValidPassword(!!password);
+ setShowHelperText(!username || !password);
+ };
+
+ const socialMediaLoginContent = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const signUpForAccountMessage = (
+
+ Need an account? Sign up.
+
+ );
+
+ const forgotCredentials = (
+
+ Forgot username or password?
+
+ );
+
+ const listItem = (
+
+
+ Terms of Use
+
+
+ Help
+
+
+ Privacy Policy
+
+
+ );
+
+ const loginForm = (
+ }
+ usernameLabel="Username"
+ usernameValue={username}
+ onChangeUsername={handleUsernameChange}
+ isValidUsername={isValidUsername}
+ passwordLabel="Password"
+ passwordValue={password}
+ onChangePassword={handlePasswordChange}
+ isValidPassword={isValidPassword}
+ rememberMeLabel="Keep me logged in for 30 days."
+ isRememberMeChecked={isRememberMeChecked}
+ onChangeRememberMe={onRememberMeClick}
+ onLoginButtonClick={onLoginButtonClick}
+ loginButtonLabel="Log in"
+ />
+ );
+
+ const images = {
+ lg: '/assets/images/pfbg_1200.jpg',
+ sm: '/assets/images/pfbg_768.jpg',
+ sm2x: '/assets/images/pfbg_768@2x.jpg',
+ xs: '/assets/images/pfbg_576.jpg',
+ xs2x: '/assets/images/pfbg_576@2x.jpg'
+ };
+
+ return (
+
+ {loginForm}
+
+ );
+};
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx
new file mode 100644
index 00000000000..346c90ddec5
--- /dev/null
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import brandImg2 from './brandImgColor2.svg';
+import {
+ LoginFooterItem,
+ LoginForm,
+ LoginMainFooterBandItem,
+ LoginMainFooterLinksItem,
+ LoginPage,
+ ListItem,
+ ListVariant
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const LoginPageHideShowPassword: React.FunctionComponent = () => {
+ const [showHelperText, setShowHelperText] = React.useState(false);
+ const [username, setUsername] = React.useState('');
+ const [isValidUsername, setIsValidUsername] = React.useState(true);
+ const [password, setPassword] = React.useState('');
+ const [isValidPassword, setIsValidPassword] = React.useState(true);
+ const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
+
+ const handleUsernameChange = (value: string) => {
+ setUsername(value);
+ };
+
+ const handlePasswordChange = (value: string) => {
+ setPassword(value);
+ };
+
+ const onRememberMeClick = () => {
+ setIsRememberMeChecked(!isRememberMeChecked);
+ };
+
+ const onLoginButtonClick = (event: React.MouseEvent) => {
+ event.preventDefault();
+ setIsValidUsername(!!username);
+ setIsValidPassword(!!password);
+ setShowHelperText(!username || !password);
+ };
+
+ const socialMediaLoginContent = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const signUpForAccountMessage = (
+
+ Need an account? Sign up.
+
+ );
+
+ const forgotCredentials = (
+
+ Forgot username or password?
+
+ );
+
+ const listItem = (
+
+
+ Terms of Use
+
+
+ Help
+
+
+ Privacy Policy
+
+
+ );
+
+ const loginForm = (
+ }
+ usernameLabel="Username"
+ usernameValue={username}
+ onChangeUsername={handleUsernameChange}
+ isValidUsername={isValidUsername}
+ passwordLabel="Password"
+ passwordValue={password}
+ isShowPasswordEnabled
+ onChangePassword={handlePasswordChange}
+ isValidPassword={isValidPassword}
+ rememberMeLabel="Keep me logged in for 30 days."
+ isRememberMeChecked={isRememberMeChecked}
+ onChangeRememberMe={onRememberMeClick}
+ onLoginButtonClick={onLoginButtonClick}
+ loginButtonLabel="Log in"
+ />
+ );
+
+ const images = {
+ lg: '/assets/images/pfbg_1200.jpg',
+ sm: '/assets/images/pfbg_768.jpg',
+ sm2x: '/assets/images/pfbg_768@2x.jpg',
+ xs: '/assets/images/pfbg_576.jpg',
+ xs2x: '/assets/images/pfbg_576@2x.jpg'
+ };
+
+ return (
+
+ {loginForm}
+
+ );
+};