From cbc73e3524b81f25c18a65a5321472219bb176af Mon Sep 17 00:00:00 2001 From: sasha4ox Date: Fri, 27 Mar 2020 13:50:22 +0200 Subject: [PATCH 1/3] add redux-form to login component --- src/actions/login.js | 65 +++++ src/constants/index.js | 7 + src/reducers/index.js | 2 + src/reducers/login.js | 48 ++++ src/routes/login/Login.css | 10 - src/routes/login/Login.js | 92 ++++--- .../CustomFieldLogin/CustomFieldLogin.css | 7 + .../CustomFieldLogin/CustomFieldLogin.js | 56 +++++ src/routes/login/components/Input.js | 23 -- src/routes/login/components/LoginButton.js | 11 +- yarn.lock | 227 +----------------- 11 files changed, 259 insertions(+), 289 deletions(-) create mode 100644 src/actions/login.js create mode 100644 src/reducers/login.js create mode 100644 src/routes/login/components/CustomFieldLogin/CustomFieldLogin.css create mode 100644 src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js delete mode 100644 src/routes/login/components/Input.js diff --git a/src/actions/login.js b/src/actions/login.js new file mode 100644 index 0000000..9eb8d7c --- /dev/null +++ b/src/actions/login.js @@ -0,0 +1,65 @@ +import { + LOGIN_START, + LOGIN_SUCCESS, + LOGIN_FAILURE, + REGISTRATION_START, + REGISTRATION_SUCCESS, + REGISTRATION_FAILURE, +} from '../constants'; + +export function loginStart() { + return { + type: LOGIN_START, + }; +} +export function loginSuccess() { + return { + type: LOGIN_SUCCESS, + }; +} + +export function loginFailure() { + return { + type: LOGIN_FAILURE, + }; +} +export function login() { + return dispatch => { + dispatch(loginStart()); + try { + // fetcing to server + return dispatch(loginSuccess()); + } catch (error) { + return dispatch(loginFailure()); + } + }; +} + +export function registrationStart() { + return { + type: REGISTRATION_START, + }; +} +export function registrationSuccess() { + return { + type: REGISTRATION_SUCCESS, + }; +} + +export function registrationFailure() { + return { + type: REGISTRATION_FAILURE, + }; +} + +export function registration() { + return dispatch => { + dispatch(registrationStart()); + try { + // fetching registration + return dispatch(registrationSuccess()); + } catch (error) { + return dispatch(registrationFailure()); + } + }; +} diff --git a/src/constants/index.js b/src/constants/index.js index 249dec9..95fdc2c 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -14,3 +14,10 @@ export const GET_ALL_MESSAGES = 'GET_ALL_MESSAGES'; export const CHAT_ADD_MESSAGE = 'CHAT_ADD_MESSAGE'; export const CHAT_MESSAGE_IS_TYPING = 'CHAT_MESSAGE_IS_TYPING'; export const CHAT_REMOVE_MESSAGE = 'CHAT_REMOVE_MESSAGE'; + +export const LOGIN_START = 'LOGIN_START'; +export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'; +export const LOGIN_FAILURE = 'LOGIN_FAILURE'; +export const REGISTRATION_SUCCESS = 'REGISTRATION_SUCCESS'; +export const REGISTRATION_FAILURE = 'REGISTRATION_FAILURE'; +export const REGISTRATION_START = 'REGISTRATION_START'; diff --git a/src/reducers/index.js b/src/reducers/index.js index faa4739..dd0281f 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -3,10 +3,12 @@ import { reducer as formReducer } from 'redux-form'; import as from './as'; import calcTable from './calc-table'; import chat from './chat'; +import login from './login'; export default combineReducers({ as, calcTable, chat, form: formReducer, + login, }); diff --git a/src/reducers/login.js b/src/reducers/login.js new file mode 100644 index 0000000..0d9aeeb --- /dev/null +++ b/src/reducers/login.js @@ -0,0 +1,48 @@ +import { + LOGIN_START, + LOGIN_SUCCESS, + LOGIN_FAILURE, + REGISTRATION_START, + REGISTRATION_FAILURE, + REGISTRATION_SUCCESS, +} from '../constants'; + +const initialState = { + loading: false, +}; +export default function login(state = initialState, action) { + switch (action.type) { + case LOGIN_START: + return { + ...state, + loading: true, + }; + case LOGIN_SUCCESS: + return { + ...state, + loading: false, + }; + case LOGIN_FAILURE: + return { + ...state, + loading: false, + }; + case REGISTRATION_START: + return { + ...state, + loading: true, + }; + case REGISTRATION_FAILURE: + return { + ...state, + loading: false, + }; + case REGISTRATION_SUCCESS: + return { + ...state, + loading: false, + }; + default: + return state; + } +} diff --git a/src/routes/login/Login.css b/src/routes/login/Login.css index f8cb29e..4c8280d 100644 --- a/src/routes/login/Login.css +++ b/src/routes/login/Login.css @@ -28,20 +28,10 @@ } .formContainer button { - border: none; - border-radius: 5px; - height: 25px; - background: #eee; - margin-right: 10px; - outline: none; width: 50%; align-self: center; } -.formContainer button:hover { - cursor: pointer; -} - .textLogin { color: #cecece; display: flex; diff --git a/src/routes/login/Login.js b/src/routes/login/Login.js index 97776e7..25eaab8 100644 --- a/src/routes/login/Login.js +++ b/src/routes/login/Login.js @@ -1,70 +1,86 @@ -import React, { memo, useCallback, useState } from 'react'; +import React, { useCallback } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; import useStyles from 'isomorphic-style-loader/useStyles'; +import { Field, reduxForm } from 'redux-form'; +import CustomFieldLogin from './components/CustomFieldLogin/CustomFieldLogin'; import s from './Login.css'; -import Input from './components/Input'; import LoginButton from './components/LoginButton'; +import { login, registration } from '../../actions/login'; + +const validate = value => { + const errors = {}; + const minLengthPassword = 5; + if (!value.email) { + errors.email = 'Required'; + } else if (value.email.length < minLengthPassword) { + errors.email = `Bro, not enough characters for a valid email`; + } else if (!value.email.match(/^[\d.a-z-]+@[\da-z-]{2,}.[a-z]{2,}$/i)) { + errors.email = 'Please, check your email, it looks invalid '; + } + if (!value.password) { + errors.password = 'Required'; + } else if (value.password.length < minLengthPassword) { + errors.password = `Password must have at least 5 characters, you typed only ${value.password.length}`; + } + + return errors; +}; function Login() { + const formLoginState = useSelector(state => state.form.Login); + const dispatch = useDispatch(); useStyles(s); - const [inputValue, setInputValue] = useState({ - password: '', - email: '', - }); - const inputChangeHandler = useCallback(event => { - const { name } = event.target; - const { value } = event.target; - setInputValue(previous => { - return { - ...previous, - [name]: value, - }; - }); - }, []); + const buttonLoginHandler = useCallback( event => { event.preventDefault(); const { name } = event.target; - switch (name) { - case 'logIn': - console.info('What we do now? :', name); - console.info('What mail of user is? :', inputValue.email); - console.info('What password is? :', inputValue.password); - break; - case 'registration': - console.info('What we do now? :', name); - console.info('What mail of user is? :', inputValue.email); - console.info('What password is? :', inputValue.password); - break; - default: - console.info('something whent wrong'); + if (name === 'login') { + return dispatch(login()); + } + if (name === 'registration') { + return dispatch(registration()); } + return true; }, - [inputValue], + [dispatch], ); return (
+ {/* chat */}

Want to be on safe? Please, log in or register

- - - +
); } + Login.whyDidYouRender = true; -export default memo(Login); +export default reduxForm({ + form: 'Login', + validate, +})(Login); diff --git a/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.css b/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.css new file mode 100644 index 0000000..1713804 --- /dev/null +++ b/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.css @@ -0,0 +1,7 @@ +.inputsError { + width: 100%; + margin-top: 4px; + margin-top: 0.25rem; + font-size: 80%; + color: #dc3545; +} diff --git a/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js b/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js new file mode 100644 index 0000000..7f710c9 --- /dev/null +++ b/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js @@ -0,0 +1,56 @@ +import PropTypes from 'prop-types'; +import useStyles from 'isomorphic-style-loader/useStyles'; +import React from 'react'; +import s from './CustomFieldLogin.css'; + +export default function CustomFieldLogin({ + input: { name, onBlur, onChange, onDragStart, onDrop, onFocus }, + label, + // name, + type, + meta: { touched, error }, +}) { + useStyles(s); + + return ( +
+ +
+ ); +} +CustomFieldLogin.propTypes = { + input: PropTypes.shape({ + name: PropTypes.string.isRequired, + onBlur: PropTypes.func, + onChange: PropTypes.func, + onDragStart: PropTypes.func, + onDrop: PropTypes.func, + onFocus: PropTypes.func, + }).isRequired, + label: PropTypes.string, + meta: PropTypes.shape({ + error: PropTypes.string.isRequired, + touched: PropTypes.bool.isRequired, + }).isRequired, + type: PropTypes.string, +}; +CustomFieldLogin.defaultProps = { + label: 'input', + type: 'text', +}; diff --git a/src/routes/login/components/Input.js b/src/routes/login/components/Input.js deleted file mode 100644 index 35aa9fd..0000000 --- a/src/routes/login/components/Input.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import capitalize from 'lodash/capitalize'; - -export default function Input({ name, inputChangeHandler, value }) { - return ( - - ); -} -Input.propTypes = { - inputChangeHandler: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, -}; diff --git a/src/routes/login/components/LoginButton.js b/src/routes/login/components/LoginButton.js index 9014aa6..788699b 100644 --- a/src/routes/login/components/LoginButton.js +++ b/src/routes/login/components/LoginButton.js @@ -2,14 +2,21 @@ import React from 'react'; import PropTypes from 'prop-types'; import capitalize from 'lodash/capitalize'; -export default function LoginButton({ name, buttonLoginHandler }) { +export default function LoginButton({ name, buttonLoginHandler, hasError }) { return ( - ); } LoginButton.propTypes = { buttonLoginHandler: PropTypes.func.isRequired, + hasError: PropTypes.bool.isRequired, name: PropTypes.string.isRequired, }; diff --git a/yarn.lock b/yarn.lock index 5f4ecd5..fd60647 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1618,11 +1618,6 @@ abab@^2.0.0: resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a" integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg== -abbrev@1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" - integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== - accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7: version "1.3.7" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd" @@ -1793,19 +1788,11 @@ anymatch@^3.0.0, anymatch@^3.0.3, anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" -aproba@^1.0.3, aproba@^1.1.1: +aproba@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw== -are-we-there-yet@~1.1.2: - version "1.1.5" - resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21" - integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w== - dependencies: - delegates "^1.0.0" - readable-stream "^2.0.6" - argparse@^1.0.7: version "1.0.10" resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911" @@ -2944,11 +2931,6 @@ console-browserify@^1.1.0: resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336" integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA== -console-control-strings@^1.0.0, console-control-strings@~1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" - integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4= - constants-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" @@ -3302,13 +3284,6 @@ debug@=3.1.0, debug@~3.1.0: dependencies: ms "2.0.0" -debug@^3.2.6: - version "3.2.6" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" - integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ== - dependencies: - ms "^2.1.1" - decamelize-keys@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9" @@ -3337,11 +3312,6 @@ deep-diff@^0.3.5: resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84" integrity sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ= -deep-extend@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" - integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== - deep-is@~0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" @@ -3393,11 +3363,6 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= -delegates@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" - integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o= - depd@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" @@ -3416,11 +3381,6 @@ destroy@~1.0.4: resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80" integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA= -detect-libc@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" - integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups= - detect-newline@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" @@ -4690,13 +4650,6 @@ fs-extra@3.0.1: jsonfile "^3.0.0" universalify "^0.1.0" -fs-minipass@^1.2.5: - version "1.2.7" - resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7" - integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA== - dependencies: - minipass "^2.6.0" - fs-write-stream-atomic@^1.0.8: version "1.0.10" resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9" @@ -4749,20 +4702,6 @@ functions-have-names@^1.2.0: resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91" integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA== -gauge@~2.7.3: - version "2.7.4" - resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7" - integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c= - dependencies: - aproba "^1.0.3" - console-control-strings "^1.0.0" - has-unicode "^2.0.0" - object-assign "^4.1.0" - signal-exit "^3.0.0" - string-width "^1.0.1" - strip-ansi "^3.0.1" - wide-align "^1.1.0" - gensync@^1.0.0-beta.1: version "1.0.0-beta.1" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269" @@ -4991,11 +4930,6 @@ has-symbols@^1.0.0, has-symbols@^1.0.1: resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8" integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg== -has-unicode@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9" - integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk= - has-value@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f" @@ -5211,7 +5145,7 @@ husky@~4.2.3: slash "^3.0.0" which-pm-runs "^1.0.0" -iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4: +iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== @@ -5247,13 +5181,6 @@ iferr@^0.1.5: resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE= -ignore-walk@^3.0.1: - version "3.0.3" - resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37" - integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw== - dependencies: - minimatch "^3.0.4" - ignore@^3.3.5: version "3.3.10" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043" @@ -5385,7 +5312,7 @@ inherits@2.0.3: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= -ini@^1.3.5, ini@~1.3.0: +ini@^1.3.5: version "1.3.5" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== @@ -6986,21 +6913,6 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== -minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0: - version "2.9.0" - resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6" - integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg== - dependencies: - safe-buffer "^5.1.2" - yallist "^3.0.0" - -minizlib@^1.2.1: - version "1.3.3" - resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d" - integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q== - dependencies: - minipass "^2.9.0" - mississippi@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022" @@ -7030,7 +6942,7 @@ mixin-deep@^1.2.0: for-in "^1.0.2" is-extendable "^1.0.1" -mkdirp@^0.5, mkdirp@^0.5.0, mkdirp@^0.5.1: +mkdirp@^0.5, mkdirp@^0.5.1: version "0.5.3" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.3.tgz#5a514b7179259287952881e94410ec5465659f8c" integrity sha512-P+2gwrFqx8lhew375MQHHeTlY8AuOJSrGf0R5ddkEndUkmwpgUob/vQuBD1V22/Cw1/lJr4x+EjllSezBThzBg== @@ -7122,15 +7034,6 @@ nearley@^2.7.10: randexp "0.4.6" semver "^5.4.1" -needle@^2.2.1: - version "2.3.3" - resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.3.tgz#a041ad1d04a871b0ebb666f40baaf1fb47867117" - integrity sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw== - dependencies: - debug "^3.2.6" - iconv-lite "^0.4.4" - sax "^1.2.4" - negotiator@0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" @@ -7214,22 +7117,6 @@ node-notifier@^6.0.0: shellwords "^0.1.1" which "^1.3.1" -node-pre-gyp@*: - version "0.14.0" - resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83" - integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA== - dependencies: - detect-libc "^1.0.2" - mkdirp "^0.5.1" - needle "^2.2.1" - nopt "^4.0.1" - npm-packlist "^1.1.6" - npmlog "^4.0.2" - rc "^1.2.7" - rimraf "^2.6.1" - semver "^5.3.0" - tar "^4.4.2" - node-releases@^1.1.47, node-releases@^1.1.52: version "1.1.52" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.52.tgz#bcffee3e0a758e92e44ecfaecd0a47554b0bcba9" @@ -7237,14 +7124,6 @@ node-releases@^1.1.47, node-releases@^1.1.52: dependencies: semver "^6.3.0" -nopt@^4.0.1: - version "4.0.3" - resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48" - integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg== - dependencies: - abbrev "1" - osenv "^0.1.4" - normalize-package-data@^2.3.2, normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" @@ -7282,27 +7161,6 @@ normalize.css@~8.0.1: resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== -npm-bundled@^1.0.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b" - integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA== - dependencies: - npm-normalize-package-bin "^1.0.1" - -npm-normalize-package-bin@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2" - integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA== - -npm-packlist@^1.1.6: - version "1.4.8" - resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e" - integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A== - dependencies: - ignore-walk "^3.0.1" - npm-bundled "^1.0.1" - npm-normalize-package-bin "^1.0.1" - npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" @@ -7317,16 +7175,6 @@ npm-run-path@^4.0.0: dependencies: path-key "^3.0.0" -npmlog@^4.0.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b" - integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg== - dependencies: - are-we-there-yet "~1.1.2" - console-control-strings "~1.1.0" - gauge "~2.7.3" - set-blocking "~2.0.0" - nth-check@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c" @@ -7548,11 +7396,6 @@ os-browserify@^0.3.0: resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27" integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc= -os-homedir@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3" - integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M= - os-locale@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9" @@ -7560,19 +7403,11 @@ os-locale@^1.4.0: dependencies: lcid "^1.0.0" -os-tmpdir@^1.0.0, os-tmpdir@~1.0.2: +os-tmpdir@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -osenv@^0.1.4: - version "0.1.5" - resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410" - integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g== - dependencies: - os-homedir "^1.0.0" - os-tmpdir "^1.0.0" - p-each-series@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48" @@ -8730,16 +8565,6 @@ raw-body@^2.3.2: iconv-lite "0.4.24" unpipe "1.0.0" -rc@^1.2.7: - version "1.2.8" - resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" - integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw== - dependencies: - deep-extend "^0.6.0" - ini "~1.3.0" - minimist "^1.2.0" - strip-json-comments "~2.0.1" - react-deep-force-update@~2.1.3: version "2.1.3" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.3.tgz#740612322e617bcced38f61794a4af75dc3d98e7" @@ -8890,7 +8715,7 @@ read-pkg@^5.2.0: parse-json "^5.0.0" type-fest "^0.6.0" -"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6: +"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6: version "2.3.7" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57" integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw== @@ -9322,7 +9147,7 @@ rimraf@2.6.3: dependencies: glob "^7.1.3" -rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3: +rimraf@^2.5.4, rimraf@^2.6.3: version "2.7.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== @@ -9439,11 +9264,6 @@ sane@^4.0.3: minimist "^1.1.1" walker "~1.0.5" -sax@^1.2.4: - version "1.2.4" - resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" - integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== - saxes@^3.1.9: version "3.1.11" resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b" @@ -9486,7 +9306,7 @@ semver-regex@^2.0.0: resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338" integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw== -"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1: +"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== @@ -9592,7 +9412,7 @@ server-destroy@1.0.1: resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd" integrity sha1-8Tv5KOQrnD55OD5hzDmYtdFObN0= -set-blocking@^2.0.0, set-blocking@~2.0.0: +set-blocking@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= @@ -10030,7 +9850,7 @@ string-width@^1.0.1, string-width@^1.0.2: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" -"string-width@^1.0.2 || 2", string-width@^2.1.1: +string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw== @@ -10193,11 +10013,6 @@ strip-json-comments@^3.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7" integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw== -strip-json-comments@~2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" - integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= - style-loader@~1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.1.3.tgz#9e826e69c683c4d9bf9db924f85e9abb30d5e200" @@ -10362,19 +10177,6 @@ tapable@^1.0.0, tapable@^1.1.3: resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== -tar@^4.4.2: - version "4.4.13" - resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525" - integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA== - dependencies: - chownr "^1.1.1" - fs-minipass "^1.2.5" - minipass "^2.8.6" - minizlib "^1.2.1" - mkdirp "^0.5.0" - safe-buffer "^5.1.2" - yallist "^3.0.3" - terminal-link@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994" @@ -11181,13 +10983,6 @@ which@^2.0.1: dependencies: isexe "^2.0.0" -wide-align@^1.1.0: - version "1.1.3" - resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457" - integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA== - dependencies: - string-width "^1.0.2 || 2" - window-size@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075" @@ -11322,7 +11117,7 @@ y18n@^4.0.0: resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b" integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w== -yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3: +yallist@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== From e5eecef640cecf86b073c9263223ec96a5c1f6fb Mon Sep 17 00:00:00 2001 From: sasha4ox Date: Sat, 28 Mar 2020 13:55:03 +0200 Subject: [PATCH 2/3] add fetchAsync as utils --- src/actions/login.js | 20 +++++++++++++++----- src/routes/index.js | 14 +++++++++++++- src/routes/login/Login.js | 5 +++-- src/utils/fetch.js | 19 +++++++++++++++++++ 4 files changed, 50 insertions(+), 8 deletions(-) create mode 100644 src/utils/fetch.js diff --git a/src/actions/login.js b/src/actions/login.js index 9eb8d7c..cb99ade 100644 --- a/src/actions/login.js +++ b/src/actions/login.js @@ -1,3 +1,4 @@ +import cookie from 'isomorphic-cookie'; import { LOGIN_START, LOGIN_SUCCESS, @@ -5,14 +6,20 @@ import { REGISTRATION_START, REGISTRATION_SUCCESS, REGISTRATION_FAILURE, + apiURL, } from '../constants'; +import fetchAsync from '../utils/fetch'; +const maxAge = 604800; // a week export function loginStart() { return { type: LOGIN_START, }; } -export function loginSuccess() { +export function loginSuccess(data) { + cookie.save('token', data.token, { + maxAge, + }); return { type: LOGIN_SUCCESS, }; @@ -23,12 +30,15 @@ export function loginFailure() { type: LOGIN_FAILURE, }; } -export function login() { - return dispatch => { +export function login(loginValue) { + return async dispatch => { dispatch(loginStart()); try { - // fetcing to server - return dispatch(loginSuccess()); + const data = await fetchAsync(`${apiURL}/auth`, 'POST', loginValue); + if (!data.token) { + return dispatch(loginFailure()); + } + return dispatch(loginSuccess(data)); } catch (error) { return dispatch(loginFailure()); } diff --git a/src/routes/index.js b/src/routes/index.js index f2a9839..d53c7f8 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -1,18 +1,30 @@ import invoke from 'lodash/invoke'; import nth from 'lodash/nth'; +// import cookie from 'isomorphic-cookie'; const routes = [ { action({ next }) { return next(); }, - children: [], + children: [ + { + load: () => import('./login'), + path: '/login', + }, + ], path: '', }, { async action({ next }) { // Execute each child route until one of them return the result const route = await next(); + if ( + // !cookie.load('token') + false // at this time false!!! + ) { + route.redirect = '/login'; + } // Provide default values for title, description etc. route.title = `${route.title || 'Untitled Page'}`; diff --git a/src/routes/login/Login.js b/src/routes/login/Login.js index 25eaab8..60bb850 100644 --- a/src/routes/login/Login.js +++ b/src/routes/login/Login.js @@ -28,6 +28,7 @@ const validate = value => { function Login() { const formLoginState = useSelector(state => state.form.Login); + const formLoginValue = useSelector(state => state.form.Login.values); const dispatch = useDispatch(); useStyles(s); @@ -36,14 +37,14 @@ function Login() { event.preventDefault(); const { name } = event.target; if (name === 'login') { - return dispatch(login()); + return dispatch(login(formLoginValue)); } if (name === 'registration') { return dispatch(registration()); } return true; }, - [dispatch], + [dispatch, formLoginValue], ); return (
diff --git a/src/utils/fetch.js b/src/utils/fetch.js new file mode 100644 index 0000000..c01ec66 --- /dev/null +++ b/src/utils/fetch.js @@ -0,0 +1,19 @@ +import nodeFetch from 'node-fetch'; + +const headersConfig = { + 'Content-Type': 'application/json', +}; +export default async function fetchAsync( + url, + method = 'GET', + body = null, + headers = headersConfig, +) { + const fetchingData = await nodeFetch(url, { + method, + body: JSON.stringify(body), + headers, + }); + const data = await fetchingData.json(); + return data; +} From a6e906e05356b0895af81139490a46358c8e5406 Mon Sep 17 00:00:00 2001 From: sasha4ox Date: Sun, 29 Mar 2020 17:58:56 +0300 Subject: [PATCH 3/3] add alert to form , add redux-form, redux --- src/actions/login.js | 80 +++++++++++++++---- src/constants/index.js | 3 + src/reducers/login.js | 22 +++++ src/routes/login/Login.css | 1 + src/routes/login/Login.js | 19 +++-- src/routes/login/components/Alert/Alert.js | 13 +++ .../CustomFieldLogin/CustomFieldLogin.js | 3 +- .../{ => LoginButton}/LoginButton.js | 4 +- src/utils/create-expires-cookie.js | 7 ++ 9 files changed, 123 insertions(+), 29 deletions(-) create mode 100644 src/routes/login/components/Alert/Alert.js rename src/routes/login/components/{ => LoginButton}/LoginButton.js (73%) create mode 100644 src/utils/create-expires-cookie.js diff --git a/src/actions/login.js b/src/actions/login.js index cb99ade..42852aa 100644 --- a/src/actions/login.js +++ b/src/actions/login.js @@ -1,4 +1,3 @@ -import cookie from 'isomorphic-cookie'; import { LOGIN_START, LOGIN_SUCCESS, @@ -7,40 +6,71 @@ import { REGISTRATION_SUCCESS, REGISTRATION_FAILURE, apiURL, + ALERT_SHOW, + ALERT_HIDE, } from '../constants'; import fetchAsync from '../utils/fetch'; +import createExpiresCookie from '../utils/create-expires-cookie'; -const maxAge = 604800; // a week +const cookie = require('isomorphic-cookie'); + +const minutesOfCookieLive = 60; export function loginStart() { return { type: LOGIN_START, }; } export function loginSuccess(data) { - cookie.save('token', data.token, { - maxAge, + cookie.save('token', data.data.token, { + expires: createExpiresCookie(minutesOfCookieLive), + secure: false, }); return { type: LOGIN_SUCCESS, + data, + }; +} +export function alertShow(text) { + return { + type: ALERT_SHOW, + text, + }; +} +export function alertHide() { + return { + type: ALERT_HIDE, + }; +} +export function alertCreator(text) { + const millisecondsToAlertDisapear = 3000; + return dispatch => { + dispatch(alertShow(text)); + setTimeout(() => { + dispatch(alertHide()); + }, millisecondsToAlertDisapear); }; } -export function loginFailure() { +export function loginFailure(data) { return { type: LOGIN_FAILURE, + data, }; } export function login(loginValue) { return async dispatch => { dispatch(loginStart()); try { - const data = await fetchAsync(`${apiURL}/auth`, 'POST', loginValue); - if (!data.token) { - return dispatch(loginFailure()); + const payload = await fetchAsync(`${apiURL}/login`, 'POST', loginValue); + if (!payload.data) { + dispatch(alertCreator(payload.message)); + return dispatch(loginFailure(payload)); } - return dispatch(loginSuccess(data)); + dispatch(alertCreator(payload.message)); + return dispatch(loginSuccess(payload)); } catch (error) { - return dispatch(loginFailure()); + dispatch(alertCreator('Wow, some error appear')); + return dispatch(loginFailure(error)); } }; } @@ -50,26 +80,42 @@ export function registrationStart() { type: REGISTRATION_START, }; } -export function registrationSuccess() { +export function registrationSuccess(data) { + cookie.save('token', data.data.token, { + expires: createExpiresCookie(minutesOfCookieLive), + secure: false, + }); return { type: REGISTRATION_SUCCESS, + data, }; } -export function registrationFailure() { +export function registrationFailure(data) { return { type: REGISTRATION_FAILURE, + data, }; } -export function registration() { - return dispatch => { +export function registration(regitrationValue) { + return async dispatch => { dispatch(registrationStart()); try { - // fetching registration - return dispatch(registrationSuccess()); + const payload = await fetchAsync( + `${apiURL}/registration`, + 'POST', + regitrationValue, + ); + if (!payload.data) { + dispatch(alertCreator(payload.message)); + return dispatch(registrationFailure(payload)); + } + dispatch(alertCreator(payload.message)); + return dispatch(registrationSuccess(payload)); } catch (error) { - return dispatch(registrationFailure()); + dispatch(alertCreator('Wow, some error appear')); + return dispatch(registrationFailure(error)); } }; } diff --git a/src/constants/index.js b/src/constants/index.js index c4c2eae..cbc4020 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -25,6 +25,9 @@ export const LOGIN_FAILURE = 'LOGIN_FAILURE'; export const REGISTRATION_SUCCESS = 'REGISTRATION_SUCCESS'; export const REGISTRATION_FAILURE = 'REGISTRATION_FAILURE'; export const REGISTRATION_START = 'REGISTRATION_START'; +export const ALERT_SHOW = 'ALERT_SHOW'; +export const ALERT_HIDE = 'ALERT_HIDE'; + // login end export const CHAT_UPDATE_MESSAGE_BY_ID = 'CHAT_UPDATE_MESSAGE_BY_ID'; export const EDIT_MESSAGE = 'EDIT_MESSAGE'; diff --git a/src/reducers/login.js b/src/reducers/login.js index 0d9aeeb..571c3d1 100644 --- a/src/reducers/login.js +++ b/src/reducers/login.js @@ -5,10 +5,14 @@ import { REGISTRATION_START, REGISTRATION_FAILURE, REGISTRATION_SUCCESS, + ALERT_HIDE, + ALERT_SHOW, } from '../constants'; const initialState = { loading: false, + isLogedIn: false, + alert: null, }; export default function login(state = initialState, action) { switch (action.type) { @@ -21,11 +25,15 @@ export default function login(state = initialState, action) { return { ...state, loading: false, + ...action.data, + isLogedIn: true, }; case LOGIN_FAILURE: return { ...state, loading: false, + ...action.data, + isLogedIn: false, }; case REGISTRATION_START: return { @@ -36,11 +44,25 @@ export default function login(state = initialState, action) { return { ...state, loading: false, + ...action.data, + isLogedIn: false, }; case REGISTRATION_SUCCESS: return { ...state, loading: false, + ...action.data, + isLogedIn: true, + }; + case ALERT_HIDE: + return { + ...state, + alert: null, + }; + case ALERT_SHOW: + return { + ...state, + alert: action.text, }; default: return state; diff --git a/src/routes/login/Login.css b/src/routes/login/Login.css index 4c8280d..1aa894d 100644 --- a/src/routes/login/Login.css +++ b/src/routes/login/Login.css @@ -34,6 +34,7 @@ .textLogin { color: #cecece; + margin-top: 15px; display: flex; width: 100%; justify-content: center; diff --git a/src/routes/login/Login.js b/src/routes/login/Login.js index 60bb850..c335951 100644 --- a/src/routes/login/Login.js +++ b/src/routes/login/Login.js @@ -4,8 +4,9 @@ import useStyles from 'isomorphic-style-loader/useStyles'; import { Field, reduxForm } from 'redux-form'; import CustomFieldLogin from './components/CustomFieldLogin/CustomFieldLogin'; import s from './Login.css'; -import LoginButton from './components/LoginButton'; -import { login, registration } from '../../actions/login'; +import LoginButton from './components/LoginButton/LoginButton'; +import { login, registration, alertCreator } from '../../actions/login'; +import Alert from './components/Alert/Alert'; const validate = value => { const errors = {}; @@ -29,30 +30,34 @@ const validate = value => { function Login() { const formLoginState = useSelector(state => state.form.Login); const formLoginValue = useSelector(state => state.form.Login.values); + const loginState = useSelector(state => state.login); const dispatch = useDispatch(); useStyles(s); - const buttonLoginHandler = useCallback( event => { event.preventDefault(); const { name } = event.target; + if (formLoginState.syncErrors) { + return dispatch(alertCreator('Fields valuse are invalid')); + } if (name === 'login') { return dispatch(login(formLoginValue)); } if (name === 'registration') { - return dispatch(registration()); + return dispatch(registration(formLoginValue)); } return true; }, [dispatch, formLoginValue], ); + // console.info(formLoginState); return (
- {/* chat */}

Want to be on safe? Please, log in or register

+ {loginState.alert && } diff --git a/src/routes/login/components/Alert/Alert.js b/src/routes/login/components/Alert/Alert.js new file mode 100644 index 0000000..8d2c6e8 --- /dev/null +++ b/src/routes/login/components/Alert/Alert.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default function AlertMessage({ message }) { + return ( +
+ {message} +
+ ); +} +AlertMessage.propTypes = { + message: PropTypes.string.isRequired, +}; diff --git a/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js b/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js index 7f710c9..dcbbc3b 100644 --- a/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js +++ b/src/routes/login/components/CustomFieldLogin/CustomFieldLogin.js @@ -6,7 +6,6 @@ import s from './CustomFieldLogin.css'; export default function CustomFieldLogin({ input: { name, onBlur, onChange, onDragStart, onDrop, onFocus }, label, - // name, type, meta: { touched, error }, }) { @@ -45,7 +44,7 @@ CustomFieldLogin.propTypes = { }).isRequired, label: PropTypes.string, meta: PropTypes.shape({ - error: PropTypes.string.isRequired, + error: PropTypes.string, touched: PropTypes.bool.isRequired, }).isRequired, type: PropTypes.string, diff --git a/src/routes/login/components/LoginButton.js b/src/routes/login/components/LoginButton/LoginButton.js similarity index 73% rename from src/routes/login/components/LoginButton.js rename to src/routes/login/components/LoginButton/LoginButton.js index 788699b..89878f4 100644 --- a/src/routes/login/components/LoginButton.js +++ b/src/routes/login/components/LoginButton/LoginButton.js @@ -2,11 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import capitalize from 'lodash/capitalize'; -export default function LoginButton({ name, buttonLoginHandler, hasError }) { +export default function LoginButton({ name, buttonLoginHandler }) { return (