Skip to content

Commit

Permalink
MOSIP-33197: Changes in Create Oidc Client Page (#455)
Browse files Browse the repository at this point in the history 
Signed-off-by: SwethaKrish4 <[email protected]>
  • Loading branch information
@SwethaKrish4
SwethaKrish4 authored Jun 13, 2024
1 parent 9ccccd6 commit 8ab9014
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 79 deletions.
2 changes: 2 additions & 0 deletions pmp-reactjs-ui/public/i18n/ara.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,9 +198,11 @@
"redirectUrl": "إعادة توجيه URI",
"redirectUrlPlaceHolder": "أدخل إعادة توجيه URI",
"grantTypes": "أنواع المنح",
"authorizationCode": "قانون التفويض",
"enterGrantTypes": "أدخل أنواع المنح",
"delete": "يمسح",
"addNew": "اضف جديد",
"errorInResponse": "أثناء جلب جميع سياسات شركاء المصادقة المعتمدة، واجهنا خطأ",
"requestSuccessHeader": "تم إرسال الطلب بنجاح!",
"requestSuccessMsg": "تم إرسال طلب إنشاء عميل OIDC بنجاح. الموافقة في انتظار المشرف.",
"commentBoxDesc": "اذكر الغرض من طلب عميل OIDC",
Expand Down
2 changes: 2 additions & 0 deletions pmp-reactjs-ui/public/i18n/eng.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,9 +198,11 @@
"redirectUrl": "Redirect URI",
"redirectUrlPlaceHolder": "Enter Redirect URI",
"grantTypes": "Grant Types",
"authorizationCode": "Authorization Code",
"enterGrantTypes": "Enter Grant Types",
"delete": "Delete",
"addNew": "Add New",
"errorInResponse": "While fetching all approved auth partner policies, we have encountered with an error",
"requestSuccessHeader": "Request Submitted Successfully!",
"requestSuccessMsg": "OIDC Client creation request has been successfully submitted. Approval is pending with admin.",
"commentBoxDesc": "Mention the purpose of requesting the OIDC Client",
Expand Down
2 changes: 2 additions & 0 deletions pmp-reactjs-ui/public/i18n/fra.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,11 @@
"redirectUrl": "URI de redirection",
"redirectUrlPlaceHolder": "Entrez l'URI de redirection",
"grantTypes": "Types de subventions",
"authorizationCode": "Code d'autorisation",
"enterGrantTypes": "Entrez les types de subventions",
"delete": "Supprimer",
"addNew": "Ajouter un nouveau",
"errorInResponse": "Lors de la récupération de toutes les politiques de partenaires d'authentification approuvées, nous avons rencontré une erreur",
"requestSuccessHeader": "Demande soumise avec succès !",
"requestSuccessMsg": "La demande de création de client OIDC a été soumise avec succès. L'approbation est en attente auprès de l'administrateur.",
"commentBoxDesc": "Mentionner le but de la demande du client OIDC",
Expand Down
102 changes: 47 additions & 55 deletions pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import DropdownComponent from '../common/fields/DropdownComponent';
Expand All @@ -7,7 +7,7 @@ import { isLangRTL } from '../../utils/AppUtils';
import backArrow from '../../svg/back_arrow.svg';
import info from '../../svg/info_icon.svg';
import { getPartnerManagerUrl, handleServiceErrors, getPartnerTypeDescription, createRequest,
handleMouseClickForDropdown, moveToOidcClientsList } from '../../utils/AppUtils';
moveToOidcClientsList } from '../../utils/AppUtils';
import { HttpService } from '../../services/HttpService';
import DropdownWithSearchComponent from "../common/fields/DropdownWithSearchComponent";
import LoadingIcon from "../common/LoadingIcon";
Expand All @@ -33,22 +33,18 @@ function CreateOidcClient() {
const [policyGroupName, setPolicyGroupName] = useState("");
const [partnerData, setPartnerData] = useState([]);
const [redirectUrls, setRedirectUrls] = useState(['']);
const [grantTypes, setGrantTypes] = useState(['']);
const [grantTypes, setGrantTypes] = useState("");
const [grantTypesList, setGrantTypesList] = useState(['']);
const [grantTypesDropdownData, setGrantTypesDropdownData] = useState([]);
const [validationError, setValidationError] = useState("");
const [jsonError, setJsonError] = useState("");
const [invalidLogoUrl, setInvalidLogoUrl] = useState("");
const [invalidRedirectUrl, setInvalidRedirectUrl] = useState("");
const tooltipRef = useRef(null);

const cancelErrorMsg = () => {
setErrorMsg("");
};

useEffect(() => {
const clickOutSideDropdown = handleMouseClickForDropdown(tooltipRef, () => setShowPublicKeyToolTip(false));
return clickOutSideDropdown;
}, [tooltipRef]);

useEffect(() => {
const fetchData = async () => {
try {
Expand All @@ -62,11 +58,12 @@ function CreateOidcClient() {
const resData = responseData.response;
setPartnerData(resData);
setPartnerIdDropdownData(createPartnerIdDropdownData('partnerId', resData));
setGrantTypesDropdownData(createGrantTypesDropdownData());
} else {
handleServiceErrors(responseData, setErrorCode, setErrorMsg);
}
} else {
setErrorMsg(t('policies.errorInPoliciesList'));
setErrorMsg(t('createOidcClient.errorInResponse'));
}
} catch (err) {
console.error('Error fetching data:', err);
Expand Down Expand Up @@ -98,6 +95,15 @@ function CreateOidcClient() {
return dataArr;
}

const createGrantTypesDropdownData =() => {
let dataArr = [];
dataArr.push({
fieldCode: t('createOidcClient.authorizationCode'),
fieldValue: "authorization_code"
});
return dataArr;
}

const createPoliciesDropdownData = (fieldName, dataList) => {
let dataArr = [];
dataList.forEach(item => {
Expand Down Expand Up @@ -141,6 +147,13 @@ function CreateOidcClient() {
}
};

const handleGrantTypesChange = (fieldName, selectedValue) => {
setGrantTypes(selectedValue);
const grantTypeValue = [''];
grantTypeValue[0] = selectedValue
setGrantTypesList(grantTypeValue);
}


const navigate = useNavigate();
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
Expand Down Expand Up @@ -169,20 +182,6 @@ function CreateOidcClient() {
setRedirectUrls(newRedirectUrls);
};

// Below code related to addind & deleting of Grant Types
const onChangeGrantType = (index, value) => {
const newGrantTypes = [...grantTypes];
newGrantTypes[index] = value;
setGrantTypes(newGrantTypes);
}
const addNewGrantTypes = () => {
setGrantTypes([...grantTypes, '']);
}
const onDeleteGrantTypes = (index) => {
const newGrantTypes = grantTypes.filter((_, i) => i !== index);
setGrantTypes(newGrantTypes);
}

const handlePublicKeyChange = (value) => {
setPublicKey(value);
if (value.trim() === "") {
Expand Down Expand Up @@ -220,12 +219,10 @@ function CreateOidcClient() {
authPartnerId: partnerId,
logoUri: logoUrl,
redirectUris: redirectUrls,
grantTypes: grantTypes,
grantTypes: grantTypesList,
clientAuthMethods: ["private_key_jwt"],
clientNameLangMap: {
"eng": oidcClientName,
"fra": oidcClientName,
"ara": oidcClientName
"eng": oidcClientName
}
});
console.log(request);
Expand Down Expand Up @@ -265,7 +262,8 @@ function CreateOidcClient() {
setPublicKey("");
setLogoUrl("");
setRedirectUrls(['']);
setGrantTypes(['']);
setGrantTypes("");
setGrantTypesList(['']);
setPartnerComments("");
setJsonError("");
setInvalidLogoUrl("");
Expand Down Expand Up @@ -409,11 +407,13 @@ function CreateOidcClient() {
<div className="flex flex-col w-full">
<label className="flex space-x-1 items-center text-dark-blue text-base font-semibold mb-1">
{t('createOidcClient.publicKey')}<span className="text-crimson-red">*</span>
<img src={info} alt="" className={`${isLoginLanguageRTL ? "mr-2" :"ml-2"} cursor-pointer`} onClick={() => setShowPublicKeyToolTip(!showPublicKeyToolTip)} />
<img src={info} alt="" className={`${isLoginLanguageRTL ? "mr-2" :"ml-2"} cursor-pointer`}
onMouseEnter={() => setShowPublicKeyToolTip(true)}
onMouseLeave={() => setShowPublicKeyToolTip(false)} />
</label>
{showPublicKeyToolTip &&
(
<div ref={tooltipRef} className={`z-20 w-[24%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL ? "mr-[10%]" :"ml-[8%]"} shadow-lg bg-white border border-gray-300 p-3 rounded`}>
<div className={`z-20 -mt-2 w-[15%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL ? "mr-[10%]" :"ml-[120px]"} shadow-lg bg-white border border-gray-300 p-3 rounded`}>
<p className="text-black text-sm">{t('createOidcClient.publicKeyToolTip')}</p>
</div>
)}
Expand Down Expand Up @@ -447,40 +447,32 @@ function CreateOidcClient() {
placeholder={t('createOidcClient.redirectUrlPlaceHolder')}
className="w-[85%] focus:outline-none"
/>
{index > 0 && (
{index < redirectUrls.length - 1 && (
<p onClick={() => onDeleteRedirectUrl(index)} className="text-sm text-[#1447b2] font-semibold cursor-pointer">
{t('createOidcClient.delete')}
</p>
)}
{index === redirectUrls.length - 1 && (
<p type="button" className="text-[#1447b2] font-bold text-xs cursor-pointer" onClick={addNewRedirectUrl}>
<span className="text-lg text-center">+</span>{t('createOidcClient.addNew')}
</p>
)}
</div>
))}
{invalidRedirectUrl && <span className="text-sm text-crimson-red font-medium">{invalidRedirectUrl}</span>}
<p type="button" className="text-[#1447b2] font-bold text-xs cursor-pointer" onClick={addNewRedirectUrl}>
<span className="text-lg text-center">+</span>{t('createOidcClient.addNew')}
</p>
</div>

<div className="flex flex-col w-[48%]">
<label className="block text-dark-blue text-base font-semibold mb-1">{t('createOidcClient.grantTypes')}<span className="text-crimson-red">*</span></label>
{grantTypes.map((grantType, index) => (
<div key={index} className="flex w-full justify-between items-center h-11 px-2 py-2 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 focus:shadow-outline mb-2">
<input
value={grantType}
onChange={(e) => onChangeGrantType(index, e.target.value)}
placeholder={t('createOidcClient.enterGrantTypes')}
className="w-[85%] focus:outline-none"
/>
{index > 0 && (
<p onClick={() => onDeleteGrantTypes(index)} className="text-sm text-[#1447b2] font-semibold cursor-pointer">
{t('createOidcClient.delete')}
</p>
)}
</div>
))}
<p type="button" onClick={() => addNewGrantTypes()} className="text-[#1447b2] font-bold text-xs cursor-pointer">
<span className="text-lg text-center">+</span>{t('createOidcClient.addNew')}
</p>
</div>
<DropdownComponent
fieldName='grantTypes'
dropdownDataList={grantTypesDropdownData}
onDropDownChangeEvent={handleGrantTypesChange}
fieldNameKey='createOidcClient.grantTypes*'
placeHolderKey='createOidcClient.enterGrantTypes'
selectedDropdownValue={grantTypes}
styleSet={styles}>
</DropdownComponent>
</div>
</div>

<div className="flex my-[1%]">
Expand Down
17 changes: 5 additions & 12 deletions pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent,
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [showTooltip, setShowTooltip] = useState(false);
const dropdownRef = useRef(null);
const tooltipRef = useRef(null);

const containsAsterisk = fieldNameKey.includes('*');
fieldNameKey = containsAsterisk ? fieldNameKey.replace('*', '') : fieldNameKey;
Expand All @@ -26,11 +25,6 @@ function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent,
return clickOutSideDropdown;
}, [dropdownRef]);

useEffect(() => {
const clickOutSideDropdown = handleMouseClickForDropdown(tooltipRef, () => setShowTooltip(false));
return clickOutSideDropdown;
}, [tooltipRef]);

useEffect(() => {
setSelectedDropdownEntry(selectedDropdownValue || "");
}, [selectedDropdownValue]);
Expand All @@ -46,20 +40,19 @@ function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent,
}
};

const handleIconClick = () => {
setShowTooltip(!showTooltip);
};

return (
<div key={fieldName} className={`ml-4 mb-2 ${(styleSet && styleSet.outerDiv) ? styleSet.outerDiv : ''}`}>
<label className={`flex text-dark-blue font-semibold text-sm mb-2 ${(styleSet && styleSet.dropdownLabel) ? styleSet.dropdownLabel : ''}`}>
{t(fieldNameKey)}{containsAsterisk ? <span className="text-crimson-red">*</span> : <span>{isLoginLanguageRTL ?"" :":"}</span>}
{addInfoIcon && (
<img src={infoIcon} alt="" className= {`cursor-pointer`} onClick={handleIconClick}></img>
<img src={infoIcon} alt="" className= {`ml-1 cursor-pointer`}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}>
</img>
)}
</label>
{showTooltip && (
<div ref={tooltipRef} className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL?"mr-[9.5%]":"ml-[8.5%]"} shadow-lg bg-white border border-gray-300 rounded`}>
<div className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL?"mr-[9.5%]":"ml-[115px]"} shadow-lg bg-white border border-gray-300 rounded`}>
<p className="text-black text-sm">{t(infoKey)}</p>
</div>
)}
Expand Down
17 changes: 5 additions & 12 deletions pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownCh
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;
Expand All @@ -30,11 +29,6 @@ function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownCh
return clickOutSideDropdown;
}, [dropdownRef]);

useEffect(() => {
const clickOutSideDropdown = handleMouseClickForDropdown(tooltipRef, () => setShowTooltip(false));
return clickOutSideDropdown;
}, [tooltipRef]);

useEffect(() => {
setSelectedDropdownEntry(selectedDropdownValue || "");
}, [selectedDropdownValue]);
Expand All @@ -51,20 +45,19 @@ function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownCh
};
};

const handleIconClick = () => {
setShowTooltip(!showTooltip);
};

return (
<div key={fieldName} className={`ml-4 mb-2 ${(styleSet && styleSet.outerDiv) ? styleSet.outerDiv : ''}`}>
<label className={`flex text-dark-blue font-semibold text-sm mb-2 ${(styleSet && styleSet.dropdownLabel) ? styleSet.dropdownLabel : ''}`}>
{t(fieldNameKey)}{containsAsterisk ? <span className="text-crimson-red">*</span> : ":"}
{addInfoIcon && (
<img src={infoIcon} alt="" className= {`cursor-pointer`} onClick={handleIconClick}></img>
<img src={infoIcon} alt="" className= {`ml-1 cursor-pointer`}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}>
</img>
)}
</label>
{showTooltip && (
<div ref={tooltipRef} className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL?"mr-[9.5%]":"ml-[8.5%]"} shadow-lg bg-white border border-gray-300 rounded`}>
<div className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL?"mr-[9.5%]":"ml-[135px]"} shadow-lg bg-white border border-gray-300 rounded`}>
<p className="text-black text-sm">{t(infoKey)}</p>
</div>
)}
Expand Down

0 comments on commit 8ab9014

Please sign in to comment.