synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
107 lines • 7.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CreateAccessTokenModal = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var utils_1 = require("../../utils");
var SynapseContext_1 = require("../../utils/SynapseContext");
var ScopeDescriptions_1 = require("../../utils/synapseTypes/AccessToken/ScopeDescriptions");
var CopyToClipboardInput_1 = require("../CopyToClipboardInput");
var ErrorBanner_1 = require("../ErrorBanner");
var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("../LoadingScreen"));
var Checkbox_1 = require("../widgets/Checkbox");
var INVALID_INPUT_MSG = 'You must provide a token name and at least one permission.';
var CreateAccessTokenModal = function (_a) {
var onClose = _a.onClose, onCreate = _a.onCreate;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _b = React.useState(''), tokenName = _b[0], setTokenName = _b[1];
var _c = React.useState(true), viewAccess = _c[0], setViewAccess = _c[1];
var _d = React.useState(false), downloadAccess = _d[0], setDownloadAccess = _d[1];
var _e = React.useState(false), modifyAccess = _e[0], setModifyAccess = _e[1];
var _f = React.useState(false), isLoading = _f[0], setIsLoading = _f[1];
var _g = React.useState(false), showCreatedToken = _g[0], setShowCreatedToken = _g[1];
var _h = React.useState(''), createdToken = _h[0], setCreatedToken = _h[1];
var _j = React.useState(''), errorMessage = _j[0], setErrorMessage = _j[1];
var _k = React.useState(false), showErrorMessage = _k[0], setShowErrorMessage = _k[1];
var handleTokenNameChange = function (event) {
setTokenName(event.target.value);
};
var validateInput = function (tokenName, access) {
return !!tokenName && access.some(function (x) { return x; });
};
var onSubmit = function (clickEvent) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var request, response, err_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
clickEvent.preventDefault();
if (!validateInput(tokenName, [viewAccess, downloadAccess, modifyAccess])) return [3 /*break*/, 5];
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
request = {
scope: [],
name: tokenName,
};
if (viewAccess)
request.scope.push('view');
if (downloadAccess)
request.scope.push('download');
if (modifyAccess)
request.scope.push('modify');
setIsLoading(true);
return [4 /*yield*/, utils_1.SynapseClient.createPersonalAccessToken(request, accessToken)];
case 2:
response = _a.sent();
setIsLoading(false);
setCreatedToken(response.token);
setShowCreatedToken(true);
onCreate();
return [3 /*break*/, 4];
case 3:
err_1 = _a.sent();
setIsLoading(false);
setErrorMessage(err_1.reason);
setShowErrorMessage(true);
return [3 /*break*/, 4];
case 4: return [3 /*break*/, 6];
case 5:
setErrorMessage(INVALID_INPUT_MSG);
setShowErrorMessage(true);
_a.label = 6;
case 6: return [2 /*return*/];
}
});
}); };
return (React.createElement(react_bootstrap_1.Modal, { className: 'AccessTokenModal', animation: false, show: true, onHide: onClose },
React.createElement(react_bootstrap_1.Form, null,
React.createElement(react_bootstrap_1.Modal.Header, { closeButton: true },
React.createElement(react_bootstrap_1.Modal.Title, null, "Create New Personal Access Token")),
React.createElement(react_bootstrap_1.ModalBody, null, isLoading ? (LoadingScreen_1.default) : showCreatedToken ? (React.createElement(React.Fragment, null,
React.createElement("span", { className: "SRC-boldText" }, "This token will not be able to be retrieved again."),
' ',
React.createElement("span", null, "If needed, generate a new personal access token, and delete this one."),
React.createElement("div", { className: "AccessTokenModal__CopyToClipboardContainer" },
React.createElement(CopyToClipboardInput_1.CopyToClipboardInput, { value: createdToken, inputWidth: '350px' })),
React.createElement("p", null, "This token grants access to your account functions and should be treated like a password."))) : (React.createElement("div", { className: "SRC-marginFive" },
React.createElement("div", { className: "SRC-marginBottomTen" },
React.createElement(react_bootstrap_1.FormLabel, { className: "SRC-boldText" }, "Token Name"),
React.createElement(react_bootstrap_1.FormControl, { autoFocus: true, className: "AccessTokenModal__TokenNameInput", value: tokenName, onChange: handleTokenNameChange, type: "text", placeholder: "e.g. Synapse command line access on my laptop" })),
React.createElement("div", { className: "SRC-marginBottomTop" },
React.createElement(react_bootstrap_1.FormLabel, { className: "SRC-boldText" }, "Token Permissions"),
React.createElement(Checkbox_1.Checkbox, { label: ScopeDescriptions_1.scopeDescriptions.view.displayName, checked: viewAccess, onChange: function () { return setViewAccess(!viewAccess); } },
React.createElement("div", { className: "AccessTokenModal__ScopeDescription" },
ScopeDescriptions_1.scopeDescriptions.view.description,
". Required to use Synapse programmatic clients.")),
React.createElement(Checkbox_1.Checkbox, { label: ScopeDescriptions_1.scopeDescriptions.download.displayName, checked: downloadAccess, onChange: function () { return setDownloadAccess(!downloadAccess); } },
React.createElement("div", { className: "AccessTokenModal__ScopeDescription" }, ScopeDescriptions_1.scopeDescriptions.download.description)),
React.createElement(Checkbox_1.Checkbox, { label: ScopeDescriptions_1.scopeDescriptions.modify.displayName, checked: modifyAccess, onChange: function () { return setModifyAccess(!modifyAccess); } },
React.createElement("div", { className: "AccessTokenModal__ScopeDescription" }, ScopeDescriptions_1.scopeDescriptions.modify.description))),
React.createElement("div", { className: "SRC-center-text" }, showErrorMessage && (React.createElement(ErrorBanner_1.ErrorBanner, { error: errorMessage })))))),
React.createElement(react_bootstrap_1.Modal.Footer, null, showCreatedToken ? (React.createElement(react_bootstrap_1.Button, { variant: "default", onClick: onClose }, "Close")) : (React.createElement(React.Fragment, null,
React.createElement(react_bootstrap_1.Button, { variant: "default", onClick: onClose }, "Cancel"),
React.createElement(react_bootstrap_1.Button, { type: "submit", variant: "primary", onClick: onSubmit }, "Create Token")))))));
};
exports.CreateAccessTokenModal = CreateAccessTokenModal;
//# sourceMappingURL=CreateAccessTokenModal.js.map