apostrophe 3.11.0 → 3.14.0

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

@@ -6,29 +6,32 @@
       :class="themeClass"
     >
       <div class="apos-login__wrapper">
-        <transition name="fade-body">
-          <div class="apos-login__upper" v-show="loaded">
-            <div class="apos-login__header">
-              <label
-                class="apos-login__project apos-login__project-env"
-                :class="[`apos-login__project-env--${context.env}`]"
-              >
-                {{ context.env }}
-              </label>
-              <label class="apos-login__project apos-login__project-name">
-                {{ context.name }}
-              </label>
-              <label class="apos-login--error">
-                {{ error }}
-              </label>
-            </div>
+        <transition name="fade-body" mode="out-in">
+          <div
+            key="1"
+            class="apos-login__upper"
+            v-if="loaded && phase === 'beforeSubmit'"
+          >
+            <TheAposLoginHeader
+              :env="context.env"
+              :name="context.name"
+              :error="$t(error)"
+            />
 
-            <div class="apos-login__body" v-show="loaded">
+            <div class="apos-login__body">
               <form @submit.prevent="submit">
                 <AposSchema
                   :schema="schema"
                   v-model="doc"
                 />
+                <Component
+                  v-for="requirement in beforeSubmitRequirements"
+                  :key="requirement.name"
+                  :is="requirement.component"
+                  v-bind="getRequirementProps(requirement.name)"
+                  @done="requirementDone(requirement, $event)"
+                  @block="requirementBlock(requirement)"
+                />
                 <!-- TODO -->
                 <!-- <a href="#" class="apos-login__link">Forgot Password</a> -->
                 <AposButton
@@ -44,6 +47,29 @@
               </form>
             </div>
           </div>
+          <div
+            key="2"
+            class="apos-login__upper"
+            v-else-if="activeSoloRequirement"
+          >
+            <TheAposLoginHeader
+              :env="context.env"
+              :name="context.name"
+              :error="$t(error)"
+              :tiny="true"
+            />
+            <div class="apos-login__body">
+              <Component
+                v-if="!fetchingRequirementProps"
+                v-bind="getRequirementProps(activeSoloRequirement.name)"
+                :is="activeSoloRequirement.component"
+                :success="activeSoloRequirement.success"
+                :error="activeSoloRequirement.error"
+                @done="requirementDone(activeSoloRequirement, $event)"
+                @confirm="requirementConfirmed(activeSoloRequirement)"
+              />
+            </div>
+          </div>
         </transition>
       </div>
       <transition name="fade-footer">
@@ -66,7 +92,9 @@ export default {
   mixins: [ AposThemeMixin ],
   data() {
     return {
-      loaded: false,
+      phase: 'beforeSubmit',
+      mounted: false,
+      beforeCreateFinished: false,
       error: '',
       busy: false,
       doc: {
@@ -89,15 +117,64 @@ export default {
           required: true
         }
       ],
-      context: {}
+      requirements: getRequirements(),
+      context: {},
+      requirementProps: {},
+      fetchingRequirementProps: false
     };
   },
   computed: {
-    disabled: function () {
-      return this.doc.hasErrors;
+    loaded() {
+      return this.mounted && this.beforeCreateFinished;
+    },
+    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: {
+    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;
+      }
     }
   },
-  async beforeCreate () {
+  async beforeCreate() {
     const stateChange = parseInt(window.sessionStorage.getItem('aposStateChange'));
     const seen = JSON.parse(window.sessionStorage.getItem('aposStateChangeSeen') || '{}');
     if (!seen[window.location.href]) {
@@ -110,15 +187,18 @@ export default {
       }
     }
     try {
-      this.context = await apos.http.get(`${apos.login.action}/context`, {
+      this.context = await apos.http.post(`${apos.login.action}/context`, {
         busy: true
       });
+      this.requirementProps = this.context.requirementProps;
     } catch (e) {
-      this.error = 'An error occurred. Please try again.';
+      this.error = e.message || 'apostrophe:loginErrorGeneric';
+    } finally {
+      this.beforeCreateFinished = true;
     }
   },
   mounted() {
-    this.loaded = true;
+    this.mounted = true;
   },
   methods: {
     async submit() {
@@ -127,27 +207,148 @@ export default {
       }
       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';
+        this.requirements = getRequirements();
+      } finally {
+        this.busy = false;
+      }
+    },
+    getInitialSubmitRequirementsData() {
+      return Object.fromEntries(this.requirements.filter(r => r.phase !== 'afterPasswordVerified').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
           }
         });
-        window.sessionStorage.setItem('aposStateChange', Date.now());
-        window.sessionStorage.setItem('aposStateChangeSeen', '{}');
-        // TODO handle situation where user should be sent somewhere other than homepage.
-        // Redisplay homepage with editing interface
-        location.assign(`${apos.prefix}/`);
+        this.redirectAfterLogin();
       } catch (e) {
         this.error = e.message || 'An error occurred. Please try again.';
+        this.requirements = getRequirements();
+        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() {
+      window.sessionStorage.setItem('aposStateChange', Date.now());
+      window.sessionStorage.setItem('aposStateChangeSeen', '{}');
+      // TODO handle situation where user should be sent somewhere other than homepage.
+      // Redisplay homepage with editing interface
+      location.assign(`${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')
+  ];
+}
 </script>
 
 <style lang="scss">
@@ -171,13 +372,15 @@ export default {
 
   .fade-stage-enter-to,
   .fade-body-enter-to,
-  .fade-footer-enter-to {
+  .fade-footer-enter-to,
+  .fade-body-leave {
     opacity: 1;
   }
 
   .fade-stage-enter,
   .fade-body-enter,
-  .fade-footer-enter {
+  .fade-footer-enter,
+  .fade-body-leave-to {
     opacity: 0;
   }
 
@@ -186,11 +389,15 @@ export default {
     transition-delay: 0.6s;
   }
 
-  .fade-body-enter-to {
+  .fade-body-leave-active {
+    transition: all 0.25s linear;
+  }
+
+  .fade-body-enter-to, .fade-body-leave {
     transform: translateY(0);
   }
 
-  .fade-body-enter {
+  .fade-body-enter, .fade-body-leave-to {
     transform: translateY(4px);
   }
 
@@ -212,48 +419,6 @@ export default {
       margin: 0 auto;
     }
 
-    &__header {
-      z-index: $z-index-manager-display;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: start;
-      width: max-content;
-    }
-
-    &__project-name {
-      @include type-display;
-      margin: 0;
-      color: var(--a-text-primary);
-      text-transform: capitalize;
-    }
-
-    &__project-env {
-      @include type-base;
-      text-transform: capitalize;
-      padding: 6px 12px;
-      color: var(--a-white);
-      background: var(--a-success);
-      border-radius: 5px;
-      margin-bottom: 15px;
-
-      &--development {
-        background: var(--a-danger);
-      }
-
-      &--success {
-        background: var(--a-warning);
-      }
-    }
-
-    &--error {
-      @include type-help;
-      color: var(--a-danger);
-      min-height: 13px;
-      margin-top: 20px;
-      margin-bottom: 15px;
-    }
-
     form {
       position: relative;
       display: flex;
@@ -290,7 +455,7 @@ export default {
       max-width: $login-container;
       margin: auto;
       align-items: center;
-      justify-content: start;
+      justify-content: flex-start;
     }
 
     &__project-version {

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

@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="apos-login__header"
+    :class="{'apos-login__header--tiny': tiny}"
+  >
+    <label
+      class="apos-login__project apos-login__project-env"
+      :class="[`apos-login__project-env--${env}`]"
+    >
+      {{ env }}
+    </label>
+    <label class="apos-login__project apos-login__project-name">
+      {{ name }}
+    </label>
+    <label class="apos-login--error">
+      {{ error }}
+    </label>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    env: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    tiny: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+<style scoped lang='scss'>
+
+.apos-login {
+
+  &__header {
+    z-index: $z-index-manager-display;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    width: max-content;
+  }
+
+  &__project-name {
+    @include type-display;
+    margin: 0;
+    color: var(--a-text-primary);
+    text-transform: capitalize;
+  }
+
+  &__project-env {
+    @include type-base;
+    text-transform: capitalize;
+    padding: 6px 12px;
+    color: var(--a-white);
+    background: var(--a-success);
+    border-radius: 5px;
+    margin-bottom: 15px;
+
+    &--development {
+      background: var(--a-danger);
+    }
+
+    &--success {
+      background: var(--a-warning);
+    }
+  }
+
+  &--error {
+    @include type-help;
+    color: var(--a-danger);
+    min-height: 13px;
+    margin-top: 20px;
+    margin-bottom: 15px;
+  }
+
+  &__header--tiny {
+    flex-direction: row;
+    color: #F8F9FA;
+
+    .apos-login__project {
+      opacity: 0.7
+    }
+
+    .apos-login__project-name {
+      font-size: 21px;
+
+    }
+
+    .apos-login__project-env {
+      margin-right: 10px;
+    }
+  }
+}
+</style>

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

@@ -29,10 +29,20 @@ const _ = require('lodash');
 
 module.exports = {
 
-  cascades: [ 'csrfExceptions' ],
-
   init(self) {
     self.apos = self.options.apos;
+    const capturedSections = [
+      'queries',
+      'extendQueries',
+      'icons'
+    ];
+    for (const section of capturedSections) {
+      // Unparsed sections are now captured in __meta, promote
+      // these to the top level to maintain bc. For new unparsed
+      // sections we'll leave them in `__meta` to avoid bc breaks
+      // with project-level properties of the module
+      self[section] = self.__meta[section];
+    }
     // all apostrophe modules are properties of self.apos.modules.
     // Those with an alias are also properties of self.apos
     self.apos.modules[self.__meta.name] = self;