apostrophe 3.22.1 → 3.24.0

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

@@ -11,6 +11,7 @@ const _ = require('lodash');
 const { stripIndent } = require('common-tags');
 const ExpressSessionCookie = require('express-session/session/cookie');
 const path = require('path');
+const { verifyLocales } = require('../../../lib/locales');
 
 const apostropheI18nDebugPlugin = {
   type: 'postProcessor',
@@ -218,7 +219,8 @@ module.exports = {
         } else {
           locale = self.matchLocale(req);
         }
-        const localeOptions = self.locales[locale];
+        const locales = self.filterPrivateLocales(req, self.locales);
+        const localeOptions = locales[locale];
         if (localeOptions.prefix) {
           // Remove locale prefix so URL parsing can proceed normally from here
           if (req.path === localeOptions.prefix) {
@@ -464,8 +466,9 @@ module.exports = {
       // possible the default locale is returned.
       matchLocale(req) {
         const hostname = req.hostname;
+        const locales = self.filterPrivateLocales(req, self.locales);
         let best = false;
-        for (const [ name, options ] of Object.entries(self.locales)) {
+        for (const [ name, options ] of Object.entries(locales)) {
           const matchedHostname = options.hostname
             ? (hostname === options.hostname.split(':')[0]) : null;
           const matchedPrefix = options.prefix
@@ -568,34 +571,7 @@ module.exports = {
             label: 'English'
           }
         };
-        const taken = {};
-        let hostnamesCount = 0;
-        for (const [ name, options ] of Object.entries(locales)) {
-          const key = (options.hostname || '__none') + ':' + (options.prefix || '__none');
-          hostnamesCount += (options.hostname ? 1 : 0);
-          if (taken[key]) {
-            throw new Error(stripIndent`
-              @apostrophecms/i18n: the locale ${name} cannot be distinguished from
-              earlier locales. Make sure it is uniquely distinguished by its hostname
-              option, prefix option or a combination of the two. One locale per site
-              may be a default with neither hostname nor prefix, and one locale per
-              hostname may be a default for that hostname without a prefix.
-            `);
-          }
-          taken[key] = true;
-        }
-        if ((hostnamesCount > 0) && (hostnamesCount < Object.keys(locales).length) && (!self.apos.options.baseUrl)) {
-          throw new Error(stripIndent`
-            If some of your locales have hostnames, then they all must have
-            hostnames, or your top-level baseUrl option must be set.
-
-            In development, you can set baseUrl to http://localhost:3000
-            for testing purposes. In production it should always be set
-            to a real base URL for the site.
-          `);
-        }
-        // Make sure they are adequately distinguished by
-        // hostname and prefix
+        verifyLocales(locales, self.apos.options.baseUrl);
         return locales;
       },
       sanitizeLocaleName(locale) {
@@ -656,6 +632,16 @@ module.exports = {
           }
           return res.redirect(corresponding._url);
         };
+      },
+      // Exclude private locales when logged out
+      filterPrivateLocales(req, locales) {
+        return req.user
+          ? locales
+          : Object.fromEntries(
+            Object
+              .entries(locales)
+              .filter(([ name, options ]) => options.private !== true)
+          );
       }
     };
   }

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

@@ -90,7 +90,9 @@
         >
           <AposMediaManagerEditor
             v-show="editing"
-            :media="editing" :selected="selected"
+            :media="editing"
+            :selected="selected"
+            :is-modified="isModified"
             :module-labels="moduleLabels"
             @back="updateEditing(null)" @saved="updateMedia"
             @modified="editorModified"

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

@@ -100,6 +100,7 @@
 <script>
 import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
 import AposAdvisoryLockMixin from 'Modules/@apostrophecms/ui/mixins/AposAdvisoryLockMixin';
+import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
 import { klona } from 'klona';
 import dayjs from 'dayjs';
@@ -110,7 +111,7 @@ import cuid from 'cuid';
 dayjs.extend(advancedFormat);
 
 export default {
-  mixins: [ AposEditorMixin, AposAdvisoryLockMixin ],
+  mixins: [ AposEditorMixin, AposAdvisoryLockMixin, AposModifiedMixin ],
   props: {
     media: {
       type: Object,
@@ -124,6 +125,10 @@ export default {
         return [];
       }
     },
+    isModified: {
+      type: Boolean,
+      default: false
+    },
     moduleLabels: {
       type: Object,
       default() {
@@ -152,11 +157,20 @@ export default {
     moduleOptions() {
       return window.apos.modules[this.activeMedia.type] || {};
     },
+    canLocalize() {
+      return (Object.keys(apos.i18n.locales).length > 1) && this.moduleOptions.localized && this.activeMedia._id;
+    },
     moreMenu() {
       const menu = [ {
         label: 'apostrophe:discardChanges',
         action: 'cancel'
       } ];
+      if (this.canLocalize) {
+        menu.push({
+          label: 'apostrophe:localize',
+          action: 'localize'
+        });
+      }
       if (this.activeMedia._id && !this.restoreOnly) {
         menu.push({
           label: 'apostrophe:archiveImage',
@@ -330,7 +344,7 @@ export default {
       this.$emit('back');
     },
     lockNotAvailable() {
-      this.isModified = false;
+      this.$emit('modified', false);
       this.cancel();
     },
     updateActiveAttachment(attachment) {
@@ -338,6 +352,27 @@ export default {
     },
     viewMedia () {
       window.open(this.activeMedia.attachment._urls.original, '_blank');
+    },
+    async localize(media) {
+      // If there are changes warn the user before discarding them before
+      // the localize operation
+      if (this.isModified) {
+        if (!await this.confirmAndCancel()) {
+          return;
+        }
+
+        await this.cancel();
+        this.updateActiveDoc(this.activeMedia);
+      }
+      apos.bus.$emit('admin-menu-click', {
+        itemName: '@apostrophecms/i18n:localize',
+        props: {
+          doc: this.activeMedia
+        }
+      });
+    },
+    async close() {
+      await this.cancel();
     }
   }
 };

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

@@ -806,6 +806,16 @@ module.exports = {
           return (req, res, next) => req.user ? next() : passportSession(req, res, next);
         })()
       },
+      removeUserForDraftSharing: {
+        before: '@apostrophecms/i18n',
+        middleware(req, res, next) {
+          // Remove user to hide the admin UI, in order to simulate a logged-out page view
+          if (self.isShareDraftRequest(req)) {
+            delete req.user;
+          }
+          return next();
+        }
+      },
       honorLoginInvalidBefore: {
         before: '@apostrophecms/i18n',
         middleware(req, res, next) {

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

@@ -0,0 +1,323 @@
+<template>
+  <AposModal
+    :modal="modal"
+    class="apos-share-draft"
+    data-apos-test="share-draft-modal"
+    v-on="{ esc: close }"
+    @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+  >
+    <template #main>
+      <AposModalBody>
+        <template #bodyMain>
+          <div class="apos-share-draft__header">
+            <h2 class="apos-share-draft__heading">
+              {{ $t('apostrophe:shareDraftHeader') }}
+            </h2>
+            <Close
+              class="apos-share-draft__close"
+              :title="$t('apostrophe:close')"
+              :size="18"
+              @click.prevent="close"
+            />
+          </div>
+          <div class="apos-share-draft__content">
+            <div class="apos-share-draft__toggle-wrapper">
+              <AposToggle
+                v-model="disabled"
+                class="apos-share-draft__toggle"
+                @toggle="toggle"
+              />
+              <p class="apos-share-draft__toggle-label">
+                {{ $t('apostrophe:shareDraftEnable') }}
+              </p>
+            </div>
+            <p class="apos-share-draft__description">
+              {{ $t('apostrophe:shareDraftDescription') }}
+            </p>
+            <transition
+              name="collapse"
+              :duration="200"
+            >
+              <div
+                class="apos-share-draft__url-block"
+                v-show="!disabled"
+              >
+                <input
+                  v-model="shareUrl"
+                  type="text"
+                  disabled
+                  class="apos-share-draft__url"
+                >
+                <a
+                  href=""
+                  class="apos-share-draft__link-copy"
+                  @click.prevent="copy"
+                >
+                  <LinkVariant
+                    class="apos-share-draft__link-icon"
+                    :title="$t('apostrophe:shareDraftCopyLink')"
+                    :size="16"
+                  />
+                  &nbsp;{{ $t('apostrophe:shareDraftCopyLink') }}
+                </a>
+              </div>
+            </transition>
+          </div>
+        </template>
+      </AposModalBody>
+    </template>
+  </AposModal>
+</template>
+
+<script>
+import Close from 'vue-material-design-icons/Close.vue';
+import LinkVariant from 'vue-material-design-icons/LinkVariant.vue';
+
+export default {
+  components: {
+    Close,
+    LinkVariant
+  },
+  props: {
+    doc: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: [ 'safe-close' ],
+  data() {
+    return {
+      modal: {
+        active: false,
+        type: 'overlay',
+        showModal: false,
+        disableHeader: true,
+        trapFocus: true
+      },
+      shareUrl: '',
+      disabled: true
+    };
+  },
+  async mounted() {
+    this.modal.active = true;
+    await this.checkUrlProp();
+    await this.getAposShareKey();
+  },
+  methods: {
+    async copy() {
+      await navigator.clipboard.writeText(this.shareUrl);
+    },
+    async toggle() {
+      this.disabled = !this.disabled;
+
+      await this.setShareUrl();
+    },
+    async setShareUrl() {
+      try {
+        const { aposShareKey } = await apos.http.post(
+          `${apos.modules[this.doc.type].action}/${this.doc._id}/share`, {
+            busy: true,
+            body: {
+              share: !this.disabled
+            },
+            draft: true
+          }
+        );
+
+        if (this.disabled) {
+          setTimeout(() => {
+            this.shareUrl = '';
+          }, 200);
+          return;
+        }
+
+        if (!aposShareKey) {
+          return this.showError();
+        }
+
+        this.shareUrl = this.generateShareUrl(aposShareKey);
+      } catch {
+        if (this.disabled) {
+          this.shareUrl = '';
+          return;
+        }
+        await this.showError();
+      }
+    },
+    close() {
+      this.modal.showModal = false;
+    },
+    async checkUrlProp() {
+      if (!this.doc._url) {
+        await this.showError();
+      }
+    },
+    async getAposShareKey() {
+      try {
+        const { aposShareKey } = await apos.http.get(
+          `${apos.modules[this.doc.type].action}/${this.doc._id}`, {}
+        );
+
+        if (aposShareKey) {
+          this.disabled = false;
+          this.shareUrl = this.generateShareUrl(aposShareKey);
+        }
+      } catch {
+        await this.showError();
+      }
+    },
+    async showError() {
+      await apos.notify('apostrophe:shareDraftError', {
+        type: 'danger',
+        icon: 'alert-circle-icon',
+        dismiss: true
+      });
+    },
+    generateShareUrl(aposShareKey) {
+      const regex = /^https?:\/\//;
+      const docUrl = regex.test(this.doc._url)
+        ? this.doc._url
+        : `${location.origin}${this.doc._url}`;
+
+      const url = new URL(docUrl);
+
+      const urlInfo = {
+        url: url.href
+      };
+
+      apos.bus.$emit('shared-draft-link', urlInfo);
+
+      return apos.http.addQueryToUrl(urlInfo.url, {
+        ...(url.search ? apos.http.parseQuery(url.search) : {}),
+        aposShareKey,
+        aposShareId: this.doc._id
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apos-share-draft {
+  z-index: $z-index-modal;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+::v-deep .apos-modal__inner {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  max-width: 700px;
+  height: auto;
+  border-radius: 15px;
+}
+
+::v-deep .apos-modal__overlay {
+  .apos-modal + .apos-share-draft & {
+    display: block;
+  }
+}
+
+::v-deep .apos-modal__body {
+  padding: 20px;
+}
+
+::v-deep .apos-modal__body-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.apos-share-draft__header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: 1px solid var(--a-base-8);
+  padding: 0 20px 20px;
+}
+
+.apos-share-draft__heading {
+  @include type-title;
+  line-height: var(--a-line-tall);
+  margin: 0;
+}
+
+.apos-share-draft__close {
+  height: 18px;
+  align-self: center;
+  cursor: pointer;
+}
+
+.apos-share-draft__content {
+  margin-top: $spacing-double;
+}
+
+.apos-share-draft__toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.apos-share-draft__toggle {
+  margin-right: 12px;
+}
+
+.apos-share-draft__toggle-label {
+  @include type-base;
+  max-width: 370px;
+  line-height: var(--a-line-tallest);
+  margin: 0;
+}
+
+.apos-share-draft__description {
+  @include type-small;
+  line-height: var(--a-line-tall);
+  max-width: 355px;
+  color: var(--a-base-2);
+}
+
+.apos-share-draft__url-block {
+  overflow: hidden;
+  height: 63px;
+  transition: height 200ms linear;
+
+  &.collapse-enter,
+  &.collapse-leave-to {
+    height: 0;
+  }
+}
+
+.apos-share-draft__url {
+  @include type-base;
+  width: 100%;
+  padding: 5px;
+  border-radius: 5px;
+  background-color: var(--a-base-9);
+  border: 1px solid var(--a-base-8);
+  box-sizing: border-box;
+}
+
+.apos-share-draft__link-icon {
+  height: 16px;
+}
+
+.apos-share-draft__link-copy {
+  @include type-base;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: $spacing-double;
+  text-decoration: none;
+  color: var(--a-primary);
+  font-weight: var(--a-weight-bold);;
+}
+</style>

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

@@ -0,0 +1,79 @@
+import cuid from 'cuid';
+
+export default {
+  data: () => ({
+    fieldErrors: {},
+    errorCount: 0
+
+  }),
+  mounted () {
+    this.prepErrors();
+  },
+  computed: {
+    errorTooltip() {
+      return this.errorCount
+        ? {
+          key: 'apostrophe:errorCount',
+          count: this.errorCount
+        } : null;
+    }
+  },
+  methods: {
+    updateFieldErrors(fieldState) {
+      this.tabKey = cuid();
+      for (const key in this.groups) {
+        this.groups[key].fields.forEach(field => {
+          if (fieldState[field]) {
+            this.fieldErrors[key][field] = fieldState[field].error;
+          }
+        });
+      }
+      this.updateErrorCount();
+    },
+    updateErrorCount() {
+      let count = 0;
+      for (const key in this.fieldErrors) {
+        for (const errKey in this.fieldErrors[key]) {
+          if (this.fieldErrors[key][errKey]) {
+            count++;
+          }
+        }
+      }
+      this.errorCount = count;
+    },
+    prepErrors() {
+      this.fieldErrors = Object.keys(this.groups).reduce((acc, name) => {
+        return {
+          ...acc,
+          [name]: {}
+        };
+      }, {});
+    },
+    focusNextError() {
+      let field;
+      for (const key in this.fieldErrors) {
+        for (const errKey in this.fieldErrors[key]) {
+          if (this.fieldErrors[key][errKey] && !field) {
+            field = this.schema.filter(item => {
+              return item.name === errKey;
+            })[0];
+
+            if (field.group.name !== 'utility') {
+              this.switchPane(field.group.name);
+            }
+
+            this.getAposSchema(field).scrollFieldIntoView(field.name);
+          }
+        }
+      }
+    },
+
+    getAposSchema(field) {
+      if (field.group.name === 'utility') {
+        return this.$refs.utilitySchema;
+      } else {
+        return this.$refs[field.group.name][0];
+      }
+    }
+  }
+};

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

@@ -73,7 +73,8 @@ export default {
     getFieldsByCategory(followedByCategory) {
       if (followedByCategory) {
         return (followedByCategory === 'other')
-          ? this.schema.filter(field => !this.utilityFields.includes(field.name)) : this.schema.filter(field => this.utilityFields.includes(field.name));
+          ? this.schema.filter(field => !this.utilityFields.includes(field.name))
+          : this.schema.filter(field => this.utilityFields.includes(field.name));
       } else {
         return this.schema;
       }

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

@@ -1,12 +1,70 @@
+import cuid from 'cuid';
+
 // Provide basic bridging functionality between tabs
 // and the modal body.
 
 export default {
   data() {
     return {
+      tabKey: cuid(),
       currentTab: null
     };
   },
+  computed: {
+    groups() {
+      const groupSet = {};
+
+      this.schema.forEach(field => {
+        if (
+          this.filterOutParkedFields &&
+          !this.filterOutParkedFields([ field.name ]).length
+        ) {
+          return;
+        }
+        if (field.group && !groupSet[field.group.name]) {
+          groupSet[field.group.name] = {
+            label: field.group.label,
+            fields: [ field.name ],
+            schema: [ field ]
+          };
+        } else if (field.group) {
+          groupSet[field.group.name].fields.push(field.name);
+          groupSet[field.group.name].schema.push(field);
+        }
+      });
+      if (!groupSet.utility) {
+        groupSet.utility = {
+          label: 'apostrophe:utility',
+          fields: [],
+          schema: []
+        };
+      }
+
+      return groupSet;
+    },
+    tabs() {
+      const tabs = [];
+      for (const key in this.groups) {
+        if (key !== 'utility') {
+          tabs.push({
+            name: key,
+            label: this.groups[key].label
+          });
+        }
+      };
+
+      return tabs;
+    }
+  },
+
+  watch: {
+    tabs() {
+      if ((!this.currentTab) || (!this.tabs.find(tab => tab.name === this.currentTab))) {
+        this.currentTab = this.tabs[0] && this.tabs[0].name;
+      }
+    }
+  },
+
   mounted() {
     this.currentTab = this.tabs[0] ? this.tabs[0].name : null;
   },

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

@@ -746,6 +746,17 @@ module.exports = {
         }
       },
 
+      isShareDraftRequest(req) {
+        const { aposShareId, aposShareKey } = req.query;
+
+        return (
+          typeof aposShareId === 'string' &&
+          aposShareId.length &&
+          typeof aposShareKey === 'string' &&
+          aposShareKey.length
+        );
+      },
+
       // Merge in the event emitter / responder capabilities
       ...require('./lib/events.js')(self)
     };