Fix password reset confirmation redirection. (#61)

Fixed password reset redirection to dashboard page if user
is already logged in.

VAN-234

src/common-components/LoggedInRedirect.jsx

@@ -1,26 +0,0 @@
-import { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { AppContext } from '@edx/frontend-platform/react';
-
-import { DEFAULT_REDIRECT_URL } from '../data/constants';
-
-/**
- * This wrapper component redirects the requester to our default redirect url if they are
- * already authenticated.
- *
- * @param {node} children The child nodes to render if there is an unauthenticated user.
- */
-export default function LoggedInRedirect({ children }) {
-  const { authenticatedUser, config } = useContext(AppContext);
-
-  if (authenticatedUser) {
-    global.location.href = config.LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
-    return null;
-  }
-
-  return children;
-}
-
-LoggedInRedirect.propTypes = {
-  children: PropTypes.node.isRequired,
-};

src/common-components/UnAuthOnlyRoute.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import { DEFAULT_REDIRECT_URL } from '../data/constants';
+
+/**
+ * This wrapper redirects the requester to our default redirect url if they are
+ * already authenticated.
+ */
+const UnAuthOnlyRoute = (props) => {
+  const { authenticatedUser, config } = React.useContext(AppContext);
+
+  if (authenticatedUser) {
+    global.location.href = config.LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+    return null;
+  }
+
+  return <Route {...props} />;
+};
+
+export default UnAuthOnlyRoute;

src/common-components/index.jsx

@@ -1,4 +1,4 @@
 export { default as HeaderLayout } from './HeaderLayout';
-export { default as LoggedInRedirect } from './LoggedInRedirect';
 export { default as RedirectLogistration } from './RedirectLogistration';
 export { default as registerIcons } from './RegisterFaIcons';
+export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';

src/common-components/tests/LoggedInRedirect.test.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { getConfig } from '@edx/frontend-platform';
-
-import LoggedInRedirect from '../LoggedInRedirect';
-import { DEFAULT_REDIRECT_URL } from '../../data/constants';
-
-describe('LoggedInRedirect', () => {
-  const loggedInRedirect = (
-    <LoggedInRedirect>
-      <div>test</div>
-    </LoggedInRedirect>
-  );
-  const dashboardURL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
-
-  it('should redirect to dashboard if already logged in', () => {
-    delete window.location;
-    window.location = { href: '' };
-    const user = {
-      username: 'gonzo',
-      other: 'data',
-    };
-    const mockUseContext = jest.fn().mockImplementation(() => ({
-      authenticatedUser: user,
-      config: getConfig(),
-    }));
-
-    React.useContext = mockUseContext;
-    mount(loggedInRedirect);
-
-    expect(window.location.href).toBe(dashboardURL);
-  });
-
-  it('should render child components', () => {
-    const mockUseContext = jest.fn().mockImplementation(() => ({
-      authenticatedUser: null,
-      config: null,
-    }));
-
-    React.useContext = mockUseContext;
-    const wrapper = mount(loggedInRedirect);
-
-    expect(wrapper.find('div').length).toBe(1);
-  });
-});

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { BrowserRouter as Router, MemoryRouter, Switch } from 'react-router-dom';
+
+import { getConfig } from '@edx/frontend-platform';
+
+import { UnAuthOnlyRoute } from '..';
+import { DEFAULT_REDIRECT_URL, LOGIN_PAGE } from '../../data/constants';
+
+const RRD = require('react-router-dom');
+// Just render plain div with its children
+// eslint-disable-next-line react/prop-types
+RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
+module.exports = RRD;
+
+const TestApp = () => (
+  <Router>
+    <div>
+      <Switch>
+        <UnAuthOnlyRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
+      </Switch>
+    </div>
+  </Router>
+);
+
+describe('UnAuthOnlyRoute', () => {
+  const routerWrapper = () => (
+    <MemoryRouter initialEntries={[LOGIN_PAGE]}>
+      <TestApp />
+    </MemoryRouter>
+  );
+
+  it('should redirect to dashboard if already logged in', () => {
+    const dashboardURL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+    delete window.location;
+    window.location = { href: '' };
+    const user = {
+      username: 'gonzo',
+      other: 'data',
+    };
+    const mockUseContext = jest.fn().mockImplementation(() => ({
+      authenticatedUser: user,
+      config: getConfig(),
+    }));
+
+    React.useContext = mockUseContext;
+    mount(routerWrapper());
+
+    expect(window.location.href).toBe(dashboardURL);
+  });
+
+  it('should render test login components', () => {
+    const mockUseContext = jest.fn().mockImplementation(() => ({
+      authenticatedUser: null,
+      config: {},
+    }));
+
+    React.useContext = mockUseContext;
+    const wrapper = mount(routerWrapper());
+
+    expect(wrapper.find('span').text()).toBe('Login Page');
+  });
+});

src/data/constants.js

@@ -3,6 +3,8 @@ export const LOGIN_PAGE = '/login';
 export const REGISTER_PAGE = '/register';
 export const RESET_PAGE = '/reset';
 export const DEFAULT_REDIRECT_URL = '/dashboard';
+export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
+export const PAGE_NOT_FOUND = '/notfound';
 
 // Stateful Submit Button States
 export const DEFAULT_STATE = 'default';

src/index.jsx

@@ -12,9 +12,11 @@ import { messages as headerMessages } from '@edx/frontend-component-header';
 
 import configureStore from './data/configureStore';
 import { LoginPage, RegistrationPage, NotFoundPage } from './logistration';
-import { LOGIN_PAGE, REGISTER_PAGE, RESET_PAGE } from './data/constants';
+import {
+  LOGIN_PAGE, PAGE_NOT_FOUND, REGISTER_PAGE, RESET_PAGE, PASSWORD_RESET_CONFIRM,
+} from './data/constants';
 import ForgotPasswordPage from './forgot-password';
-import { HeaderLayout, LoggedInRedirect, registerIcons } from './common-components';
+import { HeaderLayout, UnAuthOnlyRoute, registerIcons } from './common-components';
 import ResetPasswordPage from './reset-password';
 import appMessages from './i18n';
 
@@ -25,21 +27,21 @@ registerIcons();
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
-      <LoggedInRedirect>
-        <HeaderLayout>
-          <Switch>
-            <Route exact path="/">
-              <Redirect to={LOGIN_PAGE} />
-            </Route>
-            <Route exact path={LOGIN_PAGE} component={LoginPage} />
-            <Route exact path={REGISTER_PAGE} component={RegistrationPage} />
-            <Route exact path={RESET_PAGE} component={ForgotPasswordPage} />
-            <Route exact path="/password_reset_confirm/:token/" component={ResetPasswordPage} />
-            <Route path="/notfound" component={NotFoundPage} />
-            <Route path="*" component={NotFoundPage} />
-          </Switch>
-        </HeaderLayout>
-      </LoggedInRedirect>
+      <HeaderLayout>
+        <Switch>
+          <Route exact path="/">
+            <Redirect to={PAGE_NOT_FOUND} />
+          </Route>
+          <UnAuthOnlyRoute exact path={LOGIN_PAGE} component={LoginPage} />
+          <UnAuthOnlyRoute exact path={REGISTER_PAGE} component={RegistrationPage} />
+          <UnAuthOnlyRoute exact path={RESET_PAGE} component={ForgotPasswordPage} />
+          <Route exact path={PASSWORD_RESET_CONFIRM} component={ResetPasswordPage} />
+          <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
+          <Route path="*">
+            <Redirect to={PAGE_NOT_FOUND} />
+          </Route>
+        </Switch>
+      </HeaderLayout>
     </AppProvider>,
     document.getElementById('root'),
   );