Bläddra i källkod

added page register and checkbox rembmer token in LocalStorage

makstravm 3 år sedan
förälder
incheckning
6d81cad6ac
3 ändrade filer med 38 tillägg och 41 borttagningar
  1. 19 2
      src/actions/index.js
  2. 16 11
      src/pages/Authorization.jsx
  3. 3 28
      src/redux/auth-reducer.js

+ 19 - 2
src/actions/index.js

@@ -26,14 +26,31 @@ export const actionLogin = (login, password) =>
             login(login:$login, password:$password)
         }`, { login, password }))
 
-export const actionFullLogin = (login, password) =>
+export const actionFullLogin = (login, password, remember) =>
     async dispatch => {
         let token = await dispatch(actionLogin(login, password))
         if (token) {
-            dispatch(actionAuthLogin(token))
+            dispatch(actionAuthLogin(token, remember))
         }
     }
 
+const actionRegister = (login, password) =>
+    actionPromise('register', gql(`mutation rega ($login:String!, $password:String!){
+                                    createUser(login: $login, password: $password){
+                                        _id login
+                                    }
+                                }`, { login, password }))
+
+export const actionFullRegister = (login, password, remember) =>
+    async dispatch => {
+        await actionRegister(login, password)
+        let token = await dispatch(actionLogin(login, password))
+        if (token) {
+            dispatch(actionAuthLogin(token, remember))
+        }
+    }
+
+
 export const actionProfilData = (_id) =>
     actionPromise('dataProfileAuth', gql(`query userOned($id:String!){
                         UserFindOne(query: $id){

+ 16 - 11
src/pages/Authorization.jsx

@@ -2,16 +2,14 @@ import React, { useState } from 'react'
 import authBg from '../images/authBg.png'
 import { connect } from 'react-redux'
 import { NavLink, Route } from 'react-router-dom'
-import { actionFullLogin } from '../actions'
+import { actionFullLogin, actionFullRegister } from '../actions'
 
-
-import { Form, Input, Button, Row, Col, Card, Divider } from 'antd';
+import { Form, Input, Button, Row, Col, Card, Divider, Checkbox } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 
 const FormInput = ({ buttonTitle, onSignIn }) => {
-    const onFinish = ({ login, password }) => {
-        console.log('Received values of form: ', );
-        onSignIn(login, password)
+    const onFinish = ({ login, password, remember }) => {
+        onSignIn(login, password, remember)
     };
     return (
         <Form
@@ -52,6 +50,16 @@ const FormInput = ({ buttonTitle, onSignIn }) => {
                     placeholder="Password"
                 />
             </Form.Item>
+            <Form.Item
+                name="remember"
+                valuePropName="checked"
+                wrapperCol={{
+                    offset: 8,
+                    span: 16,
+                }}
+            >
+                <Checkbox>Remember me</Checkbox>
+            </Form.Item>
             <Form.Item >
                 <Button type="primary" className="login-form-button" htmlType="submit">
                     {buttonTitle}
@@ -60,12 +68,10 @@ const FormInput = ({ buttonTitle, onSignIn }) => {
         </Form>
     )
 }
-const actionRegister = (login, pas) => alert('hi'+ login + ' ' + pas)
-const CLoginForm = connect(null, { onSignIn: actionFullLogin })(FormInput)
-const CRegisterForm = connect(null, { onSignIn: actionRegister })(FormInput)
+const CLoginForm = connect(null, { onSignIn: actionFullLogin})(FormInput)
+const CRegisterForm = connect(null, { onSignIn: actionFullRegister})(FormInput)
 
 export const Authorization = ({ match: { params: { _id } } }) => {
-    console.log(_id);
     return (
         <div className='Authorization' style={{ backgroundImage: `url(${authBg})` }}>
             <Row justify="end" align="middle" className='Authorization__form'>
@@ -76,7 +82,6 @@ export const Authorization = ({ match: { params: { _id } } }) => {
                         <NavLink activeClassName='active' to={'/auth/registration'}>Registration</NavLink>
                         <Divider>{_id === 'login' ? 'Log in' : 'Registration'}</Divider >
                         {_id === 'login' ? <CLoginForm buttonTitle={'Sign In'} /> : <CRegisterForm buttonTitle={'Sign up'} />}
-
                     </Card>
                 </Col>
             </Row >

+ 3 - 28
src/redux/auth-reducer.js

@@ -1,7 +1,7 @@
 import { jwtDecode } from '../helpers'
 
 
-export const authReducer = (state, { type, token }) => {
+export const authReducer = (state, { type, token, remember }) => {
     if (!state) {
         if (localStorage.authToken) {
             type = 'AUTH_LOGIN'
@@ -10,8 +10,7 @@ export const authReducer = (state, { type, token }) => {
     }
 
     if (type === 'AUTH_LOGIN') {
-        localStorage.setItem('authToken', token)
-
+        remember && localStorage.setItem('authToken', token)
         let payload = jwtDecode(token)
         if (typeof payload === 'object') {
             return {
@@ -28,33 +27,9 @@ export const authReducer = (state, { type, token }) => {
     return state
 }
 
-export const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token })
+export const actionAuthLogin = (token, remember) => ({ type: 'AUTH_LOGIN', token, remember })
 
 export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
 
 
 
-// const actionRegister = (login, password) =>
-//     actionPromise('register', gql(`
-//                 mutation reg($login:String, $password:String){
-//                 UserUpsert(user:{
-//                     login:$login,
-//                         password:$password,
-//                         nick:$login}){
-//                 _id login
-//                 }
-//             }
-//             `, { login, password }))
-
-// export const actionFullRegister = (login, password) =>
-//     async dispatch => {
-//         await actionRegister(login, password)
-//         let token = await dispatch(actionLogin(login, password))
-//         if (token) {
-//             dispatch(actionAuthLogin(token))
-//         }
-//     }
-
-
-
-