diff --git a/.env b/.env index 4295705..2c93ffd 100644 --- a/.env +++ b/.env @@ -24,3 +24,4 @@ LOGO_WHITE_URL='' FAVICON_URL='' ENABLE_LEARNER_RECORD_MFE='' LEARNER_RECORD_MFE_BASE_URL='' +COLLECT_YEAR_OF_BIRTH=true diff --git a/.env.development b/.env.development index ace25a5..c7e9346 100644 --- a/.env.development +++ b/.env.development @@ -25,3 +25,4 @@ LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico ENABLE_LEARNER_RECORD_MFE='' LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990' +COLLECT_YEAR_OF_BIRTH=true diff --git a/.env.test b/.env.test index 434fa51..c737b02 100644 --- a/.env.test +++ b/.env.test @@ -19,3 +19,4 @@ LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico ENABLE_LEARNER_RECORD_MFE='' LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990' +COLLECT_YEAR_OF_BIRTH=true diff --git a/package-lock.json b/package-lock.json index a663e05..fe226ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1978,6 +1978,7 @@ "axios": "0.21.4", "axios-cache-adapter": "2.7.3", "form-urlencoded": "4.1.4", + "glob": "7.1.7", "history": "4.10.1", "i18n-iso-countries": "4.3.1", "jwt-decode": "3.1.2", @@ -1992,6 +1993,19 @@ "universal-cookie": "4.0.4" }, "dependencies": { + "glob": { + "version": "7.1.7", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", + "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, "universal-cookie": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz", @@ -4931,8 +4945,7 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "base": { "version": "0.11.2", @@ -5486,7 +5499,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6380,8 +6392,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "config-chain": { "version": "1.1.13", @@ -9396,8 +9407,7 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, "fsevents": { "version": "1.2.13", @@ -10872,7 +10882,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -10881,8 +10890,7 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "ini": { "version": "1.3.8", @@ -14178,7 +14186,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -15090,7 +15097,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "dev": true, "requires": { "wrappy": "1" } @@ -15399,8 +15405,7 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-is-inside": { "version": "1.0.2", @@ -21043,8 +21048,7 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "write": { "version": "1.0.3", diff --git a/src/index.jsx b/src/index.jsx index f7b672f..3a69778 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -60,6 +60,7 @@ initialize({ mergeConfig({ ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false), LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL, + COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH, }, 'App loadConfig override handler'); }, }, diff --git a/src/profile/ProfilePage.jsx b/src/profile/ProfilePage.jsx index 3b5da6e..6c0f29c 100644 --- a/src/profile/ProfilePage.jsx +++ b/src/profile/ProfilePage.jsx @@ -30,6 +30,7 @@ import Bio from './forms/Bio'; import Certificates from './forms/Certificates'; import AgeMessage from './AgeMessage'; import DateJoined from './DateJoined'; +import UsernameDescription from './UsernameDescription'; import PageLoading from './PageLoading'; import Banner from './Banner'; @@ -80,6 +81,14 @@ class ProfilePage extends React.Component { return recordsUrl; } + isYOBDisabled() { + const { yearOfBirth } = this.props; + const currentYear = new Date().getFullYear(); + const isAgeOrNotCompliant = !yearOfBirth || ((currentYear - yearOfBirth) < 13); + + return isAgeOrNotCompliant && getConfig().COLLECT_YEAR_OF_BIRTH !== 'true'; + } + isAuthenticatedUserProfile() { return this.props.match.params.username === this.context.authenticatedUser.username; } @@ -130,6 +139,7 @@ class ProfilePage extends React.Component {

{this.props.match.params.username}

+ {this.isYOBDisabled() && }
@@ -261,7 +271,7 @@ class ProfilePage extends React.Component { />
- {this.renderAgeMessage()} + {!this.isYOBDisabled() && this.renderAgeMessage()} + +
+ +
+
+ ); +} + +export default UsernameDescription; diff --git a/src/profile/__snapshots__/ProfilePage.test.jsx.snap b/src/profile/__snapshots__/ProfilePage.test.jsx.snap index 4190288..38747e1 100644 --- a/src/profile/__snapshots__/ProfilePage.test.jsx.snap +++ b/src/profile/__snapshots__/ProfilePage.test.jsx.snap @@ -104,6 +104,37 @@ exports[` Renders correctly in various states viewing other profi

+
+ + + + + +
+ + Your profile information is only visible to you. Only your username is visible to others on edX. + +
+
@@ -141,6 +172,37 @@ exports[` Renders correctly in various states viewing other profi

+
+ + + + + +
+ + Your profile information is only visible to you. Only your username is visible to others on edX. + +
+
diff --git a/src/profile/data/selectors.js b/src/profile/data/selectors.js index 5aef673..f25393c 100644 --- a/src/profile/data/selectors.js +++ b/src/profile/data/selectors.js @@ -335,6 +335,7 @@ export const profilePageSelector = createSelector( profileImage, requiresParentalConsent: account.requiresParentalConsent, dateJoined: account.dateJoined, + yearOfBirth: account.yearOfBirth, // Bio form data bio: formValues.bio, diff --git a/src/profile/index.scss b/src/profile/index.scss index deecf8e..cb362b1 100644 --- a/src/profile/index.scss +++ b/src/profile/index.scss @@ -23,6 +23,28 @@ background-size: auto 85%; } +.username-description { + width: auto; + position: absolute; + left: 1.5rem; + top: 5.25rem; + color: $gray-500; + line-height: 0.9rem; + font-size: 0.8rem; + font-style: normal; + font-weight: 400; + margin-left: 0.9rem; +} + +.mb-2rem { + margin-bottom: 2rem; +} + +.icon-visibility-off { + height: 1rem; + color: $gray-500; +} + .profile-page { .edit-section-header { @extend .h6;