diff --git a/app/Account/AccountActions.js b/app/Account/AccountActions.js index 66e859058..4114a025b 100644 --- a/app/Account/AccountActions.js +++ b/app/Account/AccountActions.js @@ -29,6 +29,7 @@ import { GET_USER_SUBSCRIPTION_DATA_FAIL, GET_USER_SUBSCRIPTION_DATA_SUCCESS } from './AccountConstants'; +import { SET_TOAST } from '../hub/Views/AppView/AppViewConstants'; import { CLEAR_THEME } from '../panel/constants/constants'; export const getUserSettings = () => dispatch => ( @@ -172,10 +173,19 @@ export const resetPassword = email => dispatch => ( .then((res) => { const { errors } = res; if (errors) { + // Panel toast message dispatch({ type: RESET_PASSWORD_FAIL, payload: { errors }, }); + // Hub toast message + dispatch({ + type: SET_TOAST, + data: { + toastMessage: t('banner_email_not_in_system_message'), + toastClass: 'alert', + }, + }); return false; } dispatch({ type: RESET_PASSWORD_SUCCESS }); diff --git a/app/scss/hub.scss b/app/scss/hub.scss index ad804d16a..2c220f43d 100644 --- a/app/scss/hub.scss +++ b/app/scss/hub.scss @@ -54,6 +54,7 @@ html, body, #root { @import './partials/_hub_svgs'; @import './partials/_shared_components_svgs'; @import './partials/_fonts'; +@import './partials/_loader'; // Imports from ../hub directory @import '../hub/Views/SideNavigationView/SideNavigationView.scss'; diff --git a/app/scss/panel.scss b/app/scss/panel.scss index dc511bf62..b0cb28133 100644 --- a/app/scss/panel.scss +++ b/app/scss/panel.scss @@ -76,6 +76,7 @@ html body { @import './partials/_stats'; @import './partials/_stats_graph'; @import './partials/_modal_exit_button'; +@import './partials/_loader'; // Imports from ../shared-components directory @import '../shared-components/Modal/Modal.scss'; diff --git a/app/scss/partials/_account.scss b/app/scss/partials/_account.scss index c2bd0b137..78a3d4f1b 100644 --- a/app/scss/partials/_account.scss +++ b/app/scss/partials/_account.scss @@ -93,86 +93,6 @@ p.warning { } } -.button { - .loader { - display: none; - } - &.loading { - pointer-events: none; - .loader { - display: inline-block; - height: 12px; - width: 12px; - } - .title { - display: none; - } - } -} - -.loader { - font-size: 10px; - text-indent: -9999em; - width: 10rem; - height: 10rem; - border-radius: 50%; - background: #ffffff; - background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); - background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); - background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); - background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); - background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); - position: relative; - -webkit-animation: load3 1.4s infinite linear; - animation: load3 1.4s infinite linear; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); -} -.loader:before { - width: 50%; - height: 50%; - background: #ffffff; - border-radius: 100% 0 0 0; - position: absolute; - top: 0; - left: 0; - content: ''; -} -.loader:after { - background: #00AEF0; - width: 75%; - height: 75%; - border-radius: 50%; - content: ''; - margin: auto; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -@-webkit-keyframes load3 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load3 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - /* FORGOT PASSWORD PANEL */ #forgot-password-panel{ margin-top: 75px; diff --git a/app/scss/partials/_loader.scss b/app/scss/partials/_loader.scss new file mode 100644 index 000000000..cf3aa0d42 --- /dev/null +++ b/app/scss/partials/_loader.scss @@ -0,0 +1,79 @@ +.button { + .loader { + display: none; + } + &.loading { + pointer-events: none; + .loader { + display: inline-block; + height: 12px; + width: 12px; + } + .title { + display: none; + } + } +} +.loader { + font-size: 10px; + text-indent: -9999em; + width: 10rem; + height: 10rem; + border-radius: 50%; + background: #ffffff; + background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); + background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); + background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); + background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); + background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); + position: relative; + -webkit-animation: load3 1.4s infinite linear; + animation: load3 1.4s infinite linear; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +.loader:before { + width: 50%; + height: 50%; + background: #ffffff; + border-radius: 100% 0 0 0; + position: absolute; + top: 0; + left: 0; + content: ''; +} +.loader:after { + background: #00AEF0; + width: 75%; + height: 75%; + border-radius: 50%; + content: ''; + margin: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +@-webkit-keyframes load3 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes load3 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + diff --git a/app/shared-components/ForgotPassword/ForgotPassword.jsx b/app/shared-components/ForgotPassword/ForgotPassword.jsx index 1c4fe6621..059b75de8 100644 --- a/app/shared-components/ForgotPassword/ForgotPassword.jsx +++ b/app/shared-components/ForgotPassword/ForgotPassword.jsx @@ -47,6 +47,8 @@ class ForgotPassword extends React.Component { this.setState({ loading: true }, () => { const { email } = this.state; const { locale } = this.props; + const isInPanel = locale === 'panel'; + const isInHub = locale === 'hub'; // validate the email and password if (!validateEmail(email)) { @@ -60,20 +62,24 @@ class ForgotPassword extends React.Component { this.props.actions.resetPassword(email) .then((success) => { this.setState({ loading: false }); - if (success && locale === 'hub') { - this.props.history.push('/log-in'); + if (success && isInHub) { + this.navigateToLogIn(); this.props.actions.setToast({ toastMessage: t('banner_check_your_email_title'), toastClass: 'success', }); - } else if (success && locale === 'panel') { + } else if (success && isInPanel) { this.props.history.push('/login'); } }); }); } + navigateToLogIn = () => { + this.props.history.push('/log-in'); + } + /** * Render Forgot Password panel. * @return {ReactComponent} ReactComponent instance @@ -81,24 +87,26 @@ class ForgotPassword extends React.Component { render() { const { email, loading, emailError } = this.state; const { locale } = this.props; + const isInPanel = locale === 'panel'; + const isInHub = locale === 'hub'; const buttonClasses = ClassNames('button ghostery-button', { loading }); const ContainerClassNames = ClassNames('', { - 'forgot-password-panel': locale === 'panel', - ForgotPasswordView: locale === 'hub', + 'forgot-password-panel': isInPanel, + ForgotPasswordView: isInHub, }); const MessageClassNames = ClassNames('', { - 'forgot-password-message': locale === 'panel', - ForgotPasswordMessage: locale === 'hub', + 'forgot-password-message': isInPanel, + ForgotPasswordMessage: isInHub, }); const EmailClassNames = ClassNames('', { - 'forgot-input-email': locale === 'panel', - ForgotPasswordMessage: locale === 'hub', + 'forgot-input-email': isInPanel, + ForgotPasswordMessage: isInHub, }); const ButtonsContainerClassNames = ClassNames('row', { - 'buttons-container': locale === 'panel', - ForgotPasswordButtonsContainer: locale === 'hub', + 'buttons-container': isInPanel, + ForgotPasswordButtonsContainer: isInHub, }); return (
@@ -123,9 +131,16 @@ class ForgotPassword extends React.Component {
- - { t('button_cancel') } - + {isInPanel && ( + + {t('button_cancel')} + + )} + {isInHub && ( +
+ {t('button_cancel')} +
+ )}