From 376d07dfe4eb044821232b4c53fd02f4c43e8b92 Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Wed, 8 Jan 2025 14:38:23 +0100 Subject: [PATCH 1/9] Add info: No security key has been added --- .../Common/MultiFactorAuthentication.tsx | 305 +++++++++--------- 1 file changed, 156 insertions(+), 149 deletions(-) diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx index 8545ca6a6..9882bd829 100644 --- a/src/components/Common/MultiFactorAuthentication.tsx +++ b/src/components/Common/MultiFactorAuthentication.tsx @@ -164,83 +164,83 @@ 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} + > + + +

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

- -

+ {!isPlatformAuthenticatorAvailable && ( +

+ +

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

+ +

+
-
+
+ } /> -
+ ); } @@ -370,94 +370,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} } /> - + ); } From 180b7db261ac3c6f31daecef980f7795c4682202 Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Thu, 9 Jan 2025 10:36:18 +0100 Subject: [PATCH 2/9] Add security key and pass key icones --- img/pass-key.svg | 35 +++++++++++++++++++++++++++++++++++ img/security-key.svg | 15 +++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 img/pass-key.svg create mode 100644 img/security-key.svg diff --git a/img/pass-key.svg b/img/pass-key.svg new file mode 100644 index 000000000..2bb9e397a --- /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..2bd5f93ff --- /dev/null +++ b/img/security-key.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file From 5bf7f611665c38eb33afc31337487571001a70a7 Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Thu, 9 Jan 2025 14:14:54 +0100 Subject: [PATCH 3/9] Align button text and icon --- src/components/Common/MultiFactorAuthentication.tsx | 9 +++++++-- src/styles/_buttons.scss | 10 ++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx index 9882bd829..00306127d 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 @@ -192,7 +194,6 @@ export function MultiFactorAuthentication(): React.ReactElement | null { }} />

-
@@ -203,10 +204,12 @@ export function MultiFactorAuthentication(): React.ReactElement | null {
handleRegisterWebauthn("platform")} disabled={!isPlatformAuthenticatorAvailable || isRegisteringAuthenticator} > + pass key icon

@@ -228,10 +231,12 @@ export function MultiFactorAuthentication(): React.ReactElement | null { handleRegisterWebauthn("cross-platform")} disabled={isRegisteringAuthenticator} > - + security key icon +

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; + } +} From 71914ace72efcc96345e6260c4d5d836a48dc7f0 Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Thu, 9 Jan 2025 14:32:18 +0100 Subject: [PATCH 4/9] Extract messages --- src/translation/extractedMessages.json | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/translation/extractedMessages.json b/src/translation/extractedMessages.json index c9eafc39e..21e58d0f2 100644 --- a/src/translation/extractedMessages.json +++ b/src/translation/extractedMessages.json @@ -489,6 +489,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" @@ -589,6 +593,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." @@ -3211,10 +3219,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" From e1d74ae1e9e82789eda086a7a39f95abf6e9e7dd Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Thu, 9 Jan 2025 14:48:22 +0100 Subject: [PATCH 5/9] Update test --- src/tests/Security-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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(); } From 689573d76961e0897f9da8dcd6bbf95866c35de0 Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Fri, 10 Jan 2025 12:10:54 +0100 Subject: [PATCH 6/9] class flex -> btn-icon --- src/components/Common/MultiFactorAuthentication.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx index 00306127d..966beb87d 100644 --- a/src/components/Common/MultiFactorAuthentication.tsx +++ b/src/components/Common/MultiFactorAuthentication.tsx @@ -204,7 +204,7 @@ export function MultiFactorAuthentication(): React.ReactElement | null {

handleRegisterWebauthn("platform")} disabled={!isPlatformAuthenticatorAvailable || isRegisteringAuthenticator} @@ -231,7 +231,7 @@ export function MultiFactorAuthentication(): React.ReactElement | null { handleRegisterWebauthn("cross-platform")} disabled={isRegisteringAuthenticator} > From f39e7169bd654f9ae031092329306f738a8f7bcd Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Fri, 10 Jan 2025 12:12:19 +0100 Subject: [PATCH 7/9] p -> em --- src/components/Common/MultiFactorAuthentication.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx index 966beb87d..657b6423e 100644 --- a/src/components/Common/MultiFactorAuthentication.tsx +++ b/src/components/Common/MultiFactorAuthentication.tsx @@ -377,12 +377,12 @@ function SecurityKeyTable() { // data that goes onto the table const securityKeyData = !tokens.length ? (
-

+ -

+
) : ( tokens.map((cred: CredentialType) => { From e604a7eed80fdb595fb486a59e561c118380a346 Mon Sep 17 00:00:00 2001 From: Eunju Huss Date: Fri, 10 Jan 2025 13:50:47 +0100 Subject: [PATCH 8/9] Adjust the thickness of the icons --- img/pass-key.svg | 40 ++++++++++++++++++++-------------------- img/security-key.svg | 12 ++++++------ 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/img/pass-key.svg b/img/pass-key.svg index 2bb9e397a..5c4c99cf1 100644 --- a/img/pass-key.svg +++ b/img/pass-key.svg @@ -1,5 +1,5 @@ - + - - + + - - - + + + - + - - - - - - - - + + + + + + + + - - - - - + + + + + \ No newline at end of file diff --git a/img/security-key.svg b/img/security-key.svg index 2bd5f93ff..5c4418fc8 100644 --- a/img/security-key.svg +++ b/img/security-key.svg @@ -1,5 +1,5 @@ - + - - - - - + + + + + \ No newline at end of file From deb78860fcbf0ebec12c1c6de3650d11e1d99c00 Mon Sep 17 00:00:00 2001 From: cartja Date: Fri, 10 Jan 2025 14:01:00 +0100 Subject: [PATCH 9/9] em help-text --- src/components/Common/MultiFactorAuthentication.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx index 657b6423e..d086291f9 100644 --- a/src/components/Common/MultiFactorAuthentication.tsx +++ b/src/components/Common/MultiFactorAuthentication.tsx @@ -377,7 +377,7 @@ function SecurityKeyTable() { // data that goes onto the table const securityKeyData = !tokens.length ? (
-
+