signIn/signUp auth is finally done && fetching status spinner added, tocken auth modified

src/components/common/protectedRoute/config.js

@@ -9,6 +9,7 @@ const createTestForm = lazy(() => import('./../../user-components/admin-componen
 const profilePage = lazy(() => import('./../../user-components/profilePage'));
 const categoriesPage = lazy(() => import('./../../user-components/categoriesPage'));
 
+
 export default [
     {
         path: routes.LANDING,

src/components/public-components/auth/signInForm/index.js

@@ -14,11 +14,13 @@ class Form extends React.Component {
     }
 
     render() {
-        const { invalid, handleSubmit, submitting } = this.props;
+        const { invalid, handleSubmit, submitting, requestError } = this.props;
 
         return (
             <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>
                 <h2 className="sign-form__header">Sign In</h2>
+                
+                {requestError && <p className="error-line error-line--warn error-line--no-margin">{requestError}</p>}
 
                 <Field className="sign-form__input sign-form__input--text" placeholder="Login" name="login" component={formInput} type="text" />
                 <Field className="sign-form__input sign-form__input--password" placeholder="Password" name="password" component={formInput} type="password" />

src/components/public-components/auth/signUpForm/index.js

@@ -12,13 +12,15 @@ class Form extends React.Component {
     }
 
     render() {
-        const { invalid, handleSubmit } = this.props;
+        const { invalid, handleSubmit, requestError } = this.props;
 
         return (
             <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>
 
                 <h2 className="sign-form__header">Sign Up</h2>
 
+                {requestError && <p className="error-line error-line--warn error-line--no-margin">{requestError}</p>}
+
                 <Field name="login" className="sign-form__input sign-form__input--text" placeholder="Login" component={formInput} type="text" />
 
                 <div className="sign-form__password-container">

src/constants/index.js

@@ -1,4 +1,4 @@
-export const SIGN_IN_URL = 'https://quiz.maxcrc.de/api/v1/user';
+export const SIGN_IN_URL = 'https://quiz.maxcrc.de/api/v1/user?';
 export const SIGN_IN_REQUEST = 'SIGN_IN_REQUEST';
 export const SIGN_IN_REQUEST_SUCCESS = 'SIGN_IN_REQUEST_SUCCESS';
 export const SIGN_IN_REQUEST_FAILURE = 'SIGN_IN_REQUEST_FAILURE';

src/containers/auth/SignInPage/index.js

@@ -6,22 +6,33 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router';
 import { HOME } from './../../../constants/routes';
 
-import SignInForm from './../../../components/public-components/auth/signInForm'
+import Spinner from './../../../components/common/spinner';
+import SignInForm from './../../../components/public-components/auth/signInForm';
 
 class SignInPage extends React.Component {
 
     render() {
         const { signInRequest, user } = this.props;
+
         return (
-            !(user.data)
-                ? (
-                    <div className="page sign-in">
-                        <SignInForm actions={{ signInRequest }} />
-                    </div>
-                )
-                : (
-                    <Redirect to={HOME} />
-                )
+            user.isFetching
+                ? <Spinner />
+                : user.error
+                    ? 
+                    (
+                        <div className="page sign-in">
+                            <SignInForm actions={{ signInRequest }} requestError={user.error} />
+                        </div>
+                    )
+                    : user.data
+                        ?
+                        < Redirect to={HOME} />
+                        :
+                        (
+                            <div className="page sign-in">
+                                <SignInForm actions={{ signInRequest }} />
+                            </div>
+                        )
         )
     }
 }

src/containers/auth/SignUpPage/index.js

@@ -6,22 +6,33 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router'
 import { HOME } from './../../../constants/routes';
 
+import Spinner from './../../../components/common/spinner';
 import SignUpForm from './../../../components/public-components/auth/signUpForm';
 
 class SignUpPage extends React.Component {
 
     render() {
         const { signUpRequest, user } = this.props;
+
         return (
-            !(user.data)
-                ? (
-                    <div className="page sign-up">
-                        <SignUpForm actions={{ signUpRequest }} />
-                    </div>
-                )
-                : (
-                    <Redirect to={HOME} />
-                )
+            user.isFetching
+                ? <Spinner />
+                : user.error
+                    ? 
+                    (
+                        <div className="page sign-up">
+                            <SignUpForm actions={{ signUpRequest }} requestError={user.error} />
+                        </div>
+                    )
+                    : user.data
+                        ?
+                        < Redirect to={HOME} />
+                        :
+                        (
+                            <div className="page sign-up">
+                                <SignUpForm actions={{ signUpRequest }} />
+                            </div>
+                        )
         )
     }
 }

src/containers/header/index.js

@@ -1,6 +1,4 @@
-import React, { Component } from "react";
 import { connect } from 'react-redux';
-import { func, object } from 'prop-types';
 import { bindActionCreators } from 'redux'
 
 import HeaderComponent from './../../components/public-components/header';

src/reducers/initialState/index.js

@@ -1,9 +1,8 @@
 export default {
-    user: {
-        
+    user: {       
         data: null,
         error: null,
-        gettingUser: null,
+        isFetching: null,
         isAdmin: null
     }
 }

src/reducers/user/index.js

@@ -16,7 +16,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST: {
             return {
                 ...state,
-                gettingUser: true,
+                isFetching: true,
                 error: null,
                 data: null
             }
@@ -24,7 +24,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST_SUCCESS: {
             return {
                 ...state,
-                gettingUser: false,
+                isFetching: false,
                 error: null,
                 data
             }
@@ -32,7 +32,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST_FAILURE: {
             return {
                 ...state,
-                gettingUser: false,
+                isFetching: false,
                 data: null,
                 error
             }
@@ -43,7 +43,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_IN_REQUEST: {
             return {
                 ...state,
-                gettingUser: true,
+                isFetching: true,
                 error: null,
                 data: null
             }
@@ -51,7 +51,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_IN_REQUEST_SUCCESS: {
             return {
                 ...state,
-                gettingUser: false,
+                isFetching: false,
                 error: null,
                 data                
             }
@@ -59,7 +59,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_IN_REQUEST_FAILURE: {
             return {
                 ...state,
-                gettingUser: false,
+                isFetching: false,
                 data: null,
                 error
             }

src/saga/auth/signIn/index.js

@@ -7,18 +7,20 @@ import { SIGN_IN_URL } from './../../../constants/index'
 
 // worker-saga for signing in
 
-export default function* ({ payload: requestBody }) {
+export default function* ({ payload: { login, password } }) {
     try {
         const payload = yield call(() =>
-            axios.post(SIGN_IN_URL, requestBody)
-                .then(({ data }) => data)
+            axios.get(`${SIGN_IN_URL}login=${login}&password=${password}`)
+                .then(({ data: [payload] }) => payload)
         );
-        
+
+        yield call(() => { if (!payload) throw (new Error("No such email or password")) })
+
         yield put(actions.signInRequestSucces(payload));
-        yield call(localStorage.setItem, token, payload);
+        yield call(() => localStorage.setItem(token, JSON.stringify(payload)));
     }
     catch ({ message }) {
         yield put(actions.signInRequestFailure(message))
-        yield call(localStorage.removeItem, token);
+        yield call(() => localStorage.removeItem(token));
     }
 }

src/saga/auth/signUp/index.js

@@ -16,10 +16,10 @@ export default function* ({ payload: requestBody }) {
         );
 
         yield put(actions.signUpRequestSucces(payload));
-        yield call(() => {localStorage.setItem(token, JSON.stringify(payload))});
+        yield call(() => { localStorage.setItem(token, JSON.stringify(payload)) });
     }
     catch (exception) {
         yield put(actions.signUpRequestFailure(exception.message));
-        yield call(() => {localStorage.removeItem(token)});
+        yield call(() => { localStorage.removeItem(token) });
     }
 }

src/styles/abstracts/_variables.scss

@@ -15,5 +15,5 @@ $color-lightsteelgrey-transparent: rgba(190, 195, 221, .9);
 $color-lightsteelblue: #B0C4DE;
 $color-lightsteelblue-transparent: rgba(176, 196, 222, .9);
 
-$padding-top-fixed: 155px;
+$padding-top-fixed: 175px;
 $padding-bottom-fixed: 45px;

src/styles/components/_error-line.scss

@@ -0,0 +1,17 @@
+.error-line {
+    color: $color-red;
+    font-size: 18px;
+    font-family: 'Poiret One', cursive;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+
+    &--warn {
+        &::before {
+            content: '⚠ ';
+        }
+    }
+    &--no-margin {
+        margin: 0;
+    }
+}

src/styles/index.scss

@@ -4,6 +4,8 @@
 @import "base/typography";
 
 @import "components/page";
+@import "components/error-line";
+
 @import "components/container";
 @import "components/button";
 @import "components/header";