imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use semantic headings in user settings - discovery (#10838)

Browse source 
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* use currentColor in warning-triangle svg, update use in RoomStatusBar

* use semantic headings for discovery section

* test manage integration settings

* test deactivate account section display

* remove SettingsFieldset margins

* threepids styles

* remove debug

* test discovery email and phone
This commit is contained in:
Kerry 2023-05-24 14:37:10 +12:00 • committed by GitHub
parent 9211da20f4
commit 9f011b955b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 407 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file

@ -18,11 +18,12 @@ limitations under the License.
import React, { ReactNode } from "react";
import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
import { IThreepid } from "matrix-js-sdk/src/@types/threepids";
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
import { logger } from "matrix-js-sdk/src/logger";
import { IDelegatedAuthConfig, M_AUTHENTICATION } from "matrix-js-sdk/src/matrix";
import { HTTPError } from "matrix-js-sdk/src/matrix";
import { Icon as WarningIcon } from "../../../../../../res/img/feather-customised/warning-triangle.svg";
import { UserFriendlyError, _t } from "../../../../../languageHandler";
import ProfileSettings from "../../ProfileSettings";
import * as languageHandler from "../../../../../languageHandler";
@ -56,8 +57,9 @@ import ToggleSwitch from "../../../elements/ToggleSwitch";
import { IS_MAC } from "../../../../../Keyboard";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
import { SettingsSubsectionHeading } from "../../shared/SettingsSubsectionHeading";
import Heading from "../../../typography/Heading";
interface IProps {
closeSettingsFn: () => void;
@ -194,9 +196,10 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
);
logger.warn(e);
}
this.setState({
emails: threepids.filter((a) => a.medium === "email"),
msisdns: threepids.filter((a) => a.medium === "msisdn"),
emails: threepids.filter((a) => a.medium === ThreepidMedium.Email),
msisdns: threepids.filter((a) => a.medium === ThreepidMedium.Phone),
loading3pids: false,
});
}
@ -449,16 +452,16 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
private renderDiscoverySection(): JSX.Element {
if (this.state.requiredPolicyInfo.hasTerms) {
const intro = (
<span className="mx_SettingsTab_subsectionText">
<SettingsSubsectionText>
{_t(
"Agree to the identity server (%(serverName)s) Terms of Service to " +
"allow yourself to be discoverable by email address or phone number.",
{ serverName: this.state.idServerName },
)}
</span>
</SettingsSubsectionText>
);
return (
<div>
<>
<InlineTermsAgreement
policiesAndServicePairs={this.state.requiredPolicyInfo.policiesAndServices}
agreedUrls={this.state.requiredPolicyInfo.agreedUrls}
@ -467,29 +470,23 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
/>
{/* has its own heading as it includes the current identity server */}
<SetIdServer missingTerms={true} />
</div>
</>
);
}
const emails = this.state.loading3pids ? <Spinner /> : <DiscoveryEmailAddresses emails={this.state.emails} />;
const msisdns = this.state.loading3pids ? <Spinner /> : <DiscoveryPhoneNumbers msisdns={this.state.msisdns} />;
const threepidSection = this.state.haveIdServer ? (
<>
<span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
{emails}
<span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
{msisdns}
<DiscoveryEmailAddresses emails={this.state.emails} isLoading={this.state.loading3pids} />
<DiscoveryPhoneNumbers msisdns={this.state.msisdns} isLoading={this.state.loading3pids} />
</>
) : null;
return (
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--discovery">
<>
{threepidSection}
{/* has its own heading as it includes the current identity server */}
<SetIdServer missingTerms={false} />
</div>
</>
);
}
@ -520,16 +517,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
const plaf = PlatformPeg.get();
const supportsMultiLanguageSpellCheck = plaf?.supportsSpellCheckSettings();
const discoWarning = this.state.requiredPolicyInfo.hasTerms ? (
<img
className="mx_GeneralUserSettingsTab_heading_warningIcon"
src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default}
width="18"
height="18"
alt={_t("Warning")}
/>
) : null;
let accountManagementSection: JSX.Element | undefined;
if (SettingsStore.getValue(UIFeature.Deactivate)) {
accountManagementSection = this.renderManagementSection();
@ -537,14 +524,23 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
let discoverySection;
if (SettingsStore.getValue(UIFeature.IdentityServer)) {
discoverySection = (
<>
<div className="mx_SettingsTab_heading">
{discoWarning} {_t("Discovery")}
</div>
{this.renderDiscoverySection()}
</>
const discoWarning = this.state.requiredPolicyInfo.hasTerms ? (
<WarningIcon
className="mx_GeneralUserSettingsTab_warningIcon"
width="18"
height="18"
// override icon default values
aria-hidden={false}
aria-label={_t("Warning")}
/>
) : null;
const heading = (
<Heading size="h2">
{discoWarning}
{_t("Discovery")}
</Heading>
);
discoverySection = <SettingsSection heading={heading}>{this.renderDiscoverySection()}</SettingsSection>;
}
return (