mergefix2

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/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 => {
@@ -11,7 +12,6 @@ const Form = props => {
         getUsersData(values);
     }
     return (
-
         <div className="formdiv">
             <Authbuttons />
             <form className="form" onSubmit={handleSubmit(submit)}>
@@ -38,6 +38,7 @@ const Form = props => {
         </div>
 
 
+
     );
 }
 

src/components/Auth/registration.js

@@ -1,84 +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 (
-        <div>
-            <Authbuttons />
-            <form onSubmit={handleSubmit(submit)} className="form">
-                <div>
-                    <div>
-                        <Field
-                            name="login"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="Логин"
-                            className="input"
-                        />
-                    </div>
 
+const RegistrForm = props => {
 
-                    <div>
-                        <Field
-                            name="password"
-                            component={regRenderField}
-                            type="password"
-                            placeholder="Пароль"
-                            className="input"
-                        />
-                    </div>
 
+  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>
+          <div>
+            <Field
+              name="login"
+              component={regRenderField}
+              type="text"
+              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="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>
+        <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/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;
+};