Skip to content

Commit

Permalink
Merge pull request #1911 from SUNET/eunju-new-security-key-table
Browse files Browse the repository at this point in the history 
changed the table style to figure style for security keys
  • Loading branch information
@cartja
cartja authored Nov 28, 2024
2 parents fab2478 + 983bda8 commit 456f587
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 113 deletions.
151 changes: 78 additions & 73 deletions src/components/Common/MultiFactorAuthentication.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ function SecurityKeyTable() {
}

// data that goes onto the table
const security_key_table_data = tokens.map((cred: CredentialType) => {
const securityKeyData = tokens.map((cred: CredentialType) => {
// date created
const date_created = cred.created_ts.slice(0, "YYYY-MM-DD".length);
// date last used
Expand All @@ -384,61 +384,87 @@ function SecurityKeyTable() {
// verify button/ verified badge
if (cred.verified) {
btnVerify = (
<span>
<FormattedMessage description="security verified" defaultMessage="Verified" />
</span>
<div aria-label="verification status" className="verified">
<span>
<FormattedMessage description="security key status" defaultMessage="Verification status:" />
&nbsp;
<strong>
<FormattedMessage description="security verified" defaultMessage="verified" />
</strong>
</span>
</div>
);
} else {
btnVerify = (
<React.Fragment>
<EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenFreja(cred.key)}>
<FormattedMessage description="security verify" defaultMessage="Freja+" />
</EduIDButton>
<EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenBankID(cred.key)}>
<FormattedMessage description="security verify" defaultMessage="BankID" />
</EduIDButton>
</React.Fragment>
<div aria-label="verify with freja or bankID">
<span>
<FormattedMessage description="security key status" defaultMessage="Verify with: " />
&nbsp;
<EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenFreja(cred.key)}>
<FormattedMessage description="security verify" defaultMessage="Freja+" />
</EduIDButton>
<EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenBankID(cred.key)}>
<FormattedMessage description="security verify" defaultMessage="BankID" />
</EduIDButton>
</span>
</div>
);
}

return (
<tr key={cred.key} className={`webauthn-token-holder ${cred.verified ? "verified" : ""}`} data-token={cred.key}>
<td>{cred.description}</td>
<td data-toggle="tooltip" data-placement="top" title={new Date(cred.created_ts).toString()}>
{date_created}
</td>
<td data-toggle="tooltip" data-placement="top" title={new Date(cred.success_ts).toString()}>
{date_success}
</td>
<td className="value-status">{btnVerify}</td>
<td>
<EduIDButton
id="remove-webauthn"
buttonstyle="close"
size="sm"
onClick={() => handleConfirmDeleteModal(cred.key)}
></EduIDButton>
<NotificationModal
id="remove-security-key"
title={
<FormattedMessage
defaultMessage="Remove security key"
description="settings.remove_security_key_modal_title"
/>
}
mainText={
<FormattedMessage
defaultMessage={`Are you sure you want to remove your security key?`}
description="delete.remove_security_key_modal_text"
/>
}
showModal={showConfirmRemoveSecurityKeyModal}
closeModal={() => setShowConfirmRemoveSecurityKeyModal(false)}
acceptModal={handleRemoveWebauthnToken}
acceptButtonText={<FormattedMessage defaultMessage="Confirm" description="delete.confirm_button" />}
/>
</td>
</tr>
<React.Fragment key={cred.key}>
<figure className={`webauthn-token-holder ${cred.verified ? "verified" : ""}`} data-token={cred.key}>
<div>
<span aria-label="key name">
<FormattedMessage description="security description name" defaultMessage="Name:" />
&nbsp;
<strong>{cred.description}</strong>
</span>
<EduIDButton
id="remove-webauthn"
buttonstyle="close"
size="sm"
onClick={() => handleConfirmDeleteModal(cred.key)}
></EduIDButton>
</div>
<div>
<span aria-label="date created">
<FormattedMessage description="security creation date" defaultMessage="Created:" />
&nbsp;
<wbr />
{date_created}
</span>

<span aria-label="date used">
<FormattedMessage description="security last used" defaultMessage="Used:" />
&nbsp;
<wbr />
{date_success}
</span>
</div>

{btnVerify}
</figure>
<NotificationModal
id="remove-security-key"
title={
<FormattedMessage
defaultMessage="Remove security key"
description="settings.remove_security_key_modal_title"
/>
}
mainText={
<FormattedMessage
defaultMessage={`Are you sure you want to remove your security key?`}
description="delete.remove_security_key_modal_text"
/>
}
showModal={showConfirmRemoveSecurityKeyModal}
closeModal={() => setShowConfirmRemoveSecurityKeyModal(false)}
acceptModal={handleRemoveWebauthnToken}
acceptButtonText={<FormattedMessage defaultMessage="Confirm" description="delete.confirm_button" />}
/>
</React.Fragment>
);
});

Expand All @@ -449,31 +475,10 @@ function SecurityKeyTable() {

return (
<React.Fragment>
<h4>
<h3>
<FormattedMessage description="manage your tokens" defaultMessage="Manage your tokens" />
</h4>
<table className="active-keys">
<tbody>
<tr>
<th>
<FormattedMessage description="security description name" defaultMessage="Name" />
</th>
<th>
<FormattedMessage description="security creation date" defaultMessage="Created on" />
</th>
<th>
<FormattedMessage description="security last used" defaultMessage="Used on" />
</th>
<th>
<FormattedMessage description="security key status" defaultMessage="Verify" />
</th>
<th>
<FormattedMessage description="security key remove" defaultMessage="Remove" />
</th>
</tr>
{security_key_table_data}
</tbody>
</table>
</h3>
{securityKeyData}
</React.Fragment>
);
}
53 changes: 53 additions & 0 deletions src/styles/_figure.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,56 @@ figure,
margin-bottom: 1.5rem;
}
}

// SECURITY TABLE
figure.webauthn-token-holder {
display: grid;
grid-template-rows: 1fr;
padding: 0.5rem 1rem;
text-align: left;
margin: 0;
border-bottom: 1px solid $border-gray;

&:last-of-type {
border-bottom: none;
margin-bottom: 1rem;
}

& div:first-child {
display: flex;
justify-content: space-between;
}

& div:nth-child(2) {
display: flex;
align-items: end;
column-gap: 1em;

& p:last-child {
margin-left: 1rem;
}
}

span {
font-size: 0.9rem;
margin-bottom: 0.2rem;
white-space: nowrap;
}
.verified {
strong {
font-family: $akkurat;
letter-spacing: 1px;
font-weight: 700;
padding: 0;
font-size: 0.75rem;
text-transform: uppercase;
}
}
.btn-link {
height: auto;
margin-right: 1rem;
}
button.btn-close {
justify-self: flex-end;
}
}
37 changes: 0 additions & 37 deletions src/styles/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,6 @@ table {
}
}

& tr.webauthn-token-holder.verified {
color: $txt-black;
}

& tr {
height: 3rem;

Expand Down Expand Up @@ -199,40 +195,7 @@ caption {
padding: 0.5rem;
}
}
.active-keys {
margin: 1rem 0;

th {
border-width: 1px;
}
th,
td {
&:first-child {
width: 30%;
}
}

tr:last-child td {
padding-bottom: 1rem;
}
.btn-link {
height: auto;
margin-right: 1rem;
}

@media (max-width: $bp-sm) {
th,
td {
&:nth-child(2),
&:nth-child(3) {
display: none;
}
&:nth-child(1) {
width: 50%;
}
}
}
}
.keys {
@extend code;
tr {
Expand Down
6 changes: 3 additions & 3 deletions src/tests/Security-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ test("renders security key as expected, with added security key", async () => {

await linkToAdvancedSettings();

expect(screen.getByRole("table")).toBeInTheDocument();
expect(screen.getByRole("cell", { name: "touchID" })).toBeInTheDocument();
expect(screen.getByRole("figure")).toBeInTheDocument();
expect(screen.getByText("touchID")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "BankID" })).toBeEnabled();
expect(screen.getByRole("button", { name: "Freja+" })).toBeEnabled();
});
Expand Down Expand Up @@ -190,7 +190,7 @@ test("api call webauthn/remove", async () => {
});
await linkToAdvancedSettings();
await waitFor(() => {
expect(screen.getByRole("table")).toBeInTheDocument();
expect(screen.getByRole("figure")).toBeInTheDocument();
});
});

Expand Down

0 comments on commit 456f587

Please sign in to comment.