Home tast 1

admin-panel/package.json

@@ -8,6 +8,7 @@
     "history": "^4.7.2",
     "immutable": "^3.8.2",
     "logger": "^0.0.1",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",

admin-panel/src/components/common/Button.css

@@ -0,0 +1,21 @@
+.button {
+  padding: 5px 15px;
+  color: #fff;
+  background-color: #108ee9;
+  border-color: #108ee9;
+  outline: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 0;
+  font-size: 14px;
+}
+
+.button:hover {
+  background-color: #49a9ee;
+  border-color: #49a9ee;
+}
+
+.button:active {
+  background-color: #0e77ca;
+  border-color: #0e77ca;
+}

admin-panel/src/components/common/Button.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Button.css';
+
+export default function Button({ children, className, ...rest }) {
+  return (
+    <button
+      {...rest}
+      className={className ? `button ${className}` : 'button'}
+    >
+      {children}
+    </button>
+  );
+}
+
+Button.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ]),
+  className: PropTypes.string,
+};
+
+Button.defaultProps = {
+  children: null,
+  className: '',
+};

admin-panel/src/components/common/InputField.css

@@ -0,0 +1,24 @@
+.input-field__label {
+  font-weight: bold;
+}
+
+.input-field__input {
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+}
+
+.input-field__input:hover {
+  border-color: #49a9ee;
+}
+
+.input-field__input:focus {
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(16,142,233,.2);
+}
+
+.input-field__error {
+  display: block;
+  color: #FF0000;
+  font-size: 0.85em;
+}

admin-panel/src/components/common/InputField.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './InputField.css';
+
+export default function renderField(props) {
+  const {
+    input,
+    label,
+    meta: { touched, error },
+    className,
+    ...rest
+  } = props;
+
+  return (
+    <div className={className ? `input-field ${className}` : 'input-field'}>
+      {label &&
+        <span className="input-field__label">
+          {label}
+        </span>
+      }
+      <br />
+      <input
+        className="input-field__input"
+        {...rest}
+        {...input}
+      />
+      {touched &&
+        error &&
+        <span className="input-field__error">
+          {error}
+        </span>
+      }
+    </div>
+  );
+}
+
+renderField.propTypes = {
+  input: PropTypes.shape({}).isRequired,
+  meta: PropTypes.shape({}).isRequired,
+  label: PropTypes.string,
+  className: PropTypes.string,
+};
+
+renderField.defaultProps = {
+  label: '',
+  className: '',
+};

admin-panel/src/components/routes/AddUserForm.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import Button from '../common/Button';
+import InputField from '../common/InputField';
+import {
+  required,
+  minLength,
+  maxLength,
+  allowedChars,
+  invalidEmail,
+} from '../../helpers/reduxForm/fieldLevelValidation';
+
+const firstAndFirstNameValidation = [required, allowedChars, minLength(3), maxLength(100)];
+const emailValidation = [required, invalidEmail, maxLength(100)];
+const passwordValidation = [required, minLength(8), maxLength(100)];
+
+class AddUserForm extends React.Component {
+  static propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    pristine: PropTypes.bool.isRequired,
+    error: PropTypes.string,
+  };
+
+  static defaultProps = {
+    error: '',
+  };
+
+  submit = () => { };
+
+  render() {
+    const {
+      handleSubmit,
+      error,
+      pristine,
+      reset,
+      submitting,
+    } = this.props;
+
+    return (
+      <form
+        onSubmit={handleSubmit(this.submit)}
+      >
+        <Field
+          name="firstname"
+          type="text"
+          component={InputField}
+          label="Firstname"
+          placeholder="Enter firstname"
+          className="common-margins"
+          validate={firstAndFirstNameValidation}
+        />
+        <Field
+          name="lastName"
+          type="text"
+          component={InputField}
+          label="Lastname"
+          placeholder="Enter lastname"
+          className="common-margins"
+          validate={firstAndFirstNameValidation}
+        />
+        <Field
+          name="email"
+          type="text"
+          component={InputField}
+          label="Email"
+          placeholder="Enter email"
+          className="common-margins"
+          validate={emailValidation}
+        />
+        <Field
+          name="password"
+          type="password"
+          component={InputField}
+          label="Password"
+          placeholder="Enter password"
+          className="common-margins"
+          validate={passwordValidation}
+        />
+        <div>
+          {
+            error &&
+            <strong>
+              {error}
+            </strong>
+          }
+          <div>
+            <Button
+              type="submit"
+              disabled={submitting}
+              className="common-margins"
+            >
+              Submit
+            </Button>
+            <Button
+              type="button"
+              disabled={pristine || submitting}
+              onClick={reset}
+              className="common-margins"
+            >
+              Reset
+            </Button>
+          </div>
+        </div>
+      </form>
+
+    );
+  }
+}
+
+export default reduxForm({
+  form: 'AddUserForm',
+})(AddUserForm);

admin-panel/src/components/routes/Admin.jsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import AddUserForm from './AddUserForm';
+
+class Admin extends Component {
+  static propTypes = {
+
+  };
+
+  state = {};
+
+  render() {
+    return (
+      <div>
+        <h2>Admin Page</h2>
+        <h3>Create user</h3>
+        <AddUserForm />
+      </div>
+    );
+  }
+}
+
+export default Admin;

admin-panel/src/config.js

@@ -1,14 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-04-12'
+export const appName = 'advreact-386f6'
 
 const config = {
-    apiKey: "AIzaSyCmDWlgYIhtEr1pWjgKYds3iXKWBl9wbjE",
+    apiKey: "AIzaSyDSPRtistNZnrnNMJXCra5uS9Ugpken3F0",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "95255462276"
+    messagingSenderId: "648901552269"
 }
 
-firebase.initializeApp(config)
+firebase.initializeApp(config)

admin-panel/src/helpers/reduxForm/fieldLevelValidation.js

@@ -0,0 +1,19 @@
+export const required = value => (
+  value ? undefined : 'Required'
+);
+
+export const minLength = min => value => (
+  value && value.length < min ? `Must be ${min} character or more` : undefined
+);
+
+export const maxLength = max => value => (
+  value && value.length > max ? `Must be ${max} character or less` : undefined
+);
+
+export const allowedChars = value => (
+  value && !/^[А-ЯA-Z]+$/i.test(value) ? 'Only letters are allowed' : undefined
+);
+
+export const invalidEmail = value => (
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? 'Invalid email address' : undefined
+);

admin-panel/src/index.css

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+.common-margins {
+  margin-right: 5px;
+  margin-bottom: 10px; 
+}

admin-panel/src/index.js

@@ -2,5 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './config'
 import Root from './Root'
+import './index.css';
 
 ReactDOM.render(<Root />, document.getElementById('root'))