synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
108 lines • 8.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var TermsAndConditionsItem_1 = (0, tslib_1.__importDefault)(require("./TermsAndConditionsItem"));
var chat_bubbles_svg_1 = require("../assets/icons/terms/chat-bubbles.svg");
var lock_svg_1 = require("../assets/icons/terms/lock.svg");
var scale_svg_1 = require("../assets/icons/terms/scale.svg");
var shield_svg_1 = require("../assets/icons/terms/shield.svg");
var people_svg_1 = require("../assets/icons/terms/people.svg");
var pen_svg_1 = require("../assets/icons/terms/pen.svg");
var speaker_svg_1 = require("../assets/icons/terms/speaker.svg");
var flag_svg_1 = require("../assets/icons/terms/flag.svg");
var react_bootstrap_1 = require("react-bootstrap");
var dataUseLink = "https://s3.amazonaws.com/static.synapse.org/governance/SynapseCommonsDataUseProcedure.pdf?v=4";
var termsLink = "https://s3.amazonaws.com/static.synapse.org/governance/SageBionetworksSynapseTermsandConditionsofUse.pdf?v=5";
var tcList = [
{
icon: chat_bubbles_svg_1.ReactComponent,
label: 'I will adhere to the Synapse Community Standards of inclusion and respect.',
description: "A participant in the Synapse Community: <ul>\n <li>Welcomes others</li>\n <li>Uses inclusive language</li>\n <li>Shares experiences and knowledge</li>\n <li>Respects other viewpoints and ideas</li>\n <li>Shows empathy and kindness when interacting with others</li>\n </ul>\nPlease refer to our full <a target=\"_blank\" href=\"https://help.synapse.org/docs/Governance-Overview.2009597114.html#GovernanceOverview-SynapseCodeofConduct\">Synapse Code of Conduct</a>.",
},
{
icon: lock_svg_1.ReactComponent,
label: 'I will adhere to all conditions and use limitations, including privacy laws and regulations.',
description: "For more information about how Sage Bionetworks regulates data access and privacy, please refer to the \n <a target=\"_blank\" href=" + dataUseLink + ">Synapse Commons Data Use Procedure</a>."
},
{
icon: scale_svg_1.ReactComponent,
label: 'I will act ethically and responsibly.',
description: "You agree to the following Synapse Operating Ethics Principles, outlined in our \n <a target=\"_blank\" href=" + termsLink + ">Terms and Conditions of Use</a>.\n <br><br>Consequences of misconduct can include loss of both data use privileges and future use of Synapse."
},
{
icon: shield_svg_1.ReactComponent,
label: 'I will use appropriate physical, technical and administrative measures to keep data secure and protect participants\' privacy.',
description: "In your use of Synapse, you agree to:<ul>\n <li>Keep your login information secure and not share with others.</li>\n <li>Keep data safe from breach or misuse through appropriate security measures.</li>\n <li>Not attempt to re-identify or contact participants.</li>\n <li>Refrain from unauthorized data redistribution. Please refer to the \n <a target=\"_blank\" href=" + dataUseLink + ">Synapse Commons Data Use Procedure</a>.</li>\n </ul>\n For more information, please refer to the full <a target=\"_blank\" href=" + termsLink + ">Synapse Terms and Conditions of Use</a>."
},
{
icon: people_svg_1.ReactComponent,
label: 'I will support open access best practices for public facing data.',
description: "The Synapse open access platform promotes data accessibility and collaboration. We encourage you to \n contribute your research findings to open access journals when applicable.<br><br>\n You agree to support open access best practices when possible (e.g., sharing code, metadata, annotating files for discovery)."
},
{
icon: pen_svg_1.ReactComponent,
label: 'I will credit research participants and all data sources.',
description: "You agree to acknowledge data participants and to cite contributors and data sources using the language provided with the dataset.<br><br>\n It is our policy to terminate the access privileges of those who infringe the intellectual property rights of others. For more information, please refer to our full \n <a target=\"_blank\" href=" + termsLink + ">Terms and Conditions of Use</a>."
},
{
icon: speaker_svg_1.ReactComponent,
label: 'I will not use data for marketing and/or advertising.',
description: "Data may not be used for marketing or advertising purposes. You agree not to upload or otherwise transmit \n any unsolicited or unauthorized advertising, promotional materials, junk mail, spam, or any other form of solicitation (commercial or otherwise). <br><br>\n Please review the <a target=\"_blank\" href=\"https://s3.amazonaws.com/static.synapse.org/governance/SynapsePrivacyPolicy.pdf?v=5\">Synapse Privacy Policy</a> for Sage's commitment to privacy protections."
},
{
icon: flag_svg_1.ReactComponent,
label: "I will report any suspected data breach or misuse to privacyofficer@sagebase.org within 2 business days of initial incident knowledge.",
description: "Data misuse includes violating dataset access requirements, unauthorized use or \n redistribution, lack of data accreditation, and unethical data handling.<br><br>\n For more information about what classifies as a violation of our data governance policies, please refer to our \n <a target=\"_blank\" href=" + dataUseLink + ">Data Use Procedure</a> and <a target=\"_blank\" href=" + termsLink + ">Terms and Conditions of Use</a>."
},
];
var TermsAndConditions = function (_a) {
var onFormChange = _a.onFormChange;
var checkboxCount = tcList.length;
var tcAgreement = "https://s3.amazonaws.com/static.synapse.org/governance/SageBionetworksSynapseTermsandConditionsofUse.pdf";
var getInitialCheckboxState = function () { return Array.from(Array(checkboxCount).fill(false)); };
var mounted = true;
// State variables
var _b = (0, react_1.useState)(getInitialCheckboxState()), checkboxChecked = _b[0], setCheckboxChecked = _b[1];
// disabled all checkbox except the first one
var _c = (0, react_1.useState)(getInitialCheckboxState().fill(true, 0, 1)), checkboxEnabled = _c[0], setCheckboxEnabled = _c[1];
(0, react_1.useEffect)(function () {
if (mounted) {
checkFormCompleted();
}
return function () {
mounted = false;
};
}, [checkboxEnabled, checkboxChecked]);
// Placeholder function to check if all checkboxes are checked and agreement is signed
var checkFormCompleted = function () {
var allCheckboxChecked = !checkboxChecked.includes(false);
onFormChange(allCheckboxChecked);
};
var updateCheckboxState = function (id) {
var newState = !checkboxChecked[id];
if (newState) { // if the checkbox is checked (i.e. newState is true)
setCheckboxChecked(getInitialCheckboxState().fill(true, 0, id + 1));
if (id + 2 <= tcList.length) {
setCheckboxEnabled(getInitialCheckboxState().fill(true, 0, id + 2));
}
}
else {
setCheckboxChecked(getInitialCheckboxState().fill(true, 0, id));
setCheckboxEnabled(getInitialCheckboxState().fill(true, 0, id + 1));
}
};
return (react_1.default.createElement("section", { className: "terms-conditions" },
react_1.default.createElement("h3", { className: "page-header" }, "Synapse Pledge"),
react_1.default.createElement("form", null,
react_1.default.createElement("label", null, "I affirm my commitment to all Synapse Governance policies for responsible research and data handling (linked below), including:"),
react_1.default.createElement("ul", { className: "term-list" }, tcList.length &&
tcList.map(function (item, i) {
return (react_1.default.createElement("li", { key: "tc-item-" + i, className: checkboxEnabled[i] === true ? "terms-enabled" : "" },
react_1.default.createElement(TermsAndConditionsItem_1.default, { item: item, id: i, checked: checkboxChecked[i], enabled: checkboxEnabled[i], onChange: updateCheckboxState })));
})),
react_1.default.createElement("div", { className: "view-terms" },
react_1.default.createElement(react_bootstrap_1.Button, { href: tcAgreement, target: "_blank" }, "View Complete Terms and Conditions for Use")))));
};
exports.default = TermsAndConditions;
//# sourceMappingURL=TermsAndConditions.js.map