apostrophe 3.31.0 → 3.32.0

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

@@ -6,75 +6,46 @@
       v-show="loaded"
       :class="themeClass"
     >
+      <transition name="fade-outer">
+        <div v-if="showNav" class="apos-login__nav">
+          <a
+            href="#"
+            class="apos-login__link apos-login--arrow-left"
+            @click.prevent="setStage('login')"
+          >{{ $t('apostrophe:loginBack') }}</a>
+          <a
+            :href="homeUrl"
+            class="apos-login__link apos-login--arrow-right"
+          >{{ $t('apostrophe:loginHome') }}</a>
+        </div>
+      </transition>
       <div class="apos-login__wrapper">
         <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">
-              <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
-                  data-apos-test="loginSubmit"
-                  :busy="busy"
-                  :disabled="disabled"
-                  type="primary"
-                  label="apostrophe:login"
-                  button-type="submit"
-                  class="apos-login__submit"
-                  :modifiers="['gradient-on-hover', 'block']"
-                  @click="submit"
-                />
-              </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>
+          <AposForgotPasswordForm
+            v-if="loaded && stage === 'forgotPassword'"
+            :context="context"
+            :context-error="error"
+            @redirect="onRedirect"
+            @set-stage="setStage"
+          />
+          <AposResetPasswordForm
+            v-else-if="loaded && stage === 'resetPassword'"
+            :context="context"
+            :data="passwordResetData"
+            :context-error="error"
+            @redirect="onRedirect"
+            @set-stage="setStage"
+          />
+          <AposLoginForm
+            v-else-if="loaded"
+            :context="context"
+            :context-error="error"
+            @redirect="onRedirect"
+            @set-stage="setStage"
+          />
         </transition>
       </div>
-      <transition name="fade-footer">
+      <transition name="fade-outer">
         <div class="apos-login__footer" v-show="loaded">
           <AposLogo class="apos-login__logo" />
           <label class="apos-login__project-version">
@@ -89,94 +60,38 @@
 <script>
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
 
+const STAGES = [
+  'login',
+  'forgotPassword',
+  'resetPassword'
+];
+
 export default {
   name: 'TheAposLogin',
   mixins: [ AposThemeMixin ],
   data() {
     return {
-      phase: 'beforeSubmit',
+      stage: STAGES[0],
       mounted: false,
       beforeCreateFinished: false,
       error: '',
-      busy: false,
-      doc: {
-        data: {},
-        hasErrors: 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(),
-      context: {},
-      requirementProps: {},
-      fetchingRequirementProps: false
+      passwordResetData: {},
+      context: {}
     };
   },
   computed: {
     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');
+    showNav() {
+      return this.stage !== STAGES[0];
     },
-    // 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;
-      }
+    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') || '{}');
@@ -193,167 +108,59 @@ export default {
       this.context = await apos.http.post(`${apos.login.action}/context`, {
         busy: true
       });
-      this.requirementProps = this.context.requirementProps;
     } 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: {
-    async submit() {
-      if (this.busy) {
+    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;
       }
-      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;
+      // 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];
     },
-    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;
-      }
+    forgotPasswordEnabled() {
+      return apos.login.passwordResetEnabled;
     },
-    getFinalSubmitRequirementsData() {
-      return Object.fromEntries(this.requirements.filter(r => r.phase === 'afterPasswordVerified').map(r => ([
-        r.name,
-        r.value
-      ])));
+    resetPasswordEnabled() {
+      return apos.login.passwordResetEnabled;
     },
-    redirectAfterLogin() {
+    onRedirect(loc) {
       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] || {};
+      location.assign(loc);
     }
   }
 };
-
-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">
@@ -377,14 +184,14 @@ function getRequirements() {
 
   .fade-stage-enter-to,
   .fade-body-enter-to,
-  .fade-footer-enter-to,
+  .fade-outer-enter-to,
   .fade-body-leave {
     opacity: 1;
   }
 
   .fade-stage-enter,
   .fade-body-enter,
-  .fade-footer-enter,
+  .fade-outer-enter,
   .fade-body-leave-to {
     opacity: 0;
   }
@@ -406,7 +213,7 @@ function getRequirements() {
     transform: translateY(4px);
   }
 
-  .fade-footer-enter-active {
+  .fade-outer-enter-active {
     transition: opacity 0.4s linear;
     transition-delay: 1s;
   }
@@ -418,22 +225,61 @@ function getRequirements() {
     height: 100vh;
     background-color: var(--a-background-primary);
 
-    &__wrapper {
-      width: 100%;
-      max-width: $login-container;
-      margin: 0 auto;
+    &__nav {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: $spacing-triple;
     }
 
-    form {
-      position: relative;
-      display: flex;
-      flex-direction: column;
+    &__link {
+      @include type-large;
+      display: inline-block;
+      text-decoration: underline;
+      text-underline-offset: 2px;
 
-      button {
-        margin-top: $spacing-double;
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--a-text-primary);
       }
     }
 
+    &--arrow-left,
+    &--arrow-right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: $spacing-half;
+    }
+
+    &--arrow-left::before,
+    &--arrow-right::after {
+      content: '';
+      width: 3px;
+      height: 3px;
+      border: solid var(--a-text-primary);
+      border-width: 3px 3px 0 0;
+    }
+
+    &--arrow-right::after {
+      transform: rotate(45deg);
+    }
+
+    &--arrow-left::before {
+      transform: rotate(-135deg);
+    }
+
+    &__wrapper {
+      width: 100%;
+      max-width: $login-container;
+      margin: 0 auto;
+    }
+
     &__loader {
       display: flex;
       flex-direction: column;
@@ -472,8 +318,4 @@ function getRequirements() {
       margin-left: auto;
     }
   }
-
-  .apos-login__submit ::v-deep .apos-button {
-    height: 47px;
-  }
 </style>

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

@@ -1,16 +1,30 @@
 <template>
   <div
     class="apos-login__header"
-    :class="{'apos-login__header--tiny': tiny}"
+    :class="{'apos-login__header--tiny': tiny, 'apos-login__header--center': !!subtitle}"
   >
+    <div class="apos-login__project-header">
+      <label
+        class="apos-login__project apos-login__project-env"
+        :class="[`apos-login__project-env--${env}`]"
+      >
+        {{ env }}
+      </label>
+      <label
+        v-if="subtitle"
+        class="apos-login__project apos-login__project-subtitle"
+      >
+        {{ subtitle }}
+      </label>
+    </div>
+    <label class="apos-login__project apos-login__project-name">
+      {{ title }}
+    </label>
     <label
-      class="apos-login__project apos-login__project-env"
-      :class="[`apos-login__project-env--${env}`]"
+      v-if="help"
+      class="apos-login--help"
     >
-      {{ env }}
-    </label>
-    <label class="apos-login__project apos-login__project-name">
-      {{ name }}
+      {{ help }}
     </label>
     <label class="apos-login--error">
       {{ error }}
@@ -26,24 +40,32 @@ export default {
       type: String,
       default: ''
     },
-    name: {
+    title: {
       type: String,
       default: ''
     },
-    tiny: {
-      type: Boolean,
-      default: false
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    help: {
+      type: String,
+      default: ''
     },
     error: {
       type: String,
       default: ''
+    },
+    tiny: {
+      type: Boolean,
+      default: false
     }
   }
 };
 </script>
 <style scoped lang='scss'>
-
 .apos-login {
+  $this: &;
 
   &__header {
     z-index: $z-index-manager-display;
@@ -51,7 +73,22 @@ export default {
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    width: max-content;
+  }
+
+  &__project-header {
+    display: flex;
+    gap: $spacing-base;
+    flex-wrap: nowrap;
+    margin-bottom: 15px;
+  }
+
+  &__project-subtitle {
+    @include type-title;
+    margin: 0;
+    opacity: 0.6;
+    line-height: 1;
+    text-transform: capitalize;
+    white-space: nowrap;
   }
 
   &__project-name {
@@ -68,7 +105,6 @@ export default {
     color: var(--a-white);
     background: var(--a-success);
     border-radius: 5px;
-    margin-bottom: 15px;
 
     &--development {
       background: var(--a-danger);
@@ -79,6 +115,13 @@ export default {
     }
   }
 
+  &--help {
+    @include type-label;
+    margin-top: $spacing-double;
+    text-align: center;
+    white-space: pre-line;
+  }
+
   &--error {
     @include type-help;
     color: var(--a-danger);
@@ -87,6 +130,14 @@ export default {
     margin-bottom: 15px;
   }
 
+  &__header--center {
+    align-items: center;
+
+    #{$this}__project-header {
+      margin-bottom: $spacing-triple;
+    }
+  }
+
   &__header--tiny {
     flex-direction: row;
     // stylelint-disable-next-line scale-unlimited/declaration-strict-value

package/modules/@apostrophecms/login/ui/apos/mixins/AposLoginFormMixin.js

@@ -0,0 +1,45 @@
+// Mixin for login form related common behavior.
+
+export default {
+  props: {
+    contextError: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      error: '',
+      doc: {
+        data: {},
+        hasErrors: false
+      }
+    };
+  },
+  computed: {
+    passwordResetEnabled() {
+      return apos.login.passwordResetEnabled;
+    }
+  },
+  watch: {
+    contextError(newVal) {
+      // Copy it only once
+      if (!this.contextErrorReceived && newVal && !this.error) {
+        this.error = newVal;
+        this.contextErrorReceived = true;
+      }
+    }
+  },
+  mounted() {
+    this.error = this.contextError;
+    if (this.contextError) {
+      this.contextErrorReceived = true;
+    }
+  }
+};