Merge pull request #174 from edx/aehsan/van-335/react-helmet-package-added

react helmet package added to change each page title
2021-03-01 14:25:14 +05:00
parent 3a0c2a7a0a c1f4f017bd
commit 874c48c2f3
12 changed files with 152 additions and 38 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -3828,13 +3828,14 @@
      }
    },
    "@edx/paragon": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.3.1.tgz",
-      "integrity": "sha512-y8clM7ZzN65LihmF6A35k9BiYtKtxO1LDoniNYjNSuNYzI7RPF8ZFsIfsKcRoWBRphiYw5a+QdUeByFv8Ey8Nw==",
+      "version": "13.13.2",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.13.2.tgz",
+      "integrity": "sha512-HEndaKSpb1bXTxaXh6BCIvBbrJKZLnoNWc/obwenHzXzzMPWm555PpK4J9Ijzk9rCc6DDIr5JoHHPF6O4OIqsQ==",
      "requires": {
        "@fortawesome/fontawesome-svg-core": "^1.2.30",
        "@fortawesome/free-solid-svg-icons": "^5.14.0",
        "@fortawesome/react-fontawesome": "^0.1.11",
+        "@popperjs/core": "^2.6.0",
        "airbnb-prop-types": "^2.12.0",
        "bootstrap": "4.6.0",
        "classnames": "^2.2.6",
@@ -3844,13 +3845,14 @@
        "prop-types": "^15.7.2",
        "react-bootstrap": "^1.2.2",
        "react-focus-on": "^3.5.0",
+        "react-popper": "^2.2.4",
        "react-proptype-conditional-require": "^1.0.4",
        "react-responsive": "^6.1.1",
        "react-table": "^7.6.1",
        "react-transition-group": "^4.0.0",
        "sanitize-html": "^1.20.0",
        "tabbable": "^4.0.0",
-        "uncontrollable": "7.1.1"
+        "uncontrollable": "7.2.1"
      },
      "dependencies": {
        "react-responsive": {
@@ -3862,6 +3864,17 @@
            "matchmediaquery": "^0.3.0",
            "prop-types": "^15.6.1"
          }
+        },
+        "uncontrollable": {
+          "version": "7.2.1",
+          "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+          "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+          "requires": {
+            "@babel/runtime": "^7.6.3",
+            "@types/react": ">=16.9.11",
+            "invariant": "^2.2.4",
+            "react-lifecycles-compat": "^3.0.4"
+          }
        }
      }
    },
@@ -21164,6 +21177,24 @@
        "use-sidecar": "^1.0.1"
      }
    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
    "react-intl": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
@@ -21224,6 +21255,22 @@
        }
      }
    },
+    "react-popper": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.4.tgz",
+      "integrity": "sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
    "react-proptype-conditional-require": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
@@ -21388,6 +21435,11 @@
        }
      }
    },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
+    },
    "react-style-singleton": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -64,7 +64,8 @@
    "redux-mock-store": "^1.5.4",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0"
+    "reselect": "^4.0.0",
+    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
    "@edx/frontend-build": "5.6.8",
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Helmet } from 'react-helmet';
 import { Redirect } from 'react-router-dom';

 import { getConfig } from '@edx/frontend-platform';
@@ -86,6 +87,11 @@ const ForgotPasswordPage = (props) => {
        errors, handleSubmit, setFieldValue, values,
      }) => (
        <>
+          <Helmet>
+            <title>{intl.formatMessage(messages['forgot.password.page.title'],
+              { siteName: getConfig().SITE_NAME })}
+            </title>
+          </Helmet>
          {status === 'complete' ? <Redirect to={LOGIN_PAGE} /> : null}
          <div className="d-flex justify-content-center m-4">
            <div className="d-flex flex-column">
--- a/src/forgot-password/messages.js
+++ b/src/forgot-password/messages.js
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
+  'forgot.password.page.title': {
+    id: 'forgot.password.page.title',
+    defaultMessage: 'Forgot Password | {siteName}',
+    description: 'forgot password page title',
+  },
  'forgot.password.page.heading': {
    id: 'forgot.password.page.heading',
    defaultMessage: 'Password assistance',
--- a/src/login/LoginPage.jsx
+++ b/src/login/LoginPage.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Skeleton from 'react-loading-skeleton';
+import { Helmet } from 'react-helmet';

 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -174,6 +175,11 @@ class LoginPage extends React.Component {

    return (
      <>
+        <Helmet>
+          <title>{intl.formatMessage(messages['login.page.title'],
+            { siteName: getConfig().SITE_NAME })}
+          </title>
+        </Helmet>
        <RedirectLogistration
          success={this.props.loginResult.success}
          redirectUrl={this.props.loginResult.redirectUrl}
--- a/src/login/messages.jsx
+++ b/src/login/messages.jsx
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
+  'login.page.title': {
+    id: 'login.page.title',
+    defaultMessage: 'Login | {siteName}',
+    description: 'login page title',
+  },
  'sign.in.button': {
    id: 'sign.in.button',
    defaultMessage: 'Sign in',
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import camelCase from 'lodash.camelcase';
 import { connect } from 'react-redux';
 import Skeleton from 'react-loading-skeleton';
+import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
@@ -435,6 +436,11 @@ class RegistrationPage extends React.Component {

    return (
      <>
+        <Helmet>
+          <title>{intl.formatMessage(messages['register.page.title'],
+            { siteName: getConfig().SITE_NAME })}
+          </title>
+        </Helmet>
        <RedirectLogistration
          success={this.props.registrationResult.success}
          redirectUrl={this.props.registrationResult.redirectUrl}
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
+  'register.page.title': {
+    id: 'register.page.title',
+    defaultMessage: 'Register | {siteName}',
+    description: 'register page title',
+  },
  'create.account.button': {
    id: 'create.account.button',
    defaultMessage: 'Create account',
--- a/src/reset-password/InvalidToken.jsx
+++ b/src/reset-password/InvalidToken.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import { Alert } from '@edx/paragon';

 import messages from './messages';
@@ -15,23 +17,30 @@ const InvalidTokenMessage = props => {
  );

  return (
-    <div className="d-flex justify-content-center m-4">
-      <div className="d-flex flex-column mw-500">
-        <Alert variant="danger">
-          <Alert.Heading> {intl.formatMessage(messages['reset.password.request.invalid.token.header'])}</Alert.Heading>
-          <FormattedMessage
-            id="reset.password.request.invalid.token.description.message"
-            defaultMessage="This password reset link is invalid. It may have been used already.
-            To reset your password, go to the {loginPasswordLink} page and select {forgotPassword}"
-            description="Invalid password reset link help text message."
-            values={{
-              forgotPassword: <strong> {intl.formatMessage(messages['reset.password.request.forgot.password.text'])} </strong>,
-              loginPasswordLink,
-            }}
-          />
-        </Alert>
+    <>
+      <Helmet>
+        <title>{intl.formatMessage(messages['reset.password.page.title'],
+          { siteName: getConfig().SITE_NAME })}
+        </title>
+      </Helmet>
+      <div className="d-flex justify-content-center m-4">
+        <div className="d-flex flex-column mw-500">
+          <Alert variant="danger">
+            <Alert.Heading> {intl.formatMessage(messages['reset.password.request.invalid.token.header'])}</Alert.Heading>
+            <FormattedMessage
+              id="reset.password.request.invalid.token.description.message"
+              defaultMessage="This password reset link is invalid. It may have been used already.
+              To reset your password, go to the {loginPasswordLink} page and select {forgotPassword}"
+              description="Invalid password reset link help text message."
+              values={{
+                forgotPassword: <strong> {intl.formatMessage(messages['reset.password.request.forgot.password.text'])} </strong>,
+                loginPasswordLink,
+              }}
+            />
+          </Alert>
+        </div>
      </div>
-    </div>
+    </>
  );
 };

--- a/src/reset-password/ResetPasswordPage.jsx
+++ b/src/reset-password/ResetPasswordPage.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import {
  Alert, Form, StatefulButton,
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getQueryParameters } from '@edx/frontend-platform';
+import { getQueryParameters, getConfig } from '@edx/frontend-platform';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';

@@ -120,7 +121,11 @@ const ResetPasswordPage = (props) => {
  } else {
    return (
      <>
-
+        <Helmet>
+          <title>{intl.formatMessage(messages['reset.password.page.title'],
+            { siteName: getConfig().SITE_NAME })}
+          </title>
+        </Helmet>
        {props.status === 'failure' && props.errors === INTERNAL_SERVER_ERROR ? (
          <APIFailureMessage header={intl.formatMessage(messages['reset.password.request.server.error'])} errorCode={INTERNAL_SERVER_ERROR} />
        ) : null}
--- a/src/reset-password/ResetSuccess.jsx
+++ b/src/reset-password/ResetSuccess.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';

 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import { Alert } from '@edx/paragon';

 import messages from './messages';
@@ -19,23 +21,30 @@ const ResetSuccessMessage = (props) => {
  );

  return (
-    <div className="d-flex justify-content-center m-4">
-      <div className="d-flex flex-column">
-        <div className="text-left mw-500">
-          <Alert variant="success">
-            <Alert.Heading>
-              {intl.formatMessage(messages['reset.password.request.success.header.message'])}
-            </Alert.Heading>
-            <FormattedMessage
-              id="reset.password.request.success.header.description.message"
-              defaultMessage="Your password has been reset. {loginPasswordLink}"
-              description="message when reset password is successful."
-              values={{ loginPasswordLink }}
-            />
-          </Alert>
+    <>
+      <Helmet>
+        <title>{intl.formatMessage(messages['reset.password.page.title'],
+          { siteName: getConfig().SITE_NAME })}
+        </title>
+      </Helmet>
+      <div className="d-flex justify-content-center m-4">
+        <div className="d-flex flex-column">
+          <div className="text-left mw-500">
+            <Alert variant="success">
+              <Alert.Heading>
+                {intl.formatMessage(messages['reset.password.request.success.header.message'])}
+              </Alert.Heading>
+              <FormattedMessage
+                id="reset.password.request.success.header.description.message"
+                defaultMessage="Your password has been reset. {loginPasswordLink}"
+                description="message when reset password is successful."
+                values={{ loginPasswordLink }}
+              />
+            </Alert>
+          </div>
        </div>
      </div>
-    </div>
+    </>
  );
 };

--- a/src/reset-password/messages.js
+++ b/src/reset-password/messages.js
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
+  'reset.password.page.title': {
+    id: 'reset.password.page.title',
+    defaultMessage: 'Reset Password | {siteName}',
+    description: 'page title',
+  },
  'reset.password.page.heading': {
    id: 'reset.password.page.heading',
    defaultMessage: 'Reset your password',