form

src/routes/auth/auth.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 
   height: 100vh;
 }
@@ -13,4 +14,8 @@
   grid-template-columns: 1fr;
 
   grid-gap: 20px;
+}
+
+.text { 
+  margin-top: 20px;
 }

src/routes/auth/index.jsx

@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import hookForm from 'hook-easy-form';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { runAuth } from 'store/auth/actions';
+import { runAuth, runRegister } from 'store/auth/actions';
 import Input from 'components/inputs/text-input/text-input';
 
 import classes from './auth.module.scss';
@@ -30,21 +30,33 @@ const form = [
       maxLength: (v) => (v.trim().length < 6 ? 'Invalid' : ''),
     },
   },
-]
+];
 
 const Auth = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const user = useSelector((s) => s.auth.user)
-  console.log('user', user);
+  const [auth, setAuth] = useState(true);
+  const { formArray, updateEvent, valid, disabled, submitEvent,  setValueManually } = hookForm({ initialForm: form })
+  console.log('formArray', formArray);
+  const user = useSelector((s) => s.auth.user);
+  const emailFromRegister = useSelector((s) => s.auth.emailFromRegister);
+
   useEffect(() => {
     if (user) history.push('/');
   }, [user, history]);
 
-  const { formArray, updateEvent, valid, disabled, submitEvent } = hookForm({ initialForm: form })
+  useEffect(() => {
+    if (emailFromRegister) {
+      setValueManually('password', '');
+      setAuth(true);
+    }
+  }, [emailFromRegister, setValueManually])
 
-  const submit = submitEvent((v) => dispatch(runAuth(v)));
+  const submit = submitEvent((v) => {
+    if (auth) dispatch(runAuth(v))
+    else dispatch(runRegister(v))
+  });
 
   return (
     <div className={classes.container}>
@@ -52,6 +64,7 @@ const Auth = () => {
         {formArray.map(el => (
           <div className={classes.form} key={el.name}>
             <Input
+              value={el.value}
               name={el.name}
               label={el.options.label}
               type={el.options.type}
@@ -60,6 +73,8 @@ const Auth = () => {
         ))}
         <button type="submit" disabled={disabled || !valid}>Submit</button>
       </form>
+
+      <p className={classes.text} onClick={() => setAuth(p => !p)}>{auth ? 'Do you have a account ?' : 'Log In'}</p>
     </div>
   )
 }

src/store/auth/actions.js

@@ -28,4 +28,19 @@ export const getMeSuccess = (payload) => ({
 export const getMeFail = (payload) => ({
   type: types.GET_ME_FAIL,
   payload
+})
+
+export const runRegister = (payload) => ({
+  type: types.RUN_REGISTER,
+  payload
+})
+
+export const runRegisterSuccess = (payload) => ({
+  type: types.RUN_REGISTER_SUCCESS,
+  payload
+})
+
+export const runRegisterFail = (payload) => ({
+  type: types.RUN_REGISTER_FAIL,
+  payload
 })

src/store/auth/reducer.js

@@ -2,6 +2,7 @@ import * as types from './types';
 
 const initialState = {
   user: null,
+  emailFromRegister: null,
 }
 
 export const authReducer = (state = initialState, action) => {
@@ -20,6 +21,10 @@ export const authReducer = (state = initialState, action) => {
       return { ...state, user: action.payload }
     }
 
+    case types.RUN_REGISTER_SUCCESS:  {
+      return { ...state, emailFromRegister: action.payload }
+    }
+
     default: {
       return state;
     }

src/store/auth/saga.js

@@ -15,12 +15,14 @@ const authRequest = (cred) => fetch('http://localhost:8000/auth/login', {
 
 const meRequest = (token) => AxiosInstance({
   url: 'users/me',
-  // headers: {
-  //   Authorization: `Bearer ${token}`
-  // }
 })
 
-// const auth = (cred) => fetch('http://localhost:8000/auth/register')
+const register = (cred) => AxiosInstance({
+  url: 'auth/register',
+  method: 'POST',
+  data: cred,
+  headers: { Authorization: `Bearer super-secret-master-key` },
+})
 
 function* runAuth({ payload }) {
   const credentials = yield window.btoa(`${payload.email}:${payload.password}`)
@@ -36,6 +38,16 @@ function* runAuth({ payload }) {
   }
 }
 
+function* runRegister({ payload }) {
+  try {
+    const result = yield call(register, payload);
+    console.log('result', result)
+    yield put(actions.runRegisterSuccess(result.data.email))
+  } catch (error) {
+    yield put(actions.runRegisterFail(error))
+  }
+}
+
 function* getMe({ payload }) {
   try {
     const token = getToken();
@@ -50,4 +62,5 @@ function* getMe({ payload }) {
 export default function* auth() {
   yield takeLatest(types.RUN_AUTH, runAuth);
   yield takeLatest(types.GET_ME, getMe);
+  yield takeLatest(types.RUN_REGISTER, runRegister);
 }

src/store/auth/types.js

@@ -2,6 +2,10 @@ export const RUN_AUTH = 'RUN_AUTH';
 export const RUN_AUTH_SUCCESS = 'RUN_AUTH_SUCCESS';
 export const RUN_AUTH_FAIL = 'RUN_AUTH_FAIL';
 
+export const RUN_REGISTER = 'RUN_REGISTER';
+export const RUN_REGISTER_SUCCESS = 'RUN_REGISTER_SUCCESS';
+export const RUN_REGISTER_FAIL = 'RUN_REGISTER_FAIL';
+
 export const GET_ME = 'GET_ME';
 export const GET_ME_SUCCESS = 'GET_ME_SUCCESS';
 export const GET_ME_FAIL = 'GET_ME_FAIL';

src/utils/axios.js

@@ -8,14 +8,19 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(function (config) {
-  console.log('config', config);
   const token = getToken();
 
-  config.headers.Authorization = `Bearer ${token}`
-  config.headers['Accepted-language'] = 'ru';
-
-  // Do something before request is sent
-  return config;
+  if (config.headers.Authorization) {
+    return config;
+  }
+
+  return {
+    ...config,
+    headers: {
+      ...config.headers,
+      Authorization: `Bearer ${token}`
+    }
+  };
 }, function (error) {
   // Do something with request error
   return Promise.reject(error);
@@ -33,4 +38,4 @@ instance.interceptors.response.use(function (response) {
 });
 
 
-export const AxiosInstance = ({ url, method = 'GET', params, data }) => instance({ url, method, params, data });
+export const AxiosInstance = ({ url, method = 'GET', params, data, headers }) => instance({ url, method, params, data, headers });