Skip to content

Commit

Permalink
[#15 + #6]added issuer dashboard and tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
Eriikah committed May 24, 2024
1 parent 6298c4d commit c9072bf
Show file tree
Hide file tree
Showing 10 changed files with 1,967 additions and 64 deletions.
8 changes: 4 additions & 4 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Navbar from "./components/Navbar";
import "./App.css";
import { Suspense } from "react";
import { useTranslation } from "react-i18next";
import { HistoryRouter as Router } from "redux-first-history/rr6";
import { Route, Routes } from "react-router-dom";
import { history } from "./app/store";
import { HistoryRouter as Router } from "redux-first-history/rr6";
import "./App.css";
import { useAppSelector } from "./app/hooks";
import { history } from "./app/store";
import Navbar from "./components/Navbar";
import { Configuration } from "./pages/Configuration";

function App() {
Expand Down
3 changes: 3 additions & 0 deletions src/components/applicationsComponents/AppPage.css
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,9 @@ textarea {
.optionNavbar :hover {
color: #ffffff;
}
.option.selected {
color: #ffffff;
}

.scopes {
display: flex;
Expand Down
337 changes: 337 additions & 0 deletions src/components/issuersComponents/CasIssuer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,337 @@
import AddCircleIcon from "@mui/icons-material/AddCircle";
import {
Button,
FormControl,
FormControlLabel,
InputLabel,
MenuItem,
Radio,
RadioGroup,
Select,
TextField,
Tooltip,
} from "@mui/material";
import { t } from "i18next";
import Markdown from "markdown-to-jsx";
import { useState } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import {
toggleCAS,
updateConfigParams,
} from "../../features/config/configSlice";
import attributes from "../../static/attributes.json";
import definitions from "../../static/definitions.json";
import { TableVars } from "../applicationsComponents/TableVars";
export function CasIssuer() {
const config = useAppSelector((state) => state.config.data.config);
const dispatch = useAppDispatch();
const [option, setOption] = useState("basic");
return (
<div>
<strong className="title">{t("casServiceMetadata")}</strong>
<div className="optionNavbar">
<label
className={`option ${option === "basic" ? "selected" : ""}`}
onClick={() => {
setOption("basic");
}}
>
{t("Basic Option")}
</label>
<label
className={`option ${
option === "casStorageOptions" ? "selected" : ""
}`}
onClick={() => setOption("casStorageOptions")}
>
{t("casStorageOptions")}
</label>
<label
className={`option ${option === "casAttributes" ? "selected" : ""}`}
onClick={() => setOption("casAttributes")}
>
{t("casAttributes")}
</label>
</div>
<div className="appDesc">
{option === "basic" && (
<div className="box">
<table>
<tbody>
<tr>
<Tooltip
title={
<Markdown>
{(definitions
? definitions.issuerDBCASActivation
: "") + ""}
</Markdown>
}
>
<th>{t("issuerDBCASActivation")}</th>
</Tooltip>
<td>
<FormControl>
<RadioGroup
row
value={config.issuerDBCASActivation ? true : false}
onChange={() => dispatch(toggleCAS())}
>
<FormControlLabel
value={true}
control={<Radio />}
label={t("on")}
/>
<FormControlLabel
value={false}
control={<Radio />}
label={t("off")}
/>
</RadioGroup>
</FormControl>
</td>
</tr>
<tr>
<Tooltip title={<Markdown>{definitions.casAttr}</Markdown>}>
<th>{t("casAttr")}</th>
</Tooltip>
<td>
<TextField
size="small"
margin="normal"
variant="filled"
className="form"
defaultValue={""}
value={config.casAttr}
onChange={(e) =>
dispatch(
updateConfigParams({
param: "casAttr",
value: e.target.value,
})
)
}
/>
</td>
</tr>
<tr>
<Tooltip
title={
<Markdown>{definitions.casAccessControlPolicy}</Markdown>
}
>
<th>{t("casAccessControlPolicy")}</th>
</Tooltip>
<td>
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel>{t("casAccessControlPolicy")}</InputLabel>
<Select
value={
config.casAccessControlPolicy
? config.casAccessControlPolicy
: attributes.casAccessControlPolicy.default
}
label={t("casAccessControlPolicy")}
onChange={(e) =>
dispatch(
updateConfigParams({
param: "casAccessControlPolicy",
value: e.target.value,
})
)
}
>
{attributes.casAccessControlPolicy.select.map((el) => {
return (
<MenuItem key={el.k} value={el.k}>
{t(el.v)}
</MenuItem>
);
})}
</Select>
</FormControl>
</td>
</tr>
<tr>
<Tooltip
title={<Markdown>{definitions.casStrictMatching}</Markdown>}
>
<th>{t("casStrictMatching")}</th>
</Tooltip>
<td>
<FormControl>
<RadioGroup
row
defaultValue={attributes.casStrictMatching.default}
value={config.casStrictMatching}
onChange={(e) =>
dispatch(
updateConfigParams({
param: "casStrictMatching",
value: e.target.value,
})
)
}
>
<FormControlLabel
value={1}
control={<Radio />}
label={t("on")}
/>
<FormControlLabel
value={0}
control={<Radio />}
label={t("off")}
/>
</RadioGroup>
</FormControl>
</td>
</tr>
<tr>
<Tooltip
title={
<Markdown>{definitions.casTicketExpiration}</Markdown>
}
>
<th>{t("casTicketExpiration")}</th>
</Tooltip>
<td>
<TextField
size="small"
margin="normal"
variant="filled"
className="form"
type="number"
defaultValue={attributes.casTicketExpiration.default}
value={String(config.casTicketExpiration)}
onChange={(e) =>
dispatch(
updateConfigParams({
param: "casTicketExpiration",
value: e.target.value,
})
)
}
/>
</td>
</tr>
<tr>
<Tooltip
title={
<Markdown>
{definitions.casBackChannelSingleLogout}
</Markdown>
}
>
<th>{t("casBackChannelSingleLogout")}</th>
</Tooltip>
<td>
<FormControl>
<RadioGroup
row
defaultValue={
attributes.casBackChannelSingleLogout.default
}
value={config.casBackChannelSingleLogout}
onChange={(e) =>
dispatch(
updateConfigParams({
param: "casBackChannelSingleLogout",
value: e.target.value,
})
)
}
>
<FormControlLabel
value={1}
control={<Radio />}
label={t("on")}
/>
<FormControlLabel
value={0}
control={<Radio />}
label={t("off")}
/>
</RadioGroup>
</FormControl>
</td>
</tr>
<tr>
<Tooltip
title={<Markdown>{definitions.casStorage}</Markdown>}
>
<th>{t("casStorage")}</th>
</Tooltip>
<td>
<TextField
size="small"
margin="normal"
variant="filled"
className="form"
defaultValue={""}
value={config.casStorage}
onChange={(e) =>
dispatch(
updateConfigParams({
param: "casStorage",
value: e.target.value,
})
)
}
/>
</td>
</tr>
</tbody>
</table>
</div>
)}
{option === "casStorageOptions" && (
<table id="casStorageOptions">
<thead>
<tr>
<th>{t("keys")}</th>
<th>{t("values")}</th>
<th>
<Button className="plus">
<AddCircleIcon color="success" />
</Button>
</th>
</tr>
</thead>
{TableVars(
"cas",
config.casStorageOptions ? config.casStorageOptions : {},
"casStorageOptions",
console.log,
console.log,
console.log
)}
</table>
)}
{option === "casAttributes" && (
<table id="casAttributes">
<thead>
<tr>
<th>{t("keys")}</th>
<th>{t("values")}</th>
<th>
<Button className="plus">
<AddCircleIcon color="success" />
</Button>
</th>
</tr>
</thead>
{TableVars(
"cas",
config.casAttributes ? config.casAttributes : {},
"casAttributes",
console.log,
console.log,
console.log
)}
</table>
)}
</div>
</div>
);
}
Loading

0 comments on commit c9072bf

Please sign in to comment.