diff --git a/package-lock.json b/package-lock.json
index 49a97c4..2b1e717 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 5391d92..2e977cb 100755
--- a/package.json
+++ b/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"
diff --git a/src/components/index/indexConsole/commands/fetchCommands/Login.js b/src/components/index/indexConsole/commands/fetchCommands/Login.js
new file mode 100644
index 0000000..183f4e8
--- /dev/null
+++ b/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 (
+
+
+
+ )
+}
+
+const mapStateToProps = state => ({
+ user: state.user
+})
+
+const mapDispatchToProps = dispatch => ({
+ postAuth: (username, password) => dispatch( postAuth(username, password) )
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login)
\ No newline at end of file
diff --git a/src/components/index/indexConsole/commands/fetchCommands/Login.tsx b/src/components/index/indexConsole/commands/fetchCommands/Login.tsx
deleted file mode 100644
index b692f60..0000000
--- a/src/components/index/indexConsole/commands/fetchCommands/Login.tsx
+++ /dev/null
@@ -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 (
-
-
-
- )
-}
-
-const mapStateToProps = state => ({
- user: state.user
-})
-
-// const mapDispatchToProps = dispatch => ({
-// postAuth: user => dispatch( UserService.postAuth(user.name, user.pass) )
-// })
-
-export default connect(mapStateToProps) (Login)
\ No newline at end of file
diff --git a/src/components/index/indexConsole/indexConsole.js b/src/components/index/indexConsole/indexConsole.js
index 7233755..bef96b6 100644
--- a/src/components/index/indexConsole/indexConsole.js
+++ b/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 ) => {
{ consoleHistory }
-
-
)
}
diff --git a/src/pages/index.js b/src/pages/index.js
index 41b096c..a5a1c65 100644
--- a/src/pages/index.js
+++ b/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 = () => (
diff --git a/src/stores/APIAddress.js b/src/stores/APIAddress.js
new file mode 100644
index 0000000..c0984e5
--- /dev/null
+++ b/src/stores/APIAddress.js
@@ -0,0 +1,5 @@
+const address = 'http://localhost:9090/'
+
+export {
+ address
+}
\ No newline at end of file
diff --git a/src/stores/APIAddress.ts b/src/stores/APIAddress.ts
deleted file mode 100644
index c3d8b66..0000000
--- a/src/stores/APIAddress.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const address = 'localhost:9090/'
-
-export {
- address
-}
\ No newline at end of file
diff --git a/src/stores/AppService.js b/src/stores/AppService.js
new file mode 100644
index 0000000..9bbdcd5
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/stores/AppService.ts b/src/stores/AppService.ts
deleted file mode 100644
index f2b0143..0000000
--- a/src/stores/AppService.ts
+++ /dev/null
@@ -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 {
- return await this.responseGD(address + endpoint, 'GET')
- }
-
- public async getOne(endpoint: string) : Promise {
- return await this.responseGD(address + endpoint, 'GET')
- }
-
- public async post(endpoint: string, body: any, token: string) : Promise {
- return await this.responseCRU(address + endpoint, 'POST', body, token)
- }
-
- public async put(endpoint: string, body: any, token: string) : Promise {
- return await this.responseCRU(address + endpoint, 'PUT', body, token)
- }
-
- public async patch(endpoint: string, body: any, token: string) : Promise {
- return await this.responseCRU(address + endpoint, 'PATCH', body, token)
- }
-
- public async delete(endpoint: string, token: string) : Promise {
- return await this.responseGD(address + endpoint, 'DELETE')
- }
-}
\ No newline at end of file
diff --git a/src/stores/loadStore.ts b/src/stores/loadStore.js
similarity index 100%
rename from src/stores/loadStore.ts
rename to src/stores/loadStore.js
diff --git a/src/stores/reducers.ts b/src/stores/reducers.js
similarity index 100%
rename from src/stores/reducers.ts
rename to src/stores/reducers.js
diff --git a/src/stores/store.ts b/src/stores/store.js
similarity index 71%
rename from src/stores/store.ts
rename to src/stores/store.js
index aa15843..6430223 100644
--- a/src/stores/store.ts
+++ b/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({
diff --git a/src/stores/user/duck/actions.ts b/src/stores/user/duck/actions.js
similarity index 69%
rename from src/stores/user/duck/actions.ts
rename to src/stores/user/duck/actions.js
index f15a65c..b30e085 100644
--- a/src/stores/user/duck/actions.ts
+++ b/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 = () => ({
- type: types.LOGOUT_USER
+const logout = item => ({
+ type: types.LOGOUT_USER, item
})
export default {
diff --git a/src/stores/user/duck/class.ts b/src/stores/user/duck/class.ts
deleted file mode 100644
index e37df15..0000000
--- a/src/stores/user/duck/class.ts
+++ /dev/null
@@ -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
-}
\ No newline at end of file
diff --git a/src/stores/user/duck/index.ts b/src/stores/user/duck/index.js
similarity index 100%
rename from src/stores/user/duck/index.ts
rename to src/stores/user/duck/index.js
diff --git a/src/stores/user/duck/operations.js b/src/stores/user/duck/operations.js
new file mode 100644
index 0000000..ba307b2
--- /dev/null
+++ b/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)
+}
\ No newline at end of file
diff --git a/src/stores/user/duck/operations.ts b/src/stores/user/duck/operations.ts
deleted file mode 100644
index 780b79c..0000000
--- a/src/stores/user/duck/operations.ts
+++ /dev/null
@@ -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)
- }
-}
diff --git a/src/stores/user/duck/reducers.ts b/src/stores/user/duck/reducers.js
similarity index 86%
rename from src/stores/user/duck/reducers.ts
rename to src/stores/user/duck/reducers.js
index 54ade70..b30bbf8 100644
--- a/src/stores/user/duck/reducers.ts
+++ b/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 {
diff --git a/src/stores/user/duck/types.js b/src/stores/user/duck/types.js
new file mode 100644
index 0000000..9f22e76
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/stores/user/duck/types.ts b/src/stores/user/duck/types.ts
deleted file mode 100644
index 3548ae3..0000000
--- a/src/stores/user/duck/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-const LOGIN_USER: string = 'LOGIN_USER'
-const LOGOUT_USER: string = 'LOGOUT_USER'
-
-export default {
- LOGIN_USER,
- LOGOUT_USER
-}
\ No newline at end of file
diff --git a/src/styles/general.scss b/src/styles/general.scss
index 9983dc5..18e7971 100755
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -75,4 +75,8 @@ body {
font-family: Ubuntu;
font-size: 16px;
}
+
+ button {
+ display: none;
+ }
}
\ No newline at end of file