changed auth method to ws

package-lock.json

@@ -10626,6 +10626,11 @@
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
     },
+    "cryptr": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/cryptr/-/cryptr-6.0.2.tgz",
+      "integrity": "sha512-1TRHI4bmuLIB8WgkH9eeYXzhEg1T4tonO4vVaMBKKde8Dre51J68nAgTVXTwMYXAf7+mV2gBCkm/9wksjSb2sA=="
+    },
     "css": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",

package.json

@@ -45,6 +45,7 @@
     "colors": "^1.4.0",
     "concat-stream": "^2.0.0",
     "cookie_js": "^1.4.0",
+    "cryptr": "^6.0.2",
     "dotenv": "^8.2.0",
     "dutier": "^1.1.4",
     "dva-model-enhance": "^1.2.13",

src/core/models/user/index.js

@@ -22,20 +22,13 @@ export const get = {
         serverKey: serverKey,
         userToken: access_token,
         endpoint: endpoints.get_data
+        
       },
       (err, res) => {
        return callback(err, res)
       },
     );
   },
-  posts: parms => {
-    if (!parms) return false;
-    const { id } = parms;
-
-    if (!id) {
-      // core get id data from current session
-    }
-  },
   basicData: (parms, callback) => {
     if (!parms) return false
 

src/layouts/BaseLayout.js

@@ -24,7 +24,7 @@ class BaseLayout extends React.Component {
   renderLoading = true
 
   render() {
-    const { loading, children, location } = this.props
+    const { loading, children, location, app } = this.props
     const Container = LayoutMap[queryLayout(config.layouts, location.pathname)]
     const currentPath = location.pathname + location.search
 
@@ -38,6 +38,15 @@ class BaseLayout extends React.Component {
       this.previousPath = currentPath
       this.renderLoading = false
     }
+
+    if (app.abortRender) {
+      return(
+        <div>
+         {app.abortRender}
+        </div>
+      )
+    }
+
     return (
       <React.Fragment>
         <Helmet>

src/models/app.js

@@ -6,11 +6,10 @@ import { router, verbosity, appInterface } from 'core/libs'
 import settings from 'core/libs/settings'
 import uri_resolver from 'api/lib/uri_resolver'
 import { queryIndexer } from 'core'
+import Cryptr from 'cryptr'
 
 import jwt from 'jsonwebtoken'
 import cookie from 'cookie_js'
-import { usePlugins } from 'plugins'
-import { SocketConnection, SocketModel } from 'core/libs/socket/index.ts'
 
 export default {
   namespace: 'app',
@@ -34,6 +33,7 @@ export default {
     embedded: false,
     dispatcher: null,
 
+    abortRender: null,
     controlActive: false,
     feedOutdated: false,
 
@@ -55,9 +55,8 @@ export default {
         dispatch({ type: 'updateState', payload: { resolvers: res } })
       })
       dispatch({ type: 'updateFrames' })
-      dispatch({ type: 'handleValidate' })
+      dispatch({ type: 'validateSession' })
       dispatch({ type: 'socket/createNodeSocket' })
-      dispatch({ type: 'queryAuth' })
       dispatch({ type: 'query', payload: { dispatcher: dispatch } })
     },
     setupHistory({ dispatch, history }) {
@@ -68,26 +67,23 @@ export default {
             locationPathname: location.pathname,
             locationQuery: location.query,
           },
-        });
+        })
-      });
+      })
     },
     setupRequestCancel({ history }) {
       history.listen(() => {
-        const { cancelRequest = new Map() } = window;
+        const { cancelRequest = new Map() } = window
-
         cancelRequest.forEach((value, key) => {
           if (value.pathname !== window.location.pathname) {
             cancelRequest.delete(key);
           }
-        });
+        })
-      });
+      })
     },
   },
   effects: {
     *query({ payload }, { call, put, select }) {
-      const service = yield select(state => state.app.service_valid)
+      const state = yield select(state => state.app)
-      const session = yield select(state => state.app.session_valid)
-      const sessionDataframe = yield select(state => state.app.session_data)
 
       window.PluginGlobals = []
       window.Internal = []
@@ -113,114 +109,141 @@ export default {
         window.location = callback
       })
 
-      if (!service) {
+      if (!state.service_valid) {
 
       }
-
-
-      if (!sessionDataframe && session) {
-        yield put({ type: 'handleGetUserData' })
-      }
-
     },
-    *queryAuth({ payload }, { call, put, select }) {
+    *refreshToken({ callback }, { call, put, select }) {
-      const socket = yield select(state => state.socket)
+      const state = yield select(state => state.app)
-      const state = yield select(state => state)
+      if (state.session_authframe) {
-
+        return state.dispatcher({
-
+          type: "socket/use",
-
+          scope: "auth",
-    },
+          invoke: "token",
-    *logout({ payload }, { call, put, select }) {
+          query: {
-      const uuid = yield select(state => state.app.session_uuid)
+            payload: {
-      const token = yield select(state => state.app.session_token)
+              token: state.session_authframe
-      const sk = yield select(state => state.app.server_key)
+            },
-
+            callback: (callbackResponse) => {
-      session.deauth({ id: uuid, userToken: token, server_key: sk }, (err, res) => {
+              if (typeof (callback) !== "undefined") {
-        verbosity([res])
+                callback(callbackResponse)
-      })
+              }
-
+              if (callbackResponse.code == 100) {
-      yield put({ type: 'sessionErase' })
+                verbosity(`updating authframe`)
-    },
+                state.dispatcher({
-    *login({ payload }, { call, put, select }) {
+                  type: "setAuth", payload: {
-      if (!payload) return false;
+                    token: callbackResponse.response.token,
-      const { user_id, access_token } = payload.authFrame
+                    authFrame: jwt.decode(callbackResponse.response.token),
-      yield put({ type: 'handleLogin', payload: { user_id, access_token, user_data: payload.dataFrame } })
+                    dataFrame: state.session_data
-    },
+                  }
-    *initializePlugins({ payload }, { select }) {
+                })
-      const extended = yield select(state => state.extended)
+                state.dispatcher({ type: "updateState", payload: { session_valid: true } })
-
+              } else {
-      if (!payload.array) {
+                verbosity(`this session is no valid, erasing data`)
-        verbosity("Only array map for initialize plugins", "Please read SDK documentation for more info.")
+                state.dispatcher({ type: "sessionErase" }) // remove without calling api, its already logged out/invalid
-        return false
+              }
-      }
-      try {
-        usePlugins([payload.array], (err, results) => {
-          if (err) {
-            verbosity(["Init error!", err])
-            appInterface.notify.error("Plugin initialize error!", err)
-            return false
-          }
-          const rootInit = results[0]
-
-          if (!rootInit.uuid) {
-            verbosity("Cannot initialize a plugin without UUID.", "Please read SDK documentation for more info.")
-            appInterface.notify.error("Cannot initialize a plugin without UUID.")
-            return false
-          }
-
-          let plugin = {
-            uuid: null,
-            version: "n/a",
-            title: "Blank"
-          }
-          plugin = { ...plugin, ...rootInit }
-
-          const rootClass = plugin.payload
-          let extendedRequire = null
-
-          class extendedPlugin extends rootClass {
-            constructor(props) {
-              super(props)
             }
           }
-
-          if (typeof (plugin.requireExtends) !== "undefined") {
-            console.log("Extending class with => ", plugin.requireExtends)
-
-            plugin.requireExtends.forEach((e) => {
-              const RequireFrom = e.from
-              const RequireImport = e.import
-
-              const existScheme = typeof (RequireImport) !== "undefined" && typeof (RequireFrom) !== "undefined"
-              if (!existScheme) {
-                verbosity("Invalid require extension!")
-                return false
-              }
-
-              if (Array.isArray(RequireImport)) {
-                RequireImport.forEach((e) => {
-                  `console`.log(`Importing " ${e} " from [ ${RequireFrom} ]`)
-                  extendedRequire[e] = require(RequireFrom)
-                })
-              } else {
-
-              }
-
-            })
-          }
-
-          window.PluginGlobals[plugin.uuid] = new extendedPlugin({ extended, extendedRequire })
-
-          appInterface.notify.open({
-            message: `${plugin.title} v${plugin.version}`,
-            description: `New plugin is now installed !`
-          })
         })
-      } catch (error) {
+      }else{
-        verbosity("Unexpected catched exception! ", error)
+        verbosity(`no session_authframe found/valid`)
-
+        return false
       }
     },
+    *logout({ payload }, { put, select }) {
+      const state = yield select(state => state.app)
+
+      session.deauth({
+        id: state.session_uuid,
+        userToken: state.session_token,
+        server_key: state.server_key
+      }, (err, res) => {
+        verbosity([res])
+        state.dispatcher({ type: "sessionErase" })
+      })
+
+    },
+    *login({ payload, callback }, { call, put, select }) {
+      const state = yield select(state => state.app)
+      if (!payload) return false
+      const cryptr = new Cryptr(keys.server_key)
+
+      state.dispatcher({
+        type: "socket/use",
+        scope: "auth",
+        invoke: "authentication",
+        query: {
+          payload: {
+            username: btoa(payload.username),
+            password: cryptr.encrypt(payload.password)
+          },
+          callback: (callbackResponse) => {
+            const { authFrame, dataFrame, token } = callbackResponse.response
+            if (typeof (callback) !== "undefined") {
+              callback(callbackResponse.code)
+            }
+            if (callbackResponse.code == 100) {
+              state.dispatcher({ type: "setAuth", payload: { authFrame, dataFrame, token } })
+            }
+          }
+        }
+      })
+    },
+    *validateSession({ payload }, { put, select }) {
+      const state = yield select(state => state.app)
+      if (state.session_authframe) {
+        if (typeof (state.session_authframe.exp) == "undefined") {
+          return false // no support refresh token when is invalid by ws
+        }
+
+        const now = new Date()
+        const createdIat = state.session_authframe.iat * 1000
+        const expirationTime = (state.session_authframe.iat + state.session_authframe.exp) * 1000
+
+        const isExpired = expirationTime < now.getTime()
+
+        verbosity([`TOKEN EXPIRES => (${new Date(expirationTime).toLocaleString()})`, `NOW => (${now.toLocaleString()})`])
+
+        if (isExpired) {
+          verbosity(`🕒 This session_token is expired`, { color: "red" })
+          if (settings("session_noexpire")) {
+            verbosity(`(session_noexpire) is enabled, refreshing token`)
+            return state.dispatcher({ type: "refreshToken" })
+          } else {
+            return state.dispatcher({ type: "sessionErase" }) // remove session
+          }
+       
+        }
+
+        if (!state.session_data) {
+          verbosity(`session_data is not valid but the session is valid, updating from ws`)
+          state.dispatcher({ type: "updateUserData" })
+        }
+
+        state.dispatcher({ type: "updateState", payload: { session_valid: true } })
+      }
+    },
+    *updateUserData({ payload }, { put, select }) {
+      const state = yield select(state => state.app)
+      state.dispatcher({
+        type: "user/get",
+        payload: {
+          from: "data"
+        },
+        callback: (callbackResponse) => {
+          if (callbackResponse.code == 115) {
+            verbosity(`Cannot update userdata due an data is missing`)
+            return false
+          }
+          try {
+            sessionStorage.setItem(app_config.session_data_storage, btoa(JSON.stringify(callbackResponse.response)))
+            state.dispatcher({ type: "updateState", payload: { session_data: callbackResponse.response } })
+          } catch (error) {
+            verbosity([error])
+          }
+        }
+      })
+    },
     *updateTheme({ payload }, { put, select }) {
       if (!payload) return false
       let container = yield select(state => state.app.app_theme)
@@ -245,28 +268,38 @@ export default {
     },
     *updateFrames({ payload }, { select, put }) {
       try {
-        const session = yield select(state => state.app.session_valid);
         let sessionAuthframe = cookie.get(app_config.session_token_storage)
-        let sessionDataframe = sessionStorage.getItem(app_config.session_data_storage)
+        let sessionDataframe = atob(sessionStorage.getItem(app_config.session_data_storage))
 
         if (sessionAuthframe) {
           try {
             sessionAuthframe = jwt.decode(sessionAuthframe)
-            yield put({ type: 'handleUpdateAuthFrames', payload: sessionAuthframe })
+            yield put({
+              type: "updateState",
+              payload: {
+                session_authframe: sessionAuthframe,
+                session_token: sessionAuthframe.access_token,
+                session_uuid: sessionAuthframe.user_id
+              }
+            })
           } catch (error) {
             cookie.remove(app_config.session_token_storage)
           }
         }
         if (sessionDataframe) {
           try {
-            sessionDataframe = JSON.parse(atob(sessionDataframe))
+            sessionDataframe = JSON.parse(sessionDataframe)
-            yield put({ type: 'handleUpdateDataFrames', payload: sessionDataframe })
+            yield put({
+              type: "updateState",
+              payload: {
+                session_data: sessionDataframe
+              }
+            })
           } catch (error) {
             sessionDataframe = null
             sessionStorage.clear()
           }
         }
-
       } catch (error) {
         verbosity([error])
       }
@@ -280,90 +313,18 @@ export default {
         ...payload,
       };
     },
-    handleUpdateAuthFrames(state, { payload }) {
+    setAuth(state, { payload }) {
-      state.session_authframe = payload
-      state.session_token = payload.session_token,
-        state.session_uuid = payload.session_uuid
-    },
-    handleUpdateDataFrames(state, { payload }) {
-      state.session_data = payload
-    },
-    handleValidate(state) {
-      if (state.session_authframe) {
-        if (settings("session_noexpire")) {
-          state.session_valid = true
-          return
-        }
-        const tokenExp = state.session_authframe.exp * 1000
-        const tokenExpLocale = new Date(tokenExp).toLocaleString()
-        const now = new Date().getTime()
-
-        verbosity(
-          `TOKEN EXP => ${tokenExp} ${settings("session_noexpire") ? '( Infinite )' : `( ${tokenExpLocale} )`
-          } || NOW => ${now}`
-        )
-
-        if (tokenExp < now) {
-          state.session_valid = false
-        } else {
-          state.session_valid = true
-        }
-      }
-    },
-    handleLogin(state, { payload }) {
       if (!payload) return false
+      state.session_token = payload.authFrame.access_token
+      state.session_uuid = payload.authFrame.user_id
+      state.session_data = payload.dataFrame
+      state.session_authframe = jwt.decode(payload.token)
 
-      state.session_token = payload.access_token
-      state.session_uuid = payload.user_id
-      state.session_data = payload.user_data
 
-      const sessionData = JSON.parse(payload.user_data)
+      cookie.set(app_config.session_token_storage, payload.token)
-
+      sessionStorage.setItem(app_config.session_data_storage, btoa(JSON.stringify(payload.dataFrame)))
-      const frame = {
-        session_uuid: payload.user_id,
-        session_token: payload.access_token,
-        avatar: sessionData.avatar,
-        username: sessionData.username,
-        attributes: {
-          isAdmin: sessionData.admin,
-          isDev: sessionData.dev,
-          isPro: sessionData.is_pro
-        }
-
-      }
-
-      jwt.sign(frame, state.server_key, (err, token) => {
-        if (err) {
-          verbosity([err])
-          return false
-        }
-        cookie.set(app_config.session_token_storage, token)
-        sessionStorage.setItem(app_config.session_data_storage, btoa(payload.user_data))
-        state.session_authframe = token
-      })
 
       state.session_valid = true
-      location.reload()
-    },
-    handleGetUserData(state) {
-      const frame = {
-        id: state.session_uuid,
-        access_token: state.session_token,
-        serverKey: state.server_key
-      }
-      user.get.data(frame, (err, res) => {
-        if (err) {
-          verbosity([err])
-        }
-        if (res) {
-          try {
-            const session_data = JSON.stringify(res.response)
-            sessionStorage.setItem(app_config.session_data_storage, btoa(session_data))
-          } catch (error) {
-            verbosity([error])
-          }
-        }
-      })
     },
     handleCollapseSidebar(state, { payload }) {
       state.sidebar_collapsed = payload

src/models/extended.js

@@ -19,6 +19,81 @@ export default {
   effects: {
     *query({ payload }, { call, put, select }) {
     
+    },
+    *initializePlugins({ payload }, { select }) {
+      const extended = yield select(state => state.extended)
+
+      if (!payload.array) {
+        verbosity("Only array map for initialize plugins", "Please read SDK documentation for more info.")
+        return false
+      }
+      try {
+        usePlugins([payload.array], (err, results) => {
+          if (err) {
+            verbosity(["Init error!", err])
+            appInterface.notify.error("Plugin initialize error!", err)
+            return false
+          }
+          const rootInit = results[0]
+
+          if (!rootInit.uuid) {
+            verbosity("Cannot initialize a plugin without UUID.", "Please read SDK documentation for more info.")
+            appInterface.notify.error("Cannot initialize a plugin without UUID.")
+            return false
+          }
+
+          let plugin = {
+            uuid: null,
+            version: "n/a",
+            title: "Blank"
+          }
+          plugin = { ...plugin, ...rootInit }
+
+          const rootClass = plugin.payload
+          let extendedRequire = null
+
+          class extendedPlugin extends rootClass {
+            constructor(props) {
+              super(props)
+            }
+          }
+
+          if (typeof (plugin.requireExtends) !== "undefined") {
+            console.log("Extending class with => ", plugin.requireExtends)
+
+            plugin.requireExtends.forEach((e) => {
+              const RequireFrom = e.from
+              const RequireImport = e.import
+
+              const existScheme = typeof (RequireImport) !== "undefined" && typeof (RequireFrom) !== "undefined"
+              if (!existScheme) {
+                verbosity("Invalid require extension!")
+                return false
+              }
+
+              if (Array.isArray(RequireImport)) {
+                RequireImport.forEach((e) => {
+                  `console`.log(`Importing " ${e} " from [ ${RequireFrom} ]`)
+                  extendedRequire[e] = require(RequireFrom)
+                })
+              } else {
+
+              }
+
+            })
+          }
+
+          window.PluginGlobals[plugin.uuid] = new extendedPlugin({ extended, extendedRequire })
+
+          appInterface.notify.open({
+            message: `${plugin.title} v${plugin.version}`,
+            description: `New plugin is now installed !`
+          })
+        })
+      } catch (error) {
+        verbosity("Unexpected catched exception! ", error)
+
+      }
     }
   },
   reducers: {

src/models/user.ts

@@ -14,56 +14,36 @@ import cookie from 'cookie_js'
 export default {
   namespace: 'user',
   state: {
-    
-  },
-  subscriptions: {
-    setup({ dispatch }) {
-        dispatch({ type: 'query' })
-    },
   },
   effects: {
-    *query({ payload }, { call, put, select }) {
+    *get({ callback, payload }, { call, put, select }) {
-        const stateConnector = yield select(state => state)
+      const dispatch = yield select(state => state.app.dispatcher)
-        const { server_key, session_token, session_data, session_uuid, session_valid } = stateConnector.app
+      const state = yield select(state => state)
-    
+
-        yield put({ type: "updateState", payload: { server_key, session_uuid, session_token, session_data, session_valid } })
+      if (!payload) {
-    },
+        return callback({code: 115, response: "payload is missing/invalid"})
-    *get({ callback, req }, { call, put, select }) {
-      const state = yield select(state => state.user)
-  
-      if (state.session_valid) {
-        if (!req) {
-          callback(120, "req params not valid data")
-        }
-        user.get[req.fetch]({username: req.username, server_key: state.server_key, access_token: state.session_token }, (err, res) => {
-          if (err) {
-            return console.log(err)
-          }
-          console.log(res)
-          const data = res.response
-          const frame = {
-            avatar: data.avatar,
-            can_follow: data.can_follow,
-            country_id: data.contry_id,
-            about: data.about,
-            cover: data.cover,
-            is_pro: data.is_pro,
-            lastseen: data.lastseen,
-            points: data.points,
-            registered:data.registered,
-            user_id: data.user_id,
-            verified: data.verified,
-            birthday: data.birthday,
-            details: data.details
-          }
-          return callback(false, frame)
-        })
-      }else{
-        callback(403, "You need to be logged in to get this data")
       }
+      dispatch({
+        type: "socket/use",
+        scope: "users",
+        invoke: "get",
+        query: {
+          payload: {
+            from: payload.from,
+            user_id: payload.user_id ?? state.app.session_uuid,
+            username: payload.username ?? state.app.session_authframe["username"],
+            userToken: state.app.session_token
+          },
+          callback: (callbackResponse) => {
+            return callback(callbackResponse)
+          }
+        }
+      })
+
+
     },
     *set({ payload }, { call, put, select }) {
-      
+
     },
   },
   reducers: {

src/pages/index.js

@@ -85,6 +85,7 @@ export default class Index extends React.Component {
                         <h3> Misc </h3>
                         <antd.Card>
                             <antd.Button onClick={() => { dispatch({ type: "socket/resetHeader" }) }} > Reset HeaderSocket </antd.Button>
+                            <antd.Button onClick={() => { dispatch({ type: "app/refreshToken" }) }} > force refreshToken </antd.Button>
                         </antd.Card>
                     </antd.Card>
                 </antd.Card>

src/pages/login/login.js

@@ -19,7 +19,7 @@ import {
 } from 'components/Icons'
 import { connect } from 'umi'
 
-@connect(({ app }) => ({ app }))
+@connect(({ app, socket }) => ({ app, socket }))
 export class NormalLoginForm extends React.PureComponent {
   state = {
     activeForm: true,
@@ -30,28 +30,28 @@ export class NormalLoginForm extends React.PureComponent {
     step_show: true,
     swpass: false,
   }
-  
+
   next = values => {
     let a = this.state.step
-    const b = btoa(Object.values(values).toString())
+    const b = Object.values(values).toString()
     switch (a) {
       case 1:
         const payload = { username: Object.values(values).toString() }
         user.get.basicData(payload, (err, res) => {
           if (err || !res) return false
-            if (res.code == 200) {
+          if (res.code == 200) {
-              a++
+            a++
-              this.anim_transition(300)
+            this.anim_transition(300)
-              this.setState({
+            this.setState({
-                step_error: false,
+              step_error: false,
-                early_data: res.response,
+              early_data: res.response,
-                form_rawd_1: b,
+              form_rawd_1: b,
-                step: a,
+              step: a,
-              })
+            })
-            }
+          }
-            if (res.code == 400) {
+          if (res.code == 400) {
-               this.anim_error()
+            this.anim_error()
-            }
+          }
         })
         return true
       case 2:
@@ -88,77 +88,36 @@ export class NormalLoginForm extends React.PureComponent {
     this.setState({ step_show: false })
   }
 
-
+  auth() {
-  getAuthFrame(payload) {
-    return new Promise(resolve => {
-        session.auth(payload, (err, res) => {
-            if (err) {
-                
-            }
-            if (res) {
-                verbosity([res])
-
-                switch (res.code) {
-                    case 200: {
-                        try {
-                            return resolve(res.response)
-                        } catch (error) {
-                            verbosity([error])
-                        }
-                        break;
-                    }
-                    case 400: {
-                        console.log('Credentials error')
-                        this.setState({ validating: false })
-                        return this.anim_error()
-                    }
-                    case 500: {
-                        console.log('Server error')
-                        this.setState({ validating: false })
-                        return this.back()
-                    }
-                    default: {
-                        console.log('Unknown error')
-                        this.setState({ validating: false })
-                        return this.back()
-                    }
-                }
-                
-            }
-        })
-    });
-  }
-
-  getDataFrame(payload) {
-    return new Promise(resolve => {
-        user.get.data(payload, (err, res) => {
-            if(err) {
-    
-            }
-            if (res) {
-                try {
-                  return resolve(JSON.stringify(res.response))
-                } catch (error) {
-                  verbosity([error])
-                }
-            }
-        })
-    
-    })
-  }
-
-  async auth() {
     const { form_rawd_1, form_rawd_2 } = this.state
     if (!form_rawd_1 || !form_rawd_2) return false
     this.setState({ step_error: false, validating: true })
-    
-    const authFrame = await this.getAuthFrame({username: form_rawd_1, password: form_rawd_2, server_key: this.props.app.server_key})
-    const dataFrame = await this.getDataFrame({user_id: authFrame.user_id, access_token: authFrame.access_token, serverKey: this.props.app.server_key})
 
-    return this.props.dispatch({
+    this.props.dispatch({
-        type: 'app/login',
+      type: 'app/login',
-        payload: {authFrame, dataFrame}
+      payload: { username: form_rawd_1, password: form_rawd_2 },
-    });
+      callback: (callbackResponse) => {
+        console.log(callbackResponse)
+        this.setState({ validating: false })
+        switch (callbackResponse) {
+          case 100: {
+            return console.log("login done!")
+          }
+          case 400: {
+            console.log('Credentials error')
+            return this.anim_error()
+          }
+          case 500: {
+            console.log('Server error')
+            return this.back()
+          }
+          default: {
+            console.log('Unknown error')
+            return this.back()
+          }
+        }
+      }
+    })
   }
 
   renderState = () => {
@@ -174,24 +133,24 @@ export class NormalLoginForm extends React.PureComponent {
               <BulbOutlined /> You can use your YulioID account to login
             </h5>
             <HeadShake spy={this.state.error_count}>
-            <Form.Item
+              <Form.Item
-              name="username"
+                name="username"
-              hasFeedback
+                hasFeedback
-              help={this.state.step_error? "It seems that this user does not exist" : null}
+                help={this.state.step_error ? "It seems that this user does not exist" : null}
-              validateStatus={this.state.step_error? 'error' : this.state.validating? 'validating' : null}
+                validateStatus={this.state.step_error ? 'error' : this.state.validating ? 'validating' : null}
-              rules={[
+                rules={[
-                {
+                  {
-                  required: true,
+                    required: true,
-                  message: 'Please use your Username or Email!',
+                    message: 'Please use your Username or Email!',
-                },
+                  },
-              ]}
+                ]}
-            >
+              >
-              <Input
+                <Input
-                autoFocus
+                  autoFocus
-                prefix={<UserOutlined className="site-form-item-icon" />}
+                  prefix={<UserOutlined className="site-form-item-icon" />}
-                placeholder="Username or Email"
+                  placeholder="Username or Email"
-              />
+                />
-            </Form.Item>
+              </Form.Item>
             </HeadShake>
             <Button
               type="primary"
@@ -212,22 +171,22 @@ export class NormalLoginForm extends React.PureComponent {
 
             <h4><antd.Avatar shape='square' src={this.state.early_data.avatar} /> Welcome Back @{this.state.early_data.username}</h4>
             <HeadShake spy={this.state.error_count}>
-            <Form.Item
+              <Form.Item
-              name="password"
+                name="password"
-              hasFeedback
+                hasFeedback
-              help={this.state.step_error? "Incorrect password" : null}
+                help={this.state.step_error ? "Incorrect password" : null}
-              validateStatus={this.state.step_error? 'error' : this.state.validating? 'validating' : null}
+                validateStatus={this.state.step_error ? 'error' : this.state.validating ? 'validating' : null}
-              rules={[
+                rules={[
-                { required: true, message: 'Please input your Password!' },
+                  { required: true, message: 'Please input your Password!' },
-              ]}
+                ]}
-            >
+              >
-              <Input.Password
+                <Input.Password
-                autoFocus
+                  autoFocus
-                prefix={<LockOutlined className="site-form-item-icon" />}
+                  prefix={<LockOutlined className="site-form-item-icon" />}
-                type={this.state.swpass ? 'text' : 'password'}
+                  type={this.state.swpass ? 'text' : 'password'}
-                placeholder="Password"
+                  placeholder="Password"
-              />
+                />
-            </Form.Item>
+              </Form.Item>
             </HeadShake>
             <div className={styles.helper_login_btn}>
               <antd.Button
@@ -259,7 +218,7 @@ export class NormalLoginForm extends React.PureComponent {
     return (
       <div className={styles.login_form}>
         <Fade left opposite when={this.state.step_show}>
-          {this.state.activeForm? this.renderState() : <div><h4>Mmm, this is taking longer than it should...</h4></div>}
+          {this.state.activeForm ? this.renderState() : <div><h4>Mmm, this is taking longer than it should...</h4></div>}
         </Fade>
       </div>
     )