form

src/common/authRenderField.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const authRenderField = ({input, meta: {touched, error}, label, type, placeholder }) => (
+    <div className={touched && error ? "form__input-box":"error"}> 
+        {console.log(input.value)} 
+        <label className="form__input-label" htmlFor="origin">
+            {label}
+            <input  className="form__input" type = {type} placeholder = {placeholder} {...input} />
+        </label>
+        {touched && error && <span>{error}</span>}
+    </div>
+);

src/common/regRenderField.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const regRenderField = ({input, meta: {touched, error}, label, type, placeholder }) => (
+    <div className="form__input-box">
+    {console.log(input.value)}
+        <label className="form__input-label" htmlFor="origin">
+            {label}
+            <input  className="form__input" type = {type} placeholder = {placeholder} {...input} />
+        </label>
+        {touched && error && <span>{error}</span>}
+    </div>
+);

src/components/Auth/authButtons.js

@@ -5,8 +5,11 @@ class Authbuttons extends Component {
   render() {
     return (
         <div className="auth__button">
-          <Link className="Link" to="/auth">Войти</Link>
-          <Link className="Link" to="/registration">Зарегистрироваться</Link>
+
+        
+          <Link to="/auth"  > <button className = "button btn1">Войти</button></Link>
+          <Link to="/registration" > <button className = "button btn2">Зарегистрироваться</button></Link>
+
         </div>
     )
   }

src/components/Auth/authorisation.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { reduxForm, Field } from "redux-form";
 import Authbuttons from './authButtons'
-import { authValidate } from "../../utils/authValidate";
-import { authRenderField } from "../../common/authRenderField"
+
+import {authValidate} from "../../utils/authValidate";
+import {authRenderField} from "../../common/authRenderField"
 
 
 const Form = props => {
@@ -36,6 +37,8 @@ const Form = props => {
             </form>
         </div>
 
+
+
     );
 }
 

src/components/Auth/registration.js

@@ -1,80 +1,91 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form'
 
-import authValidate from "../../utils/validate";
 import Authbuttons from './authButtons'
-import { regValidate } from '../../utils/regValidate'
-import { regRenderField } from '../../common/regRenderField'
+
+import {regValidate} from '../../utils/regValidate'
+import {regRenderField} from '../../common/regRenderField'
+
 
 
 
 const RegistrForm = props => {
 
-    const { handleSubmit, pristine, reset, postUsersData } = props
-    const submit = (values) => {
-        values.avatar = "https://site.com"
-        values.isAdmin = 1
-        values.description = "gfdfgdgdf"
-        postUsersData(values)
 
-    }
-    return (
+  const { handleSubmit, pristine, reset, postUsersData } = props
+  const submit = (values) =>{
+    values.avatar = "https://site.com"
+    values.isAdmin = 1
+    values.description = "gfdfgdgdf"
+    postUsersData(values)
+  
+}
+  return (
+    <div>
+      <Authbuttons />
+      <form onSubmit={handleSubmit(submit)} className="form">
         <div>
-            <Authbuttons />
-            <form onSubmit={handleSubmit(submit)} className="form">
-                <div>
-                    <div>
-                        <Field
-                            name="login"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="Логин"
-                            className="input"
-                        />
-                    </div>
+          <div>
+            <Field
+              name="login"
+              component={regRenderField}
+              type="text"
+              placeholder="Логин"
+              className="input"
+            />
+          </div>
 
-                    <div>
-                        <Field
-                            name="password"
-                            component={regRenderField}
-                            type="password"
-                            placeholder="Пароль"
-                            className="input"
-                        />
-                    </div>
+          <div>
+            <Field
+              name="password"
+              component={regRenderField}
+              type="password"
+              placeholder="Пароль"
+              className="input"
+              />
+          </div>
 
-                    <div>
-                        <Field
-                            name="name"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="Имя"
-                            className="input"
-                        />
-                    </div>
-                    <div>
-                        <Field
-                            name="phone"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="+380XXXXXXXX"
-                            className="input"
-                        />
-                    </div>
-                    <div>
-                        <Field
-                            name="email"
-                            component={regRenderField}
-                            type="email"
-                            placeholder="email@example.com"
-                            className="input"
-                        />
-                    </div>
-                </div>
-            </form>
-        </div >
+          <div>
+            <Field
+              name="name"
+              component={regRenderField}
+              type="text"
+              placeholder="Имя"
+              className="input"
+            />
+          </div>
+          <div>
+            <Field
+              name="phone"
+              component={regRenderField}
+              type="text"
+              placeholder="+380XXXXXXXX"
+              className="input"
+            />
+          </div>
+          <div>
+            <Field
+              name="email"
+              component={regRenderField}
+              type="email"
+              placeholder="email@example.com"
+              className="input"
+            />
+          </div>
+        </div>
+        <div>
+          <button type="submit" disabled={pristine} className="button">
+            Отправить
+          </button>
+          <button type="button" disabled={pristine} onClick={reset} className="button">
+            Очистить поля
+          </button>
+        </div>
+        </form>
+      </div>
 
-    )
+  )
 }
 
-export default reduxForm({ form: 'registrForm', validate: regValidate })(RegistrForm)
+export default reduxForm({ form: 'registrForm', validate: regValidate})(RegistrForm)
+

src/components/FormsAdd/FormAddNewStaff/index.js

@@ -4,7 +4,7 @@ import MDSpinner from "react-md-spinner";
 
 import Form from '../FormAddNewStaff/SendingStaffForm'
 
-class FormAddNewCategory extends Component {
+class FormAddNewStaff extends Component {
     render() {
         
         const { isFetching, AddNewStaff } = this.props
@@ -13,9 +13,11 @@ class FormAddNewCategory extends Component {
             <div>
                <Form AddNewStaff={AddNewStaff} />
                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
+ 
+
             </div>
         );
     }
 }
 
-export default FormAddNewCategory;
+export default FormAddNewStaff;

src/components/LeftMenu/DrawCategory.js

@@ -12,6 +12,7 @@ class DrawCategory extends Component {
         const { allCategory, mainCategory } = this.props;
         
         return (
+
             <div >
                 {mainCategory.map((el,key)=>
                     <Menu key={key} theme="dark" defaultSelectedKeys={['1']} mode="inline" >    

src/components/LeftMenu/index.js

@@ -22,7 +22,7 @@ class LeftMenu extends Component {
         
         return (
             <div>
-                <Layout style={{ minHeight: '100vh' }}>
+                <Layout style={{ minHeight: '100vh', 'background': 'red' }}>
                     <Sider collapsible
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}

src/container/AddNewStaff.js

@@ -18,6 +18,7 @@ class AddNewStaff extends Component {
         const { showModal, error, isFetching, AddNewStaff } = this.props
         
         return (
+
             <div className="top">
                 <div>
                     <FormAddNewStaff AddNewStaff={AddNewStaff} 
@@ -30,6 +31,7 @@ class AddNewStaff extends Component {
                     error={error}
                 />
             </div>
+
         );
     }
 }

src/style/base/_base.scss

@@ -85,7 +85,7 @@ body {
 	line-height: 1.7;
 	box-sizing: border-box;
 	background: $color-backgtound;
-	background-color: aqua;
+	background-color: #f6f8f9;
 	min-width: 320px;
 	max-width: 1350px;
 }

src/style/components/_allStaff.scss

@@ -39,9 +39,9 @@
     text-align:center;
     color: #fff;
     border: none;
-    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 rgba(227, 115, 14, 0.7);
+    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 #FD7F71;
     border-radius: 25px;
-    background: #e3730e;
+    background: #FD7F71;
     cursor: pointer;
     transform: translate3d(0, 0, 0);
     animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);

src/style/components/auth.scss

@@ -18,17 +18,19 @@ h1 {
 
 .form {
   box-sizing: border-box;
-  width: 260px;
+  width: 460px;
   margin: 100px auto 0;
   box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
   padding-bottom: 40px;
   border-radius: 3px;
 
+
+
 }
 
 .input {
   margin: 20px 25px;
-  width: 200px;
+  width: 80%;
   display: block;
   border: none;
   padding: 10px 0;
@@ -60,7 +62,7 @@ h1 {
   border-radius: 3px;
   padding: 6px;
   margin-bottom: 10px;
-  width: 200px;
+  width: 80%;
   color: white;
   margin-left: 25px;
   box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
@@ -113,7 +115,32 @@ h1 {
   background-color: #FD7F71
 }
 
+
+
+.auth__button{
+
+  width: 100%;
+  display : flex;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  
+}
+.btn1{
+  width: 180px;
+    margin-left: 0px;
+    border-radius: 0px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+.btn2{
+  width: 180px;
+    margin-left: 0px;
+    border-radius: 0px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
 .ant-layout-sider-children{
   background: #FD7F71;
   
+
 }

src/style/components/searchLine.scss

@@ -87,3 +87,8 @@ color: darken($color,1%);
         @media (min-width: $breakpoint) {
           width: 32px;
           height: 32px; } }
+          
+          
+         
+          
+        

src/utils/regValidate.js

@@ -0,0 +1,38 @@
+export const regValidate = values => {
+    const { login, password, name, phone, email } = values;
+    const error = {};
+
+    if (!login) {
+        error.login = "Required" // - true если ничего не надо возвращать
+    } else if (login.length > 15) {
+        error.login = 'Must be 15 characters or less'
+    } else if (!/^[a-zA-Z0-9]+$/.test(login)) {
+        error.login = "invalid login"
+    }
+
+    if (!password) {
+        error.password = "Required"
+    }else if(!/^[a-zA-Z0-9]+$/.test(password)) {
+        error.password = "Invalid password"
+    }
+
+    if (!name) {
+        error.name = "Required"
+    }else if (!/^[a-zA-Z0-9]+$/.test(name)) {
+        error.name = "Invalid login"
+    }
+
+    if (!phone) {
+        error.phone = "Required"
+    }else if(!/^[0-9-+()]+$/.test(phone)) {
+        error.phone = "Invalid phone number"
+    }
+
+    if (!email) {
+        error.email = "Required"
+    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.]+\.[A-Z]{2,4}$/i.test(email)) {
+        error.email = 'Invalid email address'
+    }
+
+    return error;
+};

src/utils/validate.js

@@ -0,0 +1,15 @@
+export default values => {
+    const { email, password } = values;
+    const error = {};
+    console.log(values)
+
+    if(!email) {
+        error.email = "Required"
+    }
+
+    if(!password) {
+        error.password = "Required"
+    }
+
+    return error;
+};