implement most of new messages

This commit is contained in:
Bruno Windels 2019-04-15 14:43:37 +02:00
parent b67152d98e
commit b09c7f97e9
2 changed files with 77 additions and 180 deletions

View file

@ -32,7 +32,7 @@ const MessageCase = Object.freeze({
Kicked: "Kicked", Kicked: "Kicked",
Banned: "Banned", Banned: "Banned",
OtherThreePIDError: "OtherThreePIDError", OtherThreePIDError: "OtherThreePIDError",
MismatchThreePIDInvite: "MismatchThreePIDInvite", InvitedEmailMismatch: "InvitedEmailMismatch",
Invite: "Invite", Invite: "Invite",
ViewingRoom: "ViewingRoom", ViewingRoom: "ViewingRoom",
RoomNotFound: "RoomNotFound", RoomNotFound: "RoomNotFound",
@ -122,7 +122,7 @@ module.exports = React.createClass({
if (this.state.threePidFetchError) { if (this.state.threePidFetchError) {
return MessageCase.OtherThreePIDError; return MessageCase.OtherThreePIDError;
} else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) { } else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) {
return MessageCase.MismatchThreePIDInvite; return MessageCase.InvitedEmailMismatch;
} }
} }
return MessageCase.Invite; return MessageCase.Invite;
@ -162,6 +162,8 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
const name = this.props.roomAlias || _t("This room");
let showSpinner = false; let showSpinner = false;
let darkStyle = false; let darkStyle = false;
let title; let title;
@ -186,205 +188,89 @@ module.exports = React.createClass({
darkStyle = true; darkStyle = true;
title = _t("Join the conversation with an account"); title = _t("Join the conversation with an account");
primaryActionLabel = _t("Sign Up"); primaryActionLabel = _t("Sign Up");
primaryActionLabel = this.props.onSignUpClick; primaryActionHandler = this.props.onSignUpClick;
secondaryActionLabel = _t("Sign In"); secondaryActionLabel = _t("Sign In");
secondaryActionLabel = this.props.onSignInClick; secondaryActionHandler = this.props.onSignInClick;
break; break;
} }
case MessageCase.Kicked: { case MessageCase.Kicked: {
const info = this._getKickOrBanInfo(); const {memberName, reason} = this._getKickOrBanInfo();
title = _t("You were kicked from this room by %(memberName)", info); title = _t("You were kicked from this room by %(memberName)s", {memberName});
subTitle = _t("Reason: %(reason)", info); subTitle = _t("Reason: %(reason)s", {reason});
primaryActionLabel = _t("Re-join"); primaryActionLabel = _t("Re-join");
primaryActionLabel = this.props.onJoinClick; primaryActionHandler = this.props.onJoinClick;
secondaryActionLabel = _t("Forget this room"); secondaryActionLabel = _t("Forget this room");
secondaryActionLabel = this.props.onForgetClick; secondaryActionHandler = this.props.onForgetClick;
break; break;
} }
case MessageCase.Banned: { case MessageCase.Banned: {
const info = this._getKickOrBanInfo(); const {memberName, reason} = this._getKickOrBanInfo();
title = _t("You were banned from this room by %(memberName)", info); title = _t("You were banned from this room by %(memberName)s", {memberName});
subTitle = _t("Reason: %(reason)", info); subTitle = _t("Reason: %(reason)s", {reason});
primaryActionLabel = _t("Forget this room"); primaryActionLabel = _t("Forget this room");
primaryActionLabel = this.props.onForgetClick; primaryActionHandler = this.props.onForgetClick;
break; break;
} }
case MessageCase.OtherThreePIDError: { case MessageCase.OtherThreePIDError: {
// "Unable to ascertain that the address this invite was sent to matches one associated with your account."
// need to show invited by "name", join buttons here?
break; break;
} }
case MessageCase.MismatchThreePIDInvite: { case MessageCase.InvitedEmailMismatch: {
title = _t("The room invite wasn't sent to your account"); title = _t("The room invite wasn't sent to your account");
subTitle = _t("Sign in with a different account, ask for another invite, or add the e-mail address %(email) to this account.", {email: this.props.invitedEmail}); subTitle = _t("Sign in with a different account, ask for another invite, or add the e-mail address %(email)s to this account.", {email: this.props.invitedEmail});
break; break;
} }
case MessageCase.Invite: { case MessageCase.Invite: {
title = _t("%(memberName) invited you to this room", {memberName: this.props.inviterName}); if (this.props.canPreview) {
title = _t("%(memberName)s invited you to this room", {memberName: this.props.inviterName});
} else {
title = _t("Do you want to join this room?");
subTitle = _t("%(memberName)s invited you", {memberName: this.props.inviterName});
}
primaryActionLabel = _t("Accept"); primaryActionLabel = _t("Accept");
primaryActionLabel = this.props.onJoinClick; primaryActionHandler = this.props.onJoinClick;
secondaryActionLabel = _t("Reject"); secondaryActionLabel = _t("Reject");
secondaryActionLabel = this.props.onRejectClick; secondaryActionHandler = this.props.onRejectClick;
break; break;
} }
case MessageCase.ViewingRoom: { case MessageCase.ViewingRoom: {
if (this.props.canPreview) { if (this.props.canPreview) {
title = _t("You are previewing this room. Want to join it?"); title = _t("You're previewing this room. Want to join it?");
} else { } else {
title = _t("This room can't be previewed. Do you want to join it?"); title = _t("This room can't be previewed. Do you want to join it?");
} }
primaryActionLabel = _t("Join the discussion");
title = _t("%(memberName) invited you to this room", {memberName: this.props.inviterName}); primaryActionHandler = this.props.onJoinClick;
primaryActionLabel = _t("Accept");
primaryActionLabel = this.props.onJoinClick;
secondaryActionLabel = _t("Reject");
secondaryActionLabel = this.props.onRejectClick;
break; break;
} }
case MessageCase.RoomNotFound: { case MessageCase.RoomNotFound: {
title = _t("%(roomName)s does not exist.", {roomName: name});
subTitle = _t("This room doesn't exist. Are you sure you're at the right place?");
break; break;
} }
case MessageCase.OtherError: { case MessageCase.OtherError: {
title = _t("%(roomName)s is not accessible at this time.", {roomName: name});
subTitle = ([
<p key="subTitle1">{ _t("Try again later, or ask a room admin to check if you have access.") }</p>,
<p key="subTitle2">{ _t("If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.", {}, {
issueLink: label => <a href="https://github.com/vector-im/riot-web/issues/new/choose"
target="_blank" rel="noopener">{ label }</a>,
}) }</p>,
]);
break; break;
} }
} }
let joinBlock; let previewBlock; const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
if (this.props.spinner || this.state.busy) { let subTitleElements;
let spinnerIntro = ""; if (subTitle) {
if (this.props.spinnerState === "joining") { if (Array.isArray(subTitle)) {
spinnerIntro = _t("Joining room..."); subTitleElements = subTitle;
}
return (<div className="mx_RoomPreviewBar">
<p className="mx_RoomPreviewBar_spinnerIntro">{ spinnerIntro }</p>
<Spinner />
</div>);
}
const myMember = this.props.room ?
this.props.room.getMember(MatrixClientPeg.get().getUserId()) :
null;
const kicked = myMember && myMember.isKicked();
const banned = myMember && myMember && myMember.membership == 'ban';
if (this.props.inviterName) {
let emailMatchBlock;
if (this.props.invitedEmail) {
if (this.state.threePidFetchError) {
emailMatchBlock = <div className="error">
{ _t("Unable to ascertain that the address this invite was sent to matches one associated with your account.") }
</div>;
} else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) {
emailMatchBlock =
<div className="mx_RoomPreviewBar_warning">
<div className="mx_RoomPreviewBar_warningIcon">
<img src={require("../../../../res/img/warning.svg")} width="24" height="23" title= "/!\\" alt="/!\\" />
</div>
<div className="mx_RoomPreviewBar_warningText">
{ _t("This invitation was sent to an email address which is not associated with this account:") }
<b><span className="email">{ this.props.invitedEmail }</span></b>
<br />
{ _t("You may wish to login with a different account, or add this email to this account.") }
</div>
</div>;
}
}
joinBlock = (
<div>
<div className="mx_RoomPreviewBar_invite_text">
{ _t('You have been invited to join this room by %(inviterName)s', {inviterName: this.props.inviterName}) }
</div>
<div className="mx_RoomPreviewBar_join_text">
{ _t(
'Would you like to <acceptText>accept</acceptText> or <declineText>decline</declineText> this invitation?',
{},
{
'acceptText': (sub) => <a onClick={this.props.onJoinClick}>{ sub }</a>,
'declineText': (sub) => <a onClick={this.props.onRejectClick}>{ sub }</a>,
},
) }
</div>
{ emailMatchBlock }
</div>
);
} else if (kicked || banned) {
const roomName = this._roomNameElement();
const kickerMember = this.props.room.currentState.getMember(
myMember.events.member.getSender(),
);
const kickerName = kickerMember ?
kickerMember.name : myMember.events.member.getSender();
let reason;
if (myMember.events.member.getContent().reason) {
reason = <div>{ _t("Reason: %(reasonText)s", {reasonText: myMember.events.member.getContent().reason}) }</div>;
}
let rejoinBlock;
if (!banned) {
rejoinBlock = <div><a onClick={this.props.onJoinClick}><b>{ _t("Rejoin") }</b></a></div>;
}
let actionText;
if (kicked) {
if (roomName) {
actionText = _t("You have been kicked from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
} else {
actionText = _t("You have been kicked from this room by %(userName)s.", {userName: kickerName});
}
} else if (banned) {
if (roomName) {
actionText = _t("You have been banned from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
} else {
actionText = _t("You have been banned from this room by %(userName)s.", {userName: kickerName});
}
} // no other options possible due to the kicked || banned check above.
joinBlock = (
<div>
<div className="mx_RoomPreviewBar_join_text">
{ actionText }
<br />
{ reason }
{ rejoinBlock }
<a onClick={this.props.onForgetClick}><b>{ _t("Forget room") }</b></a>
</div>
</div>
);
} else if (this.props.error) {
const name = this.props.roomAlias || _t("This room");
let error;
if (this.props.error.errcode == 'M_NOT_FOUND') {
error = _t("%(roomName)s does not exist.", {roomName: name});
} else { } else {
error = _t("%(roomName)s is not accessible at this time.", {roomName: name}); subTitleElements = [<p key="subTitle1">{ subTitle }</p>];
} }
joinBlock = (
<div>
<div className="mx_RoomPreviewBar_join_text">
{ error }
</div>
</div>
);
} else {
const name = this._roomNameElement();
joinBlock = (
<div>
<div className="mx_RoomPreviewBar_join_text">
{ name ? _t('You are trying to access %(roomName)s.', {roomName: name}) : _t('You are trying to access a room.') }
<br />
{ _t("<a>Click here</a> to join the discussion!",
{},
{ 'a': (sub) => <a onClick={this.props.onJoinClick}><b>{ sub }</b></a> },
) }
</div>
</div>
);
}
if (this.props.canPreview) {
previewBlock = (
<div className="mx_RoomPreviewBar_preview_text">
{ _t('This is a preview of this room. Room interactions have been disabled') }.
</div>
);
} }
const classes = classNames("mx_RoomPreviewBar", "dark-panel", { const classes = classNames("mx_RoomPreviewBar", "dark-panel", {
@ -394,11 +280,17 @@ module.exports = React.createClass({
return ( return (
<div className={classes}> <div className={classes}>
<div className="mx_RoomPreviewBar_wrapper"> <div className="mx_RoomPreviewBar_message">
{ joinBlock } <h3>{ title }</h3>
{ previewBlock } { subTitleElements }
</div>
<div className="mx_RoomPreviewBar_actions">
{ secondaryActionHandler ? <AccessibleButton kind="secondary" onClick={secondaryActionHandler}>{ secondaryActionLabel }</AccessibleButton> : undefined }
{ primaryActionHandler ? <AccessibleButton kind="primary" onClick={primaryActionHandler}>{ primaryActionLabel }</AccessibleButton> : undefined }
</div> </div>
</div> </div>
); );
}, },
}); });

View file

@ -789,25 +789,31 @@
"Low priority": "Low priority", "Low priority": "Low priority",
"Historical": "Historical", "Historical": "Historical",
"System Alerts": "System Alerts", "System Alerts": "System Alerts",
"Joining room...": "Joining room...",
"Unable to ascertain that the address this invite was sent to matches one associated with your account.": "Unable to ascertain that the address this invite was sent to matches one associated with your account.",
"This invitation was sent to an email address which is not associated with this account:": "This invitation was sent to an email address which is not associated with this account:",
"You may wish to login with a different account, or add this email to this account.": "You may wish to login with a different account, or add this email to this account.",
"You have been invited to join this room by %(inviterName)s": "You have been invited to join this room by %(inviterName)s",
"Would you like to <acceptText>accept</acceptText> or <declineText>decline</declineText> this invitation?": "Would you like to <acceptText>accept</acceptText> or <declineText>decline</declineText> this invitation?",
"Reason: %(reasonText)s": "Reason: %(reasonText)s",
"Rejoin": "Rejoin",
"You have been kicked from %(roomName)s by %(userName)s.": "You have been kicked from %(roomName)s by %(userName)s.",
"You have been kicked from this room by %(userName)s.": "You have been kicked from this room by %(userName)s.",
"You have been banned from %(roomName)s by %(userName)s.": "You have been banned from %(roomName)s by %(userName)s.",
"You have been banned from this room by %(userName)s.": "You have been banned from this room by %(userName)s.",
"This room": "This room", "This room": "This room",
"Joining room...": "Joining room...",
"In progress ...": "In progress ...",
"Join the conversation with an account": "Join the conversation with an account",
"Sign Up": "Sign Up",
"Sign In": "Sign In",
"You were kicked from this room by %(memberName)s": "You were kicked from this room by %(memberName)s",
"Reason: %(reason)s": "Reason: %(reason)s",
"Re-join": "Re-join",
"Forget this room": "Forget this room",
"You were banned from this room by %(memberName)s": "You were banned from this room by %(memberName)s",
"The room invite wasn't sent to your account": "The room invite wasn't sent to your account",
"Sign in with a different account, ask for another invite, or add the e-mail address %(email)s to this account.": "Sign in with a different account, ask for another invite, or add the e-mail address %(email)s to this account.",
"%(memberName)s invited you to this room": "%(memberName)s invited you to this room",
"Do you want to join this room?": "Do you want to join this room?",
"%(memberName)s invited you": "%(memberName)s invited you",
"Reject": "Reject",
"You're previewing this room. Want to join it?": "You're previewing this room. Want to join it?",
"This room can't be previewed. Do you want to join it?": "This room can't be previewed. Do you want to join it?",
"Join the discussion": "Join the discussion",
"%(roomName)s does not exist.": "%(roomName)s does not exist.", "%(roomName)s does not exist.": "%(roomName)s does not exist.",
"This room doesn't exist. Are you sure you're at the right place?": "This room doesn't exist. Are you sure you're at the right place?",
"%(roomName)s is not accessible at this time.": "%(roomName)s is not accessible at this time.", "%(roomName)s is not accessible at this time.": "%(roomName)s is not accessible at this time.",
"You are trying to access %(roomName)s.": "You are trying to access %(roomName)s.", "Try again later, or ask a room admin to check if you have access.": "Try again later, or ask a room admin to check if you have access.",
"You are trying to access a room.": "You are trying to access a room.", "If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.": "If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.",
"<a>Click here</a> to join the discussion!": "<a>Click here</a> to join the discussion!",
"This is a preview of this room. Room interactions have been disabled": "This is a preview of this room. Room interactions have been disabled",
"Use Key Backup": "Use Key Backup", "Use Key Backup": "Use Key Backup",
"Never lose encrypted messages": "Never lose encrypted messages", "Never lose encrypted messages": "Never lose encrypted messages",
"Messages in this room are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Messages in this room are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.", "Messages in this room are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Messages in this room are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.",
@ -1242,7 +1248,6 @@
"Reject invitation": "Reject invitation", "Reject invitation": "Reject invitation",
"Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?", "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
"Unable to reject invite": "Unable to reject invite", "Unable to reject invite": "Unable to reject invite",
"Reject": "Reject",
"You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)", "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)",
"Resend": "Resend", "Resend": "Resend",
"Cancel Sending": "Cancel Sending", "Cancel Sending": "Cancel Sending",