PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

reactor E2EIcon for reusability

Browse source
This commit is contained in:
Michael Telatynski 2020-01-23 13:00:17 +00:00
parent b7d1c17ad1
commit 78e1d1674f
1 changed files with 48 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/components/views/rooms/E2EIcon.js
View file

@ -15,8 +15,10 @@ limitations under the License.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types";
import classNames from 'classnames'; import classNames from 'classnames';
import { _t } from '../../../languageHandler';
import {_t, _td} from '../../../languageHandler';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import SettingsStore from '../../../settings/SettingsStore'; import SettingsStore from '../../../settings/SettingsStore';
@ -27,71 +29,65 @@ export const E2E_STATE = {
NORMAL: "normal", NORMAL: "normal",
}; };
export default function(props) { const crossSigningUserTitles = {
const { isUser, status, className } = props; [E2E_STATE.WARNING]: _td("This user has not verified all of their devices."),
const isNormal = status === E2E_STATE.NORMAL; [E2E_STATE.NORMAL]: _td("You have not verified this user. This user has verified all of their devices."),
const isWarning = status === E2E_STATE.WARNING; [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their devices."),
const isVerified = status === E2E_STATE.VERIFIED; };
const crossSigningRoomTitles = {
[E2E_STATE.WARNING]: _td("Some users in this encrypted room are not verified by you or they have not verified " +
"their own devices."),
[E2E_STATE.VERIFIED]: _td("All users in this encrypted room are verified by you and they have verified their " +
"own devices."),
};
const legacyUserTitles = {
[E2E_STATE.WARNING]: _td("Some devices for this user are not trusted"),
[E2E_STATE.VERIFIED]: _td("All devices for this user are trusted"),
};
const legacyRoomTitles = {
[E2E_STATE.WARNING]: _td("Some devices in this encrypted room are not trusted"),
[E2E_STATE.VERIFIED]: _td("All devices in this encrypted room are trusted"),
};
const E2EIcon = ({isUser, status, className, size, onClick}) => {
const e2eIconClasses = classNames({ const e2eIconClasses = classNames({
mx_E2EIcon: true, mx_E2EIcon: true,
mx_E2EIcon_warning: isWarning, mx_E2EIcon_warning: status === E2E_STATE.WARNING,
mx_E2EIcon_normal: isNormal, mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
mx_E2EIcon_verified: isVerified, mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
}, className); }, className);
let e2eTitle;
let e2eTitle;
const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing"); const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing");
if (crossSigning && isUser) { if (crossSigning && isUser) {
if (isWarning) { e2eTitle = crossSigningUserTitles[status];
e2eTitle = _t(
"This user has not verified all of their devices.",
);
} else if (isNormal) {
e2eTitle = _t(
"You have not verified this user. " +
"This user has verified all of their devices.",
);
} else if (isVerified) {
e2eTitle = _t(
"You have verified this user. " +
"This user has verified all of their devices.",
);
}
} else if (crossSigning && !isUser) { } else if (crossSigning && !isUser) {
if (isWarning) { e2eTitle = crossSigningRoomTitles[status];
e2eTitle = _t(
"Some users in this encrypted room are not verified by you or " +
"they have not verified their own devices.",
);
} else if (isVerified) {
e2eTitle = _t(
"All users in this encrypted room are verified by you and " +
"they have verified their own devices.",
);
}
} else if (!crossSigning && isUser) { } else if (!crossSigning && isUser) {
if (isWarning) { e2eTitle = legacyUserTitles[status];
e2eTitle = _t("Some devices for this user are not trusted");
} else if (isVerified) {
e2eTitle = _t("All devices for this user are trusted");
}
} else if (!crossSigning && !isUser) { } else if (!crossSigning && !isUser) {
if (isWarning) { e2eTitle = legacyRoomTitles[status];
e2eTitle = _t("Some devices in this encrypted room are not trusted");
} else if (isVerified) {
e2eTitle = _t("All devices in this encrypted room are trusted");
}
} }
let style = null; let style = null;
if (props.size) { if (size) {
style = {width: `${props.size}px`, height: `${props.size}px`}; style = {width: `${size}px`, height: `${size}px`};
} }
const icon = (<div className={e2eIconClasses} style={style} title={e2eTitle} />); const icon = (<div className={e2eIconClasses} style={style} title={e2eTitle ? _t(e2eTitle) : undefined} />);
if (props.onClick) { if (onClick) {
return (<AccessibleButton onClick={props.onClick}>{ icon }</AccessibleButton>); return (<AccessibleButton onClick={onClick}>{ icon }</AccessibleButton>);
} else { } else {
return icon; return icon;
} }
} };
E2EIcon.propTypes = {
isUser: PropTypes.bool,
status: PropTypes.oneOf(Object.values(E2E_STATE)),
className: PropTypes.string,
size: PropTypes.number,
onClick: PropTypes.func,
};
export default E2EIcon;