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!

+
+ Start verification +
+
); + } +} 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); + } +}