@goldenpine/react-form-builder2 0.20.3-build.20 → 0.20.3-build.22

package/lib/form-elements/index.js

@@ -824,53 +824,103 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           sourceDataURL = "data:image/png;base64,".concat(this.props.defaultValue);
         }
       }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: _objectSpread({}, this.props.style),
-        className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: imageStyle,
-        src: sourceDataURL
-        // {...this.getImageSizeProps(this.props.data)} // move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-container"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: fileInputStyle
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        name: name,
-        type: "file",
-        accept: "image/*"
-        //capture="camera" // With this property, users on most mobiles can only take photo but no options to pick up a photo from gallery
-        ,
-        className: "image-upload visually-hidden",
-        onChange: this.displayImage,
-        "data-clearlabel": this.props.data.label_after_photo_clear_icon,
-        disabled: this.props.read_only,
-        id: name
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-control",
-        style: {
-          position: 'relative'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "btn btn-outline-secondary",
-        htmlFor: name
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-camera"
-      }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
-        onLoad: function onLoad() {
-          return URL.revokeObjectURL(_this13.state.previewImg);
-        },
-        src: this.state.previewImg,
-        height: "100",
-        className: "image-upload-preview"
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-image-clear",
-        onClick: this.clearImage
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-times"
-      }), " ", this.props.data.label_after_photo_clear_icon)))));
+      if (this.props.data.upload_layout === "standard") {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          style: imageStyle,
+          src: sourceDataURL
+          // {...this.getImageSizeProps(this.props.data)} // move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
+        })) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-container"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: fileInputStyle
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          name: name,
+          type: "file",
+          accept: "image/*"
+          //capture="camera" // With this property, users on most mobiles can only take photo but no options to pick up a photo from gallery
+          ,
+          className: "image-upload visually-hidden",
+          onChange: this.displayImage,
+          "data-clearlabel": this.props.data.label_after_photo_clear_icon,
+          disabled: this.props.read_only,
+          id: name
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-control",
+          style: {
+            position: 'relative'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("label", {
+          className: "btn btn-outline-secondary",
+          htmlFor: name
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-camera"
+        }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          onLoad: function onLoad() {
+            return URL.revokeObjectURL(_this13.state.previewImg);
+          },
+          src: this.state.previewImg,
+          height: "100",
+          className: "image-upload-preview"
+        }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn btn-image-clear",
+          onClick: this.clearImage
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " ", this.props.data.label_after_photo_clear_icon)))));
+      } else {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          style: imageStyle,
+          src: sourceDataURL
+        })) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-container"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: fileInputStyle,
+          className: "upload-card"
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          name: name,
+          type: "file",
+          accept: "image/*",
+          className: "visually-hidden",
+          onChange: this.displayImage,
+          "data-clearlabel": this.props.data.label_after_photo_clear_icon,
+          disabled: this.props.read_only,
+          id: name
+        }), /*#__PURE__*/_react["default"].createElement("label", {
+          htmlFor: name,
+          className: "upload-card-content"
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-cloud-upload-alt upload-icon"
+        }), /*#__PURE__*/_react["default"].createElement("span", {
+          className: "upload-text"
+        }, this.props.data.message_under_camera_icon), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn-browse"
+        }, this.props.data.label_after_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "preview-container"
+        }, /*#__PURE__*/_react["default"].createElement("img", {
+          onLoad: function onLoad() {
+            return URL.revokeObjectURL(_this13.state.previewImg);
+          },
+          src: this.state.previewImg,
+          className: "image-upload-preview",
+          alt: "Preview",
+          height: "100"
+        }), /*#__PURE__*/_react["default"].createElement("button", {
+          className: "btn btn-image-clear",
+          onClick: this.clearImage
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " Remove Photo")))));
+      }
     }
   }]);
 }(_react["default"].Component);

package/lib/form-elements-edit.js

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
 var _draftJs = require("draft-js");
@@ -34,6 +35,17 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
     var _this;
     (0, _classCallCheck2["default"])(this, FormElementsEdit);
     _this = _callSuper(this, FormElementsEdit, [props]);
+    // Instead of using editElementProp for the camera layout change, we have a separate handler to immediately update the element on change without waiting for blur, as it's a radio button and we want the change to be reflected immediately in the UI.
+    (0, _defineProperty2["default"])(_this, "handleUploadLayoutChange", function (e) {
+      var this_element = _this.state.element;
+      this_element["upload_layout"] = e.target["value"];
+      _this.setState({
+        element: this_element,
+        dirty: true
+      }, function () {
+        _this.updateElement();
+      });
+    });
     _this.state = {
       element: _this.props.element,
       data: _this.props.data,
@@ -122,6 +134,18 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         });
       }
     }
+  }, {
+    key: "validateImageSize",
+    value: function validateImageSize(e) {
+      var regex = /^$|^\d+(px|%)$/;
+      if (regex.test(e.target.value)) {
+        e.target.classList.remove("is-invalid");
+        e.target.classList.add("is-valid");
+      } else {
+        e.target.classList.remove("is-valid");
+        e.target.classList.add("is-invalid");
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -348,53 +372,45 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         defaultValue: this.props.element.src,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'src', 'value')
-      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "upload-layout"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "d-flex align-items-center gap-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-check"
+        className: "form-check d-flex align-items-center"
       }, /*#__PURE__*/_react["default"].createElement("input", {
-        id: "do-center",
         className: "form-check-input",
-        type: "checkbox",
-        checked: this_checked_center,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'center', 'checked')
+        type: "radio",
+        name: "uploadLayout",
+        id: "uploadLayoutStandard",
+        value: "standard",
+        checked: this.props.element.upload_layout === "standard",
+        onChange: this.handleUploadLayoutChange
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "form-check-label",
-        htmlFor: "do-center"
+        className: "form-check-label ms-2",
+        htmlFor: "uploadLayoutStandard"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "center"
-      }), "?"))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "row"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
-        htmlFor: "elementWidth"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "width"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
-        id: "elementWidth",
-        type: "text",
-        className: "form-control",
-        defaultValue: this.props.element.width,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'width', 'value')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
-        htmlFor: "elementHeight"
+        id: "upload-layout-standard"
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check d-flex align-items-center"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        className: "form-check-input",
+        type: "radio",
+        name: "uploadLayout",
+        id: "uploadLayoutDropZone",
+        value: "dropzone",
+        checked: this.props.element.upload_layout === "dropzone",
+        onChange: this.handleUploadLayoutChange
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-check-label ms-2",
+        htmlFor: "uploadLayoutDropZone"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "height"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
-        id: "elementHeight",
-        type: "text",
-        className: "form-control",
-        defaultValue: this.props.element.height,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'height', 'value')
-      })))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        id: "upload-layout-dropzone"
+      }))))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
@@ -436,7 +452,63 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         defaultValue: this.props.element.label_after_photo_clear_icon,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_photo_clear_icon', 'value')
-      }))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "image-layout"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        id: "do-center",
+        className: "form-check-input",
+        type: "checkbox",
+        checked: this_checked_center,
+        value: true,
+        onChange: this.editElementProp.bind(this, 'center', 'checked')
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-check-label",
+        htmlFor: "do-center"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "center"
+      }), "?"))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "row mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "elementWidth"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "width"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "elementWidth",
+        type: "text",
+        className: "form-control",
+        pattern: "^$|^\\d+(px|%)$",
+        onInput: this.validateImageSize,
+        defaultValue: this.props.element.width,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'width', 'value')
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "elementHeight"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "height"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "elementHeight",
+        type: "text",
+        className: "form-control",
+        pattern: "^$|^\\d+(px|%)$",
+        onInput: this.validateImageSize,
+        defaultValue: this.props.element.height,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'height', 'value')
+      })), /*#__PURE__*/_react["default"].createElement("small", {
+        className: "form-text text-muted"
+      }, "Use ", /*#__PURE__*/_react["default"].createElement("code", null, "px"), " or ", /*#__PURE__*/_react["default"].createElement("code", null, "%"), " (e.g. 200px, 100%)."))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",

package/lib/language-provider/locales/en-us.json

@@ -37,9 +37,13 @@
   "word" : "Word",
   "excel" : "Excel",
   "ppt" : "PPT",
-  "display-label-after-camera-icon" : "Display label after camera icon",
+  "upload-layout" : "Upload Area Layout",
+  "upload-layout-standard" : "Standard",
+  "upload-layout-dropzone" : "Large upload area",
+  "image-layout" : "Image Layout",
+  "display-label-after-camera-icon" : "Display label on button",
   "place-holder-display-label-after-camera-icon" : "Upload Photo",
-  "display-message-under-camera-icon" : "Display message under camera icon",
+  "display-message-under-camera-icon" : "Display message under icon",
   "place-holder-display-message-under-camera-icon" : "Select an image from your computer or device.",
   "display-label-after-photo-clear-icon" : "Display label after photo clear icon",
   "place-holder-display-label-after-photo-clear-icon" : "Clear Photo",
@@ -107,12 +111,4 @@
   "message.was-not-registered": "was not registered",
   "message.invalid-email": "field requires valid email address",
   "message.invalid-phone-number": "field requires a valid phone number"
-
-
-
-
-
-
-
-
 }

package/lib/language-provider/locales/fa-ir.json

@@ -37,9 +37,13 @@
   "word": "Word",
   "excel": "Excel",
   "ppt": "PPT",
+  "upload-layout" : "چیدمان بخش بارگذاری",
+  "upload-layout-standard" : "استاندارد",
+  "upload-layout-dropzone" : "بخش بارگذاری بزرگ",
+  "image-layout" : "چیدمان تصویر",
   "display-label-after-camera-icon" : "نمایش برچسب پس از آیکون دوربین",
   "place-holder-display-label-after-camera-icon" : "آپلود عکس",
-  "display-message-under-camera-icon" : "نمایش پیام زیر آیکون دوربین",
+  "display-message-under-camera-icon" : "نمایش پیام زیر آیکون",
   "place-holder-display-message-under-camera-icon" : "یک تصویر را از رایانه یا دستگاه خود انتخاب کنید.",
   "display-label-after-photo-clear-icon" : "نمایش برچسب پس از آیکون حذف عکس",
   "place-holder-display-label-after-photo-clear-icon" : "حذف عکس",
@@ -107,4 +111,4 @@
   "message.was-not-registered": "ثبت نشد",
   "message.invalid-email": "فیلد نیاز به آدرس ایمیل معتبر دارد",
   "message.invalid-phone-number": "فیلد نیاز به شماره تلفن معتبر دارد"
-}
+}

package/lib/language-provider/locales/it-it.json

@@ -37,9 +37,13 @@
   "word" : "Word",
   "excel" : "Excel",
   "ppt" : "PPT",
+  "upload-layout" : "Layout dell'area di caricamento",
+  "upload-layout-standard" : "Standard",
+  "upload-layout-dropzone" : "Area di caricamento grande",
+  "image-layout" : "Layout dell'immagine",
   "display-label-after-camera-icon" : "Mostra etichetta dopo l'icona della fotocamera",
   "place-holder-display-label-after-camera-icon" : "Carica foto",
-  "display-message-under-camera-icon" : "Mostra messaggio sotto l'icona della fotocamera",
+  "display-message-under-camera-icon" : "Mostra il messaggio sotto l'icona",
   "place-holder-display-message-under-camera-icon" : "Seleziona un'immagine dal tuo computer o dispositivo.",
   "display-label-after-photo-clear-icon" : "Mostra etichetta dopo l'icona di cancellazione della foto",
   "place-holder-display-label-after-photo-clear-icon" : "Cancella foto",

package/lib/language-provider/locales/vi-vn.json

@@ -1,6 +1,8 @@
 {
   "display-label": "Nhãn hiển thị",
   "choose-file": "Chọn tệp tin",
+  "choose-file-type": "Chọn loại tệp",
+  "select-file-type": "Chọn kiểu tập tin",
   "text-to-display": "Chữ hiển thị",
   "link-to": "Liên kết tới",
   "center": "Giữa",
@@ -31,9 +33,17 @@
   "populate-options-from-api": "Lấy dữ liệu từ API",
   "minimum-number-of-selections" : "Số lượng lựa chọn tối thiểu mà khách hàng phải chọn",
   "populate": "Thực hiện",
+  "pdf" : "PDF",
+  "word" : "Word",
+  "excel" : "Excel",
+  "ppt" : "PPT",
+  "upload-layout" : "Bố cục khu vực tải lên",
+  "upload-layout-standard" : "Tiêu chuẩn",
+  "upload-layout-dropzone" : "Khu vực tải lên lớn",
+  "image-layout" : "Bố cục hình ảnh",
   "display-label-after-camera-icon" : "Hiển thị nhãn sau biểu tượng máy ảnh",
   "place-holder-display-label-after-camera-icon" : "Tải ảnh lên",
-  "display-message-under-camera-icon" : "Hiển thị tin nhắn dưới biểu tượng máy ảnh",
+  "display-message-under-camera-icon" : "Hiển thị thông báo dưới biểu tượng",
   "place-holder-display-message-under-camera-icon" : "Chọn một hình ảnh từ máy tính hoặc thiết bị của bạn.",
   "display-label-after-photo-clear-icon" : "Hiển thị nhãn sau biểu tượng xóa ảnh",
   "place-holder-display-label-after-photo-clear-icon" : "Xóa ảnh",
@@ -67,12 +77,16 @@
   "checkboxes" : "Hộp chọn",
   "multiple-choice":"Nhiều lựa chọn",
   "text-input":"Nhập chữ",
+  "email-input": "Email",
+  "phone-input": "Số điện thoại",
   "number-input":"Nhập số",
-  "fieldset":"bộ trường",
   "multi-line-input":"Nhập nhiều dòng",
+  "fieldset":"bộ trường",
   "two-columns-row":"Dòng có hai cột",
   "three-columns-row":"Dòng có ba cột",
   "four-columns-row":"Dòng có bốn cột",
+  "five-columns-row": "Hàng năm cột",
+  "six-columns-row": "Hàng sáu cột",
   "image":"Liên kết ảnh",
   "rating":"Đánh giá",
   "date":"Ngày",
@@ -81,17 +95,20 @@
   "file-attachment":"Tệp đính kèm",
   "range":"Khoảng",
   "camera":"Tải ảnh",
+  "file-upload": "Tải tệp lên",
   "place-holder-text": "Nội dung...",
   "place-holder-label": "Nhãn",
   "place-holder-website-link": "Đường dẫn tới website...",
   "place-holder-file-name": "Tên tệp...",
-  "easy": "Easy",
-  "difficult": "Difficult",
-
+  "place-holder-email": "E-Mail",
+  "place-holder-phone-number": "Số điện thoại",
+  "easy": "Dễ",
+  "difficult": "Khó",
   "drop-zone": "Khu vực kéo thả",
 
   "message.is-required": "không được bỏ trống",
   "message.was-answered incorrectly": "đã trả lời sai",
-  "message.was-not-registered": "chưa đăng ký"
-  
+  "message.was-not-registered": "chưa đăng ký",
+  "message.invalid-email": "trường này yêu cầu địa chỉ email hợp lệ",
+  "message.invalid-phone-number": "trường này yêu cầu số điện thoại hợp lệ"
 }