From 69e6e07db6f7d39be5b7d9eb49fc495ddd76f22b Mon Sep 17 00:00:00 2001 From: TBS093A Date: Sat, 25 Jul 2020 00:34:08 +0200 Subject: [PATCH] convert storage *.ts to *.js && upgrade login && AppService already runable --- package-lock.json | 5 ++ package.json | 4 +- .../commands/fetchCommands/Login.js | 62 ++++++++++++++ .../commands/fetchCommands/Login.tsx | 48 ----------- .../index/indexConsole/indexConsole.js | 23 ++--- src/pages/index.js | 2 +- src/stores/APIAddress.js | 5 ++ src/stores/APIAddress.ts | 5 -- src/stores/AppService.js | 82 ++++++++++++++++++ src/stores/AppService.ts | 50 ----------- src/stores/{loadStore.ts => loadStore.js} | 0 src/stores/{reducers.ts => reducers.js} | 0 src/stores/{store.ts => store.js} | 6 +- .../user/duck/{actions.ts => actions.js} | 6 +- src/stores/user/duck/class.ts | 9 -- src/stores/user/duck/{index.ts => index.js} | 0 src/stores/user/duck/operations.js | 83 ++++++++++++++++++ src/stores/user/duck/operations.ts | 84 ------------------- .../user/duck/{reducers.ts => reducers.js} | 5 +- src/stores/user/duck/types.js | 7 ++ src/stores/user/duck/types.ts | 7 -- src/styles/general.scss | 4 + 22 files changed, 273 insertions(+), 224 deletions(-) create mode 100644 src/components/index/indexConsole/commands/fetchCommands/Login.js delete mode 100644 src/components/index/indexConsole/commands/fetchCommands/Login.tsx create mode 100644 src/stores/APIAddress.js delete mode 100644 src/stores/APIAddress.ts create mode 100644 src/stores/AppService.js delete mode 100644 src/stores/AppService.ts rename src/stores/{loadStore.ts => loadStore.js} (100%) rename src/stores/{reducers.ts => reducers.js} (100%) rename src/stores/{store.ts => store.js} (71%) rename src/stores/user/duck/{actions.ts => actions.js} (69%) delete mode 100644 src/stores/user/duck/class.ts rename src/stores/user/duck/{index.ts => index.js} (100%) create mode 100644 src/stores/user/duck/operations.js delete mode 100644 src/stores/user/duck/operations.ts rename src/stores/user/duck/{reducers.ts => reducers.js} (86%) create mode 100644 src/stores/user/duck/types.js delete mode 100644 src/stores/user/duck/types.ts 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 ( +
+
+ login: + +
+ password: + +
+ { message } +
+ ) +} + +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 ( -
-
- login: - -
- password: - -
- ) -} - -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 }
-
+
+
+ +
+
+ +
+
+ { consoleUser } { autoFocus />
-
-
- -
-
- -
-
) } 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