20.07.2020

index.js

@@ -28,7 +28,7 @@ User.init(
   {
     email: Sequelize.STRING,
     password: Sequelize.STRING,
-    nickname: Sequelize.STRING,
+    login: Sequelize.STRING,
   },
   { sequelize, modelName: "user" }
 );
@@ -46,39 +46,39 @@ const authenticate = async ({ email, password }) => {
 
 var schema = buildSchema(`
   type Query {
-    login(email: String, password: String): String
+    getLogin(login: String, password: String): String
     getUser(id: ID!): User
   } 
   type Mutation {
-    createUser(email: String, password: String, nickname: String): User
+    createUser(email: String, password: String, login: String): User
   } 
   type User {
     id: Int
     createdAt: String
     email: String
-    nickname: String
+    login: String
   }
 `);
 
 const getUser = async ({ id }) => await User.findByPk(id);
 
-const login = async ({ email, password }) => {
-  const userFind = await User.findOne({ where: { email, password } });
+const getLogin = async ({ login, password }) => {
+  const userFind = await User.findOne({ where: { login, password } });
   return authenticate(userFind);
 };
 
-const createUser = async ({ email, password, nickname }) => {
+const createUser = async ({ email, password, login }) => {
   const wasUserCreated = await User.findOne({ where: { email } });
   if (!wasUserCreated) {
     // const passwordModification = jwt.sign(password + secretPass, secret);
-    const user = { email, password, nickname };
+    const user = { email, password, login };
     const newUser = new User(user);
     await newUser.save();
   } else console.log("bye");
-  return await User.findOne({ where: { email } });
+  return await User.findOne({ where: { login } });
 };
 
-var root = { getUser, login, createUser };
+var root = { getUser, getLogin, createUser };
 
 app.use(
   "/graphql",
@@ -154,8 +154,8 @@ app.get("/a", (req, res, next) => {
   const data = jwt.verify(token1, secret);
   console.log(data);
   // if (data) {
-  console.log(data.sub.nickname);
-  res.send(`<h1>Hello ${data.sub.nickname}</h1>`);
+  console.log(data.sub.login);
+  res.send(`<h1>Hello ${data.sub.login}</h1>`);
   // } else {
   //   res.send(`<h1>Hello haker</h1>`);
   // }
@@ -165,7 +165,7 @@ app.get("/a", (req, res, next) => {
 // (async () => {
 //   let persone =
 //     // User.findOne({ where: { login: "David" } }) ||
-//     (await User.create({ email: "1", password: "1", nickname: "1" }));
+//     (await User.create({ email: "1", password: "1", login: "1" }))
 // })();
 
 sequelize.sync();

myproject/src/App.js

@@ -11,7 +11,6 @@ import MyProfile from "./myProfile/myProfile";
 
 const App = (props) => {
   return (
-
     <Router history={createHistory}>
       
       <Switch>

myproject/src/signIn/actionLogin/actionLogin.js

@@ -0,0 +1,233 @@
+import { createStore, combineReducers, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+
+const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
+  if (type === "PROMISE") {
+    return {
+      ...state,
+      [name]: {
+        status,
+        payload,
+        error,
+      },
+    };
+  }
+  return state;
+};
+
+const actionPromise = (name, promise) => {
+  const actionPending = () => ({
+    type: "PROMISE",
+    name,
+    status: "PENDING",
+    payload: null,
+    error: null,
+  });
+  const actionResolved = (payload) => ({
+    type: "PROMISE",
+    name,
+    status: "RESOLVED",
+    payload,
+    error: null,
+  });
+  const actionRejected = (error) => ({
+    type: "PROMISE",
+    name,
+    status: "REJECTED",
+    payload: null,
+    error,
+  });
+  return async (dispatch) => {
+    dispatch(actionPending());
+    try {
+      let payload = await promise;
+      dispatch(actionResolved(payload));
+      return payload;
+    } catch (error) {
+      dispatch(actionRejected(error));
+    }
+  };
+};
+
+const store = createStore(promiseReducer, applyMiddleware(thunk));
+store.subscribe(() => console.log(store.getState()));
+
+store.dispatch({
+  type: "PROMISE",
+  name: "login",
+  status: "RESOLVED",
+  payload: "hi",
+});
+
+store.dispatch({
+  type: "PROMISE",
+  name: "chatList",
+  status: "REJECTED",
+  error: "bye",
+});
+
+function actionToken(token) {
+  return {
+    type: "TOKEN",
+    token,
+  };
+}
+
+const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
+  fetch(url, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      ...headers,
+    },
+    body: JSON.stringify({ query, variables }),
+  })
+    .then((res) => res.json())
+    .then((a) => {
+      if (a.data.getLogin) window.location.assign("/my_profile");
+      else {
+        const error = document.querySelector(".error");
+        error.style.display = "block";
+      }
+    });
+
+const actionLoginPromise = (login, password) => {
+  let promise = getGQL("http://localhost:3330/graphql")(
+    `query l($login:String, $password:String){
+        getLogin(login:$login, password:$password)
+        }`,
+    { login, password }
+  );
+  return actionPromise("login", promise);
+};
+
+const actionLogin = (login, password) => {
+  return async (dispatch) => {
+    let token = await dispatch(actionLoginPromise(login, password));
+    if (token) dispatch(actionToken(token));
+  };
+};
+
+export {actionLogin, store}
+
+// function actionRegisterPromise(email, password, nickname) {
+//   let promise = getGQL("http://localhost:3330/graphql")(
+//     `mutation reg($email:String, $password:String, $nickname:String){
+//       createUser({email:$email, password:$password, nickname:$nickname}){ email }
+//     }`,
+//     { email, password, nickname }
+//   );
+//   return actionPromise("register", promise);
+// }
+
+// function actionRegister(email, password, nickname) {
+//   return async (dispatch) => {
+//     let user = await dispatch(actionRegisterPromise(email, password, nickname));
+//     if (user) {
+//       dispatch(actionLogin(email, password, nickname));
+//     }
+//   };
+// }
+
+// const actionTimeouts = () => {
+//   return async (dispatch) => {
+//     let result = await dispatch(actionPromise("delay1", delay(1000)));
+//     console.log(result);
+//     result = await dispatch(actionPromise("delay" + result, delay(result * 2)));
+//     console.log(result);
+//   };
+// };
+
+// store1.dispatch(actionTimeouts());
+
+// store1.dispatch(actionPromise("delay1000", delay(1000)));
+// store1.dispatch(actionPromise("delay2000", delay(2000)));
+
+// store1.dispatch(actionLogin("1", "1"));
+
+// const store = createStore((state, { type, token }) => {
+//   if (!state) return {};
+//   if (type === "LOGOUT") return { jwt: "" };
+//   if (type === "LOGIN")
+//     return {
+//       pending: true,
+//       jwt: "",
+//     };
+//   if (type === "TOKEN")
+//     return {
+//       jwt: token,
+//       data: jwtDecode(token),
+//     };
+//   return state;
+// });
+
+// function actionLogin(email, password) {
+//   getGQL("http://localhost:3330/graphql")(
+//     `query l($email:String, $password:String){
+//         login(email:$email, password:$password)
+//       }`,
+//     { email, password }
+//   ).then((data) => store.dispatch(actionToken(data.data.login)));
+//   return {
+//     type: "LOGIN",
+//   };
+// }
+
+// function actionToken(token) {
+//   return {
+//     type: "TOKEN",
+//     token,
+//   };
+// }
+
+// store.subscribe(() => console.log(store.getState()));
+// store.dispatch(actionLogin("1", "1"));
+
+// var authToken;
+
+// const getServerIn = (url) => () => {
+//   const email = document.getElementById("email").value;
+//   const password = document.getElementById("password").value;
+//   fetch(url, {
+//     method: "POST",
+//     headers: {
+//       Accept: "application/json",
+//       "Content-Type": "application/json",
+//     },
+//     body: JSON.stringify({ email: email, password: password }),
+//   })
+//     .then((res) => res.json())
+//     .then((json) => (authToken = json.token))
+//     .then(() => {
+//       console.log(authToken);
+//       if (!authToken) alert("Вы не верно ввели свои данные!");
+//       else {
+//         //   window.location.assign("/my_profile");
+//         fetch("/a", {
+//           method: "GET",
+//           headers: {
+//             Authorization:  authToken,
+//           },
+//         })
+//           .then((res) => res.json())
+//       }
+//     });
+// };
+// const getServerIn1 = getServerIn("/users/authenticate");
+
+// const eye = () => {
+//   const password = document.getElementById("password");
+//   const notSee = document.querySelector(".not-see");
+//   const see = document.querySelector(".see");
+
+//   if (password.type === "password") {
+//     password.type = "text";
+//     see.style.display = "inline-block";
+//     notSee.style.display = "none";
+//   } else {
+//     password.type = "password";
+//     notSee.style.display = "inline-block";
+//     see.style.display = "none";
+//   }
+// };

myproject/src/signIn/signIn.css

@@ -35,7 +35,7 @@
   color: #818181;
 }
 
-#email,
+#login,
 #password {
   margin-left: -5px;
   border: none;
@@ -61,7 +61,7 @@
 }
 
 .password-icon .anticon,
-.email-icon .anticon {
+.login-icon .anticon {
   padding: 0 15px 0 10px;
   color: #6b6b6b;
 }
@@ -120,3 +120,12 @@
 .anticon-eye-invisible:hover {
   color: #525252;
 }
+
+.error {
+  color: red;
+  line-height: 1.3;
+  font-size: 18px;
+  display: none;
+  margin-top: -10px;
+  margin-bottom: 15px;
+}

myproject/src/signIn/signIn.js

@@ -1,248 +1,19 @@
 import React, { useState } from "react";
-import { createStore, combineReducers, applyMiddleware } from "redux";
 import { Link } from "react-router-dom";
 import { Provider, connect } from "react-redux";
-import jwtDecode from "jwt-decode";
-import thunk from "redux-thunk";
 import {
   UserOutlined,
   LockOutlined,
   EyeOutlined,
   EyeInvisibleOutlined,
 } from "@ant-design/icons";
-// import { GraphQLClient } from "graphql-request";
 
-import "./signIn.css";
-
-const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
-  if (type === "PROMISE") {
-    return {
-      ...state,
-      [name]: {
-        status,
-        payload,
-        error,
-      },
-    };
-  }
-  return state;
-};
-
-const actionPromise = (name, promise) => {
-  const actionPending = () => ({
-    type: "PROMISE",
-    name,
-    status: "PENDING",
-    payload: null,
-    error: null,
-  });
-  const actionResolved = (payload) => ({
-    type: "PROMISE",
-    name,
-    status: "RESOLVED",
-    payload,
-    error: null,
-  });
-  const actionRejected = (error) => ({
-    type: "PROMISE",
-    name,
-    status: "REJECTED",
-    payload: null,
-    error,
-  });
-  return async (dispatch) => {
-    dispatch(actionPending());
-    try {
-      let payload = await promise;
-      dispatch(actionResolved(payload));
-      return payload;
-    } catch (error) {
-      dispatch(actionRejected(error));
-    }
-  };
-};
-
-const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
-
-const store1 = createStore(promiseReducer, applyMiddleware(thunk));
-store1.subscribe(() => console.log(store1.getState()));
-
-store1.dispatch({
-  type: "PROMISE",
-  name: "login",
-  status: "RESOLVED",
-  payload: "hi",
-});
-
-store1.dispatch({
-  type: "PROMISE",
-  name: "chatList",
-  status: "REJECTED",
-  error: "bye",
-});
-
-function actionToken(token) {
-  return {
-    type: "TOKEN",
-    token,
-  };
-}
-
-const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
-  fetch(url, {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      ...headers,
-    },
-    body: JSON.stringify({ query, variables }),
-  })
-    .then((res) => res.json())
-    .then((a) => {
-      a.data.login ? window.location.assign("/my_profile") : alert("Не верно введен email или пароль!");
-    });
-
-const actionLoginPromise = (email, password) => {
-  let promise = getGQL("http://localhost:3330/graphql")(
-    `query l($email:String, $password:String){
-        login(email:$email, password:$password)
-      }`,
-    { email, password }
-  );
-  return actionPromise("email", promise);
-};
-
-const actionLogin = (email, password) => {
-  return async (dispatch) => {
-    let token = await dispatch(actionLoginPromise(email, password));
-    if (token) dispatch(actionToken(token));
-  };
-};
-
-// function actionRegisterPromise(email, password, nickname) {
-//   let promise = getGQL("http://localhost:3330/graphql")(
-//     `mutation reg($email:String, $password:String, $nickname:String){
-//       createUser({email:$email, password:$password, nickname:$nickname}){ email }
-//     }`,
-//     { email, password, nickname }
-//   );
-//   return actionPromise("register", promise);
-// }
+import { actionLogin, store } from "./actionLogin/actionLogin";
 
-// function actionRegister(email, password, nickname) {
-//   return async (dispatch) => {
-//     let user = await dispatch(actionRegisterPromise(email, password, nickname));
-//     if (user) {
-//       dispatch(actionLogin(email, password, nickname));
-//     }
-//   };
-// }
-
-const actionTimeouts = () => {
-  return async (dispatch) => {
-    let result = await dispatch(actionPromise("delay1", delay(1000)));
-    console.log(result);
-    result = await dispatch(actionPromise("delay" + result, delay(result * 2)));
-    console.log(result);
-  };
-};
-
-store1.dispatch(actionTimeouts());
-
-store1.dispatch(actionPromise("delay1000", delay(1000)));
-store1.dispatch(actionPromise("delay2000", delay(2000)));
-
-// store1.dispatch(actionLogin("1", "1"));
-
-// const store = createStore((state, { type, token }) => {
-//   if (!state) return {};
-//   if (type === "LOGOUT") return { jwt: "" };
-//   if (type === "LOGIN")
-//     return {
-//       pending: true,
-//       jwt: "",
-//     };
-//   if (type === "TOKEN")
-//     return {
-//       jwt: token,
-//       data: jwtDecode(token),
-//     };
-//   return state;
-// });
-
-// function actionLogin(email, password) {
-//   getGQL("http://localhost:3330/graphql")(
-//     `query l($email:String, $password:String){
-//         login(email:$email, password:$password)
-//       }`,
-//     { email, password }
-//   ).then((data) => store.dispatch(actionToken(data.data.login)));
-//   return {
-//     type: "LOGIN",
-//   };
-// }
-
-// function actionToken(token) {
-//   return {
-//     type: "TOKEN",
-//     token,
-//   };
-// }
-
-// store.subscribe(() => console.log(store.getState()));
-// store.dispatch(actionLogin("1", "1"));
-
-// var authToken;
-
-// const getServerIn = (url) => () => {
-//   const email = document.getElementById("email").value;
-//   const password = document.getElementById("password").value;
-//   fetch(url, {
-//     method: "POST",
-//     headers: {
-//       Accept: "application/json",
-//       "Content-Type": "application/json",
-//     },
-//     body: JSON.stringify({ email: email, password: password }),
-//   })
-//     .then((res) => res.json())
-//     .then((json) => (authToken = json.token))
-//     .then(() => {
-//       console.log(authToken);
-//       if (!authToken) alert("Вы не верно ввели свои данные!");
-//       else {
-//         //   window.location.assign("/my_profile");
-//         fetch("/a", {
-//           method: "GET",
-//           headers: {
-//             Authorization:  authToken,
-//           },
-//         })
-//           .then((res) => res.json())
-//       }
-//     });
-// };
-// const getServerIn1 = getServerIn("/users/authenticate");
-
-// const eye = () => {
-//   const password = document.getElementById("password");
-//   const notSee = document.querySelector(".not-see");
-//   const see = document.querySelector(".see");
-
-//   if (password.type === "password") {
-//     password.type = "text";
-//     see.style.display = "inline-block";
-//     notSee.style.display = "none";
-//   } else {
-//     password.type = "password";
-//     notSee.style.display = "inline-block";
-//     see.style.display = "none";
-//   }
-// };
+import "./signIn.css";
 
 const LoginForm = (props) => {
-  const [email, setEmail] = useState("");
+  const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
 
   return (
@@ -253,14 +24,14 @@ const LoginForm = (props) => {
           <p>Пожалуйста, войдите в свой аккаунт</p>
         </div>
 
-        <div className="email-icon icon">
+        <div className="login-icon icon">
           <UserOutlined />
           <input
-            id="email"
-            value={email}
-            placeholder="E-mail"
+            id="login"
+            value={login}
+            placeholder="Логин"
             type="text"
-            onChange={(e) => setEmail(e.target.value)}
+            onChange={(e) => setLogin(e.target.value)}
           />
         </div>
 
@@ -281,11 +52,15 @@ const LoginForm = (props) => {
           </div>
         </div>
 
+        <div className="error">
+          <p>Неверный логин или пароль, попробуйте заново.</p>
+        </div>
+
         <button
           id="btn"
           className="login-button"
-          onClick={() => props.onLogin(email, password)}
-          disabled={!email || !password}
+          onClick={() => props.onLogin(login, password)}
+          disabled={!login || !password}
         >
           Войти
         </button>
@@ -300,10 +75,8 @@ const LoginForm = (props) => {
 };
 
 const Login = (props) => (
-  <Provider store={store1}>
+  <Provider store={store}>
     <ConnectedLoginForm loginEye={props.loginEye} />
-    {/* <LoginPending /> */}
-    {/* <Login onLogin={(login, password) => console.log(login, password)} /> */}
   </Provider>
 );
 

myproject/src/signUp/actionRegister/actionRegister.js

@@ -0,0 +1,322 @@
+import { createStore, combineReducers, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+
+const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
+  if (type === "PROMISE") {
+    return {
+      ...state,
+      [name]: {
+        status,
+        payload,
+        error,
+      },
+    };
+  }
+  return state;
+};
+
+const actionPromise = (name, promise) => {
+  const actionPending = () => ({
+    type: "PROMISE",
+    name,
+    status: "PENDING",
+    payload: null,
+    error: null,
+  });
+  const actionResolved = (payload) => ({
+    type: "PROMISE",
+    name,
+    status: "RESOLVED",
+    payload,
+    error: null,
+  });
+  const actionRejected = (error) => ({
+    type: "PROMISE",
+    name,
+    status: "REJECTED",
+    payload: null,
+    error,
+  });
+  return async (dispatch) => {
+    dispatch(actionPending());
+    try {
+      let payload = await promise;
+      dispatch(actionResolved(payload));
+      return payload;
+    } catch (error) {
+      dispatch(actionRejected(error));
+    }
+  };
+};
+
+const store = createStore(promiseReducer, applyMiddleware(thunk));
+store.subscribe(() => console.log(store.getState()));
+
+store.dispatch({
+  type: "PROMISE",
+  name: "login",
+  status: "RESOLVED",
+  payload: "hi",
+});
+
+store.dispatch({
+  type: "PROMISE",
+  name: "chatList",
+  status: "REJECTED",
+  error: "bye",
+});
+
+function actionRegisterPromise(email, password, login) {
+  let promise = getGQL("http://localhost:3330/graphql")(
+    `mutation reg($email:String, $password:String, $login:String){
+        createUser(email:$email, password:$password, login:$login){ id } 
+      }`,
+    { email, password, login }
+  );
+  return actionPromise("register", promise);
+}
+
+function actionRegister(email, password, login) {
+  return async (dispatch) => {
+    let user = await dispatch(actionRegisterPromise(email, password, login));
+    if (user) {
+      window.location.assign("/sign_in");
+    }
+  };
+}
+
+const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
+  fetch(url, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      ...headers,
+    },
+    body: JSON.stringify({ query, variables }),
+  }).then((res) => res.json());
+
+export {actionRegister, store}
+
+
+
+
+// // const getGQL = (url) => () => {
+// //   const email = document.getElementById("email").value;
+// //   const password = document.getElementById("password").value;
+// //   const nickname = document.getElementById("nickname").value;
+
+// //   fetch(url, {
+// //     method: "POST",
+// //     headers: {
+// //       Accept: "application/json",
+// //       "Content-Type": "application/json",
+// //     },
+// //     body: JSON.stringify({
+// //       email: email,
+// //       password: password,
+// //       nickname: nickname,
+// //     }),
+// //   })
+// //     .then((res) => res.json())
+// //     .then((data) => {
+// //       console.log("ok");
+// //       console.log(data);
+// //     });
+// // };
+
+// // function actionLogin(login, password) {
+// //   getGQL("http://localhost:3333/users");
+// // }
+
+// // const store = createStore((state, { type, token }) => {
+// //   if (!state) return {};
+// //   if (type === "LOGIN") return { pending: true, jwt: {} };
+// //   if (type === "LOGOUT") return { jwt: {}, data: {} };
+// //   if (type === "TOKEN") return { jwt: token, data: jwtDecode(token) };
+// //   return state;
+// // });
+
+// const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
+//   if (type === "PROMISE") {
+//     return {
+//       ...state,
+//       [name]: {
+//         status,
+//         payload,
+//         error,
+//       },
+//     };
+//   }
+//   return state;
+// };
+
+// const actionPromise = (name, promise) => {
+//   const actionPending = () => ({
+//     type: "PROMISE",
+//     name,
+//     status: "PENDING",
+//     payload: null,
+//     error: null,
+//   });
+//   const actionResolved = (payload) => ({
+//     type: "PROMISE",
+//     name,
+//     status: "RESOLVED",
+//     payload,
+//     error: null,
+//   });
+//   const actionRejected = (error) => ({
+//     type: "PROMISE",
+//     name,
+//     status: "REJECTED",
+//     payload: null,
+//     error,
+//   });
+//   return async (dispatch) => {
+//     dispatch(actionPending());
+//     try {
+//       let payload = await promise;
+//       dispatch(actionResolved(payload));
+//       return payload;
+//     } catch (error) {
+//       dispatch(actionRejected(error));
+//     }
+//   };
+// };
+
+// // const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
+
+// const store1 = createStore(promiseReducer, applyMiddleware(thunk));
+// store1.subscribe(() => console.log(store1.getState()));
+
+// store1.dispatch({
+//   type: "PROMISE",
+//   name: "login",
+//   status: "RESOLVED",
+//   payload: "hi",
+// });
+
+// store1.dispatch({
+//   type: "PROMISE",
+//   name: "chatList",
+//   status: "REJECTED",
+//   error: "bye",
+// });
+
+// // function actionToken(token) {
+// //   return {
+// //     type: "TOKEN",
+// //     token,
+// //   };
+// // }
+
+// // const actionLoginPromise = (email, password) => {
+// //   let promise = getGQL("http://localhost:3330/graphql")(
+// //     `query l($email:String, $password:String){
+// //         login(email:$email, password:$password)
+// //       }`,
+// //     { email, password }
+// //   );
+// //   return actionPromise("email", promise);
+// // };
+
+// // const actionLogin = (email, password) => {
+// //   return async (dispatch) => {
+// //     let token = await dispatch(actionLoginPromise(email, password));
+// //     if (token) {
+// //       dispatch(actionToken(token));
+// //       // window.location.assign("/my_profile")
+// //     }
+// //   };
+// // };
+
+// function actionRegisterPromise(email, password, login) {
+//   let promise = getGQL("http://localhost:3330/graphql")(
+//     `mutation reg($email:String, $password:String, $login:String){
+//       createUser(email:$email, password:$password, login:$login){ id } 
+//     }`,
+//     { email, password, login }
+//   );
+//   return actionPromise("register", promise);
+// }
+
+// function actionRegister(email, password, login) {
+//   return async (dispatch) => {
+//     let user = await dispatch(actionRegisterPromise(email, password, login));
+//     if (user) {
+//       window.location.assign("/sign_in");
+//       // dispatch(actionLogin(email, password));
+//     }
+//   };
+// }
+
+// // const actionRegister = (email, password) => {
+// //   return async (dispatch) => {
+// //     let useer = await dispatch(actionLoginPromise(email, password));
+// //     if (token) dispatch(actionToken(token));
+// //   };
+// // };
+
+// // const actionTimeouts = () => {
+// //   return async (dispatch) => {
+// //     let result = await dispatch(actionPromise("delay1", delay(1000)));
+// //     console.log(result);
+// //     result = await dispatch(actionPromise("delay" + result, delay(result * 2)));
+// //     console.log(result);
+// //   };
+// // };
+
+// // store1.dispatch(actionTimeouts());
+
+// // store1.dispatch(actionPromise("delay1000", delay(1000)));
+// // store1.dispatch(actionPromise("delay2000", delay(2000)));
+
+// // const store = createStore((state, { type, token }) => {
+// //   if (!state) return {};
+// //   if (type === "LOGOUT") return { jwt: "" };
+// //   if (type === "LOGIN")
+// //     return {
+// //       pending: true,
+// //       jwt: "",
+// //     };
+// //   if (type === "TOKEN")
+// //     return {
+// //       jwt: token,
+// //       data: jwtDecode(token),
+// //     };
+// //   return state;
+// // });
+
+// const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
+//   fetch(url, {
+//     method: "POST",
+//     headers: {
+//       Accept: "application/json",
+//       "Content-Type": "application/json",
+//       ...headers,
+//     },
+//     body: JSON.stringify({ query, variables }),
+//   }).then((res) => res.json());
+
+// // function actionLogin(email, password) {
+// //   getGQL("http://localhost:3330/graphql")(
+// //     `query l($email:String, $password:String){
+// //         login(email:$email, password:$password)
+// //       }`,
+// //     { email, password }
+// //   ).then((data) => store.dispatch(actionToken(data.data.login)));
+// //   return {
+// //     type: "LOGIN",
+// //   };
+// // }
+
+// // function actionToken(token) {
+// //   return {
+// //     type: "TOKEN",
+// //     token,
+// //   };
+// // }
+
+// // store.subscribe(() => console.log(store.getState()));
+// // store1.dispatch(actionLogin("1", "1"));

myproject/src/signUp/signUp.css

@@ -25,19 +25,19 @@
 }
 
 #registerEmail,
-#nickname {
+#loginCreate {
   padding-left: 5px;
   border: 1px solid #b4b4b4;
   transition: all 0.4s;
 }
 
 #registerEmail:hover,
-#nickname:hover {
+#loginCreate:hover {
   border: 1px solid #339cfd;
 }
 
 #registerEmail:focus,
-#nickname:focus {
+#loginCreate:focus {
   outline: none;
   border: 1px solid #339cfd;
   box-shadow: 0 0 5px #339cfd;
@@ -129,3 +129,16 @@
   display: none;
   cursor: pointer;
 }
+
+.pattern-email,
+.pattern-password {
+  display: none;
+  color: red;
+  margin-top: -15px;
+  font-size: 18px;
+  padding-left: 220px;
+}
+
+.pattern-password {
+  padding-bottom: 20px;
+}

myproject/src/signUp/signUp.js

@@ -1,240 +1,22 @@
 import React, { useState } from "react";
 import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
-// import { createStore } from "redux";
-// import { Provider, connect } from "react-redux";
-// import jwtDecode from "jwt-decode";
-import "./signUp.css";
-// import {actionLogin} from "../sign-in/sign-in";
-
-import { createStore, combineReducers, applyMiddleware } from "redux";
 import { Provider, connect } from "react-redux";
-import thunk from "redux-thunk";
-
-// const getGQL = (url) => () => {
-//   const email = document.getElementById("email").value;
-//   const password = document.getElementById("password").value;
-//   const nickname = document.getElementById("nickname").value;
-
-//   fetch(url, {
-//     method: "POST",
-//     headers: {
-//       Accept: "application/json",
-//       "Content-Type": "application/json",
-//     },
-//     body: JSON.stringify({
-//       email: email,
-//       password: password,
-//       nickname: nickname,
-//     }),
-//   })
-//     .then((res) => res.json())
-//     .then((data) => {
-//       console.log("ok");
-//       console.log(data);
-//     });
-// };
-
-// function actionLogin(login, password) {
-//   getGQL("http://localhost:3333/users");
-// }
-
-// const store = createStore((state, { type, token }) => {
-//   if (!state) return {};
-//   if (type === "LOGIN") return { pending: true, jwt: {} };
-//   if (type === "LOGOUT") return { jwt: {}, data: {} };
-//   if (type === "TOKEN") return { jwt: token, data: jwtDecode(token) };
-//   return state;
-// });
-
-const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
-  if (type === "PROMISE") {
-    return {
-      ...state,
-      [name]: {
-        status,
-        payload,
-        error,
-      },
-    };
-  }
-  return state;
-};
-
-const actionPromise = (name, promise) => {
-  const actionPending = () => ({
-    type: "PROMISE",
-    name,
-    status: "PENDING",
-    payload: null,
-    error: null,
-  });
-  const actionResolved = (payload) => ({
-    type: "PROMISE",
-    name,
-    status: "RESOLVED",
-    payload,
-    error: null,
-  });
-  const actionRejected = (error) => ({
-    type: "PROMISE",
-    name,
-    status: "REJECTED",
-    payload: null,
-    error,
-  });
-  return async (dispatch) => {
-    dispatch(actionPending());
-    try {
-      let payload = await promise;
-      dispatch(actionResolved(payload));
-      return payload;
-    } catch (error) {
-      dispatch(actionRejected(error));
-    }
-  };
-};
-
-const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
-
-const store1 = createStore(promiseReducer, applyMiddleware(thunk));
-store1.subscribe(() => console.log(store1.getState()));
-
-store1.dispatch({
-  type: "PROMISE",
-  name: "login",
-  status: "RESOLVED",
-  payload: "hi",
-});
-
-store1.dispatch({
-  type: "PROMISE",
-  name: "chatList",
-  status: "REJECTED",
-  error: "bye",
-});
-
-// function actionToken(token) {
-//   return {
-//     type: "TOKEN",
-//     token,
-//   };
-// }
-
-// const actionLoginPromise = (email, password) => {
-//   let promise = getGQL("http://localhost:3330/graphql")(
-//     `query l($email:String, $password:String){
-//         login(email:$email, password:$password)
-//       }`,
-//     { email, password }
-//   );
-//   return actionPromise("email", promise);
-// };
-
-// const actionLogin = (email, password) => {
-//   return async (dispatch) => {
-//     let token = await dispatch(actionLoginPromise(email, password));
-//     if (token) {
-//       dispatch(actionToken(token));
-//       // window.location.assign("/my_profile")
-//     }
-//   };
-// };
-
-function actionRegisterPromise(email, password, nickname) {
-  let promise = getGQL("http://localhost:3330/graphql")(
-    `mutation reg($email:String, $password:String, $nickname:String){
-      createUser(email:$email, password:$password, nickname:$nickname){ id } 
-    }`,
-    { email, password, nickname }
-  );
-  return actionPromise("register", promise);
-}
-
-function actionRegister(email, password, nickname) {
-  return async (dispatch) => {
-    let user = await dispatch(actionRegisterPromise(email, password, nickname));
-    if (user) {
-      window.location.assign("/sign_in")
-      // dispatch(actionLogin(email, password));
-    }
-  };
-}
-
-// const actionRegister = (email, password) => {
-//   return async (dispatch) => {
-//     let useer = await dispatch(actionLoginPromise(email, password));
-//     if (token) dispatch(actionToken(token));
-//   };
-// };
-
-const actionTimeouts = () => {
-  return async (dispatch) => {
-    let result = await dispatch(actionPromise("delay1", delay(1000)));
-    console.log(result);
-    result = await dispatch(actionPromise("delay" + result, delay(result * 2)));
-    console.log(result);
-  };
-};
 
-store1.dispatch(actionTimeouts());
-
-store1.dispatch(actionPromise("delay1000", delay(1000)));
-store1.dispatch(actionPromise("delay2000", delay(2000)));
-
-// const store = createStore((state, { type, token }) => {
-//   if (!state) return {};
-//   if (type === "LOGOUT") return { jwt: "" };
-//   if (type === "LOGIN")
-//     return {
-//       pending: true,
-//       jwt: "",
-//     };
-//   if (type === "TOKEN")
-//     return {
-//       jwt: token,
-//       data: jwtDecode(token),
-//     };
-//   return state;
-// });
-
-const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
-  fetch(url, {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      ...headers,
-    },
-    body: JSON.stringify({ query, variables }),
-  }).then((res) => res.json());
-
-// function actionLogin(email, password) {
-//   getGQL("http://localhost:3330/graphql")(
-//     `query l($email:String, $password:String){
-//         login(email:$email, password:$password)
-//       }`,
-//     { email, password }
-//   ).then((data) => store.dispatch(actionToken(data.data.login)));
-//   return {
-//     type: "LOGIN",
-//   };
-// }
-
-// function actionToken(token) {
-//   return {
-//     type: "TOKEN",
-//     token,
-//   };
-// }
-
-// store.subscribe(() => console.log(store.getState()));
-// store1.dispatch(actionLogin("1", "1"));
+import {
+  validateEmail,
+  borderEmailDischarge,
+  borderPasswordDischarge,
+  validatePassword,
+  signUpValidate,
+} from "./signUpValidate/signUpValidate";
+import {actionRegister, store} from "./actionRegister/actionRegister"
+import "./signUp.css";
 
 const Register1 = (props) => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [registerEmail, setEmail] = useState("");
+  const [registerPassword, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [nickname, setNickname] = useState("");
+  const [login, setLogin] = useState("");
 
   return (
     <div className="register">
@@ -247,24 +29,42 @@ const Register1 = (props) => {
         <div className="block-input">
           <span>E-mail:</span>
           <input
-            value={email}
+            value={registerEmail}
             type="email"
             id="registerEmail"
             name="email"
-            // pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+            pattern={validateEmail(registerEmail)}
+            onClick={() => borderEmailDischarge()}
             onChange={(e) => setEmail(e.target.value)}
           />
         </div>
 
+        <div className="pattern-email">
+          <p></p>
+          <div>
+            <p>Неверный формат почты</p>
+          </div>
+        </div>
+
+        <div className="block-input">
+          <span>Логин:</span>
+          <input
+            value={login}
+            type="text"
+            id="loginCreate"
+            name="login"
+            onChange={(e) => setLogin(e.target.value)}
+          />
+        </div>
+
         <div className="block-input">
           <span>Пароль:</span>
           <div className="password-block">
             <input
-              value={password}
+              value={registerPassword}
               type="password"
               id="registerPassword"
               name="password"
-              // pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
               onChange={(e) => setPassword(e.target.value)}
             />
             <div className="not-see" onClick={props.registerEye}>
@@ -283,6 +83,8 @@ const Register1 = (props) => {
               value={confirmPassword}
               type="password"
               id="confirmPassword"
+              onClick={() => borderPasswordDischarge()}
+              pattern={validatePassword(registerPassword, confirmPassword)}
               name="confirmPassword"
               onChange={(e) => setConfirmPassword(e.target.value)}
             />
@@ -295,22 +97,28 @@ const Register1 = (props) => {
           </div>
         </div>
 
-        <div className="block-input">
-          <span>Ник:</span>
-          <input
-            value={nickname}
-            type="text"
-            id="nickname"
-            name="nickname"
-            onChange={(e) => setNickname(e.target.value)}
-          />
+        <div className="pattern-password">
+          <p></p>
+          <div>
+            <p>Неверный формат</p>
+          </div>
         </div>
 
         <div className="block-input-btn">
           <p></p>
           <button
-            onClick={()=>props.register(email, password, nickname)}
-            disabled={!email || !password || !confirmPassword || !nickname}
+            onClick={() =>
+              signUpValidate(
+                registerEmail,
+                registerPassword,
+                confirmPassword,
+                login,
+                props
+              )
+            }
+            disabled={
+              !registerEmail || !registerPassword || !confirmPassword || !login
+            }
           >
             Регистрация
           </button>
@@ -320,9 +128,12 @@ const Register1 = (props) => {
   );
 };
 
-const Register = () => (
-  <Provider store={store1}>
-    <ConnectedRegisterForm />
+const Register = (props) => (
+  <Provider store={store}>
+    <ConnectedRegisterForm
+      registerEye={props.registerEye}
+      registerConfirmEye={props.registerConfirmEye}
+    />
   </Provider>
 );
 

myproject/src/signUp/signUpValidate/signUpValidate.js

@@ -0,0 +1,58 @@
+const validateEmailPattern = (email) => {
+  var pattern = /^[a-z0-9._-]+@[a-z]+\.[a-z]{2,4}$/;
+  return pattern.test(email);
+};
+
+const validateEmail = (mail) => {
+  const patternEmail = document.querySelector(".pattern-email");
+  if (validateEmailPattern(mail)) {
+    patternEmail.style.display = "none";
+    patternEmail.style.border = "1px solid #b4b4b4";
+  }
+};
+
+const borderEmailDischarge = () => {
+  const registerEmail = document.getElementById("registerEmail");
+  registerEmail.style.border = "1px solid #b4b4b4";
+};
+
+const borderPasswordDischarge = () => {
+  const confirmPasswordBlock = document.querySelector(".confirmPassword-block");
+  confirmPasswordBlock.style.border = "1px solid #b4b4b4";
+};
+
+const validatePassword = (pass, confirmPass) => {
+  const confirmPasswordBlock = document.querySelector(".confirmPassword-block");
+  const patternPassword = document.querySelector(".pattern-password");
+  if (pass !== "") {
+    if (pass === confirmPass) {
+      patternPassword.style.display = "none";
+      confirmPasswordBlock.style.border = "1px solid #b4b4b4";
+    }
+  }
+};
+
+const signUpValidate = (mail, pass, confirmPass, login, props) => {
+  const patternEmail = document.querySelector(".pattern-email");
+  const patternPassword = document.querySelector(".pattern-password");
+  const confirmPasswordBlock = document.querySelector(".confirmPassword-block");
+  if (validateEmailPattern(mail)) {
+    if (pass === confirmPass) props.register(mail, pass, login);
+    else {
+      confirmPasswordBlock.style.border = "1px solid red";
+      patternPassword.style.display = "block";
+    }
+  } else {
+    const registerEmail = document.getElementById("registerEmail");
+    registerEmail.style.border = "1px solid red";
+    patternEmail.style.display = "block";
+  }
+};
+
+export {
+  validateEmail,
+  borderEmailDischarge,
+  borderPasswordDischarge,
+  validatePassword,
+  signUpValidate,
+};