+ client: login page

2019-09-05 19:07:14 +03:00
parent 1e4edf0669
commit 66bd06cf69
26 changed files with 607 additions and 118 deletions
--- a/client/src/login/Login/Form.js
+++ b/client/src/login/Login/Form.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import { renderField, required } from '../../helpers/form';
+
+const Form = (props) => {
+    const {
+        handleSubmit, processing, invalid, t,
+    } = props;
+
+    return (
+        <form onSubmit={handleSubmit} className="card">
+            <div className="card-body p-6">
+                <div className="form__group form__group--settings">
+                    <label className="form__label" htmlFor="username">
+                        <Trans>username_label</Trans>
+                    </label>
+                    <Field
+                        name="username"
+                        type="text"
+                        className="form-control"
+                        component={renderField}
+                        placeholder={t('username_placeholder')}
+                        autoComplete="username"
+                        disabled={processing}
+                        validate={[required]}
+                    />
+                </div>
+                <div className="form__group form__group--settings">
+                    <label className="form__label" htmlFor="password">
+                        <Trans>password_label</Trans>
+                    </label>
+                    <Field
+                        id="password"
+                        name="password"
+                        type="password"
+                        className="form-control"
+                        component={renderField}
+                        placeholder={t('password_placeholder')}
+                        autoComplete="current-password"
+                        disabled={processing}
+                        validate={[required]}
+                    />
+                </div>
+                <div className="form-footer">
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-block"
+                        disabled={processing || invalid}
+                    >
+                        <Trans>sign_in</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    invalid: PropTypes.bool.isRequired,
+    processing: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default flow([
+    withNamespaces(),
+    reduxForm({
+        form: 'loginForm',
+    }),
+])(Form);