apostrophe 3.48.0 → 3.50.0

package/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue

@@ -58,108 +58,11 @@
 </template>
 
 <script>
-import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
-
-const STAGES = [
-  'login',
-  'forgotPassword',
-  'resetPassword'
-];
+import TheAposLoginLogic from 'Modules/@apostrophecms/login/logic/TheAposLogin';
 
 export default {
   name: 'TheAposLogin',
-  mixins: [ AposThemeMixin ],
-  data() {
-    return {
-      stage: STAGES[0],
-      mounted: false,
-      beforeCreateFinished: false,
-      error: '',
-      passwordResetData: {},
-      context: {}
-    };
-  },
-  computed: {
-    loaded() {
-      return this.mounted && this.beforeCreateFinished;
-    },
-    showNav() {
-      return this.stage !== STAGES[0];
-    },
-    homeUrl() {
-      return `${apos.prefix}/`;
-    }
-  },
-  // We need it here and not in the login form because the version used in the footer.
-  // The context will be passed to every form, might be a good thing in the future.
-  async beforeCreate() {
-    const stateChange = parseInt(window.sessionStorage.getItem('aposStateChange'));
-    const seen = JSON.parse(window.sessionStorage.getItem('aposStateChangeSeen') || '{}');
-    if (!seen[window.location.href]) {
-      const lastModified = Date.parse(document.lastModified);
-      if (stateChange && lastModified && (lastModified < stateChange)) {
-        seen[window.location.href] = true;
-        window.sessionStorage.setItem('aposStateChangeSeen', JSON.stringify(seen));
-        location.reload();
-        return;
-      }
-    }
-    try {
-      this.context = await apos.http.post(`${apos.login.action}/context`, {
-        busy: true
-      });
-    } catch (e) {
-      this.context = {};
-      this.error = e.message || 'apostrophe:loginErrorGeneric';
-    } finally {
-      this.beforeCreateFinished = true;
-    }
-  },
-  created() {
-    const url = new URL(document.location);
-    const data = {
-      email: url.searchParams.get('email'),
-      reset: url.searchParams.get('reset')
-    };
-    if (data.email && data.reset) {
-      this.passwordResetData = data;
-      this.setStage('resetPassword');
-    }
-  },
-  mounted() {
-    this.mounted = true;
-  },
-  methods: {
-    setStage(name) {
-      // 1. Enabled status per stage. A bit cryptic but effective.
-      // Search for a method composed of the `name` + `Enabled`
-      // (e.g. `forgotPasswordEnabled` and execute it (should return boolean).
-      // If no method is found it is enabled. Fallback to the default stage.
-      const enabled = this[`${name}Enabled`]?.() ?? true;
-      if (!enabled) {
-        this.stage = STAGES[0];
-        return;
-      }
-      // 2. Set it only if it's a known stage
-      if (STAGES.includes(name)) {
-        this.stage = name;
-        return;
-      }
-      // 3. Fallback to the default stage
-      this.stage = STAGES[0];
-    },
-    forgotPasswordEnabled() {
-      return apos.login.passwordResetEnabled;
-    },
-    resetPasswordEnabled() {
-      return apos.login.passwordResetEnabled;
-    },
-    onRedirect(loc) {
-      window.sessionStorage.setItem('aposStateChange', Date.now());
-      window.sessionStorage.setItem('aposStateChangeSeen', '{}');
-      location.assign(loc);
-    }
-  }
+  mixins: [ TheAposLoginLogic ]
 };
 </script>
 

package/modules/@apostrophecms/login/ui/apos/logic/AposForgotPasswordForm.js

@@ -0,0 +1,68 @@
+// This is the business logic of the AposForgotPasswordForm Vue component.
+// It is in a separate file so that you can override the component's templates
+// and styles just by copying the .vue file to your project, and leave the business logic
+// unchanged.
+
+import AposLoginFormMixin from 'Modules/@apostrophecms/login/mixins/AposLoginFormMixin';
+
+export default {
+  mixins: [ AposLoginFormMixin ],
+  emits: [ 'set-stage' ],
+  data() {
+    return {
+      busy: false,
+      done: false,
+      schema: [
+        {
+          name: 'email',
+          label: 'apostrophe:email',
+          placeholder: 'apostrophe:loginEnterEmail',
+          type: 'string',
+          required: true
+        }
+      ]
+    };
+  },
+  computed: {
+    disabled() {
+      return this.doc.hasErrors;
+    },
+    help() {
+      if (this.done) {
+        return this.$t('apostrophe:loginResetRequestDone', {
+          email: this.doc.data.email
+        });
+      }
+      return this.$t('apostrophe:loginResetPasswordRequest');
+    }
+  },
+  created() {
+    if (!this.passwordResetEnabled) {
+      this.$emit('set-stage', 'login');
+    }
+  },
+  methods: {
+    async submit() {
+      if (this.busy) {
+        return;
+      }
+      this.busy = true;
+      this.error = '';
+
+      await this.requestReset();
+    },
+    async requestReset() {
+      try {
+        await apos.http.post(`${apos.login.action}/reset-request`, {
+          busy: true,
+          body: { ...this.doc.data }
+        });
+        this.done = true;
+      } catch (e) {
+        this.error = e.message || 'apostrophe:loginErrorGeneric';
+      } finally {
+        this.busy = false;
+      }
+    }
+  }
+};

package/modules/@apostrophecms/login/ui/apos/logic/AposLoginForm.js

@@ -0,0 +1,239 @@
+// This is the business logic of the AposLoginForm Vue component.
+// It is in a separate file so that you can override the component's templates
+// and styles just by copying the .vue file to your project, and leave the business logic
+// unchanged.
+
+import AposLoginFormMixin from 'Modules/@apostrophecms/login/mixins/AposLoginFormMixin';
+
+export default {
+  mixins: [ AposLoginFormMixin ],
+  emits: [ 'redirect', 'set-stage' ],
+  data() {
+    return {
+      phase: 'beforeSubmit',
+      busy: false,
+      schema: [
+        {
+          name: 'username',
+          label: 'Username',
+          placeholder: 'Enter username',
+          type: 'string',
+          required: true
+        },
+        {
+          name: 'password',
+          label: 'Password',
+          placeholder: 'Enter password',
+          type: 'password',
+          required: true
+        }
+      ],
+      requirements: getRequirements(),
+      requirementProps: {},
+      fetchingRequirementProps: false
+    };
+  },
+  computed: {
+    disabled() {
+      return this.doc.hasErrors ||
+        !!this.beforeSubmitRequirements.find(requirement => !requirement.done);
+    },
+    beforeSubmitRequirements() {
+      return this.requirements.filter(requirement => requirement.phase === 'beforeSubmit');
+    },
+    // The currently active requirement expecting a solo presentation.
+    // Currently it only concerns `afterPasswordVerified` requirements.
+    // beforeSubmit requirements are not presented solo.
+    activeSoloRequirement() {
+      return (this.phase === 'afterPasswordVerified') &&
+        this.requirements.find(requirement =>
+          (requirement.phase === 'afterPasswordVerified') && !requirement.done
+        );
+    }
+  },
+  watch: {
+    context(newVal) {
+      this.requirementProps = newVal.requirementProps;
+    },
+    async activeSoloRequirement(newVal) {
+      if (
+        (this.phase === 'afterPasswordVerified') &&
+        (newVal?.phase === 'afterPasswordVerified') &&
+        newVal.propsRequired &&
+        !(newVal.success || newVal.error)
+      ) {
+        try {
+          this.fetchingRequirementProps = true;
+          const data = await apos.http.post(`${apos.login.action}/requirement-props`, {
+            busy: true,
+            body: {
+              name: newVal.name,
+              incompleteToken: this.incompleteToken
+            }
+          });
+          this.requirementProps = {
+            ...this.requirementProps,
+            [newVal.name]: data
+          };
+        } catch (e) {
+          this.error = e.message || 'apostrophe:loginErrorGeneric';
+        } finally {
+          this.fetchingRequirementProps = false;
+        }
+      } else {
+        return null;
+      }
+    }
+  },
+  created() {
+    this.requirementProps = this.context.requirementProps;
+  },
+  methods: {
+    async submit() {
+      if (this.busy) {
+        return;
+      }
+      this.busy = true;
+      this.error = '';
+
+      await this.invokeInitialLoginApi();
+    },
+    async invokeInitialLoginApi() {
+      try {
+        const response = await apos.http.post(`${apos.login.action}/login`, {
+          busy: true,
+          body: {
+            ...this.doc.data,
+            requirements: this.getInitialSubmitRequirementsData(),
+            session: true
+          }
+        });
+        if (response && response.incompleteToken) {
+          this.incompleteToken = response.incompleteToken;
+          this.phase = 'afterPasswordVerified';
+        } else {
+          this.redirectAfterLogin();
+        }
+      } catch (e) {
+        this.error = e.message || 'An error occurred. Please try again.';
+        this.phase = 'beforeSubmit';
+      } finally {
+        this.busy = false;
+      }
+    },
+    getInitialSubmitRequirementsData() {
+      return Object.fromEntries(this.requirements
+        .filter(r => r.phase !== 'afterPasswordVerified' || !r.done)
+        .map(r => ([
+          r.name,
+          r.value
+        ])));
+    },
+    async invokeFinalLoginApi() {
+      try {
+        await apos.http.post(`${apos.login.action}/login`, {
+          busy: true,
+          body: {
+            ...this.doc.data,
+            incompleteToken: this.incompleteToken,
+            requirements: this.getFinalSubmitRequirementsData(),
+            session: true
+          }
+        });
+        this.redirectAfterLogin();
+      } catch (e) {
+        this.error = e.message || 'An error occurred. Please try again.';
+        this.phase = 'beforeSubmit';
+      } finally {
+        this.busy = false;
+      }
+    },
+    getFinalSubmitRequirementsData() {
+      return Object.fromEntries(this.requirements.filter(r => r.phase === 'afterPasswordVerified').map(r => ([
+        r.name,
+        r.value
+      ])));
+    },
+    redirectAfterLogin() {
+      // TODO handle situation where user should be sent somewhere other than homepage.
+      // Redisplay homepage with editing interface
+      this.$emit('redirect', `${apos.prefix}/`);
+    },
+    async requirementBlock(requirementBlock) {
+      const requirement = this.requirements
+        .find(requirement => requirement.name === requirementBlock.name);
+      requirement.done = false;
+      requirement.value = undefined;
+    },
+    async requirementDone(requirementDone, value) {
+      const requirement = this.requirements
+        .find(requirement => requirement.name === requirementDone.name);
+
+      if (requirement.phase === 'beforeSubmit') {
+        requirement.done = true;
+        requirement.value = value;
+        return;
+      }
+
+      requirement.error = null;
+
+      try {
+        await apos.http.post(`${apos.login.action}/requirement-verify`, {
+          busy: true,
+          body: {
+            name: requirement.name,
+            value,
+            incompleteToken: this.incompleteToken
+          }
+        });
+
+        requirement.success = true;
+      } catch (err) {
+        requirement.error = err;
+      }
+
+      // Avoids the need for a deep watch
+      this.requirements = [ ...this.requirements ];
+
+      if (requirement.success && !requirement.askForConfirmation) {
+        requirement.done = true;
+
+        if (!this.activeSoloRequirement) {
+          await this.invokeFinalLoginApi();
+        }
+      }
+    },
+
+    async requirementConfirmed (requirementConfirmed) {
+      const requirement = this.requirements
+        .find(requirement => requirement.name === requirementConfirmed.name);
+
+      requirement.done = true;
+
+      if (!this.activeSoloRequirement) {
+        await this.invokeFinalLoginApi();
+      }
+    },
+    getRequirementProps(name) {
+      return this.requirementProps[name] || {};
+    }
+  }
+};
+
+function getRequirements() {
+  const requirements = Object.entries(apos.login.requirements).map(([ name, requirement ]) => {
+    return {
+      name,
+      component: requirement.component || name,
+      ...requirement,
+      done: false,
+      value: null,
+      success: null,
+      error: null
+    };
+  });
+  return [
+    ...requirements.filter(r => r.phase === 'beforeSubmit'),
+    ...requirements.filter(r => r.phase === 'afterPasswordVerified')
+  ];
+}

package/modules/@apostrophecms/login/ui/apos/logic/AposResetPasswordForm.js

@@ -0,0 +1,105 @@
+// This is the business logic of the AposResetPasswordForm Vue component.
+// It is in a separate file so that you can override the component's templates
+// and styles just by copying the .vue file to your project, and leave the business logic
+// unchanged.
+
+import AposLoginFormMixin from 'Modules/@apostrophecms/login/mixins/AposLoginFormMixin';
+
+export default {
+  name: 'AposResetPasswordForm',
+  mixins: [ AposLoginFormMixin ],
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  emits: [ 'set-stage' ],
+  data() {
+    return {
+      ready: false,
+      busy: false,
+      valid: true,
+      done: false,
+      contextErrorReceived: false,
+      schema: [
+        {
+          name: 'password',
+          label: 'apostrophe:newPassword',
+          type: 'password',
+          required: true
+        }
+      ]
+    };
+  },
+  computed: {
+    disabled() {
+      return this.doc.hasErrors;
+    },
+    help() {
+      if (!this.valid) {
+        return '';
+      }
+      if (this.done) {
+        return this.error ? '' : this.$t('apostrophe:loginResetDone');
+      }
+      return this.$t('apostrophe:loginResetInfo', {
+        email: this.data.email
+      });
+    }
+  },
+  async created() {
+    if (!this.passwordResetEnabled) {
+      this.$emit('set-stage', 'login');
+      return;
+    }
+    this.busy = true;
+    await this.verify();
+    this.ready = true;
+  },
+
+  methods: {
+    async submit() {
+      if (this.busy) {
+        return;
+      }
+      this.busy = true;
+      this.error = '';
+
+      await this.reset();
+    },
+    async verify() {
+      try {
+        await apos.http.get(`${apos.login.action}/reset`, {
+          busy: true,
+          qs: { ...this.data }
+        });
+        this.valid = true;
+      } catch (e) {
+        this.valid = false;
+        this.done = true;
+        this.error = e.message || 'apostrophe:loginErrorGeneric';
+      } finally {
+        this.busy = false;
+      }
+    },
+    async reset() {
+      try {
+        await apos.http.post(`${apos.login.action}/reset`, {
+          busy: true,
+          body: {
+            ...this.data,
+            ...this.doc.data
+          }
+        });
+        this.done = true;
+      } catch (e) {
+        this.error = e.message || 'apostrophe:loginErrorGeneric';
+      } finally {
+        this.busy = false;
+      }
+    }
+  }
+};

package/modules/@apostrophecms/login/ui/apos/logic/TheAposLogin.js

@@ -0,0 +1,107 @@
+// This is the business logic of the TheAposLogin Vue component.
+// It is in a separate file so that you can override the component's templates
+// and styles just by copying the .vue file to your project, and leave the business logic
+// unchanged.
+
+import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
+
+const STAGES = [
+  'login',
+  'forgotPassword',
+  'resetPassword'
+];
+
+export default {
+  mixins: [ AposThemeMixin ],
+  data() {
+    return {
+      stage: STAGES[0],
+      mounted: false,
+      beforeCreateFinished: false,
+      error: '',
+      passwordResetData: {},
+      context: {}
+    };
+  },
+  computed: {
+    loaded() {
+      return this.mounted && this.beforeCreateFinished;
+    },
+    showNav() {
+      return this.stage !== STAGES[0];
+    },
+    homeUrl() {
+      return `${apos.prefix}/`;
+    }
+  },
+  // We need it here and not in the login form because the version used in the footer.
+  // The context will be passed to every form, might be a good thing in the future.
+  async beforeCreate() {
+    const stateChange = parseInt(window.sessionStorage.getItem('aposStateChange'));
+    const seen = JSON.parse(window.sessionStorage.getItem('aposStateChangeSeen') || '{}');
+    if (!seen[window.location.href]) {
+      const lastModified = Date.parse(document.lastModified);
+      if (stateChange && lastModified && (lastModified < stateChange)) {
+        seen[window.location.href] = true;
+        window.sessionStorage.setItem('aposStateChangeSeen', JSON.stringify(seen));
+        location.reload();
+        return;
+      }
+    }
+    try {
+      this.context = await apos.http.post(`${apos.login.action}/context`, {
+        busy: true
+      });
+    } catch (e) {
+      this.context = {};
+      this.error = e.message || 'apostrophe:loginErrorGeneric';
+    } finally {
+      this.beforeCreateFinished = true;
+    }
+  },
+  created() {
+    const url = new URL(document.location);
+    const data = {
+      email: url.searchParams.get('email'),
+      reset: url.searchParams.get('reset')
+    };
+    if (data.email && data.reset) {
+      this.passwordResetData = data;
+      this.setStage('resetPassword');
+    }
+  },
+  mounted() {
+    this.mounted = true;
+  },
+  methods: {
+    setStage(name) {
+      // 1. Enabled status per stage. A bit cryptic but effective.
+      // Search for a method composed of the `name` + `Enabled`
+      // (e.g. `forgotPasswordEnabled` and execute it (should return boolean).
+      // If no method is found it is enabled. Fallback to the default stage.
+      const enabled = this[`${name}Enabled`]?.() ?? true;
+      if (!enabled) {
+        this.stage = STAGES[0];
+        return;
+      }
+      // 2. Set it only if it's a known stage
+      if (STAGES.includes(name)) {
+        this.stage = name;
+        return;
+      }
+      // 3. Fallback to the default stage
+      this.stage = STAGES[0];
+    },
+    forgotPasswordEnabled() {
+      return apos.login.passwordResetEnabled;
+    },
+    resetPasswordEnabled() {
+      return apos.login.passwordResetEnabled;
+    },
+    onRedirect(loc) {
+      window.sessionStorage.setItem('aposStateChange', Date.now());
+      window.sessionStorage.setItem('aposStateChangeSeen', '{}');
+      location.assign(loc);
+    }
+  }
+};

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

@@ -5,6 +5,7 @@
         v-if="canSelectAll"
         label="apostrophe:select"
         type="outline"
+        :modifiers="['small']"
         text-color="var(--a-base-1)"
         :icon-only="true"
         :icon="checkboxIcon"
@@ -24,9 +25,9 @@
         <AposButton
           v-if="!operations"
           :label="label"
-          :icon-only="true"
           :icon="icon"
           :disabled="!checkedCount"
+          :modifiers="['small']"
           type="outline"
           @click="confirmOperation({ action, label, ...rest })"
         />
@@ -302,7 +303,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .apos-manager-toolbar ::v-deep .apos-field--search {
-    width: 250px;
+  .apos-manager-toolbar ::v-deep {
+    .apos-field--search {
+      width: 250px;
+    }
+    .apos-input {
+      height: 32px;
+    }
   }
 </style>

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

@@ -45,5 +45,6 @@ export default {
 
   .apos-toolbar__group {
     display: flex;
+    align-items: center;
   }
 </style>