Merge pull request #1643 from SUNET/cat-keylist-ui

API call: approved security key list, present it in FAQ page

src/apis/eduidSecurity.ts

@@ -253,6 +253,23 @@ export const removeNin = createAsyncThunk<
 
 /*********************************************************************************************************************/
 
+/**
+ * @public
+ * @function fetchApprovedSecurityKeys
+ * @desc Redux async thunk to fetch approved security keys.
+ */
+export const fetchApprovedSecurityKeys = createAsyncThunk<
+  any, // return type
+  undefined, // args type
+  { dispatch: DashboardAppDispatch; state: DashboardRootState }
+>("security/approvedSecurityKeys", async (nin, thunkAPI) => {
+  return makeSecurityRequest<FetchIdentitiesResponse>(thunkAPI, "webauthn/approved-security-keys")
+    .then((response) => response.payload)
+    .catch((err) => thunkAPI.rejectWithValue(err));
+});
+
+/*********************************************************************************************************************/
+
 function makeSecurityRequest<T>(
   thunkAPI: RequestThunkAPI,
   endpoint: string,

src/components/Help.tsx

@@ -1,11 +1,21 @@
-import React, { useEffect } from "react";
+import { fetchApprovedSecurityKeys } from "apis/eduidSecurity";
+import { useDashboardAppDispatch, useDashboardAppSelector } from "dashboard-hooks";
+import React, { useEffect, useState } from "react";
 import { Accordion } from "react-accessible-accordion";
 import { FormattedMessage, useIntl } from "react-intl";
 import AccordionItemTemplate from "./Common/AccordionItemTemplate";
 import ScrollToTopButton from "./ScrollToTopButton";
 
+interface ApprovedSecurityKeysTypes {
+  entries: [];
+  next_update: Date;
+}
+
 export function Help(): JSX.Element {
   const intl = useIntl();
+  const dispatch = useDashboardAppDispatch();
+  const is_configured = useDashboardAppSelector((state) => state.config.is_configured);
+  const [approvedSecurityKeys, setApprovedSecurityKeys] = useState<ApprovedSecurityKeysTypes>();
 
   useEffect(() => {
     document.title = intl.formatMessage({
@@ -14,6 +24,28 @@ export function Help(): JSX.Element {
     });
   }, []);
 
+  useEffect(() => {
+    if (is_configured) {
+      handleApprovedSecurityKeys();
+    }
+  }, [is_configured]);
+
+  async function handleApprovedSecurityKeys() {
+    const response = await dispatch(fetchApprovedSecurityKeys());
+    if (fetchApprovedSecurityKeys.fulfilled.match(response)) {
+      setApprovedSecurityKeys(response.payload);
+    }
+  }
+
+  const newDate = approvedSecurityKeys && new Date(approvedSecurityKeys?.next_update);
+  const formattedNextUpdateDate =
+    newDate &&
+    newDate.getFullYear() +
+      "-" +
+      (newDate.getMonth() + 1).toString().padStart(2, "0") +
+      "-" +
+      newDate.getDate().toString().padStart(2, "0");
+
   return (
     <React.Fragment>
       <section className="intro">
@@ -485,6 +517,52 @@ export function Help(): JSX.Element {
               </Accordion>
             </article>
           </AccordionItemTemplate>
+          {/* security key list */}
+          <AccordionItemTemplate
+            uuid="security-key-list"
+            title={
+              <FormattedMessage
+                defaultMessage="Currently valid physical Security Keys"
+                description="Security keys list - heading"
+              />
+            }
+            additionalInfo={null}
+          >
+            <article>
+              <p>
+                <FormattedMessage
+                  defaultMessage={`This is a list of names of maker and models of external security keys that kan be used for eduID. The list is updated once a month`}
+                  description="Security keys list - paragraph"
+                />
+              </p>
+              <form>
+                <fieldset className="key-update">
+                  <div>
+                    <label>
+                      <FormattedMessage defaultMessage="Next update" description="Security keys list - paragraph" />
+                    </label>
+                    <time>{formattedNextUpdateDate}</time>
+                  </div>
+                </fieldset>
+                <table className="keys">
+                  <thead>
+                    <tr>
+                      <th>No.</th>
+                      <th>Model</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {approvedSecurityKeys?.entries.map((item, index) => (
+                      <tr key={index}>
+                        <td>{index + 1}</td>
+                        <td>{item}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </form>
+            </article>
+          </AccordionItemTemplate>
           <AccordionItemTemplate
             uuid="help-verification"
             title={

src/styles/_tables.scss

@@ -221,3 +221,52 @@ caption {
     display: none;
   }
 }
+
+table.keys {
+  table-layout: auto;
+  font-size: $txt-sm;
+  //font-family: $inter-light;
+  @extend code;
+
+  tr {
+    height: auto;
+
+    &:nth-child(even) {
+      background-color: $bg-gray;
+    }
+  }
+
+  th {
+    border-bottom: 2px dashed $border-gray;
+    padding: 0.75rem 0.5rem;
+
+    &:first-child {
+      width: 2rem;
+    }
+  }
+  th,
+  td {
+    &:first-child {
+      padding-left: 1rem;
+    }
+    &:last-child {
+      padding-right: 1rem;
+    }
+  }
+
+  td {
+    word-wrap: break-word;
+    line-height: 1.25;
+    padding: 0.5rem;
+  }
+}
+
+.key-update {
+  display: flex;
+  align-items: center;
+  column-gap: 2rem;
+
+  label {
+    display: inline-block;
+  }
+}

src/translation/extractedMessages.json

@@ -2429,6 +2429,10 @@
     "developer_comment": "settings lead title",
     "string": "Update your eduID account settings, change password or delete your eduID."
   },
+  "qC/BaD": {
+    "developer_comment": "Security keys list - heading",
+    "string": "Currently valid physical Security Keys"
+  },
   "qHomsQ": {
     "developer_comment": "Login username input",
     "string": "Welcome back, {username}!"
@@ -2530,6 +2534,10 @@
   "resetpw.user-not-found": {
     "string": "If the address is registered, a message with instructions to reset the password has been sent."
   },
+  "ryPtkg": {
+    "developer_comment": "Security keys list - paragraph",
+    "string": "Next update"
+  },
   "s5EpgK": {
     "developer_comment": "verify identity vetting link settings",
     "string": "Settings"
@@ -2926,6 +2934,10 @@
     "developer_comment": "ErrorURL identification failure",
     "string": "This may be because eduID is missing those attributes or that eduID is not configured to release those attributes to the service you tried to access."
   },
+  "zdVSFQ": {
+    "developer_comment": "Security keys list - paragraph",
+    "string": "This is a list of names of maker and models of external security keys that kan be used for eduID. The list is updated once a month"
+  },
   "zeCbht": {
     "developer_comment": "start main title",
     "string": "Welcome, {username}!"