feat(admin-ui): change in client

GluuFederation · Aug 15, 2022 · ce2f20c · ce2f20c
1 parent 36eb4b2
commit ce2f20c
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 19 deletions.
diff --git a/admin-ui/app/locales/en/translation.json b/admin-ui/app/locales/en/translation.json
@@ -104,6 +104,7 @@
     "id_token_encrypted_response_enc": "JWS enc for encryption",
     "id_token_signed_response_alg": "JWS alg for signing",
     "spontaneousScopes": "Spontaneous scopes",
+    "spontaneousScopesREGEX": "Spontaneous scope validation regex",
     "inactive": "InActive",
     "include_in_scim_extension": "Include In SCIM Extension?",
     "in_memory_configuration": "inMemoryConfiguration",
@@ -352,7 +353,8 @@
     "view_client_details": "View client details",
     "add_new_user": "Add User",
     "error_in_saving": "Error in saving.",
-    "no_scope_in_client": "No Scope data for this Client"
+    "no_scope_in_client": "No Scope data for this Client",
+    "no_scope_in_spontaneous_client": "No Spontaneous Scope data for this Client"
   },
   "tooltips": {
     "add_attribute": "Add attribute",

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientAdvancedPanel.js b/admin-ui/plugins/auth-server/components/Clients/ClientAdvancedPanel.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Col, Container, FormGroup, InputGroup, CustomInput } from 'Components'
 import GluuBooleanSelectBox from 'Routes/Apps/Gluu/GluuBooleanSelectBox'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
@@ -8,6 +8,8 @@ import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import GluuTypeAheadWithAdd from 'Routes/Apps/Gluu/GluuTypeAheadWithAdd'
 import { useTranslation } from 'react-i18next'
 import DatePicker from 'react-datepicker'
+import ClientShowSpontaneousScopes from './ClientShowSpontaneousScopes'
+import { useSelector } from 'react-redux'
 const DOC_CATEGORY = 'openid_client'
 
 function ClientAdvancedPanel({ client, scripts, formik, scopes }) {
@@ -18,6 +20,26 @@ function ClientAdvancedPanel({ client, scripts, formik, scopes }) {
   const [expirable, setExpirable] = useState(
     client.expirationDate ? client.expirationDate : false,
   )
+  const [scopesModal, setScopesModal] = useState(false)
+  const reduxScopes = useSelector((state) => state.scopeReducer.items)
+  const getPrintableScopes = () => {
+    let newScopes = []
+    for (let i in reduxScopes) {
+      if (reduxScopes[i].attributes.spontaneousClientScopes) {
+        let obj = {
+          id: reduxScopes[i].dn,
+          name: reduxScopes[i].attributes.spontaneousClientScopes[0],
+        }
+        newScopes.push(obj)
+      }
+    }
+    return newScopes
+  }
+
+  const handler = () => {
+    setScopesModal(!scopesModal)
+  }
+
   function handleExpirable() {
     setExpirable(!expirable)
   }
@@ -57,6 +79,7 @@ function ClientAdvancedPanel({ client, scripts, formik, scopes }) {
   }
   return (
     <Container>
+      <ClientShowSpontaneousScopes handler={handler} isOpen={scopesModal} />
       <FormGroup row>
         <GluuLabel label="fields.subject_type" />
         <Col sm={9}>
@@ -75,13 +98,7 @@ function ClientAdvancedPanel({ client, scripts, formik, scopes }) {
           </InputGroup>
         </Col>
       </FormGroup>
-      <GluuInputRow
-        label="fields.sector_uri"
-        name="sectorIdentifierUri"
-        formik={formik}
-        value={client.sectorIdentifierUri}
-        doc_category={DOC_CATEGORY}
-      />
+
       <GluuToogleRow
         name="persistClientAuthorizations"
         lsize={9}
@@ -102,15 +119,22 @@ function ClientAdvancedPanel({ client, scripts, formik, scopes }) {
       />
       <GluuTypeAheadForDn
         name="spontaneousScopes"
-        label="fields.spontaneousScopes"
+        label="fields.spontaneousScopesREGEX"
         formik={formik}
-        value={getScopeMapping(client.spontaneousScopes, scopes)}
-        options={scopes}
+        value={getScopeMapping(client.spontaneousScopes, getPrintableScopes())}
+        options={getPrintableScopes()}
         doc_category={DOC_CATEGORY}
         lsize={3}
         rsize={9}
       ></GluuTypeAheadForDn>
-
+      {client.inum && (
+        <FormGroup row>
+          <GluuLabel label="fields.subject_type" />
+          <Col sm={9}>
+            <a onClick={handler}>View Current</a>
+          </Col>
+        </FormGroup>
+      )}
       <GluuInputRow
         label="fields.initiateLoginUri"
         name="initiateLoginUri"

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientBasicPanel.js b/admin-ui/plugins/auth-server/components/Clients/ClientBasicPanel.js
@@ -162,6 +162,13 @@ const ClientBasicPanel = ({ client, scopes, formik, oidcConfiguration }) => {
           </InputGroup>
         </Col>
       </FormGroup>
+      <GluuInputRow
+        label="fields.sector_uri"
+        name="sectorIdentifierUri"
+        formik={formik}
+        value={client.sectorIdentifierUri}
+        doc_category={DOC_CATEGORY}
+      />
       <GluuTypeAhead
         name="grantTypes"
         label="fields.grant_types"

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientEditPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientEditPage.js
@@ -4,7 +4,10 @@ import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { editClient } from 'Plugins/auth-server/redux/actions/OIDCActions'
-import { getScopes } from 'Plugins/auth-server/redux/actions/ScopeActions'
+import {
+  getScopes,
+  getScopeByCreator,
+} from 'Plugins/auth-server/redux/actions/ScopeActions'
 import { getOidcDiscovery } from 'Redux/actions/OidcDiscoveryActions'
 import { getScripts } from 'Redux/actions/InitActions'
 import { buildPayload } from 'Utils/PermChecker'
@@ -30,6 +33,7 @@ function ClientEditPage({
   const history = useHistory()
 
   useEffect(() => {
+    dispatch(getScopeByCreator({ inum: clientData.inum }))
     buildPayload(userAction, '', options)
     if (scopes.length < 1) {
       dispatch(getScopes(options))

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientShowSpontaneousScopes.js b/admin-ui/plugins/auth-server/components/Clients/ClientShowSpontaneousScopes.js
@@ -0,0 +1,42 @@
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+import { Badge } from 'Components'
+import { useSelector } from 'react-redux'
+import { ThemeContext } from 'Context/theme/themeContext'
+
+function ClientShowSpontaneousScopes({ handler, isOpen }) {
+  const { t } = useTranslation()
+  const scopesByCreator = useSelector(
+    (state) => state.scopeReducer.scopesByCreator,
+  )
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+
+  return (
+    <Modal isOpen={isOpen} toggle={handler} className="modal-outline-primary">
+      <ModalHeader>{t('fields.spontaneousScopes')}</ModalHeader>
+      <ModalBody>
+        {scopesByCreator.length > 0 ? (
+          scopesByCreator?.map((scope, key) => {
+            return (
+              <div key={key}>
+                <Badge color={`primary-${selectedTheme}`}>
+                  {scope?.attributes?.spontaneousClientScopes[0]}
+                </Badge>
+              </div>
+            )
+          })
+        ) : (
+          <div>{t('messages.no_scope_in_spontaneous_client')}</div>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button color={`primary-${selectedTheme}`} onClick={handler}>
+          Close
+        </Button>
+      </ModalFooter>
+    </Modal>
+  )
+}
+export default ClientShowSpontaneousScopes
diff --git a/admin-ui/plugins/auth-server/components/Scopes/ScopeForm.js b/admin-ui/plugins/auth-server/components/Scopes/ScopeForm.js
@@ -407,7 +407,7 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
                           defaultValue={
                             ['CLIENT', 'USER'].includes(scope.creatorType)
                               ? scope.creatorType +
-                                  '(' +
+                                  ' (' +
                                   scope.creatorId +
                                   ')' || ''
                               : scope.creatorType

diff --git a/admin-ui/plugins/auth-server/redux/actions/ScopeActions.js b/admin-ui/plugins/auth-server/redux/actions/ScopeActions.js
@@ -13,6 +13,8 @@ import {
   GET_SCOPE_BY_PATTERN,
   GET_SCOPE_BY_PATTERN_RESPONSE,
   SEARCH_SCOPES,
+  GET_SCOPE_BY_CREATOR,
+  GET_SCOPE_BY_CREATOR_RESPONSE,
 } from './types'
 
 export const getScopes = (action) => ({
@@ -84,3 +86,13 @@ export const setCurrentItem = (item) => ({
   type: SET_ITEM,
   payload: { item },
 })
+
+export const getScopeByCreator = (item) => ({
+  type: GET_SCOPE_BY_CREATOR,
+  payload: { item },
+})
+
+export const getScopeByCreatorResponse = (data) => ({
+  type: GET_SCOPE_BY_CREATOR_RESPONSE,
+  payload: { data },
+})
diff --git a/admin-ui/plugins/auth-server/redux/actions/types.js b/admin-ui/plugins/auth-server/redux/actions/types.js
@@ -24,6 +24,8 @@ export const DELETE_SCOPE_RESPONSE = 'DELETE_SCOPE_RESPONSE'
 export const SET_SCOPE_ITEM = 'SET_SCOPE_ITEM'
 export const GET_SCOPE_BY_PATTERN = 'GET_SCOPE_BY_PATTERN'
 export const GET_SCOPE_BY_PATTERN_RESPONSE = 'GET_SCOPE_BY_PATTERN_RESPONSE'
+export const GET_SCOPE_BY_CREATOR = 'GET_SCOPE_BY_CREATOR'
+export const GET_SCOPE_BY_CREATOR_RESPONSE = 'GET_SCOPE_BY_CREATOR_RESPONSE'
 
 // Clients
 export const GET_OPENID_CLIENTS = 'GET_OPENID_CLIENTS'

diff --git a/admin-ui/plugins/auth-server/redux/api/ScopeApi.js b/admin-ui/plugins/auth-server/redux/api/ScopeApi.js
@@ -19,6 +19,13 @@ export default class ScopeApi {
       })
     })
   }
+  getScopeByCreator = async (inum) => {
+    return new Promise((resolve, reject) => {
+      this.api.getScopeByCreator(inum, (error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
 
   getScope = async (id) => {
     return new Promise((resolve, reject) => {

diff --git a/admin-ui/plugins/auth-server/redux/reducers/ScopeReducer.js b/admin-ui/plugins/auth-server/redux/reducers/ScopeReducer.js
@@ -14,6 +14,7 @@ import {
   GET_SCOPE_BY_PATTERN,
   GET_SCOPE_BY_PATTERN_RESPONSE,
   SEARCH_SCOPES,
+  GET_SCOPE_BY_CREATOR_RESPONSE,
 } from '../actions/types'
 import reducerRegistry from 'Redux/reducers/ReducerRegistry'
 const INIT_STATE = {
@@ -22,6 +23,7 @@ const INIT_STATE = {
   loading: false,
   saveOperationFlag: false,
   errorInSaveOperationFlag: false,
+  scopesByCreator: [],
 }
 
 const reducerName = 'scopeReducer'
@@ -120,6 +122,11 @@ export default function scopeReducer(state = INIT_STATE, action) {
         return handleDefault()
       }
 
+    case GET_SCOPE_BY_CREATOR_RESPONSE:
+      return {
+        ...state,
+        scopesByCreator: action.payload.data,
+      }
     case SET_ITEM:
       return {
         ...state,

diff --git a/admin-ui/plugins/auth-server/redux/sagas/OAuthScopeSaga.js b/admin-ui/plugins/auth-server/redux/sagas/OAuthScopeSaga.js
@@ -14,6 +14,7 @@ import {
   addScopeResponse,
   editScopeResponse,
   deleteScopeResponse,
+  getScopeByCreatorResponse,
 } from '../actions/ScopeActions'
 import {
   GET_SCOPES,
@@ -23,6 +24,7 @@ import {
   EDIT_SCOPE,
   DELETE_SCOPE,
   GET_SCOPE_BY_PATTERN,
+  GET_SCOPE_BY_CREATOR,
 } from '../actions/types'
 import { SCOPE } from '../audit/Resources'
 import {
@@ -33,10 +35,7 @@ import {
 } from '../../../../app/audit/UserActionType'
 import ScopeApi from '../api/ScopeApi'
 import { getClient } from 'Redux/api/base'
-import {
-  isFourZeroOneError,
-  addAdditionalData,
-} from 'Utils/TokenController'
+import { isFourZeroOneError, addAdditionalData } from 'Utils/TokenController'
 import { postUserAction } from 'Redux/api/backend-api'
 
 const JansConfigApi = require('jans_config_api')
@@ -67,6 +66,21 @@ export function* getScopeByInum() {
     }
   }
 }
+export function* getScopeByCreator({ payload }) {
+  const audit = yield* initAudit()
+  try {
+    addAdditionalData(audit, FETCH, SCOPE, {})
+    const scopeApi = yield* newFunction()
+    const data = yield call(scopeApi.getScopeByCreator, payload.item.inum)
+    yield put(getScopeByCreatorResponse(data))
+    yield call(postUserAction, audit)
+  } catch (e) {
+    if (isFourZeroOneError(e)) {
+      const jwt = yield select((state) => state.authReducer.userinfo_jwt)
+      yield put(getAPIAccessToken(jwt))
+    }
+  }
+}
 
 export function* getScopes({ payload }) {
   const audit = yield* initAudit()
@@ -155,6 +169,9 @@ export function* deleteAnScope({ payload }) {
 export function* watchGetScopeByInum() {
   yield takeEvery(GET_SCOPE_BY_INUM, getScopeByInum)
 }
+export function* watchGetScopeByCreator() {
+  yield takeEvery(GET_SCOPE_BY_CREATOR, getScopeByCreator)
+}
 export function* watchGetScopes() {
   yield takeLatest(GET_SCOPES, getScopes)
 }
@@ -183,5 +200,6 @@ export default function* rootSaga() {
     fork(watchAddScope),
     fork(watchEditScope),
     fork(watchDeleteScope),
+    fork(watchGetScopeByCreator),
   ])
 }