Alex 5 years ago
parent
commit
f3e7d87366
3 changed files with 53 additions and 0 deletions
  1. 11 0
      src/common/formFunc.js
  2. 27 0
      src/components/Auth/index.js
  3. 15 0
      src/utils/validate.js

+ 11 - 0
src/common/formFunc.js

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

+ 27 - 0
src/components/Auth/index.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import { reduxForm, Field } from "redux-form";
+
+import { renderField } from "../common/formFunc";
+import { authValidate } from "../utils/validate";
+
+class Form extends Component {
+
+
+	submit = values => {
+	};
+
+	render() {
+		const { handleSubmit } = this.props;
+		return (
+			<form className="auth__form" onSubmit={handleSubmit(this.submit)}>
+				<Field name="email" type="email" label="E-mail:" placeholder="example@email.com" component={renderField} />
+
+				<Field name="password" type="password" label="Password:" placeholder ="password" component={renderField} />
+
+				<button className="auth__submit-button">Submit</button>
+			</form>
+		);
+	}
+}
+
+export default reduxForm({ form: "authForm", validate: authValidate })(Form);

+ 15 - 0
src/utils/validate.js

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