Commit ff0f506f authored by Guillaume Vandevelde's avatar Guillaume Vandevelde
Browse files

[form] Add a reusable React CW Login component compatible with the SPA paradigm

parent aad9ab48096e
Pipeline #16736 failed with stages
in 2 minutes and 58 seconds
import * as React from 'react';
import {useForm} from 'react-hook-form';
import {Container, Row, Col, Button, Form, Card} from 'react-bootstrap';
import {client} from '@logilab/cwclientlibjs';
interface LoginFormComponentProps {
children: ({rqlClient}: {rqlClient: any}) => JSX.Element;
}
export function LoginFormComponent({children}: LoginFormComponentProps) {
const baseUrl = `${window.location.protocol}//${window.location.host}`;
const httpClient = new client.CwSimpleHttpClient(baseUrl, true);
const {register, handleSubmit} = useForm();
const [loginMsg, setLoginMsg] = React.useState<string | null>(null);
const [rqlClient, setRqlClient] = React.useState<client.CwRqlClient | null>(
null
);
const onLogin = ({login, password}: Record<string, any>) => {
httpClient
.doLogin(login, password)
.then(() => {
setRqlClient(new client.CwRqlClient(httpClient));
})
.catch((err) => {
console.error(err);
setLoginMsg(
'Error while loging the user... Please check your credentials'
);
});
};
if (rqlClient) {
return children({rqlClient: rqlClient});
}
return (
<Container>
<Row className="justify-content-md-center">
<Col />
<Col>
<Form
onSubmit={handleSubmit(onLogin)}
style={{marginTop: 200, marginBottom: 200}}
>
<Card>
<Card.Body>
{loginMsg ? <span>{loginMsg}</span> : null}
<Form.Group controlId="loginInput">
<Form.Label>Login: </Form.Label>
<Form.Control
ref={register}
type="text"
placeholder="Enter your login here..."
name="login"
onChange={() =>
loginMsg ? setLoginMsg(null) : null
}
/>
</Form.Group>
<Form.Group controlId="passwordInput">
<Form.Label>Password: </Form.Label>
<Form.Control
ref={register}
type="password"
placeholder="Enter your password here..."
name="password"
onChange={() =>
loginMsg ? setLoginMsg(null) : null
}
/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Card.Body>
</Card>
</Form>
</Col>
<Col />
</Row>
</Container>
);
}
export function LogoutButton({
client,
buttonVariant,
logoutRedirectUrl,
}: {
client: client.CwRqlClient;
buttonVariant: string;
logoutRedirectUrl: string;
}): JSX.Element | null {
const [isLoggedOut, setIsLoggedOut] = React.useState<boolean>(false);
const onLogout = () => {
return client.httpClient
.request('logout', 'GET', null, null, 'application/json')
.then(() => {
setIsLoggedOut(true);
})
.catch((err) => console.error(err));
};
const httpClient: any = client.httpClient;
if (isLoggedOut) {
httpClient.login = null;
window.location.href = logoutRedirectUrl;
return null;
}
if (!httpClient.login) {
return null;
} else {
return (
<Button variant={buttonVariant} onClick={onLogout}>
Logout
</Button>
);
}
}
......@@ -123,12 +123,15 @@ import {
SingleEntityRelationsEditorState,
SingleEntityRelationsEditor,
} from './EntityRelationsEditorSingle';
import {LoginFormComponent, LogoutButton} from './BootstrapLoginComponents';
import {Loading} from './Loading';
import {IndexComponent} from './Login';
export * from '../rqlbrowser';
export * from '../entitybrowser';
export {
LoginFormComponent,
LogoutButton,
IndexComponent,
ValidationError,
AttributeValueEvent,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment