apostrophe 3.52.0 → 3.53.0

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -303,8 +303,13 @@
   "pages": "Pages",
   "parentNotLocalized": "Localize the parent page first",
   "password": "Password",
+  "passwordChangeHelp": "Modify your existing password",
+  "passwordCurrent": "Current Password",
+  "passwordCurrentError": "Current password is incorrect",
   "passwordErrorMax": "Maximum of {{ max }} characters",
   "passwordErrorMin": "Minimum of {{ min }} characters",
+  "passwordNew": "New Password",
+  "passwordRepeat": "Repeat New Password",
   "passwordResetRequest": "Your request to reset your password on {{ site }}",
   "pasteWidget": "Paste {{ widget }}",
   "pending": "Pending",
@@ -420,6 +425,7 @@
   "selectPage": "Select Page",
   "selectedMenuItem": "✓ {{ label }}",
   "sentenceJoiner": " ",
+  "settings": "Personal Settings",
   "shareDraft": "Share Draft",
   "shareDraftCopyLink": "Copy draft link",
   "shareDraftDescription": "Enabling draft sharing will allow anyone with this link to view the current draft",
@@ -464,6 +470,8 @@
   "type": "Type",
   "typeWithCount": "{{ type }} ({{ count }})",
   "unableToSwitchModes": "Unable to switch modes.",
+  "uiLanguageLabel": "UI Language",
+  "uiLanguageWebsite": "Same as Website",
   "undo": "Undo",
   "undoFailed": "The operation could not be undone.",
   "undoPublish": "Undo Publish",

package/modules/@apostrophecms/i18n/index.js

@@ -4,6 +4,34 @@
 //
 // `apos.i18n.i18next` can be used to directly access the `i18next` npm module instance if necessary.
 // It usually is not necessary. Use `req.t` if you need to localize in a route.
+//
+// ## Options
+//
+// ### `locales` TODO
+//
+// ### `defaultLocale` TODO
+//
+// ### `adminLocales`
+//
+// Controls what admin UI language can be set per user. If set, `adminLocale` user field
+// will be automatically added to the user schema.
+// Contains an array of objects with `label` and `value` properties:
+// ```js
+// {
+//   label: 'English',
+//   value: 'en'
+// }
+// ```
+//
+// ### `defaultAdminLocale`
+//
+// The default admin UI language. If `adminLocales` are configured, it should
+// should match a `value` property from the list. Furthermore, it will be used
+// as the default value for the`adminLocale` user field. If it is not set,
+// but `adminLocales` is set, then the default is to display the admin UI
+// in the same language as the website content.
+// Example: `defaultLocale: 'fr'`.
+//
 
 const i18next = require('i18next');
 const fs = require('fs');
@@ -55,6 +83,12 @@ module.exports = {
     self.locales = self.getLocales();
     self.hostnamesInUse = Object.values(self.locales).find(locale => locale.hostname);
     self.defaultLocale = self.options.defaultLocale || Object.keys(self.locales)[0];
+    // Contains label/value object for each locale
+    self.adminLocales = self.options.adminLocales || [];
+    // Contains only the string value of the default admin locale (e.g. 'en').
+    // If adminLocales are configured, it should be one of them. Otherwise,
+    // it can be any valid locale string identifier.
+    self.defaultAdminLocale = self.options.defaultAdminLocale || null;
     // Lint the locale configurations
     for (const [ key, options ] of Object.entries(self.locales)) {
       if (!options) {
@@ -70,6 +104,15 @@ module.exports = {
         throw self.apos.error('invalid', `Locale prefixes must not contain more than one forward slash ("/").\nUse hyphens as separators. Check locale "${key}".`);
       }
     }
+    if (!Array.isArray(self.adminLocales)) {
+      throw self.apos.error('invalid', 'The "adminLocales" option must be an array.');
+    }
+    if (self.defaultAdminLocale && typeof self.defaultAdminLocale !== 'string') {
+      throw self.apos.error('invalid', 'The "defaultAdminLocale" option must be a string.');
+    }
+    if (self.defaultAdminLocale && self.adminLocales.length && !self.adminLocales.some(al => al.value === self.defaultAdminLocale)) {
+      throw self.apos.error('invalid', `The value of "defaultAdminLocale" "${self.defaultAdminLocale}" doesn't match any of the existing "adminLocales" values.`);
+    }
     const fallbackLng = [ self.defaultLocale ];
     // In case the default locale also has inadequate admin UI phrases
     if (fallbackLng[0] !== 'en') {
@@ -574,10 +617,13 @@ module.exports = {
         }
       },
       getBrowserData(req) {
+        const adminLocale = req.user?.adminLocale === ''
+          ? req.locale
+          : req.user?.adminLocale || self.defaultAdminLocale || req.locale;
         const i18n = {
-          [req.locale]: self.getBrowserBundles(req.locale)
+          [adminLocale]: self.getBrowserBundles(adminLocale)
         };
-        if (req.locale !== self.defaultLocale) {
+        if (adminLocale !== self.defaultLocale) {
           i18n[self.defaultLocale] = self.getBrowserBundles(self.defaultLocale);
         }
         // In case the default locale also has inadequate admin UI phrases
@@ -587,6 +633,7 @@ module.exports = {
         const result = {
           i18n,
           locale: req.locale,
+          adminLocale,
           defaultLocale: self.defaultLocale,
           defaultNamespace: self.defaultNamespace,
           locales: self.locales,

package/modules/@apostrophecms/image/ui/apos/components/AposMediaUploader.vue

@@ -7,7 +7,11 @@
     @dragenter="incrementDragover"
     @dragleave="decrementDragover"
   >
-    <div class="apos-media-uploader__inner">
+    <div
+      class="apos-media-uploader__inner"
+      tabindex="0"
+      @keydown="onUploadDragAndDropKeyDown"
+    >
       <AposCloudUploadIcon
         class="apos-media-uploader__icon"
       />
@@ -30,6 +34,7 @@
       :accept="accept"
       multiple="true"
       :disabled="disabled"
+      tabindex="-1"
     >
   </label>
 </template>
@@ -222,6 +227,16 @@ export default {
           });
         }
       }
+    },
+    // Trigger the file input click (via `this.create`) when pressing Enter or Space
+    // of the drag&drop area, which is made focusable unlike the input file.
+    onUploadDragAndDropKeyDown(e) {
+      const isEnterPressed = e.key === 'Enter' || e.code === 'Enter' || e.code === 'NumpadEnter';
+      const isSpaceBarPressed = e.keyCode === 32 || e.code === 'Space';
+
+      if (isEnterPressed || isSpaceBarPressed) {
+        this.create();
+      }
     }
   }
 };

package/modules/@apostrophecms/login/index.js

@@ -892,7 +892,11 @@ module.exports = {
               if (err) {
                 return callback(err);
               }
-              await self.emit('afterSessionLogin', req);
+              try {
+                await self.emit('afterSessionLogin', req);
+              } catch (e) {
+                return callback(e);
+              }
               // Make sure no handler removed req.user
               if (req.user) {
                 // Mark the login timestamp. Middleware takes care of ensuring

package/modules/@apostrophecms/modal/ui/apos/components/AposDocsManagerToolbar.vue

@@ -11,6 +11,7 @@
         :icon="checkboxIcon"
         @click="selectAll"
         ref="selectAll"
+        data-apos-test="selectAll"
       />
       <div
         v-for="{
@@ -25,6 +26,7 @@
         <AposButton
           v-if="!operations"
           :label="label"
+          :action="action"
           :icon="icon"
           :disabled="!checkedCount"
           :modifiers="['small']"

package/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

@@ -12,6 +12,8 @@
       aria-modal="true"
       :aria-labelledby="id"
       ref="modalEl"
+      @keydown="cycleElementsToFocus"
+      @focus.capture="storeFocusedElement"
       data-apos-modal
     >
       <transition :name="transitionType">
@@ -92,8 +94,13 @@
 // So as the modal exits, they should change in reverse. `showModal` becomes
 // `false`, then `active` is set to `false` once the modal has finished its
 // transition.
+import AposFocusMixin from 'Modules/@apostrophecms/modal/mixins/AposFocusMixin';
+
 export default {
   name: 'AposModal',
+  mixins: [
+    AposFocusMixin
+  ],
   props: {
     modal: {
       type: Object,
@@ -123,8 +130,11 @@ export default {
         return 'fade';
       }
     },
-    modalReady () {
-      return this.modal.active;
+    shouldTrapFocus() {
+      return this.modal.trapFocus || this.modal.trapFocus === undefined;
+    },
+    triggerFocusRefresh () {
+      return this.modal.triggerFocusRefresh;
     },
     hasBeenLocalized: function() {
       return Object.keys(apos.i18n.locales).length > 1;
@@ -187,12 +197,19 @@ export default {
     }
   },
   watch: {
-    modalReady (newVal) {
-      this.$nextTick(() => {
-        if (newVal && this.modal.trapFocus && this.$refs.modalEl) {
-          this.trapFocus();
-        }
-      });
+    // Simple way to re-trigger focusable elements
+    // that might have been created or removed
+    // after an update, like an XHR call to get the
+    // pieces list in the AposDocsManager modal, for instance.
+    triggerFocusRefresh (newVal) {
+      if (this.shouldTrapFocus) {
+        this.$nextTick(this.trapFocus);
+      }
+    }
+  },
+  mounted() {
+    if (this.shouldTrapFocus) {
+      this.$nextTick(this.trapFocus);
     }
   },
   methods: {
@@ -217,6 +234,7 @@ export default {
       // pop doesn't quite suffice because of race conditions when
       // closing one and opening another
       apos.modal.stack = apos.modal.stack.filter(modal => modal !== this);
+      this.focusLastModalFocusedElement();
     },
     bindEventListeners () {
       window.addEventListener('keydown', this.onKeydown);
@@ -232,47 +250,26 @@ export default {
       this.$emit('esc');
     },
     trapFocus () {
-      // Adapted from https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700
-      // All the elements inside modal which you want to make focusable.
-      const focusableElements = [
-        'button',
+      const elementSelectors = [
+        '[tabindex]',
         '[href]',
         'input',
         'select',
         'textarea',
-        '[tabindex]:not([tabindex="-1"]'
+        'button'
       ];
-      const focusableString = focusableElements.join(', ');
-      const modalEl = this.$refs.modalEl;
-      const focusables = modalEl.querySelectorAll(focusableString);
-      const firstFocusableElement = focusables[0];
-      const lastFocusableElement = focusables[focusables.length - 1];
 
-      modalEl.addEventListener('keydown', cycleFocusables);
+      const selector = elementSelectors
+        .map(addExcludingAttributes)
+        .join(', ');
 
-      firstFocusableElement.focus();
+      this.elementsToFocus = [ ...this.$refs.modalEl.querySelectorAll(selector) ]
+        .filter(this.isElementVisible);
 
-      function cycleFocusables (e) {
-        const isTabPressed = e.key === 'Tab' || e.code === 'Tab';
-        if (!isTabPressed) {
-          return;
-        }
+      this.focusElement(this.focusedElement, this.elementsToFocus[0]);
 
-        if (e.shiftKey) {
-          // If shift key pressed for shift + tab combination
-          if (document.activeElement === firstFocusableElement) {
-            // Add focus for the last focusable element
-            lastFocusableElement.focus();
-            e.preventDefault();
-          }
-        } else {
-          // If tab key is pressed
-          if (document.activeElement === lastFocusableElement) {
-            // Add focus for the first focusable element
-            firstFocusableElement.focus();
-            e.preventDefault();
-          }
-        }
+      function addExcludingAttributes(element) {
+        return `${element}:not([tabindex="-1"]):not([disabled]):not([type="hidden"]):not([aria-hidden])`;
       }
     }
   }

package/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue

@@ -95,8 +95,7 @@ export default {
         active: false,
         type: 'overlay',
         showModal: false,
-        disableHeader: true,
-        trapFocus: true
+        disableHeader: true
       },
       formValues: null
     };

package/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue

@@ -17,6 +17,7 @@
             </h2>
             <Close
               class="apos-share-draft__close"
+              tabindex="0"
               :title="$t('apostrophe:close')"
               :size="18"
               @click.prevent="close"
@@ -48,6 +49,7 @@
                   v-model="shareUrl"
                   type="text"
                   disabled
+                  tabindex="-1"
                   class="apos-share-draft__url"
                 >
                 <a
@@ -93,8 +95,7 @@ export default {
         active: false,
         type: 'overlay',
         showModal: false,
-        disableHeader: true,
-        trapFocus: true
+        disableHeader: true
       },
       shareUrl: '',
       disabled: true

package/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue

@@ -2,12 +2,14 @@
   <div class="apos-modal-tabs">
     <ul class="apos-modal-tabs__tabs">
       <li
-        class="apos-modal-tabs__tab" v-for="tab in tabs"
+        class="apos-modal-tabs__tab"
+        v-for="tab in tabs"
         :key="tab.name"
+        v-show="tab.isVisible !== false"
       >
         <button
           :id="tab.name" class="apos-modal-tabs__btn"
-          :aria-selected="tab.name === currentTab ? true : false"
+          :aria-selected="tab.name === current ? true : false"
           @click="selectTab"
         >
           {{ $t(tab.label) }}
@@ -41,9 +43,6 @@ export default {
   },
   emits: [ 'select-tab' ],
   computed: {
-    currentTab() {
-      return this.current || this.tabs[0].name;
-    },
     tabErrors() {
       const errors = {};
       for (const key in this.errors) {

package/modules/@apostrophecms/modal/ui/apos/mixins/AposFocusMixin.js

@@ -0,0 +1,91 @@
+/*
+ * Provides:
+ *
+ * Methods to handle focus with keyboard.
+ */
+export default {
+  data() {
+    return {
+      elementsToFocus: [],
+
+      // specific to modals:
+      focusedElement: null
+    };
+  },
+  methods: {
+    // Adapted from https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700
+    // All the elements inside modal which you want to make focusable.
+    //
+    // This has been adapted to Vue logic with `this.elementsToFocus` array as a data
+    // so that any elements, not only from a modal but a menu for instance, can be focusable.
+    // `cycleElementsToFocus` listeners relies on this dynamic list which has the advantage of
+    // taking new or less elements to focus, after an update has happened inside a modal,
+    // like an XHR call to get the pieces list in the AposDocsManager modal, for instance.
+    cycleElementsToFocus(e) {
+      if (!this.elementsToFocus.length) {
+        return;
+      }
+
+      const isTabPressed = e.key === 'Tab' || e.code === 'Tab';
+      if (!isTabPressed) {
+        return;
+      }
+
+      const firstElementToFocus = this.elementsToFocus.at(0);
+      const lastElementToFocus = this.elementsToFocus.at(-1);
+
+      // If shift key pressed for shift + tab combination
+      if (e.shiftKey) {
+        if (document.activeElement === firstElementToFocus) {
+          // Add focus for the last focusable element
+          lastElementToFocus.focus();
+          e.preventDefault();
+        }
+        return;
+      }
+
+      // If tab key is pressed
+      if (document.activeElement === lastElementToFocus) {
+        // Add focus for the first focusable element
+        firstElementToFocus.focus();
+        e.preventDefault();
+      }
+    },
+    // Focus the last focused element from the last modal.
+    // If it is not focusable (not visible/not in the DOM),
+    // fallbacks to the first focusable element from the last modal.
+    focusLastModalFocusedElement() {
+      const lastModal = apos.modal.stack.at(-1);
+
+      if (!lastModal) {
+        return;
+      }
+
+      const { focusedElement, elementsToFocus } = lastModal;
+
+      this.focusElement(focusedElement, elementsToFocus[0]);
+    },
+    storeFocusedElement(e) {
+      this.focusedElement = e.target;
+    },
+    // Iterate through elements given in arguments and
+    // focus the first element that exists in the DOM.
+    focusElement(...elementsToFocus) {
+      for (const element of elementsToFocus) {
+        const isAlreadySelected = document.activeElement === element;
+
+        if (!element || !this.isElementVisible(element)) {
+          continue;
+        }
+        if (!isAlreadySelected) {
+          element.focus();
+        }
+        // Element exists in the DOM and is focused, stop iterating.
+        return;
+      }
+    },
+    isElementVisible(element) {
+      return element.offsetParent !== null;
+    }
+  }
+};

package/modules/@apostrophecms/modal/ui/apos/mixins/AposModalTabsMixin.js

@@ -46,28 +46,40 @@ export default {
       const tabs = [];
       for (const key in this.groups) {
         if (key !== 'utility') {
+          // AposRelationshipEditor does not implement AposEditorMixin with the function conditionalFields
+          const conditionalFields = this.conditionalFields?.('other') || [];
+          const fields = this.groups[key].fields;
           tabs.push({
             name: key,
             label: this.groups[key].label,
-            fields: this.groups[key].fields
+            fields,
+            isVisible: fields.some(field => conditionalFields[field] !== false)
           });
         }
       }
 
       return tabs;
+    },
+    firstVisibleTabName() {
+      const { name = null } = this.tabs.find(tab => tab.isVisible === true) || this.tabs[0] || {};
+
+      return name;
     }
   },
 
   watch: {
     tabs() {
-      if ((!this.currentTab) || (!this.tabs.find(tab => tab.name === this.currentTab))) {
-        this.currentTab = this.tabs[0] && this.tabs[0].name;
+      if (
+        !this.currentTab ||
+        !this.tabs.some(tab => tab.isVisible === true && tab.name === this.currentTab)
+      ) {
+        this.currentTab = this.firstVisibleTabName;
       }
     }
   },
 
   mounted() {
-    this.currentTab = this.tabs[0] ? this.tabs[0].name : null;
+    this.currentTab = this.firstVisibleTabName;
   },
   methods: {
     switchPane(id) {

package/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue

@@ -1,8 +1,11 @@
 <template>
   <AposModal
-    :modal="modal" modal-title="apostrophe:managePages"
-    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
-    @inactive="modal.active = false" @show-modal="modal.showModal = true"
+    :modal="modal"
+    modal-title="apostrophe:managePages"
+    @esc="confirmAndCancel"
+    @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
   >
     <template #secondaryControls>
       <AposButton
@@ -99,6 +102,7 @@ export default {
       moduleName: '@apostrophecms/page',
       modal: {
         active: false,
+        triggerFocusRefresh: 0,
         type: 'slide',
         showModal: false,
         width: 'two-thirds'
@@ -221,6 +225,8 @@ export default {
     // Get the data. This will be more complex in actuality.
     this.modal.active = true;
     await this.getPages();
+    this.modal.triggerFocusRefresh++;
+
     apos.bus.$on('content-changed', this.getPages);
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);

package/modules/@apostrophecms/piece-type/index.js

@@ -179,7 +179,7 @@ module.exports = {
         label: 'apostrophe:restore',
         messages: {
           progress: 'Restoring {{ type }}...',
-          completed: 'Restoring {{ count }} {{ type }}.'
+          completed: 'Restored {{ count }} {{ type }}.'
         },
         icon: 'archive-arrow-up-icon',
         if: {

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -137,6 +137,7 @@ export default {
     return {
       modal: {
         active: false,
+        triggerFocusRefresh: 0,
         type: 'overlay',
         showModal: false
       },
@@ -230,6 +231,7 @@ export default {
     this.modal.active = true;
     await this.getPieces();
     await this.getAllPiecesTotal();
+    this.modal.triggerFocusRefresh++;
 
     apos.bus.$on('content-changed', this.getPieces);
     apos.bus.$on('command-menu-manager-create-new', this.create);

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -596,7 +596,7 @@ export default {
       const { $to } = state.selection;
       if (state.selection.empty && $to?.nodeBefore?.text) {
         const text = $to.nodeBefore.text;
-        if (text === '/') {
+        if (text.slice(-1) === '/') {
           const pos = this.editor.view.state.selection.$anchor.pos;
           // Select the slash so an insert operation can replace it
           this.editor.commands.setTextSelection({

package/modules/@apostrophecms/schema/index.js

@@ -1240,6 +1240,9 @@ module.exports = {
         if (!field.label && !field.contextual) {
           field.label = _.startCase(field.name.replace(/^_/, ''));
         }
+        if (field.hidden && field.hidden !== true && field.hidden !== false) {
+          fail(`hidden must be a boolean, "${field.hidden}" provided.`);
+        }
         if (field.if && field.if.$or && !Array.isArray(field.if.$or)) {
           fail(`$or conditional must be an array of conditions. Current $or configuration: ${JSON.stringify(field.if.$or)}`);
         }
@@ -1631,6 +1634,16 @@ module.exports = {
         } catch (error) {
           throw self.apos.error('invalid', error.message);
         }
+      },
+
+      getSlugFieldOptions(field, data) {
+        const options = {
+          def: field.def
+        };
+        if (field.page) {
+          options.allow = '/';
+        }
+        return options;
       }
     };
   },

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -162,16 +162,9 @@ module.exports = (self) => {
     // if field.page is true, expect a page slug (slashes allowed,
     // leading slash required). Otherwise, expect a object-style slug
     // (no slashes at all)
-    convert: function (req, field, data, destination) {
-      const options = {
-        def: field.def
-      };
-      if (field.page) {
-        options.allow = '/';
-      }
-      if (data.aposIsTemplate) {
-        options.allow = field.page ? [ '/', '@' ] : '@';
-      }
+    convert (req, field, data, destination) {
+      const options = self.getSlugFieldOptions(field, data);
+
       destination[field.name] = self.apos.util.slugify(self.apos.launder.string(data[field.name], field.def), options);
 
       if (field.page) {

package/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue

@@ -230,7 +230,6 @@ export default {
       aposSchema.scrollFieldIntoView(name);
     }
     this.titleFieldChoices = await this.getTitleFieldChoices();
-
   },
   methods: {
     async select(_id) {

package/modules/@apostrophecms/schema/ui/apos/components/AposInputSlug.vue

@@ -191,9 +191,7 @@ export default {
         def: ''
       };
 
-      if (this.field.aposIsTemplate) {
-        options.allow = this.field.page ? [ '/', '@' ] : '@';
-      } else if (this.field.page && !componentOnly) {
+      if (this.field.page && !componentOnly) {
         options.allow = '/';
       }
 
@@ -269,18 +267,6 @@ export default {
         // doc editor modal it will momentarily be tracked as archived but
         // without not have the archive prefix, so check that too.
         updated = this.isArchived && archivePrefix ? `${archivePrefix}${updated}` : updated;
-      } else if (this.field.aposIsTemplate) {
-        let prefix = '';
-        if (this.field.page) {
-          if (!updated.startsWith('/@')) {
-            prefix = '/@';
-          }
-        } else {
-          if (!updated.startsWith('@')) {
-            prefix = '@';
-          }
-        }
-        updated = prefix + updated;
       }
 
       return updated;