134 lines
4.8 KiB
JavaScript
134 lines
4.8 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import withPageTitle from 'HOCs/withPageTitle';
|
|
import { Icon, Loader, Button, Link } from 'UI';
|
|
import { login } from 'Duck/user';
|
|
import { forgotPassword, signup } from 'App/routes';
|
|
import ReCAPTCHA from 'react-google-recaptcha';
|
|
import stl from './login.css';
|
|
import cn from 'classnames';
|
|
|
|
const FORGOT_PASSWORD = forgotPassword();
|
|
const SIGNUP_ROUTE = signup();
|
|
const recaptchaRef = React.createRef();
|
|
|
|
@connect(
|
|
state => ({
|
|
errors: state.getIn([ 'user', 'loginRequest', 'errors' ]),
|
|
loading: state.getIn([ 'user', 'loginRequest', 'loading' ]),
|
|
existingTenant: state.getIn(['user', 'existingTenant'])
|
|
}),
|
|
{ login, },
|
|
)
|
|
@withPageTitle('Login - OpenReplay')
|
|
export default class Login extends React.Component {
|
|
state = {
|
|
email: '',
|
|
password: '',
|
|
};
|
|
|
|
handleSubmit = (token) => {
|
|
const { email, password } = this.state;
|
|
this.props.login({ email: email.trim(), password, 'g-recaptcha-response': token }).then(() => {
|
|
const { errors } = this.props;
|
|
})
|
|
}
|
|
|
|
onSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (window.ENV.CAPTCHA_ENABLED && recaptchaRef.current) {
|
|
recaptchaRef.current.execute();
|
|
} else if (!window.ENV.CAPTCHA_ENABLED) {
|
|
this.handleSubmit();
|
|
}
|
|
}
|
|
|
|
write = ({ target: { value, name } }) => this.setState({ [ name ]: value })
|
|
|
|
render() {
|
|
const { errors, loading, existingTenant } = this.props;
|
|
return (
|
|
<div className="flex" style={{ height: '100vh'}}>
|
|
<div className={cn("w-6/12", stl.left)}>
|
|
<div className="px-6 pt-10">
|
|
<img src="/logo-white.svg" />
|
|
</div>
|
|
<div className="color-white text-lg flex items-center">
|
|
<div className="flex items-center justify-center w-full" style={{ height: 'calc(100vh - 130px)'}}>
|
|
<div className="text-4xl">Welcome Back!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-6/12 flex items-center justify-center">
|
|
<div className="">
|
|
<form onSubmit={ this.onSubmit }>
|
|
<div className="mb-8">
|
|
<h2 className="text-center text-3xl mb-6">Login to OpenReplay</h2>
|
|
{ !existingTenant && <div className="text-center text-xl">Don't have an account? <span className="link"><Link to={ SIGNUP_ROUTE }>Sign up</Link></span></div> }
|
|
</div>
|
|
<Loader loading={ loading }>
|
|
{ window.ENV.CAPTCHA_ENABLED && (
|
|
<ReCAPTCHA
|
|
ref={ recaptchaRef }
|
|
size="invisible"
|
|
sitekey={ window.ENV.CAPTCHA_SITE_KEY }
|
|
onChange={ token => this.handleSubmit(token) }
|
|
/>
|
|
)}
|
|
<div>
|
|
<div className="mb-6">
|
|
<label>Email</label>
|
|
<div className={ stl.inputWithIcon }>
|
|
<i className={ stl.inputIconUser } />
|
|
<input
|
|
autoFocus={true}
|
|
autoComplete="username"
|
|
type="text"
|
|
placeholder="Email"
|
|
name="email"
|
|
onChange={ this.write }
|
|
className={ stl.email }
|
|
required="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label className="mb-2">Password</label>
|
|
<div className={ stl.inputWithIcon }>
|
|
<i className={ stl.inputIconPassword } />
|
|
<input
|
|
autoComplete="current-password"
|
|
type="password"
|
|
placeholder="Password"
|
|
name="password"
|
|
onChange={ this.write }
|
|
className={ stl.password }
|
|
required="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Loader>
|
|
{ errors &&
|
|
<div className={ stl.errors }>
|
|
{ errors.map(error => (
|
|
<div className={stl.errorItem}>
|
|
<Icon name="info" color="red" size="20"/>
|
|
<span className="color-red ml-2">{ error }<br /></span>
|
|
</div>
|
|
)) }
|
|
</div>
|
|
}
|
|
<div className={ stl.formFooter }>
|
|
<Button type="submit" primary >{ 'Login' }</Button>
|
|
|
|
<div className={ cn(stl.links, 'text-lg') }>
|
|
<Link to={ FORGOT_PASSWORD }>{'Forgot your password?'}</Link>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|