+ client: login page

client/src/login/Login/index.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import flow from 'lodash/flow';
+import { withNamespaces, Trans } from 'react-i18next';
+
+import * as actionCreators from '../../actions/login';
+import logo from '../../components/ui/svg/logo.svg';
+import Toasts from '../../components/Toasts';
+import Footer from '../../components/ui/Footer';
+import Form from './Form';
+
+import './Login.css';
+import '../../components/ui/Tabler.css';
+
+class Login extends Component {
+    state = {
+        isForgotPasswordVisible: false,
+    };
+
+    handleSubmit = ({ username: name, password }) => {
+        this.props.processLogin({ name, password });
+    };
+
+    toggleText = () => {
+        this.setState(prevState => ({
+            isForgotPasswordVisible: !prevState.isForgotPasswordVisible,
+        }));
+    };
+
+    render() {
+        const { processingLogin } = this.props.login;
+        const { isForgotPasswordVisible } = this.state;
+
+        return (
+            <div className="login">
+                <div className="login__form">
+                    <div className="text-center mb-6">
+                        <img src={logo} className="h-6" alt="logo" />
+                    </div>
+                    <Form onSubmit={this.handleSubmit} processing={processingLogin} />
+                    <div className="login__info">
+                        <button
+                            type="button"
+                            className="btn btn-link login__link"
+                            onClick={this.toggleText}
+                        >
+                            <Trans>forgot_password</Trans>
+                        </button>
+                        {isForgotPasswordVisible && (
+                            <div className="login__message">
+                                <Trans
+                                    components={[
+                                        <a
+                                            href="https://github.com/AdguardTeam/AdGuardHome/wiki/Configuration#password-reset"
+                                            key="0"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >
+                                            link
+                                        </a>,
+                                    ]}
+                                >
+                                    forgot_password_desc
+                                </Trans>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <Footer />
+                <Toasts />
+            </div>
+        );
+    }
+}
+
+Login.propTypes = {
+    login: PropTypes.object.isRequired,
+    processLogin: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = ({ login, toasts }) => ({ login, toasts });
+
+export default flow([
+    withNamespaces(),
+    connect(
+        mapStateToProps,
+        actionCreators,
+    ),
+])(Login);