From 723a52a5a485d1e775ee7f73b392b32fc041a58b Mon Sep 17 00:00:00 2001 From: Justin Gasper Date: Fri, 19 May 2023 09:36:56 +1000 Subject: [PATCH 1/3] https://topcoder.atlassian.net/browse/PROD-4262 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a3197393d..87d8be9a6 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,7 @@ "supertest": "^3.1.0", "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3.1", "tc-ui": "^1.0.12", - "topcoder-react-lib": "1.2.11", + "topcoder-react-lib": "1.2.12", "topcoder-react-ui-kit": "2.0.1", "topcoder-react-utils": "0.7.8", "turndown": "^4.0.2", From 35944c0561447a89894579b52ded0e9fcb0bb5ec Mon Sep 17 00:00:00 2001 From: Justin Gasper Date: Wed, 24 May 2023 16:44:49 +1000 Subject: [PATCH 2/3] Show security reminder when registering --- .../components/SecurityReminder/index.jsx | 78 +++++++++++++++++++ .../components/SecurityReminder/styles.scss | 77 ++++++++++++++++++ .../containers/challenge-detail/index.jsx | 26 ++++++- 3 files changed, 177 insertions(+), 4 deletions(-) create mode 100644 src/shared/components/SecurityReminder/index.jsx create mode 100644 src/shared/components/SecurityReminder/styles.scss diff --git a/src/shared/components/SecurityReminder/index.jsx b/src/shared/components/SecurityReminder/index.jsx new file mode 100644 index 000000000..8c772da75 --- /dev/null +++ b/src/shared/components/SecurityReminder/index.jsx @@ -0,0 +1,78 @@ +/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ +/* eslint jsx-a11y/no-static-element-interactions:0 */ +/* global window */ + +import React, { useState } from 'react'; +import PT from 'prop-types'; +import { Modal, PrimaryButton } from 'topcoder-react-ui-kit'; +import FocusTrap from 'focus-trap-react'; +import Checkbox from 'components/GUIKit/Checkbox'; +import IconClose from 'assets/images/tc-edu/icon-close-big.svg'; + +import style from './styles.scss'; + + +function SecurityReminder({ + onOk, + onCancel, +}) { + const [isAgree, setIsAgree] = useState(false); + return ( +
+ + +
+
+ IMPORTANT REMINDER +
+
+ In accordance with the Terms & Conditions and Code + of Conduct you agree: +
    +
  • + To keep private any downloaded data (including code) +
    • +
      +
    • Except sharing or submission as directed or authorized by Topcoder
      • +
    +
  • To delete such data after completion of the challenge or project
    • +
+ +
+ setIsAgree(checked)} + checked={isAgree} + /> + I agree +
+ +
+ + Register + +
+
+ + + +
+ + +
+ ); +} + +SecurityReminder.propTypes = { + onOk: PT.func.isRequired, + onCancel: PT.func.isRequired, +}; +export default SecurityReminder; diff --git a/src/shared/components/SecurityReminder/styles.scss b/src/shared/components/SecurityReminder/styles.scss new file mode 100644 index 000000000..ffe62a220 --- /dev/null +++ b/src/shared/components/SecurityReminder/styles.scss @@ -0,0 +1,77 @@ +@import "~styles/mixins"; + +.modal-container { + @include roboto-regular; + + color: $tc-black; + display: flex; + flex-direction: column; + padding: 40px 40px 0; + width: 800px; + + @include xs-to-sm { + padding: 3 * $base-unit; + padding-bottom: 0; + } +} + +.modal-content { + display: flex; + flex: 1; + flex-direction: column; + max-height: 100%; + position: relative; + + &:focus { + outline: none; + } + + ul { + list-style: revert; + margin-left: 15px; + } +} + +.agreementList { + margin-top: 20px; +} + +.title { + font-size: 28px; + margin-bottom: 1.5 * $base-unit; + text-align: center; + color: $tc-gray-80; +} + +.desc { + margin-top: 24px; + font-size: 15px; + line-height: 25px; + color: $tc-gray-80; + + @include sm { + margin-top: 20px; + } +} + +.buttons { + padding: (1.5 * $base-unit) 0 (2 * $base-unit); + text-align: center; +} + +.checkboxContainer { + display: flex; + align-items: center; + margin-top: 20px; + + span { + margin-left: 15px; + } +} + +.btn-close { + position: absolute; + top: -15px; + right: -15px; + padding: 5px; +} diff --git a/src/shared/containers/challenge-detail/index.jsx b/src/shared/containers/challenge-detail/index.jsx index ed6e3bcc8..f4bf035b1 100644 --- a/src/shared/containers/challenge-detail/index.jsx +++ b/src/shared/containers/challenge-detail/index.jsx @@ -27,6 +27,7 @@ import LoadingIndicator from 'components/LoadingIndicator'; // eslint-disable-next-line max-len // import RecommendedActiveChallenges from 'components/challenge-detail/RecommendedActiveChallenges'; import Terms from 'containers/Terms'; +import SecurityReminder from 'components/SecurityReminder'; import termsActions from 'actions/terms'; import ChallengeCheckpoints from 'components/challenge-detail/Checkpoints'; import React from 'react'; @@ -170,6 +171,7 @@ class ChallengeDetailPageContainer extends React.Component { }, notFoundCountryFlagUrl: {}, viewAsTable: false, + showSecurityReminder: false, }; this.instanceId = shortId(); @@ -323,17 +325,18 @@ class ChallengeDetailPageContainer extends React.Component { auth, challengeId, communityId, - openTermsModal, registerForChallenge, terms, } = this.props; if (!auth.tokenV3) { const utmSource = communityId || 'community-app-main'; window.location.href = `${config.URL.AUTH}/member?retUrl=${encodeURIComponent(window.location.href)}&utm_source=${utmSource}®Source=challenges`; - } else if (_.every(terms, 'agreed')) { - registerForChallenge(auth, challengeId); + } else if (terms && terms.length > 0) { + this.setState({ + showSecurityReminder: true, + }); } else { - openTermsModal(); + registerForChallenge(auth, challengeId); } } @@ -382,6 +385,7 @@ class ChallengeDetailPageContainer extends React.Component { reviewTypes, openForRegistrationChallenges, statisticsData, + openTermsModal, } = this.props; // const displayRecommendedChallenges = getDisplayRecommendedChallenges( @@ -398,6 +402,7 @@ class ChallengeDetailPageContainer extends React.Component { notFoundCountryFlagUrl, mySubmissionsSort, viewAsTable, + showSecurityReminder, } = this.state; const { @@ -680,6 +685,19 @@ class ChallengeDetailPageContainer extends React.Component { }} /> )} + {showSecurityReminder && ( + this.setState({ showSecurityReminder: false })} + onOk={() => { + this.setState({ showSecurityReminder: false }); + if (_.every(terms, 'agreed')) { + registerForChallenge(auth, challengeId); + } else { + openTermsModal(); + } + }} + /> + )} {/* { !isEmpty && displayRecommendedChallenges.length ? ( Date: Thu, 25 May 2023 16:50:05 +1000 Subject: [PATCH 3/3] Revert "Show security reminder when registering" This reverts commit 35944c0561447a89894579b52ded0e9fcb0bb5ec. --- .../components/SecurityReminder/index.jsx | 78 ------------------- .../components/SecurityReminder/styles.scss | 77 ------------------ .../containers/challenge-detail/index.jsx | 26 +------ 3 files changed, 4 insertions(+), 177 deletions(-) delete mode 100644 src/shared/components/SecurityReminder/index.jsx delete mode 100644 src/shared/components/SecurityReminder/styles.scss diff --git a/src/shared/components/SecurityReminder/index.jsx b/src/shared/components/SecurityReminder/index.jsx deleted file mode 100644 index 8c772da75..000000000 --- a/src/shared/components/SecurityReminder/index.jsx +++ /dev/null @@ -1,78 +0,0 @@ -/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ -/* eslint jsx-a11y/no-static-element-interactions:0 */ -/* global window */ - -import React, { useState } from 'react'; -import PT from 'prop-types'; -import { Modal, PrimaryButton } from 'topcoder-react-ui-kit'; -import FocusTrap from 'focus-trap-react'; -import Checkbox from 'components/GUIKit/Checkbox'; -import IconClose from 'assets/images/tc-edu/icon-close-big.svg'; - -import style from './styles.scss'; - - -function SecurityReminder({ - onOk, - onCancel, -}) { - const [isAgree, setIsAgree] = useState(false); - return ( -
- - -
-
- IMPORTANT REMINDER -
-
- In accordance with the Terms & Conditions and Code - of Conduct you agree: -
    -
  • - To keep private any downloaded data (including code) -
    • -
      -
    • Except sharing or submission as directed or authorized by Topcoder
      • -
    -
  • To delete such data after completion of the challenge or project
    • -
- -
- setIsAgree(checked)} - checked={isAgree} - /> - I agree -
- -
- - Register - -
-
- - - -
- - -
- ); -} - -SecurityReminder.propTypes = { - onOk: PT.func.isRequired, - onCancel: PT.func.isRequired, -}; -export default SecurityReminder; diff --git a/src/shared/components/SecurityReminder/styles.scss b/src/shared/components/SecurityReminder/styles.scss deleted file mode 100644 index ffe62a220..000000000 --- a/src/shared/components/SecurityReminder/styles.scss +++ /dev/null @@ -1,77 +0,0 @@ -@import "~styles/mixins"; - -.modal-container { - @include roboto-regular; - - color: $tc-black; - display: flex; - flex-direction: column; - padding: 40px 40px 0; - width: 800px; - - @include xs-to-sm { - padding: 3 * $base-unit; - padding-bottom: 0; - } -} - -.modal-content { - display: flex; - flex: 1; - flex-direction: column; - max-height: 100%; - position: relative; - - &:focus { - outline: none; - } - - ul { - list-style: revert; - margin-left: 15px; - } -} - -.agreementList { - margin-top: 20px; -} - -.title { - font-size: 28px; - margin-bottom: 1.5 * $base-unit; - text-align: center; - color: $tc-gray-80; -} - -.desc { - margin-top: 24px; - font-size: 15px; - line-height: 25px; - color: $tc-gray-80; - - @include sm { - margin-top: 20px; - } -} - -.buttons { - padding: (1.5 * $base-unit) 0 (2 * $base-unit); - text-align: center; -} - -.checkboxContainer { - display: flex; - align-items: center; - margin-top: 20px; - - span { - margin-left: 15px; - } -} - -.btn-close { - position: absolute; - top: -15px; - right: -15px; - padding: 5px; -} diff --git a/src/shared/containers/challenge-detail/index.jsx b/src/shared/containers/challenge-detail/index.jsx index f4bf035b1..ed6e3bcc8 100644 --- a/src/shared/containers/challenge-detail/index.jsx +++ b/src/shared/containers/challenge-detail/index.jsx @@ -27,7 +27,6 @@ import LoadingIndicator from 'components/LoadingIndicator'; // eslint-disable-next-line max-len // import RecommendedActiveChallenges from 'components/challenge-detail/RecommendedActiveChallenges'; import Terms from 'containers/Terms'; -import SecurityReminder from 'components/SecurityReminder'; import termsActions from 'actions/terms'; import ChallengeCheckpoints from 'components/challenge-detail/Checkpoints'; import React from 'react'; @@ -171,7 +170,6 @@ class ChallengeDetailPageContainer extends React.Component { }, notFoundCountryFlagUrl: {}, viewAsTable: false, - showSecurityReminder: false, }; this.instanceId = shortId(); @@ -325,18 +323,17 @@ class ChallengeDetailPageContainer extends React.Component { auth, challengeId, communityId, + openTermsModal, registerForChallenge, terms, } = this.props; if (!auth.tokenV3) { const utmSource = communityId || 'community-app-main'; window.location.href = `${config.URL.AUTH}/member?retUrl=${encodeURIComponent(window.location.href)}&utm_source=${utmSource}®Source=challenges`; - } else if (terms && terms.length > 0) { - this.setState({ - showSecurityReminder: true, - }); - } else { + } else if (_.every(terms, 'agreed')) { registerForChallenge(auth, challengeId); + } else { + openTermsModal(); } } @@ -385,7 +382,6 @@ class ChallengeDetailPageContainer extends React.Component { reviewTypes, openForRegistrationChallenges, statisticsData, - openTermsModal, } = this.props; // const displayRecommendedChallenges = getDisplayRecommendedChallenges( @@ -402,7 +398,6 @@ class ChallengeDetailPageContainer extends React.Component { notFoundCountryFlagUrl, mySubmissionsSort, viewAsTable, - showSecurityReminder, } = this.state; const { @@ -685,19 +680,6 @@ class ChallengeDetailPageContainer extends React.Component { }} /> )} - {showSecurityReminder && ( - this.setState({ showSecurityReminder: false })} - onOk={() => { - this.setState({ showSecurityReminder: false }); - if (_.every(terms, 'agreed')) { - registerForChallenge(auth, challengeId); - } else { - openTermsModal(); - } - }} - /> - )} {/* { !isEmpty && displayRecommendedChallenges.length ? (