From ca23c5665dd56802a014496927f9d120b4de9423 Mon Sep 17 00:00:00 2001 From: Tomas Psota Date: Wed, 15 Jun 2022 16:29:54 +0200 Subject: [PATCH] chore(LoginPage): convert examples to TypeScript Signed-off-by: Tomas Psota --- .../LoginPage/examples/LoginPage.md | 327 +----------------- .../LoginPage/examples/LoginPageBasic.tsx | 144 ++++++++ .../examples/LoginPageShowHidePassword.tsx | 145 ++++++++ 3 files changed, 291 insertions(+), 325 deletions(-) create mode 100644 packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx create mode 100644 packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx 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} + + ); +};