mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 13:14:58 +08:00
Merge branch 'bwindels/qr-reciprocate' into bwindels/selfverifux
This commit is contained in:
Bruno Windels
commit
009941a6ac
@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_VerificationPanel_verified_section,
|
||||
.mx_VerificationPanel_reciprocate_section {
|
||||
// center the big shield icon
|
||||
.mx_E2EIcon {
|
||||
// Override general user info margin
|
||||
margin: 20px auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mx_UserInfo {
|
||||
.mx_EncryptionPanel_cancel {
|
||||
mask: url('$(res)/img/feather-customised/cancel.svg');
|
||||
@ -30,11 +40,6 @@ limitations under the License.
|
||||
right: 14px;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_verified_section .mx_E2EIcon {
|
||||
// Override general user info margin
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_qrCode {
|
||||
padding: 4px 4px 0 4px;
|
||||
background: white;
|
||||
@ -51,6 +56,16 @@ limitations under the License.
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_reciprocate_section {
|
||||
.mx_FormButton {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special case styling for EncryptionPanel in a Modal dialog
|
||||
@ -109,13 +124,22 @@ limitations under the License.
|
||||
|
||||
// EncryptionPanel when verification is done
|
||||
.mx_VerificationPanel_verified_section {
|
||||
// center the big shield icon
|
||||
.mx_E2EIcon {
|
||||
margin: 0 auto;
|
||||
}
|
||||
// right align the "Got it" button
|
||||
.mx_AccessibleButton {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_reciprocate_section {
|
||||
.mx_AccessibleButton {
|
||||
margin-left: 10px;
|
||||
padding: 7px 40px;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_reciprocateButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,95 +17,17 @@ limitations under the License.
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import {replaceableComponent} from "../../../../utils/replaceableComponent";
|
||||
import {MatrixClientPeg} from "../../../../MatrixClientPeg";
|
||||
import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
||||
import {ToDeviceChannel} from "matrix-js-sdk/src/crypto/verification/request/ToDeviceChannel";
|
||||
import {decodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
|
||||
import Spinner from "../Spinner";
|
||||
import * as QRCode from "qrcode";
|
||||
|
||||
const CODE_VERSION = 0x02; // the version of binary QR codes we support
|
||||
const BINARY_PREFIX = "MATRIX"; // ASCII, used to prefix the binary format
|
||||
const MODE_VERIFY_OTHER_USER = 0x00; // Verifying someone who isn't us
|
||||
const MODE_VERIFY_SELF_TRUSTED = 0x01; // We trust the master key
|
||||
const MODE_VERIFY_SELF_UNTRUSTED = 0x02; // We do not trust the master key
|
||||
|
||||
@replaceableComponent("views.elements.crypto.VerificationQRCode")
|
||||
export default class VerificationQRCode extends React.PureComponent {
|
||||
static propTypes = {
|
||||
prefix: PropTypes.string.isRequired,
|
||||
version: PropTypes.number.isRequired,
|
||||
mode: PropTypes.number.isRequired,
|
||||
transactionId: PropTypes.string.isRequired, // or requestEventId
|
||||
firstKeyB64: PropTypes.string.isRequired,
|
||||
secondKeyB64: PropTypes.string.isRequired,
|
||||
secretB64: PropTypes.string.isRequired,
|
||||
qrCodeData: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
static async getPropsForRequest(verificationRequest: VerificationRequest) {
|
||||
const cli = MatrixClientPeg.get();
|
||||
const myUserId = cli.getUserId();
|
||||
const otherUserId = verificationRequest.otherUserId;
|
||||
|
||||
let mode = MODE_VERIFY_OTHER_USER;
|
||||
if (myUserId === otherUserId) {
|
||||
// Mode changes depending on whether or not we trust the master cross signing key
|
||||
const myTrust = cli.checkUserTrust(myUserId);
|
||||
if (myTrust.isCrossSigningVerified()) {
|
||||
mode = MODE_VERIFY_SELF_TRUSTED;
|
||||
} else {
|
||||
mode = MODE_VERIFY_SELF_UNTRUSTED;
|
||||
}
|
||||
}
|
||||
|
||||
const requestEvent = verificationRequest.requestEvent;
|
||||
const transactionId = requestEvent.getId()
|
||||
? requestEvent.getId()
|
||||
: ToDeviceChannel.getTransactionId(requestEvent);
|
||||
|
||||
const qrProps = {
|
||||
prefix: BINARY_PREFIX,
|
||||
version: CODE_VERSION,
|
||||
mode,
|
||||
transactionId,
|
||||
firstKeyB64: '', // worked out shortly
|
||||
secondKeyB64: '', // worked out shortly
|
||||
secretB64: verificationRequest.encodedSharedSecret,
|
||||
};
|
||||
|
||||
const myCrossSigningInfo = cli.getStoredCrossSigningForUser(myUserId);
|
||||
const myDevices = (await cli.getStoredDevicesForUser(myUserId)) || [];
|
||||
|
||||
if (mode === MODE_VERIFY_OTHER_USER) {
|
||||
// First key is our master cross signing key
|
||||
qrProps.firstKeyB64 = myCrossSigningInfo.getId("master");
|
||||
|
||||
// Second key is the other user's master cross signing key
|
||||
const otherUserCrossSigningInfo = cli.getStoredCrossSigningForUser(otherUserId);
|
||||
qrProps.secondKeyB64 = otherUserCrossSigningInfo.getId("master");
|
||||
} else if (mode === MODE_VERIFY_SELF_TRUSTED) {
|
||||
// First key is our master cross signing key
|
||||
qrProps.firstKeyB64 = myCrossSigningInfo.getId("master");
|
||||
|
||||
// Second key is the other device's device key
|
||||
const otherDevice = verificationRequest.targetDevice;
|
||||
const otherDeviceId = otherDevice ? otherDevice.deviceId : null;
|
||||
const device = myDevices.find(d => d.deviceId === otherDeviceId);
|
||||
qrProps.secondKeyB64 = device.getFingerprint();
|
||||
} else if (mode === MODE_VERIFY_SELF_UNTRUSTED) {
|
||||
// First key is our device's key
|
||||
qrProps.firstKeyB64 = cli.getDeviceEd25519Key();
|
||||
|
||||
// Second key is what we think our master cross signing key is
|
||||
qrProps.secondKeyB64 = myCrossSigningInfo.getId("master");
|
||||
}
|
||||
|
||||
return qrProps;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
dataUri: null,
|
||||
};
|
||||
@ -119,39 +41,8 @@ export default class VerificationQRCode extends React.PureComponent {
|
||||
}
|
||||
|
||||
async generateQrCode() {
|
||||
let buf = Buffer.alloc(0); // we'll concat our way through life
|
||||
|
||||
const appendByte = (b: number) => {
|
||||
const tmpBuf = Buffer.from([b]);
|
||||
buf = Buffer.concat([buf, tmpBuf]);
|
||||
};
|
||||
const appendInt = (i: number) => {
|
||||
const tmpBuf = Buffer.alloc(2);
|
||||
tmpBuf.writeInt16BE(i, 0);
|
||||
buf = Buffer.concat([buf, tmpBuf]);
|
||||
};
|
||||
const appendStr = (s: string, enc: string, withLengthPrefix = true) => {
|
||||
const tmpBuf = Buffer.from(s, enc);
|
||||
if (withLengthPrefix) appendInt(tmpBuf.byteLength);
|
||||
buf = Buffer.concat([buf, tmpBuf]);
|
||||
};
|
||||
const appendEncBase64 = (b64: string) => {
|
||||
const b = decodeBase64(b64);
|
||||
const tmpBuf = Buffer.from(b);
|
||||
buf = Buffer.concat([buf, tmpBuf]);
|
||||
};
|
||||
|
||||
// Actually build the buffer for the QR code
|
||||
appendStr(this.props.prefix, "ascii", false);
|
||||
appendByte(this.props.version);
|
||||
appendByte(this.props.mode);
|
||||
appendStr(this.props.transactionId, "utf-8");
|
||||
appendEncBase64(this.props.firstKeyB64);
|
||||
appendEncBase64(this.props.secondKeyB64);
|
||||
appendEncBase64(this.props.secretB64);
|
||||
|
||||
// Now actually assemble the QR code's data URI
|
||||
const uri = await QRCode.toDataURL([{data: buf, mode: 'byte'}], {
|
||||
const uri = await QRCode.toDataURL([{data: this.props.qrCodeData.buffer, mode: 'byte'}], {
|
||||
errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
|
||||
});
|
||||
this.setState({dataUri: uri});
|
||||
|
||||
@ -18,6 +18,7 @@ import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as sdk from '../../../index';
|
||||
import {MatrixClientPeg} from '../../../MatrixClientPeg';
|
||||
import {verificationMethods} from 'matrix-js-sdk/src/crypto';
|
||||
import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
|
||||
|
||||
@ -30,7 +31,7 @@ import {
|
||||
PHASE_READY,
|
||||
PHASE_DONE,
|
||||
PHASE_STARTED,
|
||||
PHASE_CANCELLED, VerificationRequest,
|
||||
PHASE_CANCELLED,
|
||||
} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
||||
import Spinner from "../elements/Spinner";
|
||||
|
||||
@ -53,25 +54,11 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
qrCodeProps: null, // generated by the VerificationQRCode component itself
|
||||
};
|
||||
this.state = {};
|
||||
this._hasVerifier = false;
|
||||
if (this.props.request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD)) {
|
||||
this._generateQRCodeProps(props.request);
|
||||
}
|
||||
}
|
||||
|
||||
async _generateQRCodeProps(verificationRequest: VerificationRequest) {
|
||||
try {
|
||||
this.setState({qrCodeProps: await VerificationQRCode.getPropsForRequest(verificationRequest)});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
// Do nothing - we won't render a QR code.
|
||||
}
|
||||
}
|
||||
|
||||
renderQRPhase(pending) {
|
||||
renderQRPhase() {
|
||||
const {member, request} = this.props;
|
||||
const showSAS = request.otherPartySupportsMethod(verificationMethods.SAS);
|
||||
const showQR = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
|
||||
@ -86,16 +73,10 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
let qrBlock;
|
||||
let sasBlock;
|
||||
if (showQR) {
|
||||
let qrCode;
|
||||
if (this.state.qrCodeProps) {
|
||||
qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
|
||||
} else {
|
||||
qrCode = <div className='mx_VerificationPanel_QRPhase_noQR'><Spinner /></div>;
|
||||
}
|
||||
qrBlock =
|
||||
<div className='mx_VerificationPanel_QRPhase_startOption'>
|
||||
<p>{_t("Scan this unique code")}</p>
|
||||
{qrCode}
|
||||
<VerificationQRCode qrCodeData={request.qrCodeData} />
|
||||
</div>;
|
||||
}
|
||||
if (showSAS) {
|
||||
@ -124,7 +105,7 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
}
|
||||
|
||||
let qrBlock;
|
||||
if (this.state.qrCodeProps) {
|
||||
if (showQR) {
|
||||
qrBlock = <div className="mx_UserInfo_container">
|
||||
<h3>{_t("Verify by scanning")}</h3>
|
||||
<p>{_t("Ask %(displayName)s to scan your code:", {
|
||||
@ -132,31 +113,23 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
})}</p>
|
||||
|
||||
<div className="mx_VerificationPanel_qrCode">
|
||||
<VerificationQRCode {...this.state.qrCodeProps} />
|
||||
<VerificationQRCode qrCodeData={request.qrCodeData} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
let sasBlock;
|
||||
if (showSAS) {
|
||||
let button;
|
||||
if (pending) {
|
||||
button = <Spinner />;
|
||||
} else {
|
||||
const disabled = this.state.emojiButtonClicked;
|
||||
button = (
|
||||
<AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
|
||||
{_t("Verify by emoji")}
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
const sasLabel = this.state.qrCodeProps ?
|
||||
const disabled = this.state.emojiButtonClicked;
|
||||
const sasLabel = showQR ?
|
||||
_t("If you can't scan the code above, verify by comparing unique emoji.") :
|
||||
_t("Verify by comparing unique emoji.");
|
||||
sasBlock = <div className="mx_UserInfo_container">
|
||||
<h3>{_t("Verify by emoji")}</h3>
|
||||
<p>{sasLabel}</p>
|
||||
{ button }
|
||||
<AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
|
||||
{_t("Verify by emoji")}
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
}
|
||||
|
||||
@ -172,6 +145,64 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
_onReciprocateYesClick = () => {
|
||||
this.setState({reciprocateButtonClicked: true});
|
||||
this.state.reciprocateQREvent.confirm();
|
||||
};
|
||||
|
||||
_onReciprocateNoClick = () => {
|
||||
this.setState({reciprocateButtonClicked: true});
|
||||
this.state.reciprocateQREvent.cancel();
|
||||
};
|
||||
|
||||
get _isSelfVerification() {
|
||||
return this.props.request.otherUserId === MatrixClientPeg.get().getUserId();
|
||||
}
|
||||
|
||||
renderQRReciprocatePhase() {
|
||||
const {member} = this.props;
|
||||
let Button;
|
||||
// a bit of a hack, but the FormButton should only be used in the right panel
|
||||
// they should probably just be the same component with a css class applied to it?
|
||||
if (this.props.inDialog) {
|
||||
Button = sdk.getComponent("elements.AccessibleButton");
|
||||
} else {
|
||||
Button = sdk.getComponent("elements.FormButton");
|
||||
}
|
||||
const description = this._isSelfVerification ?
|
||||
_t("Almost there! Is your other session showing the same shield?") :
|
||||
_t("Almost there! Is %(displayName)s showing the same shield?", {
|
||||
displayName: member.displayName || member.name || member.userId,
|
||||
});
|
||||
let body;
|
||||
if (this.state.reciprocateQREvent) {
|
||||
// riot web doesn't support scanning yet, so assume here we're the client being scanned.
|
||||
//
|
||||
// we're passing both a label and a child string to Button as
|
||||
// FormButton and AccessibleButton expect this differently
|
||||
body = <React.Fragment>
|
||||
<p>{description}</p>
|
||||
<E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
|
||||
<div className="mx_VerificationPanel_reciprocateButtons">
|
||||
<Button
|
||||
label={_t("No")} kind="danger"
|
||||
disabled={this.state.reciprocateButtonClicked}
|
||||
onClick={this._onReciprocateNoClick}>{_t("No")}</Button>
|
||||
<Button
|
||||
label={_t("Yes")} kind="primary"
|
||||
disabled={this.state.reciprocateButtonClicked}
|
||||
onClick={this._onReciprocateYesClick}>{_t("Yes")}</Button>
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
} else {
|
||||
body = <p><Spinner /></p>;
|
||||
}
|
||||
return <div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
|
||||
<h3>{_t("Verify by scanning")}</h3>
|
||||
{ body }
|
||||
</div>;
|
||||
}
|
||||
|
||||
renderVerifiedPhase() {
|
||||
const {member} = this.props;
|
||||
|
||||
@ -228,7 +259,7 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {member, phase} = this.props;
|
||||
const {member, phase, request} = this.props;
|
||||
|
||||
const displayName = member.displayName || member.name || member.userId;
|
||||
|
||||
@ -236,20 +267,26 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
case PHASE_READY:
|
||||
return this.renderQRPhase();
|
||||
case PHASE_STARTED:
|
||||
if (this.state.sasEvent) {
|
||||
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
|
||||
return <div className="mx_UserInfo_container">
|
||||
<h3>{_t("Compare emoji")}</h3>
|
||||
<VerificationShowSas
|
||||
displayName={displayName}
|
||||
sas={this.state.sasEvent.sas}
|
||||
onCancel={this._onSasMismatchesClick}
|
||||
onDone={this._onSasMatchesClick}
|
||||
inDialog={this.props.inDialog}
|
||||
/>
|
||||
</div>;
|
||||
} else {
|
||||
return this.renderQRPhase(true); // keep showing same phase but with a spinner
|
||||
switch (request.chosenMethod) {
|
||||
case verificationMethods.RECIPROCATE_QR_CODE:
|
||||
return this.renderQRReciprocatePhase();
|
||||
case verificationMethods.SAS: {
|
||||
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
|
||||
const emojis = this.state.sasEvent ?
|
||||
<VerificationShowSas
|
||||
displayName={displayName}
|
||||
sas={this.state.sasEvent.sas}
|
||||
onCancel={this._onSasMismatchesClick}
|
||||
onDone={this._onSasMatchesClick}
|
||||
inDialog={this.props.inDialog}
|
||||
/> : <Spinner />;
|
||||
return <div className="mx_UserInfo_container">
|
||||
<h3>{_t("Compare emoji")}</h3>
|
||||
{ emojis }
|
||||
</div>;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
case PHASE_DONE:
|
||||
return this.renderVerifiedPhase();
|
||||
@ -278,10 +315,12 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
this.state.sasEvent.mismatch();
|
||||
};
|
||||
|
||||
_onVerifierShowSas = (sasEvent) => {
|
||||
_updateVerifierState = () => {
|
||||
const {request} = this.props;
|
||||
request.verifier.off('show_sas', this._onVerifierShowSas);
|
||||
this.setState({sasEvent});
|
||||
const {sasEvent, reciprocateQREvent} = request.verifier;
|
||||
request.verifier.off('show_sas', this._updateVerifierState);
|
||||
request.verifier.off('show_reciprocate_qr', this._updateVerifierState);
|
||||
this.setState({sasEvent, reciprocateQREvent});
|
||||
};
|
||||
|
||||
_onRequestChange = async () => {
|
||||
@ -289,7 +328,8 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
const hadVerifier = this._hasVerifier;
|
||||
this._hasVerifier = !!request.verifier;
|
||||
if (!hadVerifier && this._hasVerifier) {
|
||||
request.verifier.on('show_sas', this._onVerifierShowSas);
|
||||
request.verifier.on('show_sas', this._updateVerifierState);
|
||||
request.verifier.on('show_reciprocate_qr', this._updateVerifierState);
|
||||
try {
|
||||
// on the requester side, this is also awaited in _startSAS,
|
||||
// but that's ok as verify should return the same promise.
|
||||
@ -304,7 +344,9 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
const {request} = this.props;
|
||||
request.on("change", this._onRequestChange);
|
||||
if (request.verifier) {
|
||||
this.setState({sasEvent: request.verifier.sasEvent});
|
||||
const {request} = this.props;
|
||||
const {sasEvent, reciprocateQREvent} = request.verifier;
|
||||
this.setState({sasEvent, reciprocateQREvent});
|
||||
}
|
||||
this._onRequestChange();
|
||||
}
|
||||
@ -312,7 +354,8 @@ export default class VerificationPanel extends React.PureComponent {
|
||||
componentWillUnmount() {
|
||||
const {request} = this.props;
|
||||
if (request.verifier) {
|
||||
request.verifier.off('show_sas', this._onVerifierShowSas);
|
||||
request.verifier.off('show_sas', this._updateVerifierState);
|
||||
request.verifier.off('show_reciprocate_qr', this._updateVerifierState);
|
||||
}
|
||||
request.off("change", this._onRequestChange);
|
||||
}
|
||||
|
||||
@ -1249,9 +1249,13 @@
|
||||
"The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.": "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.",
|
||||
"Verify by scanning": "Verify by scanning",
|
||||
"Ask %(displayName)s to scan your code:": "Ask %(displayName)s to scan your code:",
|
||||
"Verify by emoji": "Verify by emoji",
|
||||
"If you can't scan the code above, verify by comparing unique emoji.": "If you can't scan the code above, verify by comparing unique emoji.",
|
||||
"Verify by comparing unique emoji.": "Verify by comparing unique emoji.",
|
||||
"Verify by emoji": "Verify by emoji",
|
||||
"Almost there! Is your other session showing the same shield?": "Almost there! Is your other session showing the same shield?",
|
||||
"Almost there! Is %(displayName)s showing the same shield?": "Almost there! Is %(displayName)s showing the same shield?",
|
||||
"No": "No",
|
||||
"Yes": "Yes",
|
||||
"Verify all users in a room to ensure it's secure.": "Verify all users in a room to ensure it's secure.",
|
||||
"In encrypted rooms, verify all users to ensure it’s secure.": "In encrypted rooms, verify all users to ensure it’s secure.",
|
||||
"Verified": "Verified",
|
||||
@ -1397,8 +1401,6 @@
|
||||
"Verify...": "Verify...",
|
||||
"Join": "Join",
|
||||
"No results": "No results",
|
||||
"Yes": "Yes",
|
||||
"No": "No",
|
||||
"Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
|
||||
"collapse": "collapse",
|
||||
"expand": "expand",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user