fix(admin-ui): put loader and make hooks component

GluuFederation · May 13, 2022 · fc837bb · fc837bb
1 parent 229f2ee
commit fc837bb
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 171 deletions.
diff --git a/admin-ui/app/redux/reducers/AuthReducer.js b/admin-ui/app/redux/reducers/AuthReducer.js
@@ -25,69 +25,72 @@ const reducerName = 'authReducer'
 
 export default function authReducer(state = INIT_STATE, action) {
   switch (action.type) {
-  case GET_USER_LOCATION:
-    return handleDefault()
-  case GET_USER_LOCATION_RESPONSE:
-    if (action.payload.location) {
-      return {
-        ...state,
-        location: action.payload.location,
-      }
-    } else {
+    case GET_USER_LOCATION:
       return handleDefault()
-    }
-  case GET_OAUTH2_CONFIG:
-    return handleDefault()
-  case GET_OAUTH2_CONFIG_RESPONSE:
-    if (action.payload.config && action.payload.config != -1) {
-      return {
-        ...state,
-        config: action.payload.config,
-        backendIsUp: true,
+    case GET_USER_LOCATION_RESPONSE:
+      if (action.payload.location) {
+        return {
+          ...state,
+          location: action.payload.location,
+        }
+      } else {
+        return handleDefault()
       }
-    } else {
-      return {
-        ...state,
-        backendIsUp: false,
+    case GET_OAUTH2_CONFIG:
+      return handleDefault()
+    case GET_OAUTH2_CONFIG_RESPONSE:
+      if (action.payload.config && action.payload.config != -1) {
+        let newDataConfigObject = Object.assign(state.config, {
+          ...action.payload.config,
+        })
+        return {
+          ...state,
+          ...newDataConfigObject,
+          backendIsUp: true,
+        }
+      } else {
+        return {
+          ...state,
+          backendIsUp: false,
+        }
       }
-    }
 
-  case USERINFO_REQUEST:
-    return handleDefault()
-  case USERINFO_RESPONSE:
-    if (action.payload.uclaims) {
-      return {
-        ...state,
-        userinfo: action.payload.uclaims,
-        userinfo_jwt: action.payload.ujwt,
-        permissions: action.payload.scopes,
-        isAuthenticated: true,
-      }
-    } else {
-      return {
-        ...state,
-        isAuthenticated: true,
+    case USERINFO_REQUEST:
+      return handleDefault()
+    case USERINFO_RESPONSE:
+      if (action.payload.uclaims) {
+        return {
+          ...state,
+          userinfo: action.payload.uclaims,
+          userinfo_jwt: action.payload.ujwt,
+          permissions: action.payload.scopes,
+          isAuthenticated: true,
+        }
+      } else {
+        return {
+          ...state,
+          isAuthenticated: true,
+        }
       }
-    }
 
-  case GET_API_ACCESS_TOKEN:
-    return handleDefault()
+    case GET_API_ACCESS_TOKEN:
+      return handleDefault()
 
-  case GET_API_ACCESS_TOKEN_RESPONSE:
-    if (action.payload.accessToken) {
-      return {
-        ...state,
-        token: action.payload.accessToken,
-        issuer: action.payload.accessToken.issuer,
-        permissions: action.payload.accessToken.scopes,
-        isAuthenticated: true,
+    case GET_API_ACCESS_TOKEN_RESPONSE:
+      if (action.payload.accessToken) {
+        return {
+          ...state,
+          token: action.payload.accessToken,
+          issuer: action.payload.accessToken.issuer,
+          permissions: action.payload.accessToken.scopes,
+          isAuthenticated: true,
+        }
+      } else {
+        return handleDefault()
       }
-    } else {
-      return handleDefault()
-    }
 
-  default:
-    return handleDefault()
+    default:
+      return handleDefault()
   }
 
   function handleDefault() {

diff --git a/admin-ui/app/utils/ApiKeyRedirect.js b/admin-ui/app/utils/ApiKeyRedirect.js
@@ -14,27 +14,47 @@ function ApiKeyRedirect({
   return (
     <React.Fragment>
       <Container>
-        {!isLicenseValid && islicenseCheckResultLoaded && <ApiKey />}
-        {!backendIsUp && (
-          <GluuNotification
-            type="error"
-            message={t('The UI backend service is down')}
-            description={t(
-              'Please contact the side administrator or make sure it is up and running.',
-            )}
-            show={true}
+        <div
+          style={{
+            backgroundColor: 'white',
+            margin: 'auto',
+            marginTop: '20%',
+          }}
+        >
+          <img
+            style={{
+              display: 'block',
+              marginLeft: 'auto',
+              marginTop: 'auto',
+              marginRight: 'auto',
+              width: '100%',
+              height: '100%',
+            }}
+            src={require('Images/gif/npe-redirecting.gif')}
+            alt="loading..."
           />
-        )}
-        {isLicenseActivationResultLoaded && !isLicenseValid && (
-          <GluuNotification
-            type="error"
-            message={t('Invalid License')}
-            description={t(
-              'License has been not enabled for this application. Please contact support and confirm if license-key is correct.',
-            )}
-            show={true}
-          />
-        )}
+          {!isLicenseValid && islicenseCheckResultLoaded && <ApiKey />}
+          {!backendIsUp && (
+            <GluuNotification
+              type="error"
+              message={t('The UI backend service is down')}
+              description={t(
+                'Please contact the side administrator or make sure it is up and running.',
+              )}
+              show={true}
+            />
+          )}
+          {isLicenseActivationResultLoaded && !isLicenseValid && (
+            <GluuNotification
+              type="error"
+              message={t('Invalid License')}
+              description={t(
+                'License has been not enabled for this application. Please contact support and confirm if license-key is correct.',
+              )}
+              show={true}
+            />
+          )}
+        </div>
       </Container>
     </React.Fragment>
   )

diff --git a/admin-ui/app/utils/AppAuthProvider.js b/admin-ui/app/utils/AppAuthProvider.js
@@ -1,25 +1,42 @@
-import React, { Component } from 'react'
-import ViewRedirect from './ViewRedirect'
+import React, { useState, useEffect } from 'react'
 import ApiKeyRedirect from './ApiKeyRedirect'
-import { withRouter } from 'react-router'
+import { useLocation } from 'react-router'
 import { saveState } from './TokenController'
 import queryString from 'query-string'
 import { uuidv4 } from './Util'
-import { connect } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import {
   getOAuth2Config,
   getUserInfo,
   getAPIAccessToken,
-  getUserLocation,
   checkLicensePresent,
 } from 'Redux/actions'
 import SessionTimeout from 'Routes/Apps/Gluu/GluuSessionTimeout'
 
-class AppAuthProvider extends Component {
-  state = {
-    showContent: false,
-  }
-  static buildAuthzUrl = (config, state, nonce) => {
+export default function AppAuthProvider(props) {
+  const dispatch = useDispatch()
+  const location = useLocation()
+  const [showContent, setShowContent] = useState(false)
+
+  const { config, userinfo, userinfo_jwt, token, backendIsUp } = useSelector(
+    (state) => state.authReducer,
+  )
+  const {
+    islicenseCheckResultLoaded,
+    isLicenseActivationResultLoaded,
+    isLicenseValid,
+  } = useSelector((state) => state.licenseReducer)
+
+  useEffect(() => {
+    dispatch(getOAuth2Config())
+    dispatch(checkLicensePresent())
+  }, [])
+  useEffect(() => {
+    getDerivedStateFromProps()
+  }, [isLicenseValid])
+
+  const buildAuthzUrl = (state, nonce) => {
+    console.log('Config', config)
     const {
       authzBaseUrl,
       clientId,
@@ -43,113 +60,63 @@ class AppAuthProvider extends Component {
     }
     return `${authzBaseUrl}?acr_values=${acrValues}&response_type=${responseType}&redirect_uri=${redirectUrl}&client_id=${clientId}&scope=${scope}&state=${state}&nonce=${nonce}`
   }
-  constructor() {
-    super()
-  }
-
-  componentDidMount() {
-    this.props.getOAuth2Config()
-    this.props.checkLicensePresent()
-  }
 
-  static getDerivedStateFromProps(props) {
+  const getDerivedStateFromProps = () => {
+    console.log('Called')
     if (window.location.href.indexOf('logout') > -1) {
-      return { showContent: true }
+      setShowContent(true)
+      return null
     }
-    if (!props.isLicenseValid) {
-      return { showContent: false }
+    if (!isLicenseValid) {
+      setShowContent(false)
+      // return false
     }
-    if (!props.showContent) {
-      if (!props.userinfo) {
-        const params = queryString.parse(props.location.search)
-        let showContent = false
+    if (!showContent) {
+      if (!userinfo) {
+        const params = queryString.parse(location.search)
         if (params.code && params.scope && params.state) {
-          props.getUserInfo(params.code)
+          dispatch(getUserInfo(params.code))
         } else {
-          showContent = !!props.config
-          if (showContent && props.config != -1) {
+          if (!showContent && Object.keys(config).length) {
             const state = uuidv4()
             saveState(state)
-            const authzUrl = AppAuthProvider.buildAuthzUrl(
-              props.config,
-              state,
-              uuidv4(),
-            )
+            const authzUrl = buildAuthzUrl(state, uuidv4())
             if (authzUrl) {
               window.location.href = authzUrl
               return null
             }
           } else {
-            props.getOAuth2Config()
+            dispatch(getOAuth2Config())
           }
         }
-        return {
-          showContent: false,
-        }
+        setShowContent(false)
+        return null
       } else {
-        if (!props.token) {
-          props.getAPIAccessToken(props.jwt)
-        }
-        return {
-          showContent: true,
+        if (!token) {
+          dispatch(getAPIAccessToken(userinfo_jwt))
         }
+        setShowContent(true)
+        return null
       }
     } else {
-      return { showContent: true }
+      setShowContent(true)
+      return true
     }
   }
-  render() {
-    const { showContent } = this.state
-    return (
-      <React.Fragment>
-        <SessionTimeout isAuthenticated={showContent} />
-        {showContent && this.props.children}
-        {!showContent && (
-          <ApiKeyRedirect
-            backendIsUp={this.props.backendIsUp}
-            isLicenseValid={this.props.isLicenseValid}
-            redirectUrl={this.props.config.redirectUrl}
-            islicenseCheckResultLoaded={this.props.islicenseCheckResultLoaded}
-            isLicenseActivationResultLoaded={
-              this.props.isLicenseActivationResultLoaded
-            }
-          />
-        )}
-      </React.Fragment>
-    )
-  }
-}
-const mapStateToProps = ({ authReducer, licenseReducer }) => {
-  const config = authReducer.config
-  const userinfo = authReducer.userinfo
-  const jwt = authReducer.userinfo_jwt
-  const token = authReducer.token
-  const permissions = authReducer.permissions
-  const backendIsUp = authReducer.backendIsUp
-  const isLicenseValid = licenseReducer.isLicenseValid
-  const islicenseCheckResultLoaded = licenseReducer.islicenseCheckResultLoaded
-  const isLicenseActivationResultLoaded =
-    licenseReducer.isLicenseActivationResultLoaded
 
-  return {
-    config,
-    userinfo,
-    jwt,
-    token,
-    permissions,
-    backendIsUp,
-    isLicenseValid,
-    islicenseCheckResultLoaded,
-    isLicenseActivationResultLoaded,
-  }
+  return (
+    <React.Fragment>
+      <SessionTimeout isAuthenticated={showContent} />
+      {showContent && props.children}
+      {!showContent && (
+        <ApiKeyRedirect
+          backendIsUp={backendIsUp}
+          isLicenseValid={isLicenseValid}
+          redirectUrl={config.redirectUrl}
+          islicenseCheckResultLoaded={islicenseCheckResultLoaded}
+          isLicenseActivationResultLoaded={isLicenseActivationResultLoaded}
+        />
+      )}
+    </React.Fragment>
+  )
 }
-
-export default withRouter(
-  connect(mapStateToProps, {
-    getOAuth2Config,
-    getUserInfo,
-    getAPIAccessToken,
-    getUserLocation,
-    checkLicensePresent,
-  })(AppAuthProvider),
-)