registrationAction done

shop/src/App.css

@@ -229,6 +229,16 @@ content {
 .goodCard img {
   width: 250px;
 }
+.loginWrapper {
+  background-color: rgb(58, 58, 65);
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2px solid;
+  border-color:rgb(229, 229, 243);
+  border-radius: 5%;
+}
 
 .loginForm {
   display: flex;
@@ -242,6 +252,7 @@ content {
   margin: 10px;
   
 }
+
 button {
   margin: 10px;
   width: 100px;
@@ -349,6 +360,7 @@ button {
   .rightSide div {
     margin: 0px 2px;
   }
+
   .loginForm {
     flex-direction: column;
     

shop/src/components/Main.js

@@ -1,4 +1,4 @@
-import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import { useState } from 'react';
 import {Provider, connect} from 'react-redux';
@@ -45,6 +45,7 @@ const Main = ({className = "MainImg" }) => {
                         <Route path="/about" component = {About} exact/>
                         <Route path = "/post" component = {Post} exact/>
                         <Route path = "/contacts" component = {Contacts} />
+                        <Route path = "/loginError" component={LoginError} />
                         <Route component = { NotFound } exact/>
                     </Switch>
                 </content>
@@ -53,9 +54,17 @@ const Main = ({className = "MainImg" }) => {
         </>
     )
   }
-//   const Id = ({name = "Idishnic"} )=> {
-//    return(<div>{name}</div>) }
 
+const LoginError = () => { 
+    const history = useHistory();
+    return(
+        <>
+        <div className = "loginWrapper">
+            <h3>Упс, щось пішло не так. Можливо це ім'я вже зайнято. Спробуйте ще.</h3>
+            <button onClick = {() => history.push("/login")}>Перейти на сторінку регістрації</button>
+        </div>
+        </>
+    )}
 const MainMag = () => <div>Я тут кароче самый главный страниц</div>
 const About = () => <div>Мы крутой магазин, бла-бла</div>
 const NotFound = () => <div>Да пошел ты!</div>

shop/src/components/loginOnPage.js

@@ -5,7 +5,7 @@ import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import jwt_decode from "jwt-decode"
 import { bindActionCreators } from 'redux';
-import {actionLogin, authReducer, actionAuthLogout} from "../reducers/";
+import {actionLogin, authReducer, actionAuthLogout, actionReg} from "../reducers/";
 
 
 
@@ -15,21 +15,23 @@ const ButtonLogout = ({onLogout, isLoggedIn}) =>
 
  const CButtonLogout = connect(s => ({isLoggedIn: s.auth.payload}),{onLogout: actionAuthLogout})(ButtonLogout)
 
-const DashboardLink = ({login}) =>{
-console.log(login)
-return(
-<div className = "DashboardLink">{login ? <Link to='/dashboard'>{login}</Link> : <Link to='/login'>Anon</Link>}</div>
-)
-}
-const CDashboardLink = connect(s => ({login: s.auth.payload && s.auth.payload.sub.login, }))(DashboardLink)
+// const DashboardLink = ({login}) =>{
+// console.log(login)
+// return(
+// <div className = "DashboardLink">{login ? <Link to='/dashboard'>{login}</Link> : <Link to='/login'>Anon</Link>}</div>
+// )
+// }
+// const CDashboardLink = connect(s => ({login: s.auth.payload && s.auth.payload.sub.login, }))(DashboardLink)
+
+
 
 
-const PasswordConfirm = ({login, isLoggedIn, onLogin = null }) => {
+const PasswordConfirm = ({state, login, isLoggedIn, onLogin = null }) => {
     const [pass1, setPass1] = useState("");
     const [pass2, setPass2] = useState("");
     const history = useHistory();
     useEffect(() => login ?  history.push(`/profile/` + login) : history.push(`/login`),[login])
-
+    console.log(state)
 
     return (
         <>
@@ -60,19 +62,114 @@ const PasswordConfirm = ({login, isLoggedIn, onLogin = null }) => {
     );
 };
 
-const CFormLogin = connect((s) => ({isLoggedIn: s.auth.payload, login: s.auth.payload && s.auth.payload.sub.login}), {
-    onLogin:actionLogin})(PasswordConfirm);
 
+const FormReg = ({onReg, onLogin, login, state, isReg}) => {
+    const [pass1, setPass1] = useState("");
+    const [pass2, setPass2] = useState("");
+    const history = useHistory();
+    useEffect(() => login ?  history.push(`/profile/` + login) : history.push(`/login`),[login])
+    console.log(isReg)
 
+    return (
+        <>
+            <div>
+                <input
+                    type="text"
+                    placeholder = "login"
+                    onChange={(e) => {
+                        setPass1(e.target.value);
+                    }}
+                    onKeyDown = {(e) => {
+                        if (e.keyCode == 13 ) {
+                            onReg(pass1, pass2)
+                            if(!isReg) {
+                                onLogin(pass1, pass2)
+                            } else {
+                                history.push('/loginError')
+                            }
+                        }
+                    }}
+                />
+                <input
+                    type="password"
+                    placeholder = "password"
+                    onChange={(e) => {
+                        setPass2(e.target.value);
+                    }}
+                    onKeyDown = {(e) => {
+                        if (e.keyCode == 13 ) {
+                            onReg(pass1, pass2)
+                            debugger
+                            if(!isReg) {
+                                onLogin(pass1, pass2)
+                            } else {
+                                history.push('/loginError')
+                            }
+                        }
+                    }}
+                />
+            </div>
+            <div>
+                <button disabled = {!pass2 || !pass1} onClick={() => {
+                        onReg(pass1, pass2)
+                        debugger
+                        if(!isReg) {
+                            onLogin(pass1, pass2)
+                        } else {
+                            history.push('/loginError')
+                        }
+                    }
+                }>Запишіть</button>
+
+            </div>
+
+        </>
+
+    )
+}
+
+
+const CFormReg = connect((state) => ({
+    state: state, 
+    login: state.auth.payload && state.auth.payload.sub.login,
+    isReg: state.promiseRed && state.promiseRed.registration &&
+    state.promiseRed.registration.payload &&
+    state.promiseRed.registration.payload.errors
+
+    }), {
+    onReg:actionReg,
+    onLogin:actionLogin})(FormReg);
+
+
+
+const CFormLogin = connect((s) => ({state: s, isLoggedIn: s.auth.payload, login: s.auth.payload && s.auth.payload.sub.login}), {
+    onLogin:actionLogin})(PasswordConfirm);
+
+//  const LoginError = () => { 
+//     const history = useHistory();
+//     return(
+//         <>
+//         <div>Упс, щось пішло не так. Можливо це ім'я вже зайнято. Спробуйте ще.</div>
+//         <button onClick = {() => history.push("/login")}>Перейти на сторінку регістрації</button>
+//         </>
+//     )}
 
 const LoginForm = ({}) => {
 
     return(
-    <>
-        <div className = "loginForm">
-            {/* <CDashboardLink/> */}
-            <CFormLogin />
+    <>  
+        <div className = "loginWrapper">
+            <h2>Будь ласка, увійдіть в свій аккаунд</h2>
+            <div className = "loginForm">
+                
+                {/* <CDashboardLink/> */}
+                <CFormLogin />
 
+            </div>
+            <h2>Не маєте аккаунта? То не біда, зареєструйтесь</h2>
+            <div className = "loginForm">
+                <CFormReg/>
+            </div>
         </div>
     </>
     )

shop/src/reducers/actionOrder.js

@@ -11,18 +11,7 @@ const actionOrder = (order) => {
             {
                 order: 
                 {orderGoods: order
-                    //  [
-                    // {
-                    //     "count": 2, 
-                    //     "good": {
-                    //         "_id": "5e203bb256d8f720513e6cbc" 
-                    //     }
-                    // },
-                    // {
-                    //     "count": 3, 
-                    //     "good": {
-                    //         "_id": "5dcabac96d09c45440d14cef"}
-                    // }] 
+
                 }}
         )
 

shop/src/reducers/actionReg.js

@@ -0,0 +1,22 @@
+import {actionPromise, actionAuthLogout, actionAuthLogin, gql} from "./index"
+
+
+const actionReg = (login, password) =>{
+    return async dispatch => {
+
+        await dispatch(actionPromise('registration', gql(
+            `mutation reg ($login:String, $password:String){
+                UserUpsert(user: {login:$login, password: $password}) {
+                  _id, createdAt
+                }
+              }`,{login, password})
+        ))
+    }
+}
+// mutation reg ($login:String, $password:String){
+//     UserUpsert(user: {login:$login, password: $password}) {
+//       _id, createdAt
+//     }
+//   }
+
+export default actionReg;

shop/src/reducers/index.js

@@ -12,6 +12,7 @@ import actionGoodCard from "./actionGoodCard";
 import updateAction from "./actionUpdateImg";
 import {cartReducer, actionCartClear, actionCartDelete, actionCartAdd} from "./cartReducer";
 import actionOrder from "./actionOrder";
+import actionReg from "./actionReg";
 
 
 
@@ -37,7 +38,8 @@ function promiseReducer(state={}, action){
 
 export {actionPromise, gql, actionGoods, getGoods, promiseReducer, store, actionSearch,
    actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, 
-   updateAction, actionCartAdd, actionCartDelete, actionCartClear, actionOrder};
+   updateAction, actionCartAdd, actionCartDelete, actionCartClear, actionOrder,
+    actionReg};