synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
155 lines • 8.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PROVIDERS = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var ButtonWithIcon_1 = (0, tslib_1.__importDefault)(require("../assets/ButtonWithIcon"));
var utils_1 = require("../utils");
var getEndpoint_1 = require("../utils/functions/getEndpoint");
var GoogleIcon24_1 = require("../assets/GoogleIcon24");
exports.PROVIDERS = {
GOOGLE: 'GOOGLE_OAUTH_2_0',
};
/**
* Demo of user session, show login screen and handling user login submission.
*
* To support Google SSO in your portal, you must add your domain to the Authorized Redirect URIs
* for Synapse authentication.
* This can be done by contacting synapseInfo@sagebionetworks.org to form a collaboration.
* Synapse engineers must add your redirect URL in the Google API console found at https://console.cloud.google.com/ for this functionality to work.
*
* @class Login
* @extends {React.Component}
*/
var Login = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Login, _super);
/**
* Creates a user session, maintaining credentials
* @param {*} props
* @memberof Login
*/
function Login(props) {
var _this = _super.call(this, props) || this;
_this.authenticationReceiptKey = 'last_user_authentication_receipt';
_this.state = {
email: '',
errorMessage: '',
hasLoginInFailed: false,
isSignedIn: false,
password: '',
username: '',
};
_this.handleChange = _this.handleChange.bind(_this);
_this.handleLogin = _this.handleLogin.bind(_this);
_this.getLoginFailureView = _this.getLoginFailureView.bind(_this);
_this.onGoogleSignIn = _this.onGoogleSignIn.bind(_this);
return _this;
}
/**
* Updates internal state with the event that was triggered
*
* @param {*} event Form update
*/
Login.prototype.handleChange = function (event) {
var _a;
var target = event.currentTarget;
var name = target.name;
var value = target.value;
var newState = (_a = {}, _a[name] = value, _a);
this.setState(newState);
};
/**
* Handle user login on click
*
* @param {*} clickEvent Userclick event
*/
Login.prototype.handleLogin = function (clickEvent) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var authenticationReceipt, data, err_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
clickEvent.preventDefault(); // avoid page refresh
_a.label = 1;
case 1:
_a.trys.push([1, 4, , 5]);
authenticationReceipt = localStorage.getItem(this.authenticationReceiptKey);
return [4 /*yield*/, utils_1.SynapseClient.login(this.state.username, this.state.password, authenticationReceipt)
// now get access token from cookie has to be called in the portals repo
];
case 2:
data = _a.sent();
// now get access token from cookie has to be called in the portals repo
return [4 /*yield*/, utils_1.SynapseClient.setAccessTokenCookie(data.accessToken, this.props.sessionCallback)
// Set the new receipt
];
case 3:
// now get access token from cookie has to be called in the portals repo
_a.sent();
// Set the new receipt
localStorage.setItem(this.authenticationReceiptKey, data.authenticationReceipt);
return [3 /*break*/, 5];
case 4:
err_1 = _a.sent();
console.log('Error on login: ', err_1.reason);
this.setState({
errorMessage: err_1.reason,
hasLoginInFailed: true,
isSignedIn: false,
});
return [3 /*break*/, 5];
case 5: return [2 /*return*/];
}
});
});
};
/**
* Shows user login failure view on login failure
*
* @returns view to be displayed on user sign in error.
*/
Login.prototype.getLoginFailureView = function () {
if (this.state.hasLoginInFailed) {
return (React.createElement("div", null,
React.createElement("small", { className: "form-text text-danger" }, this.state.errorMessage),
React.createElement("div", { className: "invalid-feedback" })));
}
return false;
};
Login.prototype.onGoogleSignIn = function (event) {
// save current route (so that we can go back here after SSO)
localStorage.setItem('after-sso-login-url', window.location.href);
event.preventDefault();
var redirectUrl = this.props.ssoRedirectUrl
? "" + this.props.ssoRedirectUrl + exports.PROVIDERS.GOOGLE
: utils_1.SynapseClient.getRootURL() + "?provider=" + exports.PROVIDERS.GOOGLE;
utils_1.SynapseClient.oAuthUrlRequest(exports.PROVIDERS.GOOGLE, redirectUrl)
.then(function (data) {
var authUrl = data.authorizationUrl;
window.location = authUrl; // ping the url
})
.catch(function (err) {
console.log('Error on oAuth url ', err);
});
};
Login.prototype.render = function () {
return (React.createElement("div", { id: "loginPage", className: "container LoginComponent SRC-syn-border-spacing bootstrap-4-backport" },
React.createElement("form", null,
React.createElement(ButtonWithIcon_1.default, { variant: "white", onClick: this.onGoogleSignIn, className: "SRC-google-button", icon: React.createElement(GoogleIcon24_1.GoogleIcon24, null) }, "Sign in with Google")),
React.createElement("div", { className: "SRC-center-text SRC-deemphasized-text SRC-marginBottomTen bg-strike" }, "or"),
React.createElement(react_bootstrap_1.Form, { onSubmit: this.handleLogin },
React.createElement("label", { htmlFor: 'exampleEmail' }, "Username or Email Address"),
React.createElement(react_bootstrap_1.Form.Control, { required: true, autoComplete: "username", placeholder: "Username or Email Address", className: "LoginComponent__Input", id: "exampleEmail", name: "username", type: "text", value: this.state.username, onChange: this.handleChange }),
React.createElement("label", { htmlFor: 'examplePassword' }, "Password"),
React.createElement(react_bootstrap_1.Form.Control, { required: true, autoComplete: "password", placeholder: "Password", className: "LoginComponent__Input", id: "examplePassword", name: "password", type: "password", value: this.state.password, onChange: this.handleChange }),
this.getLoginFailureView(),
React.createElement("a", { href: (0, getEndpoint_1.getEndpoint)(getEndpoint_1.BackendDestinationEnum.PORTAL_ENDPOINT) + "#!PasswordReset:0" }, "Forgot password?"),
React.createElement(react_bootstrap_1.Button, { variant: "primary-500", onSubmit: this.handleLogin, type: "submit", className: "SRC-login-button SRC-marginBottomTen" }, "Log in")),
React.createElement("div", { className: 'SRC-center-text' },
React.createElement("a", { href: (0, getEndpoint_1.getEndpoint)(getEndpoint_1.BackendDestinationEnum.PORTAL_ENDPOINT) + "#!RegisterAccount:0" }, "Don't have an account? Register now"))));
};
return Login;
}(React.Component));
exports.default = Login;
//# sourceMappingURL=Login.js.map