diff --git a/img/pass-key.svg b/img/pass-key.svg new file mode 100644 index 000000000..5c4c99cf1 --- /dev/null +++ b/img/pass-key.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/security-key.svg b/img/security-key.svg new file mode 100644 index 000000000..5c4418fc8 --- /dev/null +++ b/img/security-key.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx index 8545ca6a6..d086291f9 100644 --- a/src/components/Common/MultiFactorAuthentication.tsx +++ b/src/components/Common/MultiFactorAuthentication.tsx @@ -20,6 +20,8 @@ import { FormattedMessage, useIntl } from "react-intl"; import { Link } from "react-router-dom"; import authnSlice from "slices/Authn"; import securitySlice from "slices/Security"; +import passKey from "../../../img/pass-key.svg"; +import securityKey from "../../../img/security-key.svg"; import ConfirmModal from "./ConfirmModal"; import NotificationModal from "./NotificationModal"; import "/node_modules/spin.js/spin.css"; // without this import, the spinner is frozen @@ -164,83 +166,86 @@ export function MultiFactorAuthentication(): React.ReactElement | null { if (!isPlatformAuthLoaded) return null; return ( -
-

- -

-

- +

+

+ +

+

+ -

-

- - - - ), - }} - /> -

- -
- {Boolean(tokens.length) && } - - {!tokens.length &&
} - - - - - -
-
- handleRegisterWebauthn("platform")} - disabled={!isPlatformAuthenticatorAvailable || isRegisteringAuthenticator} - > - - -

- -

- {!isPlatformAuthenticatorAvailable && ( -

+ /> +

+

+ + + + ), + }} + /> +

+
+ + + + + +
+
+ handleRegisterWebauthn("platform")} + disabled={!isPlatformAuthenticatorAvailable || isRegisteringAuthenticator} + > + pass key icon + + +

- )} -
-
- handleRegisterWebauthn("cross-platform")} - disabled={isRegisteringAuthenticator} - > - - -

- -

+ {!isPlatformAuthenticatorAvailable && ( +

+ +

+ )} +
+
+ handleRegisterWebauthn("cross-platform")} + disabled={isRegisteringAuthenticator} + > + security key icon + + +

+ +

+
-
+
+ } /> -
+ ); } @@ -370,94 +375,101 @@ function SecurityKeyTable() { } // data that goes onto the table - const securityKeyData = tokens.map((cred: CredentialType) => { - // date created - const date_created = cred.created_ts.slice(0, "YYYY-MM-DD".length); - // date last used - if (cred.success_ts) { - date_success = cred.success_ts.slice(0, "YYYY-MM-DD".length); - } else { - date_success = ; - } - - // verify button/ verified badge - if (cred.verified) { - btnVerify = ( -
- - -   - - - - -
- ); - } else { - btnVerify = ( -
- - -   - handleVerifyWebauthnTokenFreja(cred.key)}> - - - handleVerifyWebauthnTokenBankID(cred.key)}> - - - -
- ); - } + const securityKeyData = !tokens.length ? ( +
+ + + +
+ ) : ( + tokens.map((cred: CredentialType) => { + // date created + const date_created = cred.created_ts.slice(0, "YYYY-MM-DD".length); + // date last used + if (cred.success_ts) { + date_success = cred.success_ts.slice(0, "YYYY-MM-DD".length); + } else { + date_success = ; + } - return ( - -
-
- - + // verify button/ verified badge + if (cred.verified) { + btnVerify = ( +
+ +   - {cred.description} + + + - handleConfirmDeleteModal(cred.key)} - >
-
- - -   - - {date_created} - - - - + ); + } else { + btnVerify = ( +
+ +   - - {date_success} + handleVerifyWebauthnTokenFreja(cred.key)}> + + + handleVerifyWebauthnTokenBankID(cred.key)}> + +
- {btnVerify} -
- - ); - }); + ); + } - // show no table if no security keys - if (!tokens.length) { - return null; - } + return ( + +
+
+ + +   + {cred.description} + + handleConfirmDeleteModal(cred.key)} + > +
+
+ + +   + + {date_created} + + + + +   + + {date_success} + +
+ {btnVerify} +
+ + ); + }) + ); return ( - -

+
+

-

+

+ {Boolean(tokens.length) && } {securityKeyData} } /> - + ); } diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss index 3e17b1f35..eab4d20d6 100644 --- a/src/styles/_buttons.scss +++ b/src/styles/_buttons.scss @@ -349,3 +349,13 @@ button.scroll-to-top { background-image: url("../../img/remove-icon-black.svg"); } } + +button.flex { + display: flex; + align-items: center; + + img { + width: auto; + padding-right: 10px; + } +} diff --git a/src/tests/Security-test.tsx b/src/tests/Security-test.tsx index fa1eb68be..ebaa10ed7 100644 --- a/src/tests/Security-test.tsx +++ b/src/tests/Security-test.tsx @@ -18,7 +18,7 @@ async function linkToAdvancedSettings() { act(() => { nav.click(); }); - expect(screen.getByRole("button", { name: "external security key" })).toBeEnabled(); + expect(screen.getByRole("button", { name: "security key icon security key" })).toBeEnabled(); // expect(screen.getByRole("heading", { name: /Two-factor Authentication (2FA)/i })).toBeInTheDocument(); } diff --git a/src/translation/extractedMessages.json b/src/translation/extractedMessages.json index 55eb495b8..63297ce82 100644 --- a/src/translation/extractedMessages.json +++ b/src/translation/extractedMessages.json @@ -505,6 +505,10 @@ "developer_comment": "Dashboard change password button text", "string": "Change password" }, + "A2MTya": { + "developer_comment": "add webauthn token key", + "string": "security key" + }, "ABLcOw": { "developer_comment": "explanation text for letter proofing", "string": "The code expired" @@ -605,6 +609,10 @@ "developer_comment": "how to contact support - paragraph 1", "string": "If you can't find the answers to your questions about eduID on this help page, you can contact the eduID support by mailing {support}." }, + "DRBzcL": { + "developer_comment": "no security key has been added", + "string": "No security key has been added" + }, "DuLi7B": { "developer_comment": "verify identity unverified description", "string": "Some services need to know your real life identity. Connect your identity to your eduID to get the most benefit from it." @@ -3287,10 +3295,6 @@ "developer_comment": "start main title", "string": "Welcome, {username}!" }, - "zkvDpu": { - "developer_comment": "add webauthn token key", - "string": "external security key" - }, "zmf6Gz": { "developer_comment": "about orcid ladok - handle", "string": "Connecting account with Orcid / Ladok"