fix: show site name instead edX

build: update transifex pull translations command

.env

@@ -1,39 +1,27 @@
 NODE_ENV='production'
-ACCESS_TOKEN_COOKIE_NAME=null
-BASE_URL=null
-CREDENTIALS_BASE_URL=null
-CSRF_TOKEN_API_PATH=null
-ECOMMERCE_BASE_URL=null
-LANGUAGE_PREFERENCE_COOKIE_NAME=null
-LMS_BASE_URL=null
-LOGIN_URL=null
-LOGOUT_URL=null
-MARKETING_SITE_BASE_URL=null
-ORDER_HISTORY_URL=null
-REFRESH_ACCESS_TOKEN_ENDPOINT=null
-SEGMENT_KEY=null
+ACCESS_TOKEN_COOKIE_NAME=''
+BASE_URL=''
+CREDENTIALS_BASE_URL=''
+CSRF_TOKEN_API_PATH=''
+ECOMMERCE_BASE_URL=''
+LANGUAGE_PREFERENCE_COOKIE_NAME=''
+LMS_BASE_URL=''
+LOGIN_URL=''
+LOGOUT_URL=''
+MARKETING_SITE_BASE_URL=''
+ORDER_HISTORY_URL=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+SEGMENT_KEY=''
 SITE_NAME=''
-USER_INFO_COOKIE_NAME=null
-APPLE_APP_STORE_URL=null
-CONTACT_URL=null
-ENTERPRISE_LEARNER_PORTAL_HOSTNAME=null
-ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=null
-ENTERPRISE_MARKETING_URL=null
-ENTERPRISE_MARKETING_UTM_CAMPAIGN=null
-ENTERPRISE_MARKETING_UTM_SOURCE=null
-FACEBOOK_URL=null
-GOOGLE_PLAY_URL=null
-LINKED_IN_URL=null
-OPEN_SOURCE_URL=null
-PRIVACY_POLICY_URL=null
-REDDIT_URL=null
-SUPPORT_URL=null
-TERMS_OF_SERVICE_URL=null
-TWITTER_URL=null
-YOU_TUBE_URL=null
+USER_INFO_COOKIE_NAME=''
+CONTACT_URL=''
+ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
+SUPPORT_URL=''
+TERMS_OF_SERVICE_URL=''
 LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL=''
+COLLECT_YEAR_OF_BIRTH=true

.env.development

@@ -10,31 +10,19 @@ LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-ORDER_HISTORY_URL='localhost:1996/orders'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
-SEGMENT_KEY=null
+SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
-APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
 CONTACT_URL='http://localhost:18000/contact'
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='http://localhost:8080'
-ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
-ENTERPRISE_MARKETING_URL='http://example.com'
-ENTERPRISE_MARKETING_UTM_CAMPAIGN='my_campaign'
-ENTERPRISE_MARKETING_UTM_SOURCE='edX profile'
-FACEBOOK_URL='https://www.facebook.com'
-GOOGLE_PLAY_URL='https://play.google.com/store'
-LINKED_IN_URL='https://www.linkedin.com'
-OPEN_SOURCE_URL='http://localhost:18000/openedx'
-PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
-REDDIT_URL='https://www.reddit.com'
 SUPPORT_URL='http://localhost:18000/support'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
-TWITTER_URL='https://twitter.com'
-YOU_TUBE_URL='https://www.youtube.com'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 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

.env.test

@@ -8,7 +8,7 @@ LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-ORDER_HISTORY_URL='localhost:1996/orders'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME=localhost
@@ -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

.github/CODEOWNERS

@@ -1 +0,0 @@
-* @edx/community-engineering

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: ci
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        npm-test:
+        - i18n_extract
+        - is-es5
+        - lint
+        - test
+        node: [12, 14, 16]
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node }}
+    - run: npm install -g npm@8.x.x
+    - run: make requirements
+    - run: make test NPM_TESTS=build
+    - run: make test NPM_TESTS=${{ matrix.npm-test }}
+    - name: upload coverage
+      uses: codecov/codecov-action@v2
+      with:
+        fail_ci_if_error: false

.github/workflows/commitlint.yml

@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: edx/.github/.github/workflows/commitlint.yml@master

.gitignore

@@ -14,7 +14,6 @@ temp/babel-plugin-react-intl
 
 ### Emacs ###
 *~
-/.vscode
 /temp
-/npm-dist
+/.vscode
 /module.config.js

.releaserc

@@ -1,27 +0,0 @@
-{
-  "branch": "master",
-  "tagFormat": "v${version}",
-  "verifyConditions": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "npm-dist/*"
-      }
-    }
-  ],
-  "analyzeCommits": "@semantic-release/commit-analyzer",
-  "generateNotes": "@semantic-release/release-notes-generator",
-  "prepare": "@semantic-release/npm",
-  "publish": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "npm-dist/*"
-      }
-    }
-  ],
-  "success": [],
-  "fail": []
-}

.travis.yml

@@ -1,23 +0,0 @@
-language: node_js
-node_js: 12
-before_install:
-- npm install -g npm@6
-install:
-- npm ci
-script:
-- make validate-no-uncommitted-package-lock-changes
-- npm run i18n_extract
-- npm run lint
-- npm run test
-- npm run build
-- npm run npm-build
-- npm run is-es5
-after_success:
-- npx semantic-release
-- codecov
-env:
-  global:
-  # GH_TOKEN
-  - secure: qvCsyn5Ioj+b/gvX95yaQ+Vha+r60pGxuKFm6HzVbnWJyKAbR1NN8+RpIo0HUD9S5RPEFjLae82bLa2g/syS+D1DU9qF8NYderjy58bjibgrPdC1YOhi2SEY5u6TW6/T88+w9DyfZ6MF883lJi/6uzs24bHE13RguARlO79OeGvHk6SecoJSWe9yq2IHA0wAScKrvS64+AcUWyTDUvkrxHEvupVJs6aJ6EsdPALODLJ7JnXX7Rh+68nyqbezh+ZnumxBPkdCzUNdtO9C0o7JjV6/P1xg9rNre/huWGx4SYndPaPEmoOpWEfyCZw1ub83LHC1HBnE7eRJku/CmiaiaLGSfeU2sCRteBLlSyI5fEOQ4Su2xLu2k+Yuczj4BlIbjr+xC+bNg+WbOF8vj7TL4/YCxOG/8V4nLfDcHFsZDsPoYZyBe9Z5HsS77S5ZrutQ3i/qR+4zfs4X/QfPXfW3MqI7+oGo+PVNPgxI24i2Kwq5+ZUjnmkVnuGC5ZOZMN8aYojEvqdF+u5VALL/YCmXsXysL6BUsqv4kiZJpQEVBG0WPbh0FJH8qiB8OjLGogxkoSrL4Yd++o4fnSAvW1UgARIlJ0iHVf5r/wVei1KCQiFS6mh0Pwq1lM0Vo2SlTCF5UylnV80Hv7XY6Sp9dYi/EaVG1dv4DyJOHnPti1JAM/U=
-  # NPM_TOKEN
-  - secure: S6spzx4jJGWqucSwjaSdPEaNWlwzA75FisK+NoLFDY6uU7KIi2dayHiFlSW1C1vl5xQkkosHXJAInSwcnQMCUomCEuD1FFzydXA1/Dn8NmPc35coKR4CX9yJiArRbjZZjboCulrTPUVWHWoPfA7JTnqCDgOnXspgRKy7emzFLXkdn8vuUQcyXmmT/vDfQQjgq/T+DdBbMiradMvlTzxmKydAVeHAZ03A1Z5O6ePnR6IsFv4LgJ/RfGn501jHeTww6HsxfQX27tWLo5AyQ00YjMl9oXfs57n5u+em/ph3Xoc8Pz6wjkMLJ+eYo+xkYjoZ3d+/f+WXPLMBUNz0LpIBs7LcBHhAc2z4N+dce42CTXur/v8ra0BZEnZQsvOakHvox6KisDDlipPqc0yF7MgThbd31fc8QjdVxdh5w7tLH4PJ7QpBUtZwPskDLABKjnrxkxH+BysHADvVaNOBcZMwIA9yHY3GqzpyQ2upcS07h5a+SHx07viuA7hEn14XCtYrM1AHwS0n2sNdinb0qWOCcGOXzl39FU3N6xNueKoH/eIXuqJ7oiUkKBiSP9zApTApPL6nrng0InZhGjzZHOMNePPdin/uIrxk/fp/wqneGTQemCGRkfHdPT0yuIP22bUv/OmDtgNEG9t9hbIZGYgQmG4FTeTQQ7lC5RjmLrn+uWI=

.tx/config

@@ -1,8 +1,9 @@
 [main]
 host = https://www.transifex.com
 
-[edx-platform.frontend-app-profile]
+[o:open-edx:p:edx-platform:r:frontend-app-profile]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type = KEYVALUEJSON
+type        = KEYVALUEJSON
+

Makefile

@@ -1,3 +1,4 @@
+export TRANSIFEX_RESOURCE = frontend-app-profile
 transifex_resource = frontend-app-profile
 transifex_langs = "ar,fr,es_419,zh_CN"
 
@@ -10,8 +11,19 @@ tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transi
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
-requirements:
-	npm install
+NPM_TESTS=build i18n_extract lint test is-es5
+
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+requirements:  ## install ci requirements
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -34,24 +46,17 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
+	tx pull -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
-
-npm-build:
-	rm -rf ./npm-dist
-	./node_modules/.bin/fedx-scripts babel src/profile --out-dir npm-dist --source-maps --ignore **/*.test.jsx,**/*.test.js,**/setupTest.js --copy-files
-	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
-	@find npm-dist -name '*.test.js*' -delete
-	@rm -rf ./npm-dist/__mocks__

README.rst

@@ -1,4 +1,4 @@
-|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
+|Build Status| |Codecov| |license|
 
 frontend-app-profile
 ====================
@@ -53,11 +53,5 @@ edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/micro-fron
    :target: https://travis-ci.org/edx/frontend-app-profile
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-profile
    :target: https://codecov.io/gh/edx/frontend-app-profile
-.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-profile.svg
-   :target: https://www.npmjs.com/package/@edx/frontend-app-profile
-.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-app-profile.svg
-   :target: https://www.npmjs.com/package/@edx/frontend-app-profile
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-profile.svg
    :target: @edx/frontend-app-profile
-.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release

commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-angular'],
-};

openedx.yaml

@@ -1,7 +1,6 @@
 # This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
 
 nick: prof
 oeps: {}
-owner: edx/arch-team
 openedx-release: {ref: master}

package.json

@@ -4,14 +4,12 @@
   "description": "User profile micro-frontend for Open edX",
   "author": "edX",
   "license": "AGPL-3.0",
-  "main": "npm-dist/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edx/frontend-app-profile.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "npm-build": "make npm-build",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
@@ -19,15 +17,6 @@
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
-  "files": [
-    "/npm-dist"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint",
-      "commit-msg": "commitlint -e $GIT_PARAMS"
-    }
-  },
   "bugs": {
     "url": "https://github.com/edx/frontend-app-profile/issues"
   },
@@ -41,53 +30,46 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.1.6",
-    "@edx/frontend-component-header": "2.3.0",
-    "@edx/frontend-platform": "1.12.3",
-    "@edx/paragon": "16.6.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.25",
-    "@fortawesome/free-brands-svg-icons": "5.7.2",
-    "@fortawesome/free-regular-svg-icons": "5.7.2",
-    "@fortawesome/free-solid-svg-icons": "5.7.2",
-    "@fortawesome/react-fontawesome": "0.1.8",
+    "@edx/frontend-component-footer": "10.2.1",
+    "@edx/frontend-component-header": "2.4.5",
+    "@edx/frontend-platform": "1.15.1",
+    "@edx/paragon": "19.6.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.17",
     "classnames": "2.3.1",
-    "core-js": "3.16.1",
-    "email-prop-type": "1.1.7",
-    "font-awesome": "4.7.0",
-    "form-urlencoded": "3.0.2",
-    "history": "4.10.1",
+    "core-js": "3.20.3",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
-    "lodash.memoize": "4.1.2",
     "lodash.pick": "4.4.0",
     "lodash.snakecase": "4.1.1",
-    "newrelic": "5.13.1",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-redux": "7.2.4",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
-    "react-transition-group": "4.4.2",
-    "redux": "4.1.1",
+    "react-redux": "7.2.6",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
+    "redux": "4.1.2",
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.1",
     "regenerator-runtime": "0.13.9",
-    "reselect": "4.0.0",
+    "reselect": "4.1.5",
     "universal-cookie": "3.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "13.1.0",
-    "@commitlint/config-angular": "13.1.0",
-    "@edx/frontend-build": "7.1.0",
+    "@commitlint/cli": "13.2.1",
+    "@commitlint/config-angular": "13.2.0",
+    "@edx/reactifex": "1.0.3",
+    "@edx/frontend-build": "9.1.4",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "es-check": "5.2.4",
-    "glob": "7.1.7",
-    "husky": "7.0.1",
+    "glob": "7.2.0",
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"

public/index.html

@@ -4,9 +4,7 @@
       <title>Learner Profile | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-      <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
-      <link rel="shortcut icon" href="<%=webpackConfig.output.publicPath%>favicon.ico" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>

src/i18n/messages/ar.json

@@ -1,6 +1,6 @@
 {
   "profile.age.headline": "لا يمكن مشاركة ملفك الشخصي",
-  "profile.age.details": "لمشاركة ملفك الشخصي مع متعلمي edX الآخرين يجب التحقق من أن يكون عمرك أكثر من ١٣ سنة",
+  "profile.age.details": "لمشاركة ملفك الشخصي مع متعلمي {siteName} الآخرين يجب التحقق من أن يكون عمرك أكثر من ١٣ سنة",
   "profile.age.set.date": "اضبط تاريخ ميلاك",
   "profile.datejoined.member.since": "عضو منذُ {year}",
   "profile.bio.empty": "أضف نبذة قصيرة",
@@ -33,7 +33,7 @@
   "profile.formcontrols.button.saving": "جاري الحفظ",
   "profile.formcontrols.button.saved": "تم الحفظ",
   "profile.visibility.who.just.me": "أنا فقط",
-  "profile.visibility.who.everyone": "جميع أعضاء edX",
+  "profile.visibility.who.everyone": "جميع أعضاء {siteName}",
   "profile.name.full.name": "الاسم الكامل",
   "profile.name.details": "هذا هو الاسم الذي سيظهر في حسابك وفي شهاداتك",
   "profile.name.empty": "إضافة اسم",
@@ -47,5 +47,6 @@
   "profile.sociallinks.social.links": "روابط قنوات التواصل الاجتماعي",
   "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في نص الرابط. الرجاء التحقق من الرابط والمحاولة مجددا.",
   "profile.viewMyRecords": "عرض سجلّاتي",
-  "profile.loading": "جاري تحميل الملف الشخصي ..."
+  "profile.loading": "جاري تحميل الملف الشخصي ...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
 }

src/i18n/messages/es_419.json

@@ -1,6 +1,6 @@
 {
   "profile.age.headline": "Tu perfil no puede ser compartido.",
-  "profile.age.details": "Para compartir tu perfil con otros estudiantes de edX, debes confirmar que tienes más de 13 años.",
+  "profile.age.details": "Para compartir tu perfil con otros estudiantes de {siteName}, debes confirmar que tienes más de 13 años.",
   "profile.age.set.date": "Establece tu fecha de nacimiento",
   "profile.datejoined.member.since": "Miembro desde {year}",
   "profile.bio.empty": "Añade una breve biografía",
@@ -33,7 +33,7 @@
   "profile.formcontrols.button.saving": "Guardando",
   "profile.formcontrols.button.saved": "Guardado",
   "profile.visibility.who.just.me": "Solo yo",
-  "profile.visibility.who.everyone": "Todos en edX",
+  "profile.visibility.who.everyone": "Todos en {siteName}",
   "profile.name.full.name": "Nombre completo",
   "profile.name.details": "Este es el nombre que aparecerá en tu cuenta y en tus certificados.",
   "profile.name.empty": "Añade nombre",
@@ -47,5 +47,6 @@
   "profile.sociallinks.social.links": "Enlaces De Redes Sociales",
   "profile.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
   "profile.viewMyRecords": "Ver mis registros",
-  "profile.loading": "Cargando perfil..."
+  "profile.loading": "Cargando perfil...",
+  "profile.username.description": "La información de tu perfil es solo visible para ti. Únicamente tu nombre de usuario es visible para otros en {siteName}."
 }

src/i18n/messages/fr.json

@@ -1,51 +1,52 @@
 {
-  "profile.age.headline": "Your profile cannot be shared.",
-  "profile.age.details": "To share your profile with other edX learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
+  "profile.age.headline": "Votre profil ne peut pas être partagé.",
+  "profile.age.details": "Pour partager votre profil avec d'autres apprenants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
+  "profile.age.set.date": "Définissez votre date de naissance",
+  "profile.datejoined.member.since": "Membre depuis {year}",
+  "profile.bio.empty": "Ajouter une courte biographie",
+  "profile.bio.about.me": "À propos de moi",
+  "profile.certificate.organization.label": "De",
+  "profile.certificate.completion.date.label": "Terminé le {date}",
+  "profile.no.certificates": "Vous n'avez pas encore de certificats.",
+  "profile.certificates.my.certificates": "Mes certificats",
+  "profile.certificates.view.certificate": "Voir le certificat",
+  "profile.certificates.types.verified": "Certificat vérifié",
+  "profile.certificates.types.professional": "Certificat professionnel",
+  "profile.certificates.types.unknown": "Certificat",
+  "profile.country.label": "Localisation",
+  "profile.country.empty": "Ajouter localisation",
+  "profile.education.empty": "Ajouter une éducation",
   "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on edX",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading..."
+  "profile.education.levels.p": "Doctorat",
+  "profile.education.levels.m": "Master ou diplôme professionnel",
+  "profile.education.levels.b": "Diplôme de licence",
+  "profile.education.levels.a": "Grade de l'associé",
+  "profile.education.levels.hs": "Lycée / enseignement secondaire",
+  "profile.education.levels.jhs": "Collège / enseignement secondaire inférieur",
+  "profile.education.levels.el": "Enseignement primaire",
+  "profile.education.levels.none": "Sans diplôme",
+  "profile.education.levels.o": "Autre niveau d'étude",
+  "profile.editbutton.edit": "Modifier",
+  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
+  "profile.formcontrols.button.cancel": "Annuler",
+  "profile.formcontrols.button.save": "Enregistrer",
+  "profile.formcontrols.button.saving": "Enregistrement",
+  "profile.formcontrols.button.saved": "Enregistré",
+  "profile.visibility.who.just.me": "Juste moi",
+  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
+  "profile.name.full.name": "Nom complet",
+  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos certificats.",
+  "profile.name.empty": "Ajouter un nom",
+  "profile.preferredlanguage.empty": "Ajouter une langue",
+  "profile.preferredlanguage.label": "Langue principale parlée",
+  "profile.profileavatar.upload-button": "Envoyer la photo",
+  "profile.profileavatar.remove.button": "Supprimer",
+  "profile.image.alt.attribute": "Profil avatar",
+  "profile.profileavatar.change-button": "Modifier",
+  "profile.sociallinks.add": "Ajouter {network}",
+  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
+  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
+  "profile.viewMyRecords": "Voir mes succès",
+  "profile.loading": "Chargement du profil....",
+  "profile.username.description": "Les informations de ton profil ne sont visibles que par toi. Seul votre nom d'utilisateur est visible par les autres utilisateurs d'{siteName}."
 }

src/i18n/messages/zh_CN.json

@@ -1,6 +1,6 @@
 {
   "profile.age.headline": "Your profile cannot be shared.",
-  "profile.age.details": "To share your profile with other edX learners, you must confirm that you are over the age of 13.",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
   "profile.bio.empty": "Add a short bio",
@@ -33,7 +33,7 @@
   "profile.formcontrols.button.saving": "Saving",
   "profile.formcontrols.button.saved": "Saved",
   "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on edX",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.name.full.name": "Full Name",
   "profile.name.details": "This is the name that appears in your account and on your certificates.",
   "profile.name.empty": "Add name",
@@ -47,5 +47,6 @@
   "profile.sociallinks.social.links": "Social Links",
   "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
   "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading..."
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
 }

src/index.jsx

@@ -25,7 +25,6 @@ import { ProfilePage, NotFoundPage } from './profile';
 import configureStore from './data/configureStore';
 
 import './index.scss';
-import './assets/favicon.ico';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
@@ -61,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');
     },
   },

src/index.scss

@@ -1,6 +1,3 @@
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
 @import "~@edx/paragon/scss/core/core";

src/profile/AgeMessage.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { StatusAlert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 function AgeMessage({ accountSettingsUrl }) {
   return (
@@ -17,15 +18,18 @@ function AgeMessage({ accountSettingsUrl }) {
           />
           <FormattedMessage
             id="profile.age.details"
-            defaultMessage="To share your profile with other edX learners, you must confirm that you are over the age of 13."
-            description="error message"
+            defaultMessage="To share your profile with other {siteName} learners, you must confirm that you are over the age of 13."
+            description="Error message"
             tagName="p"
+            values={{
+              siteName: getConfig().SITE_NAME,
+            }}
           />
           <a href={accountSettingsUrl}>
             <FormattedMessage
               id="profile.age.set.date"
               defaultMessage="Set your date of birth"
-              description="label on a link to set birthday"
+              description="Label on a link to set birthday"
             />
           </a>
         </>

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 {
         <span data-hj-suppress>
           <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
           <DateJoined date={dateJoined} />
+          {this.isYOBDisabled() && <UsernameDescription />}
           <hr className="d-none d-md-block" />
         </span>
       </>
@@ -261,7 +271,7 @@ class ProfilePage extends React.Component {
             />
           </div>
           <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
-            {this.renderAgeMessage()}
+            {!this.isYOBDisabled() && this.renderAgeMessage()}
             <Bio
               bio={bio}
               visibilityBio={visibilityBio}
@@ -298,6 +308,7 @@ ProfilePage.propTypes = {
 
   // Bio form data
   bio: PropTypes.string,
+  yearOfBirth: PropTypes.number,
   visibilityBio: PropTypes.string.isRequired,
 
   // Certificates form data
@@ -373,6 +384,7 @@ ProfilePage.defaultProps = {
   photoUploadError: {},
   profileImage: {},
   name: null,
+  yearOfBirth: null,
   levelOfEducation: null,
   country: null,
   socialLinks: [],

src/profile/UsernameDescription.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { VisibilityOff } from '@edx/paragon/icons';
+import { Icon } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+function UsernameDescription() {
+  return (
+    <div className="d-flex align-items-center mt-3 mb-2rem">
+      <Icon src={VisibilityOff} className="icon-visibility-off" />
+      <div className="username-description">
+        <FormattedMessage
+          id="profile.username.description"
+          defaultMessage="Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+          description="A description of the username field"
+          values={{
+            siteName: getConfig().SITE_NAME,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default UsernameDescription;

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -104,6 +104,36 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 </span>
               </span>
             </p>
+            <div
+              className="d-flex align-items-center mt-3 mb-2rem"
+            >
+              <span
+                className="pgn__icon icon-visibility-off"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <div
+                className="username-description"
+              >
+                <span>
+                  Your profile information is only visible to you. Only your username is visible to others on localhost.
+                </span>
+              </div>
+            </div>
             <hr
               className="d-none d-md-block"
             />
@@ -141,6 +171,36 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 </span>
               </span>
             </p>
+            <div
+              className="d-flex align-items-center mt-3 mb-2rem"
+            >
+              <span
+                className="pgn__icon icon-visibility-off"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <div
+                className="username-description"
+              >
+                <span>
+                  Your profile information is only visible to you. Only your username is visible to others on localhost.
+                </span>
+              </div>
+            </div>
             <hr
               className="d-none d-md-block"
             />
@@ -319,17 +379,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           className="d-none d-md-block float-right"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -341,7 +401,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -355,6 +414,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -397,17 +461,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           className="d-md-none mb-4"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -419,7 +483,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -433,6 +496,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -610,7 +678,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -700,7 +768,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -880,7 +948,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -923,17 +991,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
                     style={Object {}}
-                    viewBox="0 0 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
                       style={Object {}}
                     />
@@ -1059,7 +1127,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1149,7 +1217,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1214,17 +1282,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                          className="d-inline-block align-text-top"
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
                         >
-                           
                           <span
                             className="pgn__icon"
                             style={
@@ -1236,7 +1304,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -1250,6 +1317,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                                 fill="currentColor"
                               />
                             </svg>
+                            <span
+                              className="sr-only"
+                            >
+                              in a new tab
+                            </span>
                           </span>
                         </span>
                       </a>
@@ -1370,17 +1442,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           className="d-none d-md-block float-right"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -1392,7 +1464,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -1406,6 +1477,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -1448,17 +1524,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           className="d-md-none mb-4"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -1470,7 +1546,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -1484,6 +1559,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -1661,7 +1741,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1751,7 +1831,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1931,7 +2011,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1974,17 +2054,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
                     style={Object {}}
-                    viewBox="0 0 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
                       style={Object {}}
                     />
@@ -2129,7 +2209,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                         <option
                           value="all_users"
                         >
-                          Everyone on edX
+                          Everyone on localhost
                         </option>
                       </select>
                     </span>
@@ -2156,7 +2236,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -2172,9 +2251,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                             </svg>
                           </span>
                         </span>
-                        <span
-                          className=""
-                        >
+                        <span>
                           Saving
                         </span>
                       </span>
@@ -2271,7 +2348,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2336,17 +2413,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                          className="d-inline-block align-text-top"
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
                         >
-                           
                           <span
                             className="pgn__icon"
                             style={
@@ -2358,7 +2435,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -2372,6 +2448,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                                 fill="currentColor"
                               />
                             </svg>
+                            <span
+                              className="sr-only"
+                            >
+                              in a new tab
+                            </span>
                           </span>
                         </span>
                       </a>
@@ -2701,7 +2782,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2791,7 +2872,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2971,7 +3052,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -3014,17 +3095,17 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
                     style={Object {}}
-                    viewBox="0 0 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
                       style={Object {}}
                     />
@@ -3150,7 +3231,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -3240,7 +3321,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -3305,17 +3386,17 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                          className="d-inline-block align-text-top"
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
                         >
-                           
                           <span
                             className="pgn__icon"
                             style={
@@ -3327,7 +3408,6 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -3341,6 +3421,11 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                                 fill="currentColor"
                               />
                             </svg>
+                            <span
+                              className="sr-only"
+                            >
+                              in a new tab
+                            </span>
                           </span>
                         </span>
                       </a>

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,

src/profile/forms/elements/Visibility.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEyeSlash, faEye } from '@fortawesome/free-regular-svg-icons';
 
@@ -10,7 +11,7 @@ function Visibility({ to, intl }) {
   const icon = to === 'private' ? faEyeSlash : faEye;
   const label = to === 'private'
     ? intl.formatMessage(messages['profile.visibility.who.just.me'])
-    : intl.formatMessage(messages['profile.visibility.who.everyone']);
+    : intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME });
 
   return (
     <span className="ml-auto small text-muted">
@@ -43,7 +44,7 @@ function VisibilitySelect({ intl, className, ...props }) {
           {intl.formatMessage(messages['profile.visibility.who.just.me'])}
         </option>
         <option key="all_users" value="all_users">
-          {intl.formatMessage(messages['profile.visibility.who.everyone'])}
+          {intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME })}
         </option>
       </select>
     </span>

src/profile/forms/elements/Visibility.messages.jsx

@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   'profile.visibility.who.everyone': {
     id: 'profile.visibility.who.everyone',
-    defaultMessage: 'Everyone on edX',
+    defaultMessage: 'Everyone on {siteName}',
     description: 'What users can see this area?',
   },
 });

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;