Skip to content

Commit b895e72

Browse files
odeimaizodeimaiz
committed
moving files around
1 parent 53e4949 commit b895e72

File tree

4 files changed

+173
-3
lines changed

4 files changed

+173
-3
lines changed

‎services/static-webserver/client/source/class/osparc/auth/ui/RequestAccount.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
7777
break;
7878
}
7979

80-
const phone = new qx.ui.form.TextField();
80+
const phone = new osparc.ui.form.IntlTelInput();
8181
this._form.add(phone, this.tr("Phone Number"), null, "phone");
8282

8383

‎services/static-webserver/client/source/class/osparc/auth/ui/VerifyPhoneNumberView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ qx.Class.define("osparc.auth.ui.VerifyPhoneNumberView", {
6666
this.add(control);
6767
break;
6868
case "intl-tel-input":
69-
control = new osparc.widget.IntlTelInput();
69+
control = new osparc.ui.form.IntlTelInput();
7070
this.getChildControl("phone-number-layout").add(control, {
7171
flex: 1
7272
});

‎services/static-webserver/client/source/class/osparc/ui/form/IntlTelInput.js‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
/* global intlTelInput */
19+
20+
/**
21+
* @ignore(intlTelInput)
22+
*/
23+
24+
qx.Class.define("osparc.ui.form.IntlTelInput", {
25+
extend: qx.ui.core.Widget,
26+
implement: [qx.ui.form.IForm, qx.ui.form.IStringForm],
27+
include: [qx.ui.form.MForm, qx.ui.form.MModelProperty],
28+
29+
construct: function() {
30+
this.base(arguments);
31+
32+
this._setLayout(new qx.ui.layout.HBox());
33+
34+
this.getContentElement().setStyles({
35+
"overflow": "visible" // needed for countries dropdown menu
36+
});
37+
38+
const randId = Math.floor(Math.random() * 100);
39+
const html = `<input type='tel' id='phone-${randId}' name='phone' autocomplete='off'>`;
40+
const phoneNumber = new qx.ui.embed.Html(html).set({
41+
marginTop: 2,
42+
marginLeft: 2,
43+
marginRight: 2,
44+
minWidth: 185,
45+
maxHeight: 25
46+
});
47+
this._add(phoneNumber);
48+
phoneNumber.addListenerOnce("appear", () => {
49+
const convertInputToPhoneInput = () => {
50+
const domElement = document.querySelector(`#phone-${randId}`);
51+
this.__itiInput = this.__inputToPhoneInput(domElement);
52+
phoneNumber.getContentElement().setStyles({
53+
"overflow": "visible" // needed for countries dropdown menu
54+
});
55+
};
56+
const intlTelInputLib = osparc.wrapper.IntlTelInput.getInstance();
57+
if (intlTelInputLib.getLibReady()) {
58+
convertInputToPhoneInput();
59+
} else {
60+
intlTelInputLib.addListenerOnce("changeLibReady", e => {
61+
if (e.getData()) {
62+
convertInputToPhoneInput();
63+
}
64+
});
65+
}
66+
});
67+
68+
const feedbackCheck = this.__feedbackCheck = new qx.ui.basic.Image();
69+
feedbackCheck.exclude();
70+
this._add(feedbackCheck);
71+
},
72+
73+
properties: {
74+
// Form-compatible property
75+
value: {
76+
check: "String",
77+
nullable: true,
78+
event: "changeValue",
79+
apply: "_applyValue"
80+
}
81+
},
82+
83+
statics: {
84+
updateStyle: function(itiInput, checkIcon) {
85+
const textColor = qx.theme.manager.Color.getInstance().resolve("text");
86+
const bgColor = qx.theme.manager.Color.getInstance().resolve("input_background");
87+
itiInput.a.style["width"] = checkIcon && checkIcon.isVisible() ? "185px" : "215px";
88+
itiInput.a.style["height"] = "26px";
89+
itiInput.a.style["borderWidth"] = "0px";
90+
itiInput.a.style["backgroundColor"] = bgColor;
91+
itiInput.a.style["color"] = textColor;
92+
93+
document.documentElement.style.setProperty('--country-list-dropdown-bg', bgColor);
94+
document.documentElement.style.setProperty('--country-list-dropdown-text', textColor);
95+
}
96+
},
97+
98+
members: {
99+
__itiInput: null,
100+
__feedbackCheck: null,
101+
102+
// IStringForm interface implementation
103+
getValue: function() {
104+
return this.__itiInput ? this.__itiInput.getNumber() : null;
105+
},
106+
107+
setValue: function(value) {
108+
if (this.__itiInput && value) {
109+
// intlTelInput doesn't have a full setter for raw numbers
110+
this.__itiInput.setNumber(value);
111+
}
112+
this._applyValue(value);
113+
},
114+
115+
resetValue: function() {
116+
this.setValue(null);
117+
},
118+
119+
_applyValue: function(value) {
120+
this.fireDataEvent("changeValue", value);
121+
},
122+
123+
isValidNumber: function() {
124+
return this.__itiInput ? this.__itiInput.isValidNumber() : false;
125+
},
126+
127+
verifyPhoneNumber: function() {
128+
const isValid = this.isValidNumber();
129+
this.__feedbackCheck.set({
130+
toolTipText: "E.164: " + this.getValue(),
131+
source: isValid ? "@FontAwesome5Solid/check/16" : "@FontAwesome5Solid/exclamation-triangle/16",
132+
textColor: isValid ? "text" : "failed-red",
133+
alignY: "middle",
134+
});
135+
this.__feedbackCheck.show();
136+
if (!isValid) {
137+
const validationError = this.__itiInput.getValidationError();
138+
const errorMap = {
139+
0: this.tr("Invalid number"),
140+
1: this.tr("Invalid country code"),
141+
2: this.tr("Number too short"),
142+
3: this.tr("Number too long")
143+
};
144+
const errorMsg = errorMap[validationError] || "Invalid number";
145+
this.__feedbackCheck.set({
146+
toolTipText: errorMsg + ". " + this.__feedbackCheck.getToolTipText()
147+
});
148+
}
149+
this.self().updateStyle(this.__itiInput, this.__feedbackCheck);
150+
},
151+
152+
__inputToPhoneInput: function(input) {
153+
const iti = intlTelInput(input, {
154+
initialCountry: "auto",
155+
geoIpLookup: callback => {
156+
fetch("https://ipapi.co/json")
157+
.then(res => res.json())
158+
.then(data => callback(data.country_code))
159+
.catch(() => callback("ch"));
160+
},
161+
preferredCountries: [],
162+
dropdownContainer: document.body,
163+
});
164+
const themeManager = qx.theme.manager.Meta.getInstance();
165+
themeManager.addListener("changeTheme", () => this.self().updateStyle(iti));
166+
this.self().updateStyle(iti);
167+
return iti;
168+
}
169+
}
170+
});

‎services/static-webserver/client/source/class/osparc/widget/IntlTelInput.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
* @ignore(intlTelInput)
2222
*/
2323

24-
qx.Class.define("osparc.widget.IntlTelInput", {
24+
qx.Class.define("osparc.ui.form.IntlTelInput", {
2525
extend: qx.ui.core.Widget,
2626
implement: [qx.ui.form.IForm, qx.ui.form.IStringForm],
2727
include: [qx.ui.form.MForm, qx.ui.form.MModelProperty],

0 commit comments

Comments
 (0)