feat: finalize all errors states on base notices

src/components/partial/cloud/PartialCloudSignupFormFieldsetAccount.vue

@@ -11,28 +11,30 @@
 <template lang="pug">
 .c-partial-cloud-signup-form-fieldset-account
   base-notice(
-    v-if="error"
+    v-if="error.code"
     :class="noticeClass"
+    :update-time="error.time"
     color="red"
     emphasis
+    shaky
   )
     template(
-      v-if="error === 'incomplete_form'"
+      v-if="error.code === 'incomplete_form'"
     )
       | Please provide an email and a password to continue.
 
     template(
-      v-else-if="error === 'account_exists'"
+      v-else-if="error.code === 'account_exists'"
     )
       | An account already exists with this email.
 
     template(
-      v-else-if="error === 'invalid_email'"
+      v-else-if="error.code === 'invalid_email'"
     )
       | Your email address looks invalid. Check for typos.
 
     template(
-      v-else-if="error === 'invalid_password'"
+      v-else-if="error.code === 'invalid_password'"
     )
       | Your provided password could not be accepted. Try another one.
 
@@ -55,12 +57,14 @@
 
     form-field(
       v-model="form.email"
+      @submit="onFieldSubmit"
       name="account_email"
       type="email"
       align="left"
       size="mid-large"
       placeholder="Enter your work email…  (eg. [email protected])"
       autofocus
+      submittable
     )
 
   div(
@@ -77,12 +81,14 @@
 
     form-field(
       v-model="form.password"
+      @submit="onFieldSubmit"
       @keystroke="onFieldPasswordKeystroke"
       name="account_password"
       type="password"
       align="left"
       size="mid-large"
       placeholder="Enter a password…"
+      submittable
     )
 
     base-security-level(
@@ -167,7 +173,10 @@ export default {
 
       passwordLevel: 0,
 
-      error: null,
+      error: {
+        code: null,
+        time: 0
+      },
 
       form: {
         email: "",
@@ -185,10 +194,12 @@ export default {
      * @return {boolean} Form validity status
      */
     assertFormValidity() {
-      this.error =
+      this.error.code =
         !this.form.email || !this.form.password ? "incomplete_form" : null;
 
-      return this.error === null;
+      this.error.time = this.error.code ? Date.now() : 0;
+
+      return this.error.code === null;
     },
 
     // --> EVENT LISTENERS <--
@@ -212,6 +223,16 @@ export default {
       }
     },
 
+    /**
+     * Handles field submit
+     * @public
+     * @return {undefined}
+     */
+    onFieldSubmit() {
+      // Trigger a continue event
+      this.onContinueClick();
+    },
+
     /**
      * Handles continue click
      * @public

src/components/partial/cloud/PartialCloudSignupFormFieldsetActivate.vue

@@ -11,33 +11,35 @@
 <template lang="pug">
 .c-partial-cloud-signup-form-fieldset-activate
   base-notice(
-    v-if="error"
+    v-if="error.code"
     :class="noticeClass"
+    :update-time="error.time"
     color="red"
     emphasis
+    shaky
   )
     template(
-      v-if="error === 'incomplete_form'"
+      v-if="error.code === 'incomplete_form'"
     )
       | Please fill all fields with your payment method details.
 
     template(
-      v-else-if="error === 'invalid_card_number'"
+      v-else-if="error.code === 'invalid_card_number'"
     )
       | Oops, your card number is invalid. Check for typos.
 
     template(
-      v-else-if="error === 'invalid_card_cvv'"
+      v-else-if="error.code === 'invalid_card_cvv'"
     )
       | Oops, your card security code is invalid. Enter it again.
 
     template(
-      v-else-if="error === 'invalid_card_zip'"
+      v-else-if="error.code === 'invalid_card_zip'"
     )
       | The postal code do not match your card's. It could be a different ZIP.
 
     template(
-      v-else-if="error === 'invalid_card_expire'"
+      v-else-if="error.code === 'invalid_card_expire'"
     )
       | The expire date is wrong. Make sure you entered it as MM/YY.
 
@@ -79,6 +81,7 @@
       )
         form-field(
           v-model="form.number"
+          @submit="onFieldSubmit"
           @keystroke="onFieldNumberKeystroke"
           name="activate_number"
           type="text"
@@ -88,6 +91,7 @@
           inner-class="c-partial-cloud-signup-form-fieldset-activate__input-inner"
           class="c-partial-cloud-signup-form-fieldset-activate__input c-partial-cloud-signup-form-fieldset-activate__input--card"
           autofocus
+          submittable
         )
           span.c-partial-cloud-signup-form-fieldset-activate__input-preview
             base-payment-icon(
@@ -103,11 +107,13 @@
       )
         form-field(
           v-model="form.name"
+          @submit="onFieldSubmit"
           name="activate_name"
           type="text"
           align="left"
           size="mid-large"
           placeholder="Enter your name…"
+          submittable
         )
 
       form-labelled-field(
@@ -116,12 +122,14 @@
       )
         form-field(
           v-model="form.cvv"
+          @submit="onFieldSubmit"
           name="activate_cvv"
           type="text"
           align="left"
           size="mid-large"
           placeholder="CVV"
           pattern="[0-9]{3,4}"
+          submittable
         )
 
     .c-partial-cloud-signup-form-fieldset-activate__nest.c-partial-cloud-signup-form-fieldset-activate__nest--zip-and-expire
@@ -131,11 +139,13 @@
       )
         form-field(
           v-model="form.zip"
+          @submit="onFieldSubmit"
           name="activate_zip"
           type="text"
           align="left"
           size="mid-large"
           placeholder="ZIP / Postcode"
+          submittable
         )
 
       form-labelled-field(
@@ -144,12 +154,14 @@
       )
         form-field(
           v-model="form.expire"
+          @submit="onFieldSubmit"
           name="activate_expire"
           type="text"
           align="left"
           size="mid-large"
           placeholder="MM/YY"
           pattern="((0[1-9])|(1[0-2]))\/([0-9]{2})"
+          submittable
         )
 
   div(
@@ -217,7 +229,10 @@ export default {
 
       cardBrand: "",
 
-      error: null,
+      error: {
+        code: null,
+        time: 0
+      },
 
       form: {
         number: "",
@@ -238,7 +253,7 @@ export default {
      * @return {boolean} Form validity status
      */
     assertFormValidity() {
-      this.error =
+      this.error.code =
         !this.form.number ||
         !this.form.name ||
         !this.form.cvv ||
@@ -247,7 +262,9 @@ export default {
           ? "incomplete_form"
           : null;
 
-      return this.error === null;
+      this.error.time = this.error.code ? Date.now() : 0;
+
+      return this.error.code === null;
     },
 
     // --> EVENT LISTENERS <--
@@ -268,6 +285,16 @@ export default {
       }
     },
 
+    /**
+     * Handles field submit
+     * @public
+     * @return {undefined}
+     */
+    onFieldSubmit() {
+      // Trigger a continue event
+      this.onContinueClick();
+    },
+
     /**
      * Handles continue click
      * @public

src/components/partial/cloud/PartialCloudSignupFormFieldsetWorkspace.vue

@@ -11,13 +11,15 @@
 <template lang="pug">
 .c-partial-cloud-signup-form-fieldset-workspace
   base-notice(
-    v-if="error"
+    v-if="error.code"
     :class="noticeClass"
+    :update-time="error.time"
     color="red"
     emphasis
+    shaky
   )
     template(
-      v-if="error === 'incomplete_form'"
+      v-if="error.code === 'incomplete_form'"
     )
       | We are missing some information, could you check?
 
@@ -40,12 +42,14 @@
 
     form-field(
       v-model="form.name"
+      @submit="onFieldSubmit"
       name="workspace_name"
       type="text"
       align="left"
       size="mid-large"
       placeholder="Enter name for your workspace…  (eg. Tesla)"
       autofocus
+      submittable
     )
 
   div(
@@ -62,12 +66,14 @@
 
     form-field(
       v-model="form.website"
+      @submit="onFieldSubmit"
       :disabled="form.noWebsite"
       name="workspace_website"
       type="url"
       align="left"
       size="mid-large"
       placeholder="Enter your website URL…  (eg. www.tesla.com)"
+      submittable
     )
 
     form-fieldset-field(
@@ -124,7 +130,10 @@ export default {
     return {
       // --> STATE <--
 
-      error: null,
+      error: {
+        code: null,
+        time: 0
+      },
 
       form: {
         name: "",
@@ -143,16 +152,28 @@ export default {
      * @return {boolean} Form validity status
      */
     assertFormValidity() {
-      this.error =
+      this.error.code =
         !this.form.name || (!this.form.website && this.form.noWebsite !== true)
           ? "incomplete_form"
           : null;
 
-      return this.error === null;
+      this.error.time = this.error.code ? Date.now() : 0;
+
+      return this.error.code === null;
     },
 
     // --> EVENT LISTENERS <--
 
+    /**
+     * Handles field submit
+     * @public
+     * @return {undefined}
+     */
+    onFieldSubmit() {
+      // Trigger a continue event
+      this.onContinueClick();
+    },
+
     /**
      * Handles continue click
      * @public