convert storage *.ts to *.js && upgrade login && AppService already runable

package-lock.json

@@ -14595,6 +14595,11 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-csrf": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/redux-csrf/-/redux-csrf-1.1.0.tgz",
+      "integrity": "sha1-HxRmgeeQWadAxy8nuREX0xN3en0="
+    },
     "redux-thunk": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",

package.json

@@ -21,7 +21,9 @@
     "react-dom": "^16.12.0",
     "react-helmet": "^6.0.0",
     "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-csrf": "^1.1.0",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "prettier": "2.0.5"

src/components/index/indexConsole/commands/fetchCommands/Login.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { connect } from 'react-redux'
+
+import { postAuth } from '../../../../../stores/user/duck/operations'
+
+
+const Login = ({ user, postAuth }) => {
+    
+    const loginInput = React.createRef()
+    const passwInput = React.createRef()
+
+    const [message, setMessage] = useState('')
+
+    const login = (event) => {
+        event.preventDefault()
+        if ( loginInput.current.value !== '' &&
+        passwInput.current.value !== '') {
+            postAuth(
+                loginInput.current.value, 
+                passwInput.current.value
+            ).then( response => {
+                setMessage(response['error'])
+            })
+            document.getElementById('passwInput').disbled = true
+            document.getElementById('passwInput').disabled = true
+        } else if ( passwInput.current.value === '' ) {
+            document.getElementById('passwInput').focus()
+        }
+    }
+    
+    return (
+        <div>
+            <form onSubmit={ login }>
+                login:
+                <input 
+                    id='loginInput'
+                    ref={ loginInput }
+                />
+                <br />
+                password:
+                <input 
+                    id='passwInput'
+                    type='password'
+                    ref={ passwInput }
+                />
+                <br />
+                { message }
+                <button type='submit' />
+            </form>
+        </div>
+    )
+}
+
+const mapStateToProps = state => ({
+    user: state.user
+})
+
+const mapDispatchToProps = dispatch => ({
+    postAuth: (username, password) => dispatch( postAuth(username, password) )
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login)

src/components/index/indexConsole/commands/fetchCommands/Login.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux'
-
-import UserService from '../../../../../stores/user/duck/operations'
-
-const loginInput: any = React.createRef()
-const passwInput: any = React.createRef()
-
-const Login = ( user) => {
-    
-
-    const login = (event) => {
-        event.preventDefault()
-        UserService.postAuth(
-            loginInput.current.value,
-            passwInput.current.value
-        )
-    }
-    
-    return (
-        <div>
-            <form onSubmit={ login }>
-                login:
-                <input 
-                    ref={ loginInput }
-                    autoFocus
-                />
-                <br />
-                password:
-                <input 
-                    ref={ passwInput }
-                    autoFocus
-                />
-                <button type='submit' />
-            </form>
-        </div>
-    )
-}
-
-const mapStateToProps = state => ({
-    user: state.user
-})
-
-// const mapDispatchToProps = dispatch => ({
-//     postAuth: user => dispatch( UserService.postAuth(user.name, user.pass) )
-// })
-
-export default connect(mapStateToProps) (Login)

src/components/index/indexConsole/indexConsole.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
 import commands from './commands/commands'
-import Login from './commands/fetchCommands/Login.tsx' 
+import Login from './commands/fetchCommands/Login' 
 // import Logout from './commands/fetchCommands/Logout'
 
 import '../../../styles/general.scss'
@@ -36,7 +36,8 @@ const IndexConsole = ( user ) => {
         consoleUser += inputValue + '\n'
         if ( inputValue === 'help' )
             setConsoleHistory( consoleHistory + consoleUser + commands.help() )
-        if ( inputValue === 'login' ) {
+        else if ( inputValue === 'login' ) {
+            setConsoleHistory( consoleHistory + consoleUser )
             setVisibleLoginForm( !loginCommand )
         }
         else if ( inputValue === 'clean' )
@@ -58,7 +59,15 @@ const IndexConsole = ( user ) => {
             <pre id='consoleHistory'>
                     { consoleHistory }
             </pre>
-            <form onSubmit={ detectCommand }>
+            <div id='inputForms'>
+                <div style={ loginCommand === true ? {display: 'block'} : {display: 'none'} } >
+                    <Login visible={ loginCommand } consoleHistory={ consoleHistory } />
+                </div>
+                <div style={ logoutCommand === true ? {display: 'block'} : {display: 'none'} } >
+                    
+                </div>
+            </div>
+            <form onSubmit={ detectCommand } style={ loginCommand || logoutCommand ? {display: 'none'} : {display: 'block'} }>
                 { consoleUser }
                 <input 
                     id='consoleInput'
@@ -67,14 +76,6 @@ const IndexConsole = ( user ) => {
                     autoFocus
                 />
             </form>
-            <div id='inputForms'>
-                <div style={ loginCommand === true ? {display: 'block'} : {display: 'none'} } >
-                    <Login />
-                </div>
-                <div style={ logoutCommand === true ? {display: 'block'} : {display: 'none'} } >
-                    
-                </div>
-            </div>
         </div>
     )
 }

src/pages/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import IndexConsole from '../components/index/indexConsole/indexConsole'
-import { store } from '../stores/store.ts'
+import { store } from '../stores/store'
 import { Provider } from 'react-redux'
 
 const IndexPage = () => (

src/stores/APIAddress.js

@@ -0,0 +1,5 @@
+const address = 'http://localhost:9090/'
+
+export {
+    address
+}

src/stores/APIAddress.ts

@@ -1,5 +0,0 @@
-const address = 'localhost:9090/'
-
-export {
-    address
-}

src/stores/AppService.js

@@ -0,0 +1,82 @@
+import { address } from './APIAddress'
+
+const getCookie = (name) => {
+    if (!document.cookie) {
+      return null;
+    }
+    const token = document.cookie.split(';')
+      .map(c => c.trim())
+      .filter(c => c.startsWith(name + '='));
+
+    if (token.length === 0) {
+      return null;
+    }
+    return decodeURIComponent(token[0].split('=')[1]);
+  }
+
+const csrftoken = getCookie('csrftoken')
+
+let defaultToken = 'empty token'
+
+const responseGD = async (address, method, token) => {
+    const response = await fetch(address, {
+        method: method,
+        credentials: 'same-origin',
+        headers: {
+            "Authorization": token,
+            "X-CSRFToken": csrftoken,
+            "accept": "application/json",
+            "Content-Type": "application/json"
+        }
+    })
+    return response.json()
+}
+
+const responseCRU = async (address, method, body, token) => {
+    const response = await fetch(address, {
+        method: method,
+        credentials: 'same-origin',
+        body: JSON.stringify(body),
+        headers: {
+            "Authorization": token,
+            "X-CSRFToken": csrftoken,
+            "accept": "application/json",
+            "Content-Type": "application/json"
+        }
+    })
+    return response.json()
+}
+
+const _getList = async (endpoint) => {
+    return await responseGD(address + endpoint, 'GET', defaultToken)
+}
+
+const _getOne = async (endpoint) => {
+    return await responseGD(address + endpoint, 'GET', defaultToken)
+}
+
+const _post = async (endpoint, body, token) => {
+    return await responseCRU(address + endpoint, 'POST', body, token)
+}
+
+const _put = async (endpoint, body, token) => {
+    return await responseCRU(address + endpoint, 'PUT', body, token)
+}
+
+const _patch = async (endpoint, body, token) => {
+    return await responseCRU(address + endpoint, 'PATCH', body, token)
+}
+
+const _delete = async (endpoint, token) => {
+    return await responseGD(address + endpoint, 'DELETE', token)
+}
+
+export default {
+    _getList,
+    _getOne,
+    _post,
+    _put,
+    _patch,
+    _delete,
+    defaultToken
+}

src/stores/AppService.ts

@@ -1,50 +0,0 @@
-import { address } from './APIAddress'
-
-export default class AbstractService {
-
-    public defaultToken: string = 'empty'
-
-    private async responseGD(address: string, method: string) {
-        const response = await fetch( address, {
-            method: method,
-            credentials: 'same-origin',
-        })
-        return response.json()
-    }
-
-    private async responseCRU(address: string, method: string, body: any, token: string) {
-        const response = await fetch( address, {
-            method: method,
-            credentials: 'same-origin',
-            body: JSON.stringify(body),
-            headers: {
-                "Authorization": token
-            }
-        })
-        return response.json()
-    }
-
-    public async getList(endpoint: string) : Promise<any> {
-        return await this.responseGD(address + endpoint, 'GET')
-    }
-
-    public async getOne(endpoint: string) : Promise<any> {
-        return await this.responseGD(address + endpoint, 'GET')
-    }
-
-    public async post(endpoint: string, body: any, token: string) : Promise<any> {
-        return await this.responseCRU(address + endpoint, 'POST', body, token)
-    }
-
-    public async put(endpoint: string, body: any, token: string) : Promise<any> {
-        return await this.responseCRU(address + endpoint, 'PUT', body, token)
-    }
-
-    public async patch(endpoint: string, body: any, token: string) : Promise<any> {
-        return await this.responseCRU(address + endpoint, 'PATCH', body, token)
-    }
-
-    public async delete(endpoint: string, token: string) : Promise<any> {
-        return await this.responseGD(address + endpoint, 'DELETE')
-    }
-}

src/stores/store.js

@@ -1,11 +1,13 @@
-import { createStore } from 'redux'
+import { createStore, applyMiddleware } from 'redux'
 import { saveState, loadState } from './loadStore'
 import rootReducer from './reducers'
 import loadash from 'lodash'
+import thunk from 'redux-thunk'
 
 const persistedState = loadState()
 
-export const store = createStore(rootReducer, persistedState)
+export const store = createStore(rootReducer, persistedState, applyMiddleware(thunk))
+
 
 store.subscribe( () => {
     saveState({

src/stores/user/duck/actions.js

@@ -1,11 +1,11 @@
 import types from './types'
 
 const login = item => ({
-    type: types.LOGOUT_USER, item
+    type: types.LOGIN_USER, item
 })
 
-const logout = () => ({
+const logout = item => ({
-    type: types.LOGOUT_USER
+    type: types.LOGOUT_USER, item
 })
 
 export default {

src/stores/user/duck/class.ts

@@ -1,9 +0,0 @@
-export default class User {
-    public id: number
-    public username: string
-    public email: string
-    public ip: string
-    public city: string
-    public country: string
-    public token: string
-}

src/stores/user/duck/operations.js

@@ -0,0 +1,83 @@
+import AppService from '../../AppService'
+
+import actions from './actions'
+
+
+let serviceUser = {}
+let response
+
+const endpoint = 'user/'
+
+// Authorization
+
+export const postAuth = (username, password) => async (dispatch) => {
+    let body = {
+        username: username,
+        password: password
+    }
+    return await AppService._post(
+        endpoint + 'auth',
+        body,
+        AppService.defaultToken
+    ).then( response => {
+        try {
+            serviceUser = {
+                id: response.user.id,
+                username: response.user.username,
+                email: response.user.email,
+                ip: response.user.ip,
+                city: response.user.city,
+                country: response.user.country,
+                token: response.Authorization
+            }
+            dispatch(actions.login(serviceUser))
+            return { error: 'login success' }
+        } catch {
+            return response
+        }
+    })
+}
+
+export const deleteAuth = (token)  => async (dispatch) => {
+    response = await AppService._delete(
+        endpoint + 'auth',
+        token
+    )
+    dispatch(actions.logout())
+}
+
+// User CRUD
+
+export const registerUser = async (user) => {
+    response = await AppService._post(
+        this.endpoint,
+        user,
+        AppService.defaultToken
+    )
+}
+
+export const updateUser = (user, id, token) => async (dispatch) => {
+    response = await AppService._patch(
+        endpoint + id,
+        user,
+        token
+    )
+    serviceUser = {
+        id: response.user.id,
+        username: response.user.username,
+        email: response.user.email,
+        ip: response.user.ip,
+        city: response.user.city,
+        country: response.user.country,
+        token: token
+    }
+    dispatch(actions.login(serviceUser))
+}
+
+export const deleteUser = async (id, token) => {
+    response = await AppService._delete(
+        endpoint + id,
+        token
+    )
+    deleteAuth(token)
+}

src/stores/user/duck/operations.ts

@@ -1,84 +0,0 @@
-import { useDispatch } from 'react-redux'
-import AppService from '../../AppService'
-
-import actions from './actions'
-import User from './class'
-
-
-export default class UserService {
-
-    private static service: AppService
-    private static serviceUser: User
-    private static response: any
-
-    private static endpoint: string = 'user/'
-    private static dispatch: any = useDispatch()
-
-    // Authorization
-
-    public static async postAuth(username: string, password: string) {
-        const body = { 
-            username: username, 
-            password: password
-        }
-        this.response = await this.service.post(
-            this.endpoint + 'auth', 
-            body, 
-            this.service.defaultToken
-        )
-        this.serviceUser = {
-            id: this.response.payload.user.id,
-            username: this.response.payload.user.username,
-            email: this.response.payload.user.email,
-            ip: this.response.payload.user.ip,
-            city: this.response.payload.user.city,
-            country: this.response.payload.user.country,
-            token: this.response.payload.Authorization
-        }
-        this.dispatch(actions.login(this.serviceUser))
-    }
-
-    public static async deleteAuth(token: string) {
-        this.response = await this.service.delete(
-            this.endpoint + 'auth',
-            token
-        )
-        this.dispatch(actions.logout())
-    }
-
-    // User CRUD
-
-    public static async registerUser(user: any) {
-        this.response = await this.service.post(
-            this.endpoint,
-            user,
-            this.service.defaultToken
-        )
-    }
-
-    public static async updateUser(user: any, id: number, token: string) {
-        this.response = await this.service.patch(
-            this.endpoint + id,
-            user,
-            token
-        )
-        this.serviceUser = {
-            id: this.response.payload.user.id,
-            username: this.response.payload.user.username,
-            email: this.response.payload.user.email,
-            ip: this.response.payload.user.ip,
-            city: this.response.payload.user.city,
-            country: this.response.payload.user.country,
-            token: token
-        }
-        this.dispatch(actions.login(this.serviceUser))
-    }
-
-    public static async deleteUser(id: number, token: string) {
-        this.response = await this.service.delete(
-            this.endpoint + id,
-            token
-        )
-        this.deleteAuth(token)
-    }
-}

src/stores/user/duck/reducers.js

@@ -1,7 +1,6 @@
 import types from './types'
-import User from './class'
 
-const INITIAL_STATE: User = {
+const INITIAL_STATE = {
     id: -1,
     username: '',
     email: '',
@@ -11,7 +10,7 @@ const INITIAL_STATE: User = {
     token: ''
 }
 
-const userReducer = (state=INITIAL_STATE, action) => {
+const userReducer = (state = INITIAL_STATE, action) => {
     switch(action.type) {
         case types.LOGIN_USER:
             return {

src/stores/user/duck/types.js

@@ -0,0 +1,7 @@
+const LOGIN_USER = 'LOGIN_USER'
+const LOGOUT_USER = 'LOGOUT_USER'
+
+export default {
+    LOGIN_USER,
+    LOGOUT_USER
+}

src/stores/user/duck/types.ts

@@ -1,7 +0,0 @@
-const LOGIN_USER: string = 'LOGIN_USER'
-const LOGOUT_USER: string = 'LOGOUT_USER'
-
-export default {
-    LOGIN_USER,
-    LOGOUT_USER
-}

src/styles/general.scss

@@ -75,4 +75,8 @@ body {
         font-family: Ubuntu;
         font-size: 16px;
     }
+
+    button {
+        display: none;
+    }
 }