-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into is3569/flaky-public-api-test
- Loading branch information
Showing
10 changed files
with
1,675 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
services/static-webserver/client/source/class/osparc/component/widget/IntlTelInput.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| /* ************************************************************************ | ||
| osparc - the simcore frontend | ||
| https://osparc.io | ||
| Copyright: | ||
| 2022 IT'IS Foundation, https://itis.swiss | ||
| License: | ||
| MIT: https://opensource.org/licenses/MIT | ||
| Authors: | ||
| * Odei Maiz (odeimaiz) | ||
| ************************************************************************ */ | ||
|
|
||
| /* global intlTelInput */ | ||
|
|
||
| /** | ||
| * @ignore(intlTelInput) | ||
| */ | ||
|
|
||
| qx.Class.define("osparc.component.widget.IntlTelInput", { | ||
| extend: qx.ui.core.Widget, | ||
|
|
||
| construct: function() { | ||
| this.base(arguments); | ||
|
|
||
| this._setLayout(new qx.ui.layout.HBox(5)); | ||
|
|
||
| this.getContentElement().setStyles({ | ||
| "overflow": "visible" // needed for countries dropdown menu | ||
| }); | ||
|
|
||
| const randId = Math.floor(Math.random() * 100); | ||
| const html = `<input type='tel' id='phone-${randId}' name='phone' autocomplete='off'>`; | ||
| const phoneNumber = new qx.ui.embed.Html(html).set({ | ||
| minWidth: 185, | ||
| maxHeight: 25 | ||
| }); | ||
| this._add(phoneNumber); | ||
| phoneNumber.addListenerOnce("appear", () => { | ||
| const convertInputToPhoneInput = () => { | ||
| const domElement = document.querySelector(`#phone-${randId}`); | ||
| this.__itiInput = this.__inputToPhoneInput(domElement); | ||
| phoneNumber.getContentElement().setStyles({ | ||
| "overflow": "visible" // needed for countries dropdown menu | ||
| }); | ||
| }; | ||
| const intlTelInputLib = osparc.wrapper.IntlTelInput.getInstance(); | ||
| if (intlTelInputLib.getLibReady()) { | ||
| convertInputToPhoneInput(); | ||
| } else { | ||
| intlTelInputLib.addListenerOnce("changeLibReady", e => { | ||
| if (e.getData()) { | ||
| convertInputToPhoneInput(); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| const feedbackCheck = this.__feedbackCheck = new qx.ui.basic.Image().set({ | ||
| paddingTop: 3 | ||
| }); | ||
| feedbackCheck.exclude(); | ||
| this._add(feedbackCheck); | ||
| }, | ||
|
|
||
| statics: { | ||
| updateStyle: function(itiInput, checkIcon) { | ||
| itiInput.a.style["width"] = checkIcon && checkIcon.isVisible() ? "185px" : "215px"; | ||
| itiInput.a.style["height"] = "23px"; | ||
| itiInput.a.style["borderWidth"] = "0px"; | ||
| itiInput.a.style["backgroundColor"] = qx.theme.manager.Meta.getInstance().getTheme().name.includes("Light") ? "#eaedef" : "#202426"; | ||
| itiInput.a.style["color"] = qx.theme.manager.Color.getInstance().resolve("text"); | ||
| } | ||
| }, | ||
|
|
||
| members: { | ||
| __itiInput: null, | ||
| __feedbackCheck: null, | ||
|
|
||
| getNumber: function() { | ||
| return this.__itiInput.getNumber(); | ||
| }, | ||
|
|
||
| isValidNumber: function() { | ||
| return this.__itiInput.isValidNumber(); | ||
| }, | ||
|
|
||
| verifyPhoneNumber: function() { | ||
| const isValid = this.isValidNumber(); | ||
| this.__feedbackCheck.set({ | ||
| toolTipText: "E.164: " + this.getNumber(), | ||
| source: isValid ? "@FontAwesome5Solid/check/18" : "@FontAwesome5Solid/exclamation-triangle/18", | ||
| textColor: isValid ? "text" : "failed-red" | ||
| }); | ||
| this.__feedbackCheck.show(); | ||
| if (!isValid) { | ||
| const validationError = this.__itiInput.getValidationError(); | ||
| const errorMap = { | ||
| 0: this.tr("Invalid number"), | ||
| 1: this.tr("Invalid country code"), | ||
| 2: this.tr("Number too short"), | ||
| 3: this.tr("Number too long") | ||
| }; | ||
| const errorMsg = validationError in errorMap ? errorMap[validationError] : "Invalid number"; | ||
| this.__feedbackCheck.set({ | ||
| toolTipText: errorMsg + ". " + this.__feedbackCheck.getToolTipText() | ||
| }); | ||
| } | ||
| this.self().updateStyle(this.__itiInput, this.__feedbackCheck); | ||
| }, | ||
|
|
||
| __inputToPhoneInput: function(input) { | ||
| const iti = intlTelInput(input, { | ||
| initialCountry: "ch", // auto: geoIpLookup. need to unlock https://ipinfo.io/, | ||
| preferredCountries: ["ch", "us"] | ||
| }); | ||
| const themeManager = qx.theme.manager.Meta.getInstance(); | ||
| themeManager.addListener("changeTheme", () => this.self().updateStyle(iti)); | ||
| this.self().updateStyle(iti); | ||
| return iti; | ||
| } | ||
| } | ||
| }); |
78 changes: 78 additions & 0 deletions
78
services/static-webserver/client/source/class/osparc/wrapper/IntlTelInput.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /* ************************************************************************ | ||
| osparc - the simcore frontend | ||
| https://osparc.io | ||
| Copyright: | ||
| 2022 IT'IS Foundation, https://itis.swiss | ||
| License: | ||
| MIT: https://opensource.org/licenses/MIT | ||
| Authors: | ||
| * Odei Maiz (odeimaiz) | ||
| ************************************************************************ */ | ||
|
|
||
| /** | ||
| * @asset(intl-tel-input/js/intlTelInput.min.js) | ||
| * @asset(intl-tel-input/js/data.min.js) | ||
| * @asset(intl-tel-input/js/utils.js) | ||
| * @asset(intl-tel-input/css/intlTelInput.css) | ||
| * @asset(intl-tel-input/img/flags.png) | ||
| * @asset(intl-tel-input/img/[email protected]) | ||
| */ | ||
|
|
||
| /** | ||
| * A qooxdoo wrapper for | ||
| * <a href='https://github.com/jackocnr/intl-tel-input' target='_blank'>IntlTelInput</a> | ||
| */ | ||
|
|
||
| qx.Class.define("osparc.wrapper.IntlTelInput", { | ||
| extend: qx.core.Object, | ||
| type: "singleton", | ||
|
|
||
| statics: { | ||
| NAME: "intlTelInput", | ||
| VERSION: "17.0.19", | ||
| URL: "https://github.com/jackocnr/intl-tel-input" | ||
| }, | ||
|
|
||
| properties: { | ||
| libReady: { | ||
| check: "Boolean", | ||
| init: false, | ||
| nullable: false, | ||
| event: "changeLibReady" | ||
| } | ||
| }, | ||
| members: { | ||
| init: function() { | ||
| // initialize the script loading | ||
| let intlTelInputPath = "intl-tel-input/js/intlTelInput.min.js"; | ||
| let dataPath = "intl-tel-input/js/data.min.js"; | ||
| let utilsPath = "intl-tel-input/js/utils.js"; | ||
| let intlTelInputCss = "intl-tel-input/css/intlTelInput.css"; | ||
| let intlTelInputCssUri = qx.util.ResourceManager.getInstance().toUri(intlTelInputCss); | ||
| qx.module.Css.includeStylesheet(intlTelInputCssUri); | ||
| let dynLoader = new qx.util.DynamicScriptLoader([ | ||
| intlTelInputPath, | ||
| dataPath, | ||
| utilsPath | ||
| ]); | ||
|
|
||
| dynLoader.addListenerOnce("ready", () => { | ||
| console.log(intlTelInputPath + " loaded"); | ||
| this.setLibReady(true); | ||
| }, this); | ||
|
|
||
| dynLoader.addListener("failed", e => { | ||
| let data = e.getData(); | ||
| console.error("failed to load " + data.script); | ||
| }, this); | ||
|
|
||
| dynLoader.start(); | ||
| } | ||
| } | ||
| }); |
Oops, something went wrong.