apostrophe 3.12.0 → 3.13.0

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

@@ -7,28 +7,36 @@
     >
       <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>
+          <div
+            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">
-              <form @submit.prevent="submit">
+            <div class="apos-login__body">
+              <form
+                @submit.prevent="submit"
+              >
                 <AposSchema
                   :schema="schema"
                   v-model="doc"
                 />
+                <!-- Do not ask these components to render without their props,
+                  v-show is not enough -->
+                <template v-if="loaded">
+                  <Component
+                    v-for="requirement in beforeSubmitRequirements"
+                    :key="requirement.name"
+                    :is="requirement.component"
+                    v-bind="getRequirementProps(requirement.name)"
+                    @done="requirementDone(requirement, $event)"
+                    @block="requirementBlock(requirement)"
+                  />
+                </template>
                 <!-- TODO -->
                 <!-- <a href="#" class="apos-login__link">Forgot Password</a> -->
                 <AposButton
@@ -44,6 +52,27 @@
               </form>
             </div>
           </div>
+          <div
+            class="apos-login__upper"
+            v-else-if="activeSoloRequirement && !fetchingRequirementProps"
+          >
+            <TheAposLoginHeader
+              :env="context.env"
+              :name="context.name"
+              :error="$t(error)"
+              :tiny="true"
+            />
+            <div class="apos-login__body">
+              <Component
+                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 +95,9 @@ export default {
   mixins: [ AposThemeMixin ],
   data() {
     return {
-      loaded: false,
+      phase: 'beforeSubmit',
+      mounted: false,
+      beforeCreateFinished: false,
       error: '',
       busy: false,
       doc: {
@@ -89,15 +120,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 +190,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 +210,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 +375,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 +392,16 @@ export default {
     transition-delay: 0.6s;
   }
 
-  .fade-body-enter-to {
+  .fade-leave-active {
+    transition: all 0.25s linear;
+    transition-delay: 0;
+  }
+
+  .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 +423,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;

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: 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/page/index.js

@@ -1430,8 +1430,8 @@ database.`);
       },
       // If the page will 404 according to the `isFound` method, this
       // method will emit a `notFound` event giving all modules a chance
-      // to intercept the request. If none intercept it, the standard 404 behavior
-      // is set up.
+      // to intercept the request. If none intercept it, the standard 404
+      // behavior is set up.
       async serveNotFound(req) {
         if (self.isFound(req)) {
           return;
@@ -1446,7 +1446,7 @@ database.`);
               // Simulate what this looks like when the serve page route starts.
               // This is an object, not an array
               params: {
-                0: req.path
+                0: decodeURIComponent(req.path)
               },
               query: req.query,
               mode: 'draft',

package/modules/@apostrophecms/ui/ui/apos/lib/i18next.js

@@ -25,13 +25,14 @@ export default {
         escapeValue: false
       },
       appendNamespaceToMissingKey: true,
+      defaultNS: [ apos.i18n.defaultNamespace ],
       parseMissingKeyHandler (key) {
         // We include namespaces with unrecognized l10n keys using
         // `appendNamespaceToMissingKey: true`. This passes strings containing
         // colons that were never meant to be localized through to the UI.
         //
         // Strings that do not include colons ("Content area") are given the
-        // default namespace by i18next ("translation," by default). Here we
+        // default namespace by i18next ("default," in Apostrophe). Here we
         // check if the key starts with that default namespace, meaning it
         // belongs to no other registered namespace, then remove that default
         // namespace before passing this through to be processed and displayed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {