From c1f4f017bd77078ed025a5ab94836b519454ce50 Mon Sep 17 00:00:00 2001 From: adeelehsan Date: Mon, 1 Mar 2021 11:11:10 +0500 Subject: [PATCH] react helmet package added to change each page title VAN-355 --- package-lock.json | 60 ++++++++++++++++++++-- package.json | 3 +- src/forgot-password/ForgotPasswordPage.jsx | 6 +++ src/forgot-password/messages.js | 5 ++ src/login/LoginPage.jsx | 6 +++ src/login/messages.jsx | 5 ++ src/register/RegistrationPage.jsx | 6 +++ src/register/messages.jsx | 5 ++ src/reset-password/InvalidToken.jsx | 41 +++++++++------ src/reset-password/ResetPasswordPage.jsx | 9 +++- src/reset-password/ResetSuccess.jsx | 39 ++++++++------ src/reset-password/messages.js | 5 ++ 12 files changed, 152 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1c332ba1..d18cae85 100644 --- 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", diff --git a/package.json b/package.json index c6b456aa..8b2be760 100644 --- 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", diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx index 3e5446dd..50e376d5 100644 --- 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, }) => ( <> + + {intl.formatMessage(messages['forgot.password.page.title'], + { siteName: getConfig().SITE_NAME })} + + {status === 'complete' ? : null}
diff --git a/src/forgot-password/messages.js b/src/forgot-password/messages.js index 061b1f06..8c33acc5 100644 --- 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', diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index fddff73a..8a36880b 100644 --- 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 ( <> + + {intl.formatMessage(messages['login.page.title'], + { siteName: getConfig().SITE_NAME })} + + + + {intl.formatMessage(messages['register.page.title'], + { siteName: getConfig().SITE_NAME })} + + { ); return ( -
-
- - {intl.formatMessage(messages['reset.password.request.invalid.token.header'])} - {intl.formatMessage(messages['reset.password.request.forgot.password.text'])} , - loginPasswordLink, - }} - /> - + <> + + {intl.formatMessage(messages['reset.password.page.title'], + { siteName: getConfig().SITE_NAME })} + + +
+
+ + {intl.formatMessage(messages['reset.password.request.invalid.token.header'])} + {intl.formatMessage(messages['reset.password.request.forgot.password.text'])} , + loginPasswordLink, + }} + /> + +
-
+ ); }; diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx index 1b46aeaa..9715d868 100644 --- 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 ( <> - + + {intl.formatMessage(messages['reset.password.page.title'], + { siteName: getConfig().SITE_NAME })} + + {props.status === 'failure' && props.errors === INTERNAL_SERVER_ERROR ? ( ) : null} diff --git a/src/reset-password/ResetSuccess.jsx b/src/reset-password/ResetSuccess.jsx index b762475c..37a298ea 100644 --- 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 ( -
-
-
- - - {intl.formatMessage(messages['reset.password.request.success.header.message'])} - - - + <> + + {intl.formatMessage(messages['reset.password.page.title'], + { siteName: getConfig().SITE_NAME })} + + +
+
+
+ + + {intl.formatMessage(messages['reset.password.request.success.header.message'])} + + + +
-
+ ); }; diff --git a/src/reset-password/messages.js b/src/reset-password/messages.js index b0579473..b68d82d6 100644 --- 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',