From cc148c4d03cb217dfe93f43727ecfd0a76af811c Mon Sep 17 00:00:00 2001 From: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> Date: Mon, 10 Jun 2024 18:52:12 +0530 Subject: [PATCH] MOSIP-33206: Ui integration of Create OIDC Client (#437) Signed-off-by: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> --- pmp-reactjs-ui/public/i18n/ara.json | 10 +-- pmp-reactjs-ui/public/i18n/eng.json | 10 +-- pmp-reactjs-ui/public/i18n/fra.json | 10 +-- .../CreateOidcClient.js | 89 ++++++++++++++----- .../fields/DropdownWithSearchComponent.js | 36 ++++++-- 5 files changed, 111 insertions(+), 44 deletions(-) diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json index 5e0b9ef0e..a6a55883a 100644 --- a/pmp-reactjs-ui/public/i18n/ara.json +++ b/pmp-reactjs-ui/public/i18n/ara.json @@ -191,16 +191,16 @@ "publicKey": "المفتاح العمومي", "publicKeyToolTip": "يُسمح بتنسيق JWK فقط", "publicKeyPlaceHolder": "أدخل المفتاح العام بتنسيق JWK فقط", - "loginUrl": "عنوان URL لتسجيل الدخول", - "loginUrlPlaceHolder": "أدخل عنوان URL للشعار", - "redirectUrl": "إعادة توجيه URL", + "logoUrl": "عنوان URI للشعار", + "logoUrlPlaceHolder": "أدخل عنوان URI للشعار", + "redirectUrl": "إعادة توجيه URI", "redirectUrlPlaceHolder": "أدخل إعادة توجيه URI", - "enterLogoUrl": "أدخل عنوان URL للشعار", "grantTypes": "أنواع المنح", "enterGrantTypes": "أدخل أنواع المنح", "delete": "يمسح", "addNew": "اضف جديد", - "commentBoxDesc": "اذكر الغرض من طلب عميل OIDC" + "commentBoxDesc": "اذكر الغرض من طلب عميل OIDC", + "errorInCreateOIDC": "أثناء طلب عميل OIDC، واجهنا خطأ" }, "serverError": { "PMS_COR_001": "معلمة الإدخال مفقود", diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json index bca28f61f..4b53d2303 100644 --- a/pmp-reactjs-ui/public/i18n/eng.json +++ b/pmp-reactjs-ui/public/i18n/eng.json @@ -191,16 +191,16 @@ "publicKey": "Public Key", "publicKeyToolTip": "Only JWK format is allowed", "publicKeyPlaceHolder": "Enter public key in JWK format only", - "loginUrl": "Login URL", - "loginUrlPlaceHolder": "Enter Logo URL", - "redirectUrl": "Redirect URL", + "logoUrl": "Logo URI", + "logoUrlPlaceHolder": "Enter Logo URI", + "redirectUrl": "Redirect URI", "redirectUrlPlaceHolder": "Enter Redirect URI", - "enterLogoUrl": "Enter Logo Url", "grantTypes": "Grant Types", "enterGrantTypes": "Enter Grant Types", "delete": "Delete", "addNew": "Add New", - "commentBoxDesc": "Mention the purpose of requesting the OIDC Client" + "commentBoxDesc": "Mention the purpose of requesting the OIDC Client", + "errorInCreateOIDC": "While requesting OIDC Client, we have encountered with an error" }, "serverError": { "PMS_COR_001": "Missing Input Parameter", diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json index 2fd11f81e..6c110d015 100644 --- a/pmp-reactjs-ui/public/i18n/fra.json +++ b/pmp-reactjs-ui/public/i18n/fra.json @@ -192,16 +192,16 @@ "publicKey": "Clé publique", "publicKeyToolTip": "Seul le format JWK est autorisé", "publicKeyPlaceHolder": "Saisissez la clé publique au format JWK uniquement", - "loginUrl": "URL de connexion", - "loginUrlPlaceHolder": "Entrez l'URL du logo", - "redirectUrl": "URL de redirection", + "logoUrl": "URI de Logo", + "logoUrlPlaceHolder": "Entrez l'URI du logo", + "redirectUrl": "URI de redirection", "redirectUrlPlaceHolder": "Entrez l'URI de redirection", - "enterLogoUrl": "Entrez l'URL du logo", "grantTypes": "Types de subventions", "enterGrantTypes": "Entrez les types de subventions", "delete": "Supprimer", "addNew": "Ajouter un nouveau", - "commentBoxDesc": "Mentionner le but de la demande du client OIDC" + "commentBoxDesc": "Mentionner le but de la demande du client OIDC", + "errorInCreateOIDC": "Lors de la demande du client OIDC, nous avons rencontré une erreur" }, "serverError": { "PMS_COR_001": "Paramètre d'entrée manquant", diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js b/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js index 322d68def..afccd9257 100644 --- a/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js +++ b/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js @@ -15,8 +15,8 @@ function CreateOidcClient() { const [oidcClientName, setOidcClientName] = useState(""); const [publicKey, setPublicKey] = useState(""); const [showPublicKeyToolTip, setShowPublicKeyToolTip] = useState(false); - const [loginUrl, setLoginUrl] = useState(""); - const [redirectUrls, setRedirectUrls] = useState([]); + const [redirectUrl, setRedirectUrl] = useState(""); + const [redirectUrlList, setRedirectUrlList] = useState([]); const [logoUrl, setLogoUrl] = useState(""); const [typeOfGrants, setTypeOfGrants] = useState([]); const [grantTypes, setGrantTypes] = useState(""); @@ -45,9 +45,8 @@ function CreateOidcClient() { if (responseData.response) { const resData = responseData.response; setPartnerData(resData); - + console.log(resData); setPartnerIdDropdownData(createPartnerIdDropdownData('partnerId', resData)); - setPoliciesDropdownData(createPoliciesDropdownData('policyName', resData)); } else { handleServiceErrors(responseData, setErrorCode, setErrorMsg); } @@ -96,7 +95,8 @@ function CreateOidcClient() { if (!alreadyAdded) { dataArr.push({ fieldCode: policy[fieldName], - fieldValue: policy[fieldName] + fieldValue: policy[fieldName], + fieldDescription: policy.policyDescription }); } }); @@ -111,6 +111,7 @@ function CreateOidcClient() { if (selectedPartner) { setPartnerType(getPartnerTypeDescription(selectedPartner.partnerType, t)); setPolicyGroupName(selectedPartner.policyGroupName); + setPoliciesDropdownData(createPoliciesDropdownData('policyName', partnerData)); } }; @@ -139,19 +140,19 @@ function CreateOidcClient() { // Below code related to adding & deleting of Redirect URLs const addRedirectUrl = () => { - const updatedRedirectUrls = [...redirectUrls, []]; - setRedirectUrls(updatedRedirectUrls); + const updatedRedirectUrls = [...redirectUrlList, []]; + setRedirectUrlList(updatedRedirectUrls); console.log(updatedRedirectUrls); }; const handleRedirectUrlChange = (event, i) => { - const inputRedirectUrls = [...redirectUrls]; + const inputRedirectUrls = [...redirectUrlList]; inputRedirectUrls[i] = event.target.value; - setRedirectUrls(inputRedirectUrls); + setRedirectUrlList(inputRedirectUrls); }; const deleteLogoUrl = (i) => { - const filteredRedirectUrls = [...redirectUrls]; + const filteredRedirectUrls = [...redirectUrlList]; filteredRedirectUrls.splice(i, 1); - setRedirectUrls(filteredRedirectUrls); + setRedirectUrlList(filteredRedirectUrls); }; // Below code related to addind & deleting of Grant Types @@ -172,18 +173,59 @@ function CreateOidcClient() { setTypeOfGrants(filteredTypeOfGrants); }; + const clickOnSubmit = async () => { + setErrorCode(""); + setErrorMsg(""); + setDataLoaded(false); + let request = { + request: { + name: oidcClientName, + policyId: policyId, + publicKey: publicKey, + authPartnerId: partnerId, + logoUri: logoUrl, + redirectUris: redirectUrlList, + grantTypes: typeOfGrants, + clientAuthMethods: ["private_key_jwt"], + clientNameLangMap: { + "eng": oidcClientName + } + }, + } + console.log(request); + try { + const response = await HttpService.post(getPartnerManagerUrl(`/oauth/client`, process.env.NODE_ENV), request); + if (response) { + const responseData = response.data; + if (responseData && responseData.response) { + const resData = responseData.response; + console.log(resData); + console.log(`Response data: ${resData.length}`); + } else { + handleServiceErrors(responseData, setErrorCode, setErrorMsg); + } + } else { + setErrorMsg(t('createOidcClient.errorInCreateOIDC')); + } + setDataLoaded(true); + } catch (err) { + setErrorMsg(err); + console.log("Error fetching data: ", err); + } + } + const clearForm = () => { setPartnerComments(""); setOidcClientName(""); setPublicKey(""); - setLoginUrl(""); + setRedirectUrl(""); }; const styles = { outerDiv: "!ml-0 !mb-0", dropdownLabel: "!text-base !mb-1", - dropdownButton: "!w-full !h-12 !rounded-md !text-lg !text-left !text-grayish-blue", + dropdownButton: "!w-full !h-12 !rounded-md !text-lg !text-left", selectionBox: "!top-12" } @@ -231,7 +273,7 @@ function CreateOidcClient() {
-
-
- - setLoginUrl(e.target.value)} + + setLogoUrl(e.target.value)} className="h-12 px-2 py-3 border border-[#707070] rounded-md text-md text-dark-blue dark:placeholder-gray-400 bg-white leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar" - placeholder={t('createOidcClient.loginUrlPlaceHolder')} /> + placeholder={t('createOidcClient.logoUrlPlaceHolder')} />
@@ -302,13 +345,13 @@ function CreateOidcClient() {
diff --git a/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js b/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js index de8d5552d..db83b7f4e 100644 --- a/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js +++ b/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js @@ -1,17 +1,22 @@ import { useState, useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; -import { handleMouseClickForDropdown } from '../../../utils/AppUtils'; +import { handleMouseClickForDropdown, isLangRTL } from '../../../utils/AppUtils'; +import { getUserProfile } from '../../../services/UserProfileService'; +import infoIcon from '../../../svg/info_icon.svg'; function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownChangeEvent, fieldNameKey, - placeHolderKey, searchKey, selectedDropdownValue, styleSet}) { + placeHolderKey, searchKey, selectedDropdownValue, styleSet, addInfoIcon, infoKey, disabled}) { const { t } = useTranslation(); + const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); const [selectedDropdownEntry, setSelectedDropdownEntry] = useState(""); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [showTooltip, setShowTooltip] = useState(false); const [searchItem, setSearchItem] = useState(""); const dropdownRef = useRef(null); + const tooltipRef = useRef(null); const containsAsterisk = fieldNameKey.includes('*'); fieldNameKey = containsAsterisk ? fieldNameKey.replace('*', '') : fieldNameKey; @@ -25,6 +30,11 @@ function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownCh return clickOutSideDropdown; }, [dropdownRef]); + useEffect(() => { + const clickOutSideDropdown = handleMouseClickForDropdown(tooltipRef, () => setShowTooltip(false)); + return clickOutSideDropdown; + }, [tooltipRef]); + useEffect(() => { setSelectedDropdownEntry(selectedDropdownValue || ""); }, [selectedDropdownValue]); @@ -35,17 +45,31 @@ function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownCh onDropDownChangeEvent(fieldName, selectedid); }; const openDropdown = () => { - setSearchItem(""); - setIsDropdownOpen(!isDropdownOpen); + if (!disabled) { + setSearchItem(""); + setIsDropdownOpen(!isDropdownOpen); + }; + }; + + const handleIconClick = () => { + setShowTooltip(!showTooltip); }; return (
-