fix(auth): UI logged-in detection for other auths

Defer to the API, specifically the presence of the `login` action, to determine if a
user is logged in instead of depending on the implementation detail of the UI JWT login
process.

Refs #134784

CHANGELOG.md

@@ -5,7 +5,10 @@
 ### Breaking
 
 ### Feature
+
 - Allowing user to paste url in search box in objectBrowser @iFlameing
+- Detect when a user has logged in by means other than JWT, such as ZMI `Basic`
+  authentication or the classic HTML Plone `@login` view @rpatterson
 
 ### Bugfix
 

src/actions/types/types.test.js

@@ -1,13 +1,15 @@
 import { getTypes } from './types';
 import { GET_TYPES } from '@plone/volto/constants/ActionTypes';
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
+
+const actions = { user: [{ id: 'logout' }] };
+const actionsById = arrayWIdsToObject(actions);
 
 describe('Types action', () => {
   describe('getTypes', () => {
     it('should create an action to get the types', () => {
       const getState = () => ({
-        userSession: {
-          token: 'thetoken',
-        },
+        actions: { actions, actionsById },
       });
       const url = '/blog';
       const dispatch = jest.fn();

src/components/manage/Contents/Contents.test.jsx

@@ -41,16 +41,14 @@ const actions = {
       title: 'Contents',
     },
   ],
+  user: [{ id: 'logout' }],
 };
 const actionsById = arrayWIdsToObject(actions);
 
 describe('Contents', () => {
   it('renders a folder contents view component', () => {
     const store = mockStore({
       actions: { actions, actionsById },
-      userSession: {
-        token: '14134234123qwdaf',
-      },
       search: {
         items: [
           {

src/components/manage/Edit/Edit.test.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import jwt from 'jsonwebtoken';
 
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
 import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
@@ -13,24 +13,23 @@ jest.mock('react-portal', () => ({
 }));
 jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
 
+const actions = {
+  document_actions: [],
+  object: [
+    {
+      icon: '',
+      id: 'edit',
+      title: 'Edit',
+    },
+  ],
+  user: [{ id: 'logout' }],
+};
+const actionsById = arrayWIdsToObject(actions);
+
 describe('Edit', () => {
   it('renders an empty edit component', () => {
     const store = mockStore({
-      userSession: {
-        token: jwt.sign({ fullname: 'John Doe' }, 'secret'),
-      },
-      actions: {
-        actions: {
-          document_actions: [],
-          object: [
-            {
-              icon: '',
-              id: 'edit',
-              title: 'Edit',
-            },
-          ],
-        },
-      },
+      actions: { actions, actionsById },
       schema: {
         schema: null,
       },
@@ -61,21 +60,7 @@ describe('Edit', () => {
 
   it('renders an edit component', () => {
     const store = mockStore({
-      userSession: {
-        token: jwt.sign({ fullname: 'John Doe' }, 'secret'),
-      },
-      actions: {
-        actions: {
-          document_actions: [],
-          object: [
-            {
-              icon: '',
-              id: 'edit',
-              title: 'Edit',
-            },
-          ],
-        },
-      },
+      actions: { actions, actionsById },
       schema: {
         schema: {
           some: 'field',

src/components/manage/Toolbar/Toolbar.test.jsx

@@ -108,7 +108,7 @@ const actions = {
       title: 'Log out',
     },
   ],
-}
+};
 const actionsById = arrayWIdsToObject(actions);
 
 describe('Toolbar', () => {

src/components/theme/Anontools/Anontools.test.jsx

@@ -5,13 +5,17 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
 import Anontools from './Anontools';
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
 
 const mockStore = configureStore();
 
+const actions = { user: [{ id: 'login' }] };
+const actionsById = arrayWIdsToObject(actions);
+
 describe('Anontools', () => {
-  it('renders an anontools component when no token is specified', () => {
+  it('renders an anontools component when no use is logged in', () => {
     const store = mockStore({
-      userSession: { token: null },
+      actions: { actions, actionsById },
       content: { data: { '@id': 'myid' } },
       intl: {
         locale: 'en',
@@ -29,9 +33,10 @@ describe('Anontools', () => {
     expect(json).toMatchSnapshot();
   });
 
-  it('should not render an anontools component when a token is specified', () => {
+  it('should not render an anontools component when a user is logged in', () => {
+    const actions = { user: [{ id: 'logout' }] };
     const store = mockStore({
-      userSession: { token: '1234' },
+      actions: { actions, actionsById: arrayWIdsToObject(actions) },
       content: { data: {} },
       intl: {
         locale: 'en',

src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Anontools renders an anontools component when no token is specified 1`] = `
+exports[`Anontools renders an anontools component when no use is logged in 1`] = `
 <div
   className="ui pointing secondary right floated menu"
 >
@@ -19,4 +19,4 @@ exports[`Anontools renders an anontools component when no token is specified 1`]
 </div>
 `;
 
-exports[`Anontools should not render an anontools component when a token is specified 1`] = `null`;
+exports[`Anontools should not render an anontools component when a user is logged in 1`] = `null`;

src/components/theme/App/App.test.jsx

@@ -6,6 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
 import { __test__ as App } from './App';
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
 
 beforeAll(() => {
   config.settings.navDepth = 1;
@@ -35,12 +36,13 @@ jest.mock('semantic-ui-react', () => ({
 }));
 jest.mock('../Footer/Footer', () => jest.fn(() => <div id="footer" />));
 
+const actions = { user: [{ id: 'logout' }] };
+const actionsById = arrayWIdsToObject(actions);
+
 describe('App', () => {
   it('renders a app component', () => {
     const store = mockStore({
-      userSession: {
-        token: 'abcdefgh',
-      },
+      actions: { actions, actionsById },
       content: { data: { id: 'content', '@type': 'Document' } },
       apierror: {},
       intl: {

src/components/theme/Header/Header.jsx

@@ -38,8 +38,7 @@ class Header extends Component {
    * @property {Object} defaultProps Default properties.
    * @static
    */
-  static defaultProps = {
-  };
+  static defaultProps = {};
 
   /**
    * Render method.

src/components/theme/Header/Header.test.jsx

@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
 import Header from './Header';
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
 
 const mockStore = configureStore();
 
@@ -21,10 +22,13 @@ jest.mock('../LanguageSelector/LanguageSelector', () =>
   jest.fn(() => <div id="language-selector" />),
 );
 
+const actions = { user: [{ id: 'login' }] };
+const actionsById = arrayWIdsToObject(actions);
+
 describe('Header', () => {
   it('renders a header component', () => {
     const store = mockStore({
-      userSession: { token: null },
+      actions: { actions, actionsById },
       intl: {
         locale: 'en',
         messages: {},

src/components/theme/Login/Login.test.jsx

@@ -6,6 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
 import Login from './Login';
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
 
 beforeAll(() => {
   config.settings.nonContentRoutes = [];
@@ -14,9 +15,13 @@ beforeAll(() => {
 
 const mockStore = configureStore();
 
+const actions = { user: [{ id: 'login' }] };
+const actionsById = arrayWIdsToObject(actions);
+
 describe('Login', () => {
   it('renders a login component', () => {
     const store = mockStore({
+      actions: { actions, actionsById },
       userSession: {
         login: {},
       },

src/components/theme/View/View.test.jsx

@@ -5,6 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import View from './View';
 import config from '@plone/volto/registry';
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
 
 beforeAll(() => {
   config.set('views', {
@@ -125,18 +126,18 @@ const actions = {
     },
     {
       icon: '',
-      id: 'logout',
-      title: 'Log out',
+      id: 'login',
+      title: 'Log in',
     },
   ],
 };
+const actionsById = arrayWIdsToObject(actions);
 
 describe('View', () => {
   it('renders an empty view', () => {
     const store = mockStore({
-      actions: { actions },
+      actions: { actions, actionsById },
       content: { get: { error: null } },
-      userSession: { token: null },
       apierror: {},
       intl: {
         locale: 'en',
@@ -154,9 +155,8 @@ describe('View', () => {
 
   it('renders a summary view', () => {
     const store = mockStore({
-      actions: { actions },
+      actions: { actions, actionsById },
       content: { data: { layout: 'summary_view' }, get: { error: null } },
-      userSession: { token: null },
       apierror: {},
       intl: {
         locale: 'en',
@@ -174,9 +174,8 @@ describe('View', () => {
 
   it('renders a tabular view', () => {
     const store = mockStore({
-      actions: { actions },
+      actions: { actions, actionsById },
       content: { data: { layout: 'tabular_view' }, get: { error: null } },
-      userSession: { token: null },
       apierror: {},
       intl: {
         locale: 'en',
@@ -194,9 +193,8 @@ describe('View', () => {
 
   it('renders a document view', () => {
     const store = mockStore({
-      actions: { actions },
+      actions: { actions, actionsById },
       content: { data: {}, get: { error: null } },
-      userSession: { token: null },
       apierror: {},
       intl: {
         locale: 'en',

src/selectors/userSession/userSession.js

@@ -12,7 +12,10 @@ import jwtDecode from 'jwt-decode';
  * @returns {boolean} `true` if a user is currently authenticated, `false` otherwise.
  */
 export function loggedIn(state) {
-  return !!state.userSession.token;
+  /* The user may be authenticated by different means, including outside the UI.  Defer
+   * to the response from Plone, sepcifically whether Plone presents an option to log
+   * in. */
+  return !state.actions.actionsById.user.login;
 }
 
 /**