glib-web 0.5.77 → 0.5.78

package/components/fields/stripe/stripeIndividualFields.vue

@@ -1,207 +1,207 @@
-<template>
-  <div>
-    <div class="field">
-      <div class="outlined">
-        <div id="cardNumber" ref="cardNumber" class="input"></div>
-        <label for="cardNumber">{{ spec.label || "Card Number" }}</label>
-        <div class="baseline"></div>
-      </div>
-    </div>
-    <v-row>
-      <v-col>
-        <div class="field">
-          <div class="outlined">
-            <div id="cardExpiry" ref="cardExpiry" class="input"></div>
-            <label for="cardExpiry">Expiry Date</label>
-            <div class="baseline"></div>
-          </div>
-        </div>
-      </v-col>
-      <v-col>
-        <div class="field">
-          <div class="outlined">
-            <div id="cardCvc" ref="cardCvc" class="input"></div>
-            <label for="cardCvc">CVC</label>
-            <div class="baseline"></div>
-          </div>
-        </div>
-      </v-col>
-    </v-row>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true },
-    onComplete: {
-      type: Function,
-      required: true
-    },
-    onError: {
-      type: Function,
-      required: true
-    }
-  },
-  data() {
-    return {
-      stripe: null,
-      card: null,
-      errorMessages: []
-    };
-  },
-  watch: {
-    "$root.vueApp.stateUpdatedAt": function(val, oldVal) {
-      this.onComplete(this.stripe, this.card);
-    }
-  },
-  methods: {
-    $ready() {
-      this.stripe = Stripe(this.spec.publicKey);
-      const elements = this.stripe.elements();
-
-      const style = {
-        base: {
-          fontSize: "16px",
-          color: "#32325d"
-        }
-      };
-
-      const cardNumber = elements.create("cardNumber", {
-        showIcon: true,
-        style
-      });
-      cardNumber.mount(this.$refs.cardNumber);
-
-      const cardExpiry = elements.create("cardExpiry", {
-        style
-      });
-      cardExpiry.mount(this.$refs.cardExpiry);
-
-      const cardCvc = elements.create("cardCvc", {
-        style
-      });
-      cardCvc.mount(this.$refs.cardCvc);
-
-      this.card = cardNumber;
-      this._registerEvent([cardNumber, cardExpiry, cardCvc]);
-    },
-    _registerEvent(elements) {
-      elements.forEach((el, index) => {
-        el.addEventListener("change", event => {
-          const error = event.error;
-          if (error) {
-            this.errorMessages[index] = error.message;
-          } else {
-            this.errorMessages[index] = null;
-          }
-
-          this.onError(this.errorMessages.join(" "));
-          if (event.complete) {
-            this.onComplete(this.stripe, this.card);
-          }
-        });
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.field {
-  position: relative;
-  width: 100%;
-  height: 60px;
-
-  label {
-    font-size: 16px;
-    font-weight: bolder;
-    color: #000000;
-    position: absolute;
-    left: 0;
-    bottom: 8px;
-    color: rgba(0, 0, 0, 0.6);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    transform-origin: 0 50%;
-    cursor: text;
-    pointer-events: none;
-  }
-
-  .input {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    padding-bottom: 7px;
-    color: #32325d;
-    background-color: transparent;
-  }
-
-  .baseline {
-    position: absolute;
-    width: 100%;
-  }
-
-  .input.StripeElement--focus + label {
-    color: #1976d2 !important;
-  }
-
-  .input.StripeElement--invalid + label {
-    color: #f44336 !important;
-  }
-
-  .input:hover + label + .baseline {
-    border-color: #000000;
-  }
-
-  .input.StripeElement--focus + label + .baseline {
-    border-color: #1976d2;
-    border-width: 2px;
-  }
-
-  .input.StripeElement--invalid + label + .baseline {
-    border-color: #f44336;
-    border-width: 2px;
-  }
-
-  .individual {
-    &:not(.outlined) {
-      label {
-        width: 100%;
-        transform: scale(0.75) translateY(-25px);
-      }
-
-      .baseline {
-        height: 1px;
-        left: 0;
-        bottom: 0;
-        border-bottom: solid 1px #999999;
-      }
-    }
-  }
-
-  .outlined {
-    label {
-      transform: scale(0.75) translateY(-52px);
-      background: white;
-      padding: 0 5px;
-      margin-left: 10px;
-      z-index: 10;
-    }
-
-    .baseline {
-      height: 60px;
-      border: solid 1px #999999;
-      border-radius: 4px;
-    }
-
-    .input {
-      padding: 0 12px;
-      transform: translateY(-20px);
-      z-index: 8;
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="field">
+      <div class="outlined">
+        <div id="cardNumber" ref="cardNumber" class="input"></div>
+        <label for="cardNumber">{{ spec.label || "Card Number" }}</label>
+        <div class="baseline"></div>
+      </div>
+    </div>
+    <v-row>
+      <v-col>
+        <div class="field">
+          <div class="outlined">
+            <div id="cardExpiry" ref="cardExpiry" class="input"></div>
+            <label for="cardExpiry">Expiry Date</label>
+            <div class="baseline"></div>
+          </div>
+        </div>
+      </v-col>
+      <v-col>
+        <div class="field">
+          <div class="outlined">
+            <div id="cardCvc" ref="cardCvc" class="input"></div>
+            <label for="cardCvc">CVC</label>
+            <div class="baseline"></div>
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    onComplete: {
+      type: Function,
+      required: true
+    },
+    onError: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      stripe: null,
+      card: null,
+      errorMessages: []
+    };
+  },
+  watch: {
+    "$root.vueApp.stateUpdatedAt": function(val, oldVal) {
+      this.onComplete(this.stripe, this.card);
+    }
+  },
+  methods: {
+    $ready() {
+      this.stripe = Stripe(this.spec.publicKey);
+      const elements = this.stripe.elements();
+
+      const style = {
+        base: {
+          fontSize: "16px",
+          color: "#32325d"
+        }
+      };
+
+      const cardNumber = elements.create("cardNumber", {
+        showIcon: true,
+        style
+      });
+      cardNumber.mount(this.$refs.cardNumber);
+
+      const cardExpiry = elements.create("cardExpiry", {
+        style
+      });
+      cardExpiry.mount(this.$refs.cardExpiry);
+
+      const cardCvc = elements.create("cardCvc", {
+        style
+      });
+      cardCvc.mount(this.$refs.cardCvc);
+
+      this.card = cardNumber;
+      this._registerEvent([cardNumber, cardExpiry, cardCvc]);
+    },
+    _registerEvent(elements) {
+      elements.forEach((el, index) => {
+        el.addEventListener("change", event => {
+          const error = event.error;
+          if (error) {
+            this.errorMessages[index] = error.message;
+          } else {
+            this.errorMessages[index] = null;
+          }
+
+          this.onError(this.errorMessages.join(" "));
+          if (event.complete) {
+            this.onComplete(this.stripe, this.card);
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.field {
+  position: relative;
+  width: 100%;
+  height: 60px;
+
+  label {
+    font-size: 16px;
+    font-weight: bolder;
+    color: #000000;
+    position: absolute;
+    left: 0;
+    bottom: 8px;
+    color: rgba(0, 0, 0, 0.6);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transform-origin: 0 50%;
+    cursor: text;
+    pointer-events: none;
+  }
+
+  .input {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    padding-bottom: 7px;
+    color: #32325d;
+    background-color: transparent;
+  }
+
+  .baseline {
+    position: absolute;
+    width: 100%;
+  }
+
+  .input.StripeElement--focus + label {
+    color: #1976d2 !important;
+  }
+
+  .input.StripeElement--invalid + label {
+    color: #f44336 !important;
+  }
+
+  .input:hover + label + .baseline {
+    border-color: #000000;
+  }
+
+  .input.StripeElement--focus + label + .baseline {
+    border-color: #1976d2;
+    border-width: 2px;
+  }
+
+  .input.StripeElement--invalid + label + .baseline {
+    border-color: #f44336;
+    border-width: 2px;
+  }
+
+  .individual {
+    &:not(.outlined) {
+      label {
+        width: 100%;
+        transform: scale(0.75) translateY(-25px);
+      }
+
+      .baseline {
+        height: 1px;
+        left: 0;
+        bottom: 0;
+        border-bottom: solid 1px #999999;
+      }
+    }
+  }
+
+  .outlined {
+    label {
+      transform: scale(0.75) translateY(-52px);
+      background: white;
+      padding: 0 5px;
+      margin-left: 10px;
+      z-index: 10;
+    }
+
+    .baseline {
+      height: 60px;
+      border: solid 1px #999999;
+      border-radius: 4px;
+    }
+
+    .input {
+      padding: 0 12px;
+      transform: translateY(-20px);
+      z-index: 8;
+    }
+  }
+}
+</style>

package/components/fields/stripeExternalAccount.vue

@@ -1,135 +1,135 @@
-<template>
-  <div :style="genericStyles()" :class="$classes()">
-    <v-text-field
-      v-model="accountNumber"
-      label="Account Number"
-      placeholder="000123456"
-      :outlined="$classes().includes('outlined')"
-      :rounded="$classes().includes('rounded')"
-      :dense="$classes().includes('dense')"
-      :rules="accountNumberRules"
-      :error-messages="errorMessages"
-      @keyup="$onTyping({ duration: 200 })"
-    />
-
-    <div v-if="spec.country">
-      <div v-for="field in inputs[country].fields" :key="field.label">
-        <v-text-field
-          v-model="field.model"
-          :label="field.label"
-          :placeholder="field.placeholder"
-          :outlined="$classes().includes('outlined')"
-          :rounded="$classes().includes('rounded')"
-          :dense="$classes().includes('dense')"
-          :rules="field.rules"
-          @keyup="$onTyping({ duration: 200 })"
-        />
-      </div>
-    </div>
-
-    <input ref="token" type="hidden" :name="spec.name" />
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      routingNumber: null,
-      accountNumber: null,
-      inputs: {},
-      accountNumberRules: [value => !!value || "Account number required"],
-      errorMessages: null
-    };
-  },
-  created() {
-    this.country = this.spec.country.toLowerCase();
-    this.stripe = Stripe(this.spec.publicKey);
-    this.spec.onTypeEnd = { action: "component/createToken" };
-    this.registerCountry("nz", [], function() {
-      return "";
-    });
-    this.registerCountry(
-      "au",
-      [
-        {
-          label: "Bank State Number",
-          placeholder: "110000",
-          model: "",
-          rules: [value => !!value || "Bank state number required"]
-        }
-      ],
-      function() {
-        return this.fields[0].model;
-      }
-    );
-    this.registerCountry(
-      "ca",
-      [
-        {
-          label: "Transit",
-          placeholder: "12345",
-          model: "",
-          rules: [value => !!value || "Transit number required"]
-        },
-        {
-          label: "Institution",
-          placeholder: "678",
-          model: "",
-          rules: [value => !!value || "Institution number required"]
-        }
-      ],
-      function() {
-        return `${this.fields[0].model}-${this.fields[1].model}`;
-      }
-    );
-  },
-  methods: {
-    action_createToken() {
-      const token = this.$refs.token;
-      this.errorMessages = null;
-      this.routingNumber = this.inputs[this.country].makeRoutingNumber();
-      if (this.accountNumber) {
-        this.$dispatchEvent("forms/setBusy", { value: true });
-        const vm = this;
-        const bank = {
-          country: this.spec.country,
-          currency: this.spec.currency,
-          account_number: this.accountNumber,
-          account_holder_name: this.spec.accountHolderName,
-          account_holder_type: this.spec.accountHolderType
-        };
-
-        if (this.routingNumber) {
-          bank["routing_number"] = this.routingNumber;
-        }
-
-        this.stripe.createToken("bank_account", bank).then(response => {
-          if (response.token) {
-            token.value = response.token.id;
-          } else {
-            this.errorMessages = [response.error.message];
-            token.value = "";
-          }
-          vm.$dispatchEvent("forms/setBusy", { value: false });
-        });
-      }
-    },
-    /**
-     * Different countries have different ways of creating routing numbers.
-     * Canada, for example, requires transit numbers and institution numbers and then combined to create a routing number,
-     * while New Zealand does not use a routing number.
-     */
-    registerCountry(country = "", fields = [], makeRoutingNumber) {
-      this.inputs[country] = { fields, makeRoutingNumber };
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-v-text-field {
-  padding: 0 8px 0 8px;
-}
-</style>
+<template>
+  <div :style="genericStyles()" :class="$classes()">
+    <v-text-field
+      v-model="accountNumber"
+      label="Account Number"
+      placeholder="000123456"
+      :outlined="$classes().includes('outlined')"
+      :rounded="$classes().includes('rounded')"
+      :dense="$classes().includes('dense')"
+      :rules="accountNumberRules"
+      :error-messages="errorMessages"
+      @keyup="$onTyping({ duration: 200 })"
+    />
+
+    <div v-if="spec.country">
+      <div v-for="field in inputs[country].fields" :key="field.label">
+        <v-text-field
+          v-model="field.model"
+          :label="field.label"
+          :placeholder="field.placeholder"
+          :outlined="$classes().includes('outlined')"
+          :rounded="$classes().includes('rounded')"
+          :dense="$classes().includes('dense')"
+          :rules="field.rules"
+          @keyup="$onTyping({ duration: 200 })"
+        />
+      </div>
+    </div>
+
+    <input ref="token" type="hidden" :name="spec.name" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      routingNumber: null,
+      accountNumber: null,
+      inputs: {},
+      accountNumberRules: [value => !!value || "Account number required"],
+      errorMessages: null
+    };
+  },
+  created() {
+    this.country = this.spec.country.toLowerCase();
+    this.stripe = Stripe(this.spec.publicKey);
+    this.spec.onTypeEnd = { action: "component/createToken" };
+    this.registerCountry("nz", [], function() {
+      return "";
+    });
+    this.registerCountry(
+      "au",
+      [
+        {
+          label: "Bank State Number",
+          placeholder: "110000",
+          model: "",
+          rules: [value => !!value || "Bank state number required"]
+        }
+      ],
+      function() {
+        return this.fields[0].model;
+      }
+    );
+    this.registerCountry(
+      "ca",
+      [
+        {
+          label: "Transit",
+          placeholder: "12345",
+          model: "",
+          rules: [value => !!value || "Transit number required"]
+        },
+        {
+          label: "Institution",
+          placeholder: "678",
+          model: "",
+          rules: [value => !!value || "Institution number required"]
+        }
+      ],
+      function() {
+        return `${this.fields[0].model}-${this.fields[1].model}`;
+      }
+    );
+  },
+  methods: {
+    action_createToken() {
+      const token = this.$refs.token;
+      this.errorMessages = null;
+      this.routingNumber = this.inputs[this.country].makeRoutingNumber();
+      if (this.accountNumber) {
+        this.$dispatchEvent("forms/setBusy", { value: true });
+        const vm = this;
+        const bank = {
+          country: this.spec.country,
+          currency: this.spec.currency,
+          account_number: this.accountNumber,
+          account_holder_name: this.spec.accountHolderName,
+          account_holder_type: this.spec.accountHolderType
+        };
+
+        if (this.routingNumber) {
+          bank["routing_number"] = this.routingNumber;
+        }
+
+        this.stripe.createToken("bank_account", bank).then(response => {
+          if (response.token) {
+            token.value = response.token.id;
+          } else {
+            this.errorMessages = [response.error.message];
+            token.value = "";
+          }
+          vm.$dispatchEvent("forms/setBusy", { value: false });
+        });
+      }
+    },
+    /**
+     * Different countries have different ways of creating routing numbers.
+     * Canada, for example, requires transit numbers and institution numbers and then combined to create a routing number,
+     * while New Zealand does not use a routing number.
+     */
+    registerCountry(country = "", fields = [], makeRoutingNumber) {
+      this.inputs[country] = { fields, makeRoutingNumber };
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+v-text-field {
+  padding: 0 8px 0 8px;
+}
+</style>