127 lines
3.6 KiB
JavaScript
127 lines
3.6 KiB
JavaScript
import React from "react";
|
||
import Head from 'next/head';
|
||
import Image from 'next/image';
|
||
import { connect } from "react-redux";
|
||
import { withRouter } from 'next/router';
|
||
import { reduxWrapper } from '../store';
|
||
|
||
import Header from './components/Header';
|
||
import Footer from './components/Footer';
|
||
import MainHeader from "./components/MainHeader";
|
||
import FormRequest from "./components/FormRequest";
|
||
|
||
import { sendLoginFormEmail, sendLoginFormPhone } from '../actions';
|
||
|
||
class LoginPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
email: "",
|
||
password: "",
|
||
phone: "",
|
||
tab: "email",
|
||
company: {},
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
company: nextProps.company,
|
||
};
|
||
}
|
||
|
||
_handle_onEmailSubmit = (event) =>
|
||
{
|
||
event.preventDefault();
|
||
|
||
const { email, password, } = this.state;
|
||
sendLoginFormEmail({ email, password, dispatch: this.props.dispatch });
|
||
}
|
||
|
||
_handle_onPhoneSubmit = (event) =>
|
||
{
|
||
event.preventDefault();
|
||
|
||
const { phone, } = this.state;
|
||
sendLoginFormPhone({ phone });
|
||
}
|
||
|
||
_handle_onChangeTab = (tab) =>
|
||
{
|
||
this.setState({ tab: tab });
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { email, password, phone, tab } = this.state;
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta
|
||
name="description"
|
||
content="ЛК Эволюция автолизинга"
|
||
/>
|
||
</Head>
|
||
<MainHeader logo_url={ process.env.NEXT_PUBLIC_MAIN_SITE } />
|
||
<main>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<h1 className="section_title">Личный кабинет</h1>
|
||
<div className={`login ${ tab === "phone" ? "recovery" : "" }`}>
|
||
<div className="login_with">
|
||
<p>Войти с помощью</p>
|
||
<div className="tabs">
|
||
<div className={`tab ${ tab === "email" ? "active" : "" }`} onClick={ () => this._handle_onChangeTab("email") }>Электронной почты</div>
|
||
<div className={`tab ${ tab === "phone" ? "active" : "" }`} onClick={ () => this._handle_onChangeTab("phone") }>Номера телефона</div>
|
||
</div>
|
||
</div>
|
||
{ tab === "email" ? (
|
||
<form onSubmit={ this._handle_onEmailSubmit }>
|
||
<div className="form_field">
|
||
<input type="text" name="email" value={ email } placeholder="Введите логин" onChange={ (event) => this.setState({ email: event.target.value }) }/>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="password" name="password" value={ password } placeholder="Введите пароль" onChange={ (event) => this.setState({ password: event.target.value }) }/>
|
||
</div>
|
||
<button type="submit" className="button button-blue">Войти</button>
|
||
</form>
|
||
) : (
|
||
<form onSubmit={ this._handle_onPhoneSubmit }>
|
||
<div className="form_field">
|
||
<input type="text" name="phone" value={ phone } placeholder="Введите номер телефона" onChange={ (event) => this.setState({ phone: event.target.value }) }/>
|
||
</div>
|
||
<button type="submit" className="button button-blue" disabled>Получить код</button>
|
||
</form>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<FormRequest/>
|
||
</main>
|
||
<Footer/>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
company: state.company,
|
||
}
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(LoginPage));
|