diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.js
new file mode 100644
index 0000000000..88aa3f9a6c
--- /dev/null
+++ b/src/components/views/right_panel/EncryptionInfo.js
@@ -0,0 +1,30 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from "../../..";
+
+export default class EncryptionInfo extends React.PureComponent {
+ render() {
+ const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ return (
+
End-to-end encryption is great!
+
+
);
+ }
+}
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 2050ad8072..c37d4f2b61 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -1,7 +1,4 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 Vector Creations Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
@@ -18,16 +15,27 @@ limitations under the License.
*/
import React from 'react';
+import EncryptionInfo from "./EncryptionInfo";
+import VerificationPanel from "./VerificationPanel";
+import MatrixClientPeg from "../../../MatrixClientPeg";
export default class EncryptionPanel extends React.PureComponent {
render() {
- const request = this.props.verificationRequest;
+ const request = this.props.verificationRequest || this.state.verificationRequest;
+ const {member} = this.props;
if (request) {
- return got a request, go straight to wizard
;
- } else if (this.props.member) {
- return show encryption options for member {this.props.member.name}
;
- } else {
- return nada
;
+ return ;
+ } else if (member) {
+ return ;
}
}
+
+ _onStartVerification = async () => {
+ const client = MatrixClientPeg.get();
+ const {member} = this.props;
+ // TODO: get the room id of the DM here?
+ // will this panel be shown in non-DM rooms?
+ const verificationRequest = await client.requestVerificationDM(member.userId, member.roomId);
+ this.setState({verificationRequest});
+ };
}
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
new file mode 100644
index 0000000000..3546e81bf3
--- /dev/null
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -0,0 +1,88 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from "../../..";
+import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
+
+export default class VerificationPanel extends React.PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {};
+ }
+
+ render() {
+ const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ const Spinner = sdk.getComponent('elements.Spinner');
+ const {request} = this.props;
+
+ if (request.requested) {
+ return (Waiting for {request.otherUserId} to accept ...
);
+ } else if (request.ready) {
+ return ({request.otherUserId} is ready, start Verify by emoji
);
+ } else if (request.started) {
+ if (this.state.sasEvent) {
+ const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+ return (
+
+
);
+ } else {
+ return (Setting up SAS verification...
);
+ }
+ } else if (request.done) {
+ return verified {request.otherUserId}!!
;
+ }
+ }
+
+ _startSAS = async () => {
+ const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS);
+ verifier.on('show_sas', this._onVerifierShowSas);
+ try {
+ await this._verifier.verify();
+ } finally {
+ this.setState({sasEvent: null});
+ verifier.removeListener('show_sas', this._onVerifierShowSas);
+ }
+ };
+
+ _onSasMatchesClick = () => {
+ this.state.sasEvent.confirm();
+ };
+
+ _onSasMismatchesClick = () => {
+ this.state.sasEvent.cancel();
+ };
+
+ _onVerifierShowSas = (sasEvent) => {
+ this.setState({sasEvent});
+ };
+
+ _onRequestChange = () => {
+ this.forceUpdate();
+ };
+
+ componentDidMount() {
+ this.props.request.on("change", this._onRequestChange);
+ }
+
+ componentWillUnmount() {
+ this.props.request.off("change", this._onRequestChange);
+ }
+}