From 57807c1fe0d70b3ca6a8432e80d38bc8d89efdab Mon Sep 17 00:00:00 2001 From: = Date: Thu, 21 Apr 2022 15:07:01 +0530 Subject: [PATCH] feat: design of API key page --- admin-ui/app/index.js | 16 ++-- admin-ui/app/redux/api/backend-api.js | 45 ++++++++--- admin-ui/app/redux/sagas/LicenseSaga.js | 20 +++-- admin-ui/app/utils/ApiKeyRedirect.js | 83 +++++++++++++++++++ admin-ui/app/utils/AppAuthProvider.js | 4 +- admin-ui/app/utils/LicenseScreens/ApiKey.js | 89 +++++++++++++++++++++ admin-ui/app/utils/ViewRedirect.js | 39 +++++++-- 7 files changed, 261 insertions(+), 35 deletions(-) create mode 100644 admin-ui/app/utils/ApiKeyRedirect.js create mode 100644 admin-ui/app/utils/LicenseScreens/ApiKey.js diff --git a/admin-ui/app/index.js b/admin-ui/app/index.js index 8743616ea..30543b385 100755 --- a/admin-ui/app/index.js +++ b/admin-ui/app/index.js @@ -1,13 +1,13 @@ -import "@babel/polyfill"; -import React from "react"; -import { render } from "react-dom"; -import App from "./components/App"; -import { I18nextProvider } from "react-i18next"; -import i18n from "./i18n"; +import '@babel/polyfill' +import React from 'react' +import { render } from 'react-dom' +import App from './components/App' +import { I18nextProvider } from 'react-i18next' +import i18n from './i18n' render( , - document.querySelector("#root") -); + document.querySelector('#root'), +) diff --git a/admin-ui/app/redux/api/backend-api.js b/admin-ui/app/redux/api/backend-api.js index b29d84b5b..6ba2b0b15 100644 --- a/admin-ui/app/redux/api/backend-api.js +++ b/admin-ui/app/redux/api/backend-api.js @@ -1,11 +1,14 @@ import axios from '../api/axios' import axios_instance from 'axios' - +const JansConfigApi = require('jans_config_api') +import { useSelector } from 'react-redux' // Get OAuth2 Configuration +const licenceApi = new JansConfigApi.AdminUILicenseApi() + export const fetchServerConfiguration = async (token) => { - const headers = { Authorization: `Bearer ${token}`}; + const headers = { Authorization: `Bearer ${token}` } return axios - .get('/oauth2/config', {headers}) + .get('/oauth2/config', { headers }) .then((response) => response.data) .catch((error) => { console.error( @@ -86,15 +89,35 @@ export const fetchApiTokenWithDefaultScopes = async () => { } // Check License present + export const checkLicensePresent = async (token) => { - const headers = { Authorization: `Bearer ${token}`}; - return axios - .get('/license/checkLicense', {headers}) - .then((response) => response.data) - .catch((error) => { - console.error('Error checking license of admin-ui', error) - return false + console.log('checkLicensePresentcheckLicensePresent') + const headers = { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': + 'Origin, X-Requested-With, Content-Type, Accept', + 'Content-Type': 'application/json', + 'Access-Control-Allow-Credentials': true, + // issuer: token, + Authorization: `Bearer ${token}`, + } + console.log('HEADERS', headers) + licenceApi + .isLicenseActive({ headers }) + .then((data) => { + console.log('data', data) + }) + .catch((err) => { + console.log('err', err) }) + return false + // return axios + // .get('/license/checkLicense', { headers }) + // .then((response) => response.data) + // .catch((error) => { + // console.error('Error checking license of admin-ui', error) + // return false + // }) } // Activate license using key @@ -104,7 +127,7 @@ export const activateLicense = async (licenseKey, token) => { .post('/license/activateLicense', data, { headers: { 'Content-Type': 'application/json', - 'Authorization': `Bearer ${token}` + Authorization: `Bearer ${token}`, }, }) .then((response) => response.data) diff --git a/admin-ui/app/redux/sagas/LicenseSaga.js b/admin-ui/app/redux/sagas/LicenseSaga.js index db3e8e798..a6ce7d897 100644 --- a/admin-ui/app/redux/sagas/LicenseSaga.js +++ b/admin-ui/app/redux/sagas/LicenseSaga.js @@ -8,7 +8,11 @@ import { activateLicenseResponse, } from '../actions' -import { checkLicensePresent, activateLicense, fetchApiTokenWithDefaultScopes } from '../api/backend-api' +import { + checkLicensePresent, + activateLicense, + fetchApiTokenWithDefaultScopes, +} from '../api/backend-api' function* getApiTokenWithDefaultScopes() { const response = yield call(fetchApiTokenWithDefaultScopes) @@ -17,12 +21,14 @@ function* getApiTokenWithDefaultScopes() { function* checkLicensePresentWorker() { try { - const token = yield* getApiTokenWithDefaultScopes(); + // const issuer = yield select((state) => state.authReducer.issuer) + const token = yield* getApiTokenWithDefaultScopes() const response = yield call(checkLicensePresent, token) - if (response) { - yield put(checkLicensePresentResponse(response)) - return - } + // if (response) { + // yield put(checkLicensePresentResponse(response)) + // return + // } + yield put(checkLicensePresentResponse(false)) } catch (error) { console.log('Error in checking License present.', error) } @@ -31,7 +37,7 @@ function* checkLicensePresentWorker() { function* activateLicenseWorker({ payload }) { try { - const token = yield* getApiTokenWithDefaultScopes(); + const token = yield* getApiTokenWithDefaultScopes() const response = yield call(activateLicense, payload.licenseKey, token) if (response) { yield put(activateLicenseResponse(response)) diff --git a/admin-ui/app/utils/ApiKeyRedirect.js b/admin-ui/app/utils/ApiKeyRedirect.js new file mode 100644 index 000000000..63031ee71 --- /dev/null +++ b/admin-ui/app/utils/ApiKeyRedirect.js @@ -0,0 +1,83 @@ +import React from 'react' +import { Container } from './../components' +import GluuNotification from './../routes/Apps/Gluu/GluuNotification' +import GluuCommitDialog from '../../app/routes/Apps/Gluu/GluuCommitDialog' +import { useTranslation } from 'react-i18next' +import ApiKey from './LicenseScreens/ApiKey' +function ApiKeyRedirect({ + backendIsUp, + isLicenseValid, + activateLicense, + redirectUrl, + islicenseCheckResultLoaded, + isLicenseActivationResultLoaded, +}) { + const { t } = useTranslation() + function submitForm(message) { + activateLicense(message.trim()) + } + + function toggle() { + window.location.href = redirectUrl + } + + return ( + + + {/*
+ loading... +
*/} + {!isLicenseValid && islicenseCheckResultLoaded && } + {/* */} + {!backendIsUp && ( + + )} + {isLicenseActivationResultLoaded && !isLicenseValid && ( + + )} + + + ) +} +export default ApiKeyRedirect diff --git a/admin-ui/app/utils/AppAuthProvider.js b/admin-ui/app/utils/AppAuthProvider.js index d631e3666..b72138782 100755 --- a/admin-ui/app/utils/AppAuthProvider.js +++ b/admin-ui/app/utils/AppAuthProvider.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import ViewRedirect from './ViewRedirect' +import ApiKeyRedirect from './ApiKeyRedirect' import { withRouter } from 'react-router' import { saveState } from './TokenController' import queryString from 'query-string' @@ -100,12 +101,13 @@ class AppAuthProvider extends Component { } render() { const { showContent } = this.state + console.log(showContent) return ( {showContent && this.props.children} {!showContent && ( - { + const { name, value } = e.target + setValues((prevState) => ({ + ...prevState, + [name]: value, + })) + } + + const submitValues = () => { + console.log(values) + } + + return ( +
+
+
+
+ +
+
+
+
+ Please enter details to activate +
+
+
+
+ + + + + + + + + submitValues()} + className="btn mt-3" + style={{ backgroundColor: '#00a361', color: 'white' }} + /> +
+
+
+
+ ) +} +export default ApiKey diff --git a/admin-ui/app/utils/ViewRedirect.js b/admin-ui/app/utils/ViewRedirect.js index bbb3f83b8..e72854138 100644 --- a/admin-ui/app/utils/ViewRedirect.js +++ b/admin-ui/app/utils/ViewRedirect.js @@ -1,17 +1,26 @@ +//ToDo :: Delete This page once auth things works fine + import React from 'react' import { Container } from './../components' import GluuNotification from './../routes/Apps/Gluu/GluuNotification' import GluuCommitDialog from '../../app/routes/Apps/Gluu/GluuCommitDialog' import { useTranslation } from 'react-i18next' -function ViewRedirect({ backendIsUp, isLicenseValid, activateLicense, redirectUrl, islicenseCheckResultLoaded, isLicenseActivationResultLoaded }) { +function ViewRedirect({ + backendIsUp, + isLicenseValid, + activateLicense, + redirectUrl, + islicenseCheckResultLoaded, + isLicenseActivationResultLoaded, +}) { const { t } = useTranslation() function submitForm(message) { - activateLicense(message.trim()); + activateLicense(message.trim()) } function toggle() { - window.location.href = redirectUrl; + window.location.href = redirectUrl } return ( @@ -39,20 +48,34 @@ function ViewRedirect({ backendIsUp, isLicenseValid, activateLicense, redirectUr {!backendIsUp && ( )} {isLicenseActivationResultLoaded && !isLicenseValid && ( )} - +