Skip to content

Commit

Permalink
Mosip-33276: Implemented View API Key Details Page (#526)
Browse files Browse the repository at this point in the history 
* MOSIP-33268: Implemented View API Key Detailes page

Signed-off-by: Anil_Kumar_Majji <[email protected]>

* MOSIP-33268: Implemented Copy API Key Pop-up

Signed-off-by: Anil_Kumar_Majji <[email protected]>

* MOSIP-33276: Implemented View Api Key Details Page

Signed-off-by: Anil_Kumar_Majji <[email protected]>

---------

Signed-off-by: Anil_Kumar_Majji <[email protected]>
  • Loading branch information
@Anil-kumar-Majji
Anil-kumar-Majji authored Jun 27, 2024
1 parent d8df665 commit 22b3688
Show file tree
Hide file tree
Showing 8 changed files with 316 additions and 21 deletions.
7 changes: 7 additions & 0 deletions pmp-reactjs-ui/public/i18n/ara.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,13 @@
"partnersComment": "تعليق الشريك",
"back": "خلف"
},
"viewApiKeyDetails": {
"viewApiKeyDetails": "عرض تفاصيل مفتاح API",
"apiKeyNameGoeshere": "اسم مفتاح API يظهر هنا",
"viewApiKeyId": "عرض معرف مفتاح API",
"label": "ملصق",
"copyApiKeyMsg": "يحتوي مفتاح API على معلومات حساسة. تأكد من نسخ مفتاح API قبل إغلاق هذه النافذة لأنه بمجرد إغلاقها - سيتم تعطيل نافذة API المنبثقة للعرض."
},
"editOidcClient": {
"editOidcClient": "تحرير عميل OIDC",
"authenticationServiceSection": "خدمات المصادقة",
Expand Down
8 changes: 7 additions & 1 deletion pmp-reactjs-ui/public/i18n/eng.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,13 @@
"commentsOfAdmin": "Comments of Admin",
"partnersComment": "Partner's Comment",
"back": "Back"

},
"viewApiKeyDetails": {
"viewApiKeyDetails": "View API Key Details",
"apiKeyNameGoeshere": "API Key Name Goes Here",
"viewApiKeyId": "View API Key ID",
"label": "Label",
"copyApiKeyMsg": "API Key contains sensitive information. Make sure you copy the API key before closing this window because once closed - the API Key pop up window will be disabled for view."
},
"editOidcClient": {
"editOidcClient": "Edit OIDC Client",
Expand Down
7 changes: 7 additions & 0 deletions pmp-reactjs-ui/public/i18n/fra.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,13 @@
"partnersComment": "Commentaire du partenaire",
"back": "Dos"
},
"viewApiKeyDetails": {
"viewApiKeyDetails": "عرض تفاصيل مفتاح API",
"apiKeyNameGoeshere": "اسم مفتاح API يظهر هنا",
"viewApiKeyId": "عرض معرف مفتاح API",
"label": "ملصق",
"copyApiKeyMsg": "La clé API contient des informations sensibles. Assurez-vous de copier la clé API avant de fermer cette fenêtre, car une fois fermée, la fenêtre contextuelle de la clé API sera désactivée."
},
"editOidcClient": {
"editOidcClient": "Modifier le client OIDC",
"authenticationServiceSection": "Services d'authentification",
Expand Down
7 changes: 6 additions & 1 deletion pmp-reactjs-ui/src/AppRoutes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import EditOidcClientConfirmation from './pages/authenticationServices/EditOidcC
import ApiKeysList from './pages/authenticationServices/ApiKeysList.js';
import GenerateApiKey from './pages/authenticationServices/GenerateApiKey.js';
import GenerateApiKeyConfirmation from './pages/authenticationServices/GenerateApiKeyConfirmation.js';
import ViewApiKeyDetails from './pages/authenticationServices/ViewApiKeyDetails.js';


function AppRoutes() {
Expand Down Expand Up @@ -88,7 +89,11 @@ function AppRoutes() {
{
path: 'authenticationServices/generateApiKeyConfirmation',
element: <GuardedRoute><MainLayout><GenerateApiKeyConfirmation/></MainLayout></GuardedRoute>,
}
},
{
path: 'authenticationServices/viewApiKeyDetails',
element: <GuardedRoute><MainLayout><ViewApiKeyDetails/></MainLayout></GuardedRoute>,
},
],
},
])
Expand Down
36 changes: 25 additions & 11 deletions pmp-reactjs-ui/src/pages/authenticationServices/ApiKeysList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import React, { useEffect, useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { getUserProfile } from '../../services/UserProfileService';
import { isLangRTL, handleServiceErrors, getPartnerManagerUrl, formatDate, getStatusCode,
handleMouseClickForDropdown, toggleSortDescOrder, toggleSortAscOrder, moveToHome } from '../../utils/AppUtils';
import {
isLangRTL, handleServiceErrors, getPartnerManagerUrl, formatDate, getStatusCode,
handleMouseClickForDropdown, toggleSortDescOrder, toggleSortAscOrder, moveToHome
} from '../../utils/AppUtils';
import { HttpService } from '../../services/HttpService';
import ErrorMessage from '../common/ErrorMessage';
import LoadingIcon from "../common/LoadingIcon";
Expand All @@ -16,7 +18,7 @@ import ApiClientsFilter from './ApiClientsFilter';
import ApiKeyIdPopup from './ApiKeyIdPopup';
import AuthenticationServicesTab from './AuthenticationServicesTab';

function ApiKeysList () {
function ApiKeysList() {
const navigate = useNavigate('');
const { t } = useTranslation();
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
Expand Down Expand Up @@ -99,6 +101,18 @@ function ApiKeysList () {

const generateApiKey = () => {
navigate('/partnermanagement/authenticationServices/generateApiKey')
};

const showViewApiKeyClientDetails = (selectedApiKeyClientdata) => {
if (selectedApiKeyClientdata.status === "ACTIVE") {
localStorage.setItem('selectedApiKeyClientdata', JSON.stringify(selectedApiKeyClientdata));
navigate('/partnermanagement/authenticationServices/viewApiKeyDetails')
}
};

const onClickView = (selectedApiKeyClientdata) => {
localStorage.setItem('selectedApiKeyClientdata', JSON.stringify(selectedApiKeyClientdata));
navigate('/partnermanagement/authenticationServices/viewApiKeyDetails')
};

function bgOfStatus(status) {
Expand Down Expand Up @@ -305,12 +319,12 @@ function ApiKeysList () {
tableRows.map((client, index) => {
return (
<tr key={index} className={`border-t border-[#E5EBFA] text-[0.8rem] text-[#191919] font-medium ${client.status === "INACTIVE" ? "text-[#969696]" : "text-[#191919] cursor-pointer"}`}>
<td className="px-2">{client.partnerId}</td>
<td className="pr-2">{client.policyGroupName}</td>
<td className="px-4">{client.policyName}</td>
<td className="px-2">{client.apiKeyLabel}</td>
<td className="pl-9">{formatDate(client.crDtimes, 'dateTime')}</td>
<td className="px-12">
<td onClick={() => showViewApiKeyClientDetails(client)} className="px-2">{client.partnerId}</td>
<td onClick={() => showViewApiKeyClientDetails(client)} className="pr-2">{client.policyGroupName}</td>
<td onClick={() => showViewApiKeyClientDetails(client)} className="px-4">{client.policyName}</td>
<td onClick={() => showViewApiKeyClientDetails(client)} className="px-2">{client.apiKeyLabel}</td>
<td onClick={() => showViewApiKeyClientDetails(client)} className="pl-9">{formatDate(client.crDtimes, 'dateTime')}</td>
<td onClick={() => showViewApiKeyClientDetails(client)} className="px-12">
<div className={`${bgOfStatus(client.status)} flex w-fit py-1.5 px-2 my-3 text-xs font-medium rounded-md`}>
{getStatusCode(client.status, t)}
</div>
Expand All @@ -332,7 +346,7 @@ function ApiKeysList () {
<p onClick={() => setViewApiKeyId(index)} className={`${isLoginLanguageRTL ? "ml-9" : "mr-9"} font-semibold mb-0.5 cursor-pointer`}>...</p>
{viewApiKeyId === index && (
<div ref={submenuRef} className={`absolute ${isLoginLanguageRTL ? "mr-16" : null} bg-white text-xs font-medium rounded-lg shadow-md border ${isLoginLanguageRTL ? "left-20" : "right-20"}`}>
<p className="px-4 py-2 cursor-pointer text-[#3E3E3E]">
<p onClick={() => onClickView(client)} className="px-4 py-2 cursor-pointer text-[#3E3E3E]">
{t('oidcClientsList.view')}
</p>
<hr className="h-px bg-gray-100 border-0 mx-1" />
Expand Down Expand Up @@ -379,7 +393,7 @@ function ApiKeysList () {
<h6 className="text-gray-500 text-xs">{t('policies.itemsPerPage')}</h6>
<div>
{isItemsPerPageOpen && (
<div ref={itemsCountSelectionRef} className={`absolute bg-white text-xs text-tory-blue font-medium rounded-lg border-[2px] -mt-[130px] duration-700`}>
<div ref={itemsCountSelectionRef} className={`absolute bg-white text-xs text-tory-blue font-medium rounded-lg border-[2px] -mt-[130px] duration-700`}>
{itemsPerPageOptions.map((num, i) => {
return (
<p key={i} onClick={() => changeItemsPerPage(num)}
Expand Down
23 changes: 16 additions & 7 deletions pmp-reactjs-ui/src/pages/authenticationServices/CopyIdPopUp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { getUserProfile } from '../../services/UserProfileService';
import { isLangRTL } from '../../utils/AppUtils';
import close_icon from '../../svg/close_icon.svg';

function CopyIdPopUp({ closePopUp, policyName, partnerId, oidcClientId }) {
function CopyIdPopUp({ closePopUp, policyName, partnerId, oidcClientId, id, idType }) {
const [copied, setCopied] = useState(false);
const { t } = useTranslation();
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
Expand All @@ -25,19 +25,28 @@ function CopyIdPopUp({ closePopUp, policyName, partnerId, oidcClientId }) {

return (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-[16%] z-50 font-inter cursor-default">
<div className={`bg-white md:w-[378px] w-[35%] mx-auto rounded-lg shadow-lg md:h-[280px] h-[40%]`}>
<div className={`bg-white md:w-[378px] w-[35%] mx-auto rounded-lg shadow-lg md:h-[290px] h-[40%]`}>
<header className={`flex justify-between p-[5%]`}>
<div className={`flex-col`}>
<h1 className={`font-bold text-base text-[#333333]`}>{policyName}</h1>
<p className={`text-xs font-bold text-[#717171]`}># {partnerId}</p>
<p className={`text-xs font-bold text-[#717171] text-left`}># {partnerId}</p>
</div>
<img src={close_icon} alt="" className={`h-7 cursor-pointer`} onClick={() => dismiss()} />
</header>
<hr className={`py-[4%]`} />
<hr className={`py-[3.5%]`} />

{idType === "API Key ID" &&
<div className={`bg-[#FFF7E5] w-[93%] border-1 border-[#EDDCAF] rounded-md px-3 py-2 mx-3 mb-2`}>
<p className={`text-[#8B6105] font-medium text-xs text-left`}>
{t('viewApiKeyDetails.copyApiKeyMsg')}
</p>
</div>
}

<div className={` flex-col text-center justify-center items-center`}>
<h1 className={`text-[#6A6A6A] text-sm opacity-8 mb-[0.5%]`}>{t('oidcClientsList.oidcClientId')}</h1>
<p className={`font-bold text-sm text-black break-words px-6`}>{oidcClientId}</p>
<button type="button" onClick={() => copyId()} className={`flex items-center justify-center gap-x-2 mt-[4%] border-2 py-[3%] w-[40%] rounded-2xl ${copied ? "text-[#FFFFFF] bg-[#1447B2] border-0" : "text-[#1447B2] border-[#1447B2]"} ${isLoginLanguageRTL ? "mr-20" : "ml-[31%]"} cursor-pointer`}>
<h1 className={`text-[#6A6A6A] text-sm opacity-8 mb-[0.5%]`}>{idType}</h1>
<p className={`font-bold text-sm text-black break-words px-6`}>{id}</p>
<button type="button" onClick={() => copyId()} className={`flex items-center justify-center gap-x-2 my-[4%] border-2 py-[3%] w-[40%] rounded-2xl ${copied ? "text-[#FFFFFF] bg-[#1447B2] border-0" : "text-[#1447B2] border-[#1447B2]"} ${isLoginLanguageRTL ? "mr-20" : "ml-[31%]"} cursor-pointer`}>
<svg xmlns="http://www.w3.org/2000/svg"
width="13" height="15" viewBox="0 0 13.808 16.481">
<path id="content_copy_FILL0_wght300_GRAD0_opsz24"
Expand Down
2 changes: 1 addition & 1 deletion pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ function OidcClientsList() {
transform="translate(-40 800)" fill={`${client.status === 'ACTIVE' ? "#1447B2" : "#D1D1D1"}`} />
</svg>
{showPopup && (
<CopyIdPopUp closePopUp={setShowPopup} partnerId={currentClient.partnerId} policyName={currentClient.policyName} oidcClientId={currentClient.oidcClientId} />
<CopyIdPopUp closePopUp={setShowPopup} partnerId={currentClient.partnerId} policyName={currentClient.policyName} id={currentClient.oidcClientId} idType={t('oidcClientsList.oidcClientId')}/>
)}
</td>

Expand Down
Loading

0 comments on commit 22b3688

Please sign in to comment.