change(ui): removed login.js
This commit is contained in:
Shekar Siri
parent
5ca1923ef4
commit
8a9d6e47b6
1 changed files with 0 additions and 224 deletions
|
|
@ -1,224 +0,0 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import withPageTitle from 'HOCs/withPageTitle';
|
||||
import { Icon, Loader, Button, Link, Input, Form, Popover, Tooltip } from 'UI';
|
||||
import { login } from 'Duck/user';
|
||||
import { forgotPassword, signup } from 'App/routes';
|
||||
import ReCAPTCHA from 'react-google-recaptcha';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import stl from './login.module.css';
|
||||
import cn from 'classnames';
|
||||
import { setJwt } from 'Duck/user';
|
||||
import LoginBg from '../../svg/login-illustration.svg';
|
||||
import { ENTERPRISE_REQUEIRED } from 'App/constants';
|
||||
import { fetchTenants } from 'Duck/user';
|
||||
import Copyright from 'Shared/Copyright';
|
||||
|
||||
const FORGOT_PASSWORD = forgotPassword();
|
||||
const SIGNUP_ROUTE = signup();
|
||||
const recaptchaRef = React.createRef();
|
||||
|
||||
export default
|
||||
@connect(
|
||||
(state, props) => ({
|
||||
errors: state.getIn(['user', 'loginRequest', 'errors']),
|
||||
loading: state.getIn(['user', 'loginRequest', 'loading']),
|
||||
authDetails: state.getIn(['user', 'authDetails']),
|
||||
params: new URLSearchParams(props.location.search),
|
||||
}),
|
||||
{ login, setJwt, fetchTenants }
|
||||
)
|
||||
@withPageTitle('Login - OpenReplay')
|
||||
@withRouter
|
||||
class Login extends React.Component {
|
||||
state = {
|
||||
email: '',
|
||||
password: '',
|
||||
CAPTCHA_ENABLED: window.env.CAPTCHA_ENABLED === 'true',
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
const { authDetails } = nextProps;
|
||||
if (Object.keys(authDetails).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!authDetails.tenants) {
|
||||
nextProps.history.push(SIGNUP_ROUTE);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { params } = this.props;
|
||||
this.props.fetchTenants();
|
||||
const jwt = params.get('jwt');
|
||||
if (jwt) {
|
||||
this.props.setJwt(jwt);
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmit = (token) => {
|
||||
const { email, password } = this.state;
|
||||
this.props.login({ email: email.trim(), password, 'g-recaptcha-response': token });
|
||||
};
|
||||
|
||||
onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const { CAPTCHA_ENABLED } = this.state;
|
||||
if (CAPTCHA_ENABLED && recaptchaRef.current) {
|
||||
recaptchaRef.current.execute();
|
||||
} else if (!CAPTCHA_ENABLED) {
|
||||
this.handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
write = ({ target: { value, name } }) => this.setState({ [name]: value });
|
||||
|
||||
render() {
|
||||
const { errors, loading, authDetails } = this.props;
|
||||
const { CAPTCHA_ENABLED } = this.state;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="m-10 ">
|
||||
<img src="/assets/logo.svg" width={200} />
|
||||
</div>
|
||||
<div className="border rounded bg-white">
|
||||
<h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">
|
||||
Login to your account
|
||||
</h2>
|
||||
<div className={cn({'hidden': authDetails.enforceSSO})}>
|
||||
<Form
|
||||
onSubmit={this.onSubmit}
|
||||
className={cn('flex items-center justify-center flex-col')}
|
||||
style={{ width: '350px' }}
|
||||
>
|
||||
<Loader loading={loading}>
|
||||
{CAPTCHA_ENABLED && (
|
||||
<ReCAPTCHA
|
||||
ref={recaptchaRef}
|
||||
size="invisible"
|
||||
sitekey={window.env.CAPTCHA_SITE_KEY}
|
||||
onChange={(token) => this.handleSubmit(token)}
|
||||
/>
|
||||
)}
|
||||
<div style={{ width: '350px' }} className="px-8">
|
||||
<Form.Field>
|
||||
<label>Email Address</label>
|
||||
<Input
|
||||
autoFocus
|
||||
data-test-id={'login'}
|
||||
autoFocus={true}
|
||||
autoComplete="username"
|
||||
type="email"
|
||||
placeholder="e.g. john@example.com"
|
||||
name="email"
|
||||
onChange={this.write}
|
||||
required
|
||||
icon="envelope"
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label className="mb-2">Password</label>
|
||||
<Input
|
||||
data-test-id={'password'}
|
||||
autoComplete="current-password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
onChange={this.write}
|
||||
required
|
||||
icon="key"
|
||||
/>
|
||||
</Form.Field>
|
||||
</div>
|
||||
</Loader>
|
||||
{errors && errors.length ? (
|
||||
<div className="px-8 my-2 w-full">
|
||||
{errors.map((error) => (
|
||||
<div className="flex items-center bg-red-lightest rounded p-3">
|
||||
<Icon name="info" color="red" size="20" />
|
||||
<span className="color-red ml-2">
|
||||
{error}
|
||||
<br />
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="px-8 w-full">
|
||||
<Button
|
||||
data-test-id={'log-button'}
|
||||
className="mt-2 w-full text-center"
|
||||
type="submit"
|
||||
variant="primary"
|
||||
>
|
||||
{'Login'}
|
||||
</Button>
|
||||
|
||||
<div className="my-8 text-center">
|
||||
<span className="color-gray-medium">Having trouble logging in?</span>{' '}
|
||||
<Link to={FORGOT_PASSWORD} className="link ml-1">
|
||||
{'Reset password'}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<div className={cn(stl.sso, 'py-2 flex flex-col items-center')}>
|
||||
{authDetails.sso ? (
|
||||
<a href="/api/sso/saml2" rel="noopener noreferrer">
|
||||
<Button variant="text-primary" type="submit">
|
||||
{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}
|
||||
</Button>
|
||||
</a>
|
||||
) : (
|
||||
<Tooltip
|
||||
delay={0}
|
||||
title={
|
||||
<div className="text-center">
|
||||
{authDetails.edition === 'ee' ? (
|
||||
<span>
|
||||
SSO has not been configured. <br /> Please reach out to your admin.
|
||||
</span>
|
||||
) : (
|
||||
ENTERPRISE_REQUEIRED
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
variant="text-primary"
|
||||
type="submit"
|
||||
className="pointer-events-none opacity-30"
|
||||
>
|
||||
{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn("flex items-center w-96 justify-center my-8", { 'hidden' : !authDetails.enforceSSO})}>
|
||||
<a href="/api/sso/saml2" rel="noopener noreferrer">
|
||||
<Button variant="primary">{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Copyright />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue