v6.0.0

GleapSDK · Oct 16, 2021 · fb8f124 · fb8f124
1 parent 51244c4
commit fb8f124
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 29 deletions.
diff --git a/build/index.js b/build/index.js
diff --git a/demo/bb.css b/demo/bb.css
@@ -522,6 +522,7 @@
   padding: 50px;
   display: none;
   flex-grow: 1;
+  min-height: 270px;
 }
 
 .bb-feedback-dialog-success svg {
@@ -589,7 +590,13 @@
   margin-top: 7px;
   margin-bottom: 0px;
   cursor: pointer;
-  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.05);
+}
+
+.bb-feedback-send-button--disabled {
+  background-color: #DEE1EA !important;
+  color: #9B9FAE !important;
+  opacity: 1 !important;
+  cursor: not-allowed !important;
 }
 
 .bb-feedback-send-button:hover {
@@ -1198,6 +1205,7 @@ textarea.bb-feedback-required {
   justify-content: center;
   align-items: center;
   flex-grow: 1;
+  min-height: 270px;
 }
 
 .bb--progress-ring__circle {

diff --git a/demo/main.js b/demo/main.js
@@ -2,11 +2,6 @@ const Gleap = window.Gleap;
 
 // Gleap.setApiUrl("http://0.0.0.0:9000");
 
-Gleap.identify("123", {
-  name: "XOXO",
-  email: "[email protected]",
-});
-
 // Sample for feedback type options
 Gleap.setMenuOptions([
   {
@@ -168,7 +163,7 @@ Gleap.setFeedbackActions({
     feedbackType: "INQUIRY",
     disableUserScreenshot: true,
   },
-  featurerequests: {
+  featurerequest: {
     title: "Request a feature",
     description: "What feature or improvement would you like to see?",
     thanksMessage:
@@ -184,6 +179,16 @@ Gleap.setFeedbackActions({
         required: true,
         remember: true,
       },
+      {
+        title: "XX",
+        placeholder: "Your e-mail",
+        type: "text",
+        inputtype: "email",
+        name: "xx",
+        hideOnDefaultSet: true,
+        required: true,
+        remember: true,
+      },
       {
         placeholder: "Explain your request.",
         title: "Subject",
@@ -215,7 +220,7 @@ Gleap.setAppBuildNumber("2345");
 
 Gleap.enableReplays(true);
 
-Gleap.setColors("red", "blue", "green");
+Gleap.setColors("green", "blue", "green");
 
 Gleap.enablePoweredBy(true);
 
@@ -224,15 +229,15 @@ Gleap.enableCrashDetector(true, false);
 Gleap.enableRageClickDetector(true);
 
 // Sets the app's build number.
-Gleap.setAppBuildNumber(5);
+Gleap.setAppBuildNumber(64);
 
 // Sets the app's version code.
-Gleap.setAppVersionCode("v5.0");
+Gleap.setAppVersionCode("v6.0");
 
 // Attaches custom data to the bug reports.
 Gleap.attachCustomData({
   test1: "Battle",
   data2: "Unicorn",
 });
 
-Gleap.initialize("ogWhNhuiZcGWrva5nlDS8l7a78OfaLlV");
+Gleap.initialize("wytzEhhSa1EFfTEqK3HXBWuGRt2PREAE");
diff --git a/published/6.0.0/index.js b/published/6.0.0/index.js
diff --git a/published/6.0.0/index.min.css b/published/6.0.0/index.min.css
diff --git a/src/FeedbackForm.js b/src/FeedbackForm.js
@@ -176,9 +176,7 @@ export const getFormData = function (form) {
   var formData = {};
   for (let i = 0; i < form.length; i++) {
     const formItem = form[i];
-    const formElement = document.querySelector(
-      `.bb-feedback-${formItem.name}`
-    );
+    const formElement = document.querySelector(`.bb-feedback-${formItem.name}`);
     if (formElement && formElement.value) {
       formData[formItem.name] = formElement.value;
     }
@@ -216,33 +214,51 @@ export const validateForm = function (form) {
   return formValid;
 };
 
-export const validateFormItem = function (formItem) {
+const validateEmail = function (email) {
+  const re =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(String(email).toLowerCase());
+};
+
+export const validateFormItem = function (formItem, showError = true) {
   var valid = true;
-  const formElement = document.querySelector(
-    `.bb-feedback-${formItem.name}`
-  );
+  const formElement = document.querySelector(`.bb-feedback-${formItem.name}`);
   if (
     (formItem.type === "text" || formItem.type === "textarea") &&
     formItem.required
   ) {
     if (!formElement.value || formElement.value === "") {
-      formElement.classList.add("bb-feedback-required");
+      showError && formElement.classList.add("bb-feedback-required");
+      valid = false;
+    } else {
+      formElement.classList.remove("bb-feedback-required");
+    }
+  }
+  if (
+    formItem.type === "text" &&
+    formItem.inputtype === "email" &&
+    formItem.required
+  ) {
+    if (!validateEmail(formElement.value)) {
+      showError && formElement.classList.add("bb-feedback-required");
       valid = false;
     } else {
       formElement.classList.remove("bb-feedback-required");
     }
   }
   if (formItem.type === "rating" && formItem.required) {
     if (!formElement.value || formElement.value === "") {
-      formElement.parentElement.classList.add("bb-feedback-required");
+      showError &&
+        formElement.parentElement.classList.add("bb-feedback-required");
       valid = false;
     } else {
       formElement.parentElement.classList.remove("bb-feedback-required");
     }
   }
   if (formItem.type === "privacypolicy" && formItem.required) {
     if (!formElement.checked) {
-      formElement.parentElement.classList.add("bb-feedback-required");
+      showError &&
+        formElement.parentElement.classList.add("bb-feedback-required");
       valid = false;
     } else {
       formElement.parentElement.classList.remove("bb-feedback-required");
@@ -266,9 +282,7 @@ export const hookForm = function (form) {
     if (!formItem) {
       break;
     }
-    const formInput = document.querySelector(
-      `.bb-feedback-${formItem.name}`
-    );
+    const formInput = document.querySelector(`.bb-feedback-${formItem.name}`);
     if (formItem.type === "text") {
       if (formItem.remember) {
         try {
@@ -286,8 +300,11 @@ export const hookForm = function (form) {
       if (formItem.defaultValue && formItem.hideOnDefaultSet) {
         formInput.parentElement.classList.add("bb-feedback-form--hidden");
       }
-      formInput.oninput = function () {
+      formInput.addEventListener("focusout", function () {
         validateFormItem(formItem);
+      });
+      formInput.oninput = function () {
+        validateFormItem(formItem, false);
       };
     }
     if (formItem.type === "privacypolicy") {
@@ -296,6 +313,8 @@ export const hookForm = function (form) {
       };
     }
     if (formItem.type === "textarea") {
+      formInput.style.height = "inherit";
+      formInput.style.height = formInput.scrollHeight + "px";
       formInput.oninput = function () {
         formInput.style.height = "inherit";
         formInput.style.height = formInput.scrollHeight + "px";

diff --git a/src/Gleap.js b/src/Gleap.js
@@ -1440,6 +1440,7 @@ class Gleap {
       customEventLog: this.eventArray,
       type: this.feedbackType,
       formData: this.formData,
+      isSilent: this.silentBugReport,
     };
 
     if (screenshotData.fileUrl) {

diff --git a/src/css/index.css b/src/css/index.css
@@ -522,6 +522,7 @@
   padding: 50px;
   display: none;
   flex-grow: 1;
+  min-height: 270px;
 }
 
 .bb-feedback-dialog-success svg {
@@ -589,7 +590,13 @@
   margin-top: 7px;
   margin-bottom: 0px;
   cursor: pointer;
-  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.05);
+}
+
+.bb-feedback-send-button--disabled {
+  background-color: #DEE1EA !important;
+  color: #9B9FAE !important;
+  opacity: 1 !important;
+  cursor: not-allowed !important;
 }
 
 .bb-feedback-send-button:hover {
@@ -1198,6 +1205,7 @@ textarea.bb-feedback-required {
   justify-content: center;
   align-items: center;
   flex-grow: 1;
+  min-height: 270px;
 }
 
 .bb--progress-ring__circle {
@@ -1430,6 +1438,14 @@ textarea.bb-feedback-required {
   background: linear-gradient(135deg, #ed4337 0%, #c7372d 100%);
 }
 
+.bb-feedback-dialog--crashed .bb-feedback-dialog-header-title {
+  color: #fff;
+}
+
+.bb-feedback-dialog--crashed .bb-feedback-send-button {
+  color: #fff;
+}
+
 .bb-feedback-dialog--crashed .bb-feedback-send-button {
   background-color: #ed4337;
 }