2017-02-13 16:03:21 +00:00
|
|
|
/*
|
|
|
|
Copyright 2017 Vector Creations Ltd.
|
|
|
|
|
|
|
|
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 Matrix from 'matrix-js-sdk';
|
|
|
|
const InteractiveAuth = Matrix.InteractiveAuth;
|
|
|
|
|
|
|
|
import React from 'react';
|
2017-12-26 01:03:18 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2017-02-13 16:03:21 +00:00
|
|
|
|
|
|
|
import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
|
|
|
|
|
|
|
|
export default React.createClass({
|
|
|
|
displayName: 'InteractiveAuth',
|
|
|
|
|
|
|
|
propTypes: {
|
2017-02-24 11:41:23 +00:00
|
|
|
// matrix client to use for UI auth requests
|
2017-12-26 01:03:18 +00:00
|
|
|
matrixClient: PropTypes.object.isRequired,
|
2017-02-24 11:41:23 +00:00
|
|
|
|
2017-02-13 16:03:21 +00:00
|
|
|
// response from initial request. If not supplied, will do a request on
|
|
|
|
// mount.
|
2017-12-26 01:03:18 +00:00
|
|
|
authData: PropTypes.shape({
|
|
|
|
flows: PropTypes.array,
|
|
|
|
params: PropTypes.object,
|
|
|
|
session: PropTypes.string,
|
2017-02-13 16:03:21 +00:00
|
|
|
}),
|
|
|
|
|
|
|
|
// callback
|
2017-12-26 01:03:18 +00:00
|
|
|
makeRequest: PropTypes.func.isRequired,
|
2017-02-13 16:03:21 +00:00
|
|
|
|
2017-03-03 12:08:26 +00:00
|
|
|
// callback called when the auth process has finished,
|
|
|
|
// successfully or unsuccessfully.
|
2017-02-13 19:09:43 +00:00
|
|
|
// @param {bool} status True if the operation requiring
|
|
|
|
// auth was completed sucessfully, false if canceled.
|
2017-03-06 17:31:21 +00:00
|
|
|
// @param {object} result The result of the authenticated call
|
|
|
|
// if successful, otherwise the error object
|
|
|
|
// @param {object} extra Additional information about the UI Auth
|
|
|
|
// process:
|
|
|
|
// * emailSid {string} If email auth was performed, the sid of
|
|
|
|
// the auth session.
|
|
|
|
// * clientSecret {string} The client secret used in auth
|
|
|
|
// sessions with the ID server.
|
2017-12-26 01:03:18 +00:00
|
|
|
onAuthFinished: PropTypes.func.isRequired,
|
2017-02-24 11:41:23 +00:00
|
|
|
|
|
|
|
// Inputs provided by the user to the auth process
|
|
|
|
// and used by various stages. As passed to js-sdk
|
|
|
|
// interactive-auth
|
2017-12-26 01:03:18 +00:00
|
|
|
inputs: PropTypes.object,
|
2017-02-24 11:41:23 +00:00
|
|
|
|
|
|
|
// As js-sdk interactive-auth
|
2017-12-26 01:03:18 +00:00
|
|
|
makeRegistrationUrl: PropTypes.func,
|
|
|
|
sessionId: PropTypes.string,
|
|
|
|
clientSecret: PropTypes.string,
|
|
|
|
emailSid: PropTypes.string,
|
2017-02-24 17:24:10 +00:00
|
|
|
|
|
|
|
// If true, poll to see if the auth flow has been completed
|
|
|
|
// out-of-band
|
2017-12-26 01:03:18 +00:00
|
|
|
poll: PropTypes.bool,
|
2018-11-15 01:26:08 +00:00
|
|
|
|
|
|
|
// If true, components will be told that the 'Continue' button
|
|
|
|
// is managed by some other party and should not be managed by
|
|
|
|
// the component itself.
|
|
|
|
continueIsManaged: PropTypes.bool,
|
2017-02-13 16:03:21 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
authStage: null,
|
|
|
|
busy: false,
|
|
|
|
errorText: null,
|
|
|
|
stageErrorText: null,
|
|
|
|
submitButtonEnabled: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
|
|
|
this._unmounted = false;
|
|
|
|
this._authLogic = new InteractiveAuth({
|
|
|
|
authData: this.props.authData,
|
|
|
|
doRequest: this._requestCallback,
|
2017-02-24 11:41:23 +00:00
|
|
|
inputs: this.props.inputs,
|
|
|
|
stateUpdated: this._authStateUpdated,
|
|
|
|
matrixClient: this.props.matrixClient,
|
|
|
|
sessionId: this.props.sessionId,
|
|
|
|
clientSecret: this.props.clientSecret,
|
|
|
|
emailSid: this.props.emailSid,
|
2017-02-13 16:03:21 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
this._authLogic.attemptAuth().then((result) => {
|
2017-03-06 17:31:21 +00:00
|
|
|
const extra = {
|
|
|
|
emailSid: this._authLogic.getEmailSid(),
|
|
|
|
clientSecret: this._authLogic.getClientSecret(),
|
|
|
|
};
|
|
|
|
this.props.onAuthFinished(true, result, extra);
|
2017-02-13 16:03:21 +00:00
|
|
|
}).catch((error) => {
|
2017-03-03 12:08:26 +00:00
|
|
|
this.props.onAuthFinished(false, error);
|
2017-02-13 16:03:21 +00:00
|
|
|
console.error("Error during user-interactive auth:", error);
|
|
|
|
if (this._unmounted) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const msg = error.message || error.toString();
|
|
|
|
this.setState({
|
2017-10-11 16:56:17 +00:00
|
|
|
errorText: msg,
|
2017-02-13 16:03:21 +00:00
|
|
|
});
|
|
|
|
}).done();
|
2017-02-24 17:24:10 +00:00
|
|
|
|
|
|
|
this._intervalId = null;
|
|
|
|
if (this.props.poll) {
|
|
|
|
this._intervalId = setInterval(() => {
|
|
|
|
this._authLogic.poll();
|
|
|
|
}, 2000);
|
|
|
|
}
|
2017-02-13 16:03:21 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
this._unmounted = true;
|
2017-02-24 17:24:10 +00:00
|
|
|
|
|
|
|
if (this._intervalId !== null) {
|
|
|
|
clearInterval(this._intervalId);
|
|
|
|
}
|
2017-02-13 16:03:21 +00:00
|
|
|
},
|
|
|
|
|
2018-11-15 01:26:08 +00:00
|
|
|
tryContinue: function() {
|
|
|
|
if (this.refs.stageComponent && this.refs.stageComponent.tryContinue) {
|
|
|
|
this.refs.stageComponent.tryContinue();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-02-24 11:41:23 +00:00
|
|
|
_authStateUpdated: function(stageType, stageState) {
|
|
|
|
const oldStage = this.state.authStage;
|
2017-02-13 16:03:21 +00:00
|
|
|
this.setState({
|
|
|
|
authStage: stageType,
|
2017-02-24 11:41:23 +00:00
|
|
|
stageState: stageState,
|
2017-03-01 16:59:25 +00:00
|
|
|
errorText: stageState.error,
|
2017-02-24 11:41:23 +00:00
|
|
|
}, () => {
|
|
|
|
if (oldStage != stageType) this._setFocus();
|
|
|
|
});
|
2017-02-13 16:03:21 +00:00
|
|
|
},
|
|
|
|
|
2017-03-21 18:40:41 +00:00
|
|
|
_requestCallback: function(auth, background) {
|
2017-03-22 11:25:33 +00:00
|
|
|
const makeRequestPromise = this.props.makeRequest(auth);
|
|
|
|
|
|
|
|
// if it's a background request, just do it: we don't want
|
|
|
|
// it to affect the state of our UI.
|
|
|
|
if (background) return makeRequestPromise;
|
|
|
|
|
|
|
|
// otherwise, manage the state of the spinner and error messages
|
|
|
|
this.setState({
|
|
|
|
busy: true,
|
|
|
|
errorText: null,
|
|
|
|
stageErrorText: null,
|
|
|
|
});
|
|
|
|
return makeRequestPromise.finally(() => {
|
2017-02-13 16:03:21 +00:00
|
|
|
if (this._unmounted) {
|
|
|
|
return;
|
|
|
|
}
|
2017-03-22 11:25:33 +00:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
});
|
2017-02-13 16:03:21 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
_setFocus: function() {
|
|
|
|
if (this.refs.stageComponent && this.refs.stageComponent.focus) {
|
|
|
|
this.refs.stageComponent.focus();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_submitAuthDict: function(authData) {
|
|
|
|
this._authLogic.submitAuthDict(authData);
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderCurrentStage: function() {
|
|
|
|
const stage = this.state.authStage;
|
2017-02-24 11:41:23 +00:00
|
|
|
if (!stage) return null;
|
|
|
|
|
|
|
|
const StageComponent = getEntryComponentForLoginType(stage);
|
2017-02-13 16:03:21 +00:00
|
|
|
return (
|
|
|
|
<StageComponent ref="stageComponent"
|
|
|
|
loginType={stage}
|
2017-02-24 11:41:23 +00:00
|
|
|
matrixClient={this.props.matrixClient}
|
2017-02-13 16:03:21 +00:00
|
|
|
authSessionId={this._authLogic.getSessionId()}
|
2017-03-01 16:04:15 +00:00
|
|
|
clientSecret={this._authLogic.getClientSecret()}
|
2017-02-13 16:03:21 +00:00
|
|
|
stageParams={this._authLogic.getStageParams(stage)}
|
|
|
|
submitAuthDict={this._submitAuthDict}
|
|
|
|
errorText={this.state.stageErrorText}
|
2017-02-13 18:52:33 +00:00
|
|
|
busy={this.state.busy}
|
2017-02-24 11:41:23 +00:00
|
|
|
inputs={this.props.inputs}
|
|
|
|
stageState={this.state.stageState}
|
2017-03-01 16:04:15 +00:00
|
|
|
fail={this._onAuthStageFailed}
|
|
|
|
setEmailSid={this._setEmailSid}
|
|
|
|
makeRegistrationUrl={this.props.makeRegistrationUrl}
|
2018-11-16 19:15:44 +00:00
|
|
|
showContinue={!this.props.continueIsManaged}
|
2017-02-13 16:03:21 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2017-03-01 16:04:15 +00:00
|
|
|
_onAuthStageFailed: function(e) {
|
2017-03-03 12:08:26 +00:00
|
|
|
this.props.onAuthFinished(false, e);
|
2017-03-01 16:04:15 +00:00
|
|
|
},
|
|
|
|
_setEmailSid: function(sid) {
|
|
|
|
this._authLogic.setEmailSid(sid);
|
|
|
|
},
|
|
|
|
|
2017-02-13 16:03:21 +00:00
|
|
|
render: function() {
|
|
|
|
let error = null;
|
|
|
|
if (this.state.errorText) {
|
|
|
|
error = (
|
|
|
|
<div className="error">
|
2017-10-11 16:56:17 +00:00
|
|
|
{ this.state.errorText }
|
2017-02-13 16:03:21 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div>
|
2017-10-11 16:56:17 +00:00
|
|
|
{ this._renderCurrentStage() }
|
|
|
|
{ error }
|
2017-02-13 16:03:21 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|