Skip to content

Commit

Permalink
Use semantic headings in user settings Security (#10774)
Browse files Browse the repository at this point in the history 
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* test cross signing panel

* strict

* more strict

* tweak

* test eventindexpanel

* strict fixes
  • Loading branch information
Kerry committed May 18, 2023
1 parent 6c262ff commit d9a61c0
Show file tree
Hide file tree
Showing 16 changed files with 721 additions and 303 deletions.
8 changes: 2 additions & 6 deletions res/css/views/settings/_CryptographyPanel.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,9 @@ limitations under the License.
}
}

.mx_CryptographyPanel_importExportButtons .mx_AccessibleButton {
margin-right: 10px;
}

.mx_CryptographyPanel_importExportButtons {
margin-bottom: 15px;
display: inline-flex;
flex-flow: wrap;
row-gap: 10px;
row-gap: $spacing-8;
column-gap: $spacing-8;
}
1 change: 0 additions & 1 deletion res/css/views/settings/tabs/_SettingsTab.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ limitations under the License.
*/

.mx_SettingsTab {
--SettingsTab_section-margin-bottom-preferences-labs: 30px;
--SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
--SettingsTab_fullWidthField-margin-inline-end: 100px;
--SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
Expand Down
53 changes: 23 additions & 30 deletions res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,43 +14,36 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton {
margin-right: 10px;
.mx_SecurityUserSettingsTab_bulkOptions {
display: flex;
flex-direction: row;
column-gap: $spacing-8;
}

.mx_SecurityUserSettingsTab_ignoredUser {
margin-bottom: 5px;
margin-bottom: $spacing-4;
}

.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px;
margin-right: $spacing-8;
}

.mx_SecurityUserSettingsTab {
.mx_SettingsTab_section {
.mx_AccessibleButton_kind_link {
font-size: inherit;
}
}

.mx_SecurityUserSettingsTab_warning {
color: $alert;
position: relative;
padding-left: 40px;
margin-top: 30px;

&::before {
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: $font-24px;
position: absolute;
width: $font-24px;
height: $font-24px;
content: "";
top: 0;
left: 0;
background-color: $alert;
mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
}
.mx_SecurityUserSettingsTab_warning {
color: $alert;
position: relative;
padding-left: 40px;

&::before {
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: $font-24px;
position: absolute;
width: $font-24px;
height: $font-24px;
content: "";
top: 0;
left: 0;
background-color: $alert;
mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
}
}
33 changes: 25 additions & 8 deletions src/components/views/settings/CrossSigningPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import ConfirmDestroyCrossSigningDialog from "../dialogs/security/ConfirmDestroy
import SetupEncryptionDialog from "../dialogs/security/SetupEncryptionDialog";
import { accessSecretStorage } from "../../../SecurityManager";
import AccessibleButton from "../elements/AccessibleButton";
import { SettingsSubsectionText } from "./shared/SettingsSubsection";

interface IState {
error?: Error;
Expand Down Expand Up @@ -178,22 +179,38 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
if (homeserverSupportsCrossSigning === undefined) {
summarisedStatus = <Spinner />;
} else if (!homeserverSupportsCrossSigning) {
summarisedStatus = <p>{_t("Your homeserver does not support cross-signing.")}</p>;
summarisedStatus = (
<SettingsSubsectionText data-testid="summarised-status">
{_t("Your homeserver does not support cross-signing.")}
</SettingsSubsectionText>
);
} else if (crossSigningReady && crossSigningPrivateKeysInStorage) {
summarisedStatus = <p>✅ {_t("Cross-signing is ready for use.")}</p>;
summarisedStatus = (
<SettingsSubsectionText data-testid="summarised-status">
✅ {_t("Cross-signing is ready for use.")}
</SettingsSubsectionText>
);
} else if (crossSigningReady && !crossSigningPrivateKeysInStorage) {
summarisedStatus = <p>⚠️ {_t("Cross-signing is ready but keys are not backed up.")}</p>;
summarisedStatus = (
<SettingsSubsectionText data-testid="summarised-status">
⚠️ {_t("Cross-signing is ready but keys are not backed up.")}
</SettingsSubsectionText>
);
} else if (crossSigningPrivateKeysInStorage) {
summarisedStatus = (
<p>
<SettingsSubsectionText data-testid="summarised-status">
{_t(
"Your account has a cross-signing identity in secret storage, " +
"but it is not yet trusted by this session.",
)}
</p>
</SettingsSubsectionText>
);
} else {
summarisedStatus = <p>{_t("Cross-signing is not set up.")}</p>;
summarisedStatus = (
<SettingsSubsectionText data-testid="summarised-status">
{_t("Cross-signing is not set up.")}
</SettingsSubsectionText>
);
}

const keysExistAnywhere =
Expand Down Expand Up @@ -238,7 +255,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
}

return (
<div>
<>
{summarisedStatus}
<details>
<summary>{_t("Advanced")}</summary>
Expand Down Expand Up @@ -275,7 +292,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
</details>
{errorSection}
{actionRow}
</div>
</>
);
}
}
40 changes: 21 additions & 19 deletions src/components/views/settings/CryptographyPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import * as FormattingUtils from "../../../utils/FormattingUtils";
import SettingsStore from "../../../settings/SettingsStore";
import SettingsFlag from "../elements/SettingsFlag";
import { SettingLevel } from "../../../settings/SettingLevel";
import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSubsection";

interface IProps {}

Expand Down Expand Up @@ -72,27 +73,28 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
}

return (
<div className="mx_SettingsTab_section mx_CryptographyPanel">
<span className="mx_SettingsTab_subheading">{_t("Cryptography")}</span>
<table className="mx_SettingsTab_subsectionText mx_CryptographyPanel_sessionInfo">
<tr>
<th scope="row">{_t("Session ID:")}</th>
<td>
<code>{deviceId}</code>
</td>
</tr>
<tr>
<th scope="row">{_t("Session key:")}</th>
<td>
<code>
<b>{identityKey}</b>
</code>
</td>
</tr>
</table>
<SettingsSubsection heading={_t("Cryptography")}>
<SettingsSubsectionText>
<table className="mx_CryptographyPanel_sessionInfo">
<tr>
<th scope="row">{_t("Session ID:")}</th>
<td>
<code>{deviceId}</code>
</td>
</tr>
<tr>
<th scope="row">{_t("Session key:")}</th>
<td>
<code>
<b>{identityKey}</b>
</code>
</td>
</tr>
</table>
</SettingsSubsectionText>
{importExportButtons}
{noSendUnverifiedSetting}
</div>
</SettingsSubsection>
);
}

Expand Down
11 changes: 5 additions & 6 deletions src/components/views/settings/E2eAdvancedPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,20 @@ import { _t } from "../../../languageHandler";
import { SettingLevel } from "../../../settings/SettingLevel";
import SettingsStore from "../../../settings/SettingsStore";
import SettingsFlag from "../elements/SettingsFlag";
import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSubsection";

const SETTING_MANUALLY_VERIFY_ALL_SESSIONS = "e2ee.manuallyVerifyAllSessions";

const E2eAdvancedPanel: React.FC = () => {
return (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Encryption")}</span>

<SettingsSubsection heading={_t("Encryption")}>
<SettingsFlag name={SETTING_MANUALLY_VERIFY_ALL_SESSIONS} level={SettingLevel.DEVICE} />
<div className="mx_SettingsTab_subsectionText">
<SettingsSubsectionText>
{_t(
"Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.",
)}
</div>
</div>
</SettingsSubsectionText>
</SettingsSubsection>
);
};

Expand Down
61 changes: 32 additions & 29 deletions src/components/views/settings/EventIndexPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { SettingLevel } from "../../../settings/SettingLevel";
import SeshatResetDialog from "../dialogs/SeshatResetDialog";
import InlineSpinner from "../elements/InlineSpinner";
import ExternalLink from "../elements/ExternalLink";
import { SettingsSubsectionText } from "./shared/SettingsSubsection";

interface IState {
enabling: boolean;
Expand Down Expand Up @@ -145,8 +146,8 @@ export default class EventIndexPanel extends React.Component<{}, IState> {

if (EventIndexPeg.get() !== null) {
eventIndexingSettings = (
<div>
<div className="mx_SettingsTab_subsectionText">
<>
<SettingsSubsectionText>
{_t(
"Securely cache encrypted messages locally for them " +
"to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
Expand All @@ -158,27 +159,25 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
rooms: formatCountLong(this.state.roomCount),
},
)}
</div>
<div>
<AccessibleButton kind="primary" onClick={this.onManage}>
{_t("Manage")}
</AccessibleButton>
</div>
</div>
</SettingsSubsectionText>
<AccessibleButton kind="primary" onClick={this.onManage}>
{_t("Manage")}
</AccessibleButton>
</>
);
} else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
eventIndexingSettings = (
<div>
<div className="mx_SettingsTab_subsectionText">
<>
<SettingsSubsectionText>
{_t("Securely cache encrypted messages locally for them to appear in search results.")}
</div>
</SettingsSubsectionText>
<div>
<AccessibleButton kind="primary" disabled={this.state.enabling} onClick={this.onEnable}>
{_t("Enable")}
</AccessibleButton>
{this.state.enabling ? <InlineSpinner /> : <div />}
</div>
</div>
</>
);
} else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
const nativeLink =
Expand All @@ -187,7 +186,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
"adding-seshat-for-search-in-e2e-encrypted-rooms";

eventIndexingSettings = (
<div className="mx_SettingsTab_subsectionText">
<SettingsSubsectionText>
{_t(
"%(brand)s is missing some components required for securely " +
"caching encrypted messages locally. If you'd like to " +
Expand All @@ -204,11 +203,11 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
),
},
)}
</div>
</SettingsSubsectionText>
);
} else if (!EventIndexPeg.platformHasSupport()) {
eventIndexingSettings = (
<div className="mx_SettingsTab_subsectionText">
<SettingsSubsectionText>
{_t(
"%(brand)s can't securely cache encrypted messages locally " +
"while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> " +
Expand All @@ -228,24 +227,28 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
),
},
)}
</div>
</SettingsSubsectionText>
);
} else {
eventIndexingSettings = (
<div className="mx_SettingsTab_subsectionText">
<p>{this.state.enabling ? <InlineSpinner /> : _t("Message search initialisation failed")}</p>
<>
<SettingsSubsectionText>
{this.state.enabling ? <InlineSpinner /> : _t("Message search initialisation failed")}
</SettingsSubsectionText>
{EventIndexPeg.error && (
<details>
<summary>{_t("Advanced")}</summary>
<code>{EventIndexPeg.error.message}</code>
<p>
<AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
{_t("Reset")}
</AccessibleButton>
</p>
</details>
<SettingsSubsectionText>
<details>
<summary>{_t("Advanced")}</summary>
<code>{EventIndexPeg.error.message}</code>
<p>
<AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
{_t("Reset")}
</AccessibleButton>
</p>
</details>
</SettingsSubsectionText>
)}
</div>
</>
);
}

Expand Down
Loading

0 comments on commit d9a61c0

Please sign in to comment.