Skip to content

Commit 9f3c902

Browse files
odeimaizodeimaiz
committed
refactored
1 parent 880250a commit 9f3c902

File tree

1 file changed

+62
-66
lines changed

1 file changed

+62
-66
lines changed

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

Lines changed: 62 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,6 @@ qx.Class.define("osparc.auth.ui.VerifyPhoneNumberView", {
3232
},
3333

3434
members: {
35-
__validateCodeField: null,
36-
__validateCodeBtn: null,
37-
__sendViaEmail: null,
38-
3935
_createChildControlImpl: function(id) {
4036
let control;
4137
switch (id) {
@@ -75,72 +71,65 @@ qx.Class.define("osparc.auth.ui.VerifyPhoneNumberView", {
7571
center: true,
7672
minWidth: 80
7773
});
74+
control.addListener("execute", () => this.__verifyPhoneNumber());
7875
this.getChildControl("phone-number-layout").add(control);
7976
break;
77+
case "validation-layout":
78+
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
79+
zIndex: 1 // the countries list that goes on top has a z-index of 2
80+
});
81+
this.add(control);
82+
break;
83+
case "validate-code-field":
84+
control = new qx.ui.form.TextField().set({
85+
placeholder: this.tr("Type the SMS code"),
86+
enabled: false
87+
});
88+
control.addListener("input", e => this.getChildControl("validate-code-button").setEnabled(Boolean(e.getData())));
89+
this.getChildControl("validation-layout").add(control, {
90+
flex: 1
91+
});
92+
break;
93+
case "validate-code-button":
94+
control = new osparc.ui.form.FetchButton(this.tr("Validate")).set({
95+
appearance: "strong-button",
96+
center: true,
97+
enabled: false,
98+
minWidth: 80,
99+
});
100+
control.addListener("execute", () => this.__validateCodeRegister());
101+
this.getChildControl("validation-layout").add(control);
102+
break;
103+
case "send-via-email-button":
104+
control = new osparc.ui.form.FetchButton().set({
105+
label: this.tr("Skip phone registration and send code via email"),
106+
textColor: "text",
107+
zIndex: 1 // the countries list that goes on top has a z-index of 2
108+
});
109+
control.addListener("execute", () => this.__requestCodeViaEmail(), this);
110+
this.add(control);
111+
break;
80112
}
81113
return control || this.base(arguments, id);
82114
},
83115

84116
_buildPage: function() {
85-
this.__buildVerificationLayout();
86-
const validationLayout = this.__createValidationLayout().set({
87-
zIndex: 1 // the countries list that goes on top has a z-index of 2
88-
});
89-
this.add(validationLayout);
90-
const sendViaEmailBtn = this.__createSendViaEmailButton().set({
91-
zIndex: 1 // the countries list that goes on top has a z-index of 2
92-
});
93-
this.add(sendViaEmailBtn);
94-
this.__attachHandlers();
95-
},
96-
97-
__buildVerificationLayout: function() {
98117
this.getChildControl("title");
99118
this.getChildControl("intro-text");
100119

101120
this.getChildControl("intl-tel-input");
102121
this.getChildControl("verify-number-button");
103-
},
104122

105-
__createValidationLayout: function() {
106-
const smsValidationLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
107-
const validateCodeTF = this.__validateCodeField = new qx.ui.form.TextField().set({
108-
placeholder: this.tr("Type the SMS code"),
109-
enabled: false
110-
});
111-
smsValidationLayout.add(validateCodeTF, {
112-
flex: 1
113-
});
114-
const validateCodeBtn = this.__validateCodeBtn = new osparc.ui.form.FetchButton(this.tr("Validate")).set({
115-
appearance: "strong-button",
116-
center: true,
117-
minWidth: 80
118-
});
119-
validateCodeBtn.setEnabled(false);
120-
validateCodeTF.addListener("input", e => validateCodeBtn.setEnabled(Boolean(e.getData())));
121-
smsValidationLayout.add(validateCodeBtn);
122-
return smsValidationLayout;
123-
},
124-
125-
__createSendViaEmailButton: function() {
126-
const txt = this.tr("Skip phone registration and send code via email");
127-
const sendViaEmail = this.__sendViaEmail = new osparc.ui.form.FetchButton(txt).set({
128-
textColor: "text",
129-
zIndex: 1 // the countries list that goes on top has a z-index of 2
130-
});
131-
return sendViaEmail;
132-
},
123+
this.getChildControl("validate-code-field");
124+
this.getChildControl("validate-code-button");
133125

134-
__attachHandlers: function() {
135-
const verifyPhoneNumberBtn = this.getChildControl("verify-number-button");
136-
verifyPhoneNumberBtn.addListener("execute", () => this.__verifyPhoneNumber());
137-
this.__validateCodeBtn.addListener("execute", () => this.__validateCodeRegister());
138-
this.__sendViaEmail.addListener("execute", () => this.__requestCodeViaEmail(), this);
126+
this.getChildControl("send-via-email-button");
139127
},
140128

141129
__verifyPhoneNumber: function() {
142130
const itiInput = this.getChildControl("intl-tel-input");
143131
const verifyPhoneNumberBtn = this.getChildControl("verify-number-button");
132+
const validateCodeBtn = this.getChildControl("validate-code-button");
144133
itiInput.verifyPhoneNumber();
145134
const isValid = itiInput.isValidNumber();
146135
if (isValid) {
@@ -151,10 +140,11 @@ qx.Class.define("osparc.auth.ui.VerifyPhoneNumberView", {
151140
osparc.FlashMessenger.logAs(resp.message, "INFO");
152141
verifyPhoneNumberBtn.setFetching(false);
153142
// enable, focus and listen to Enter
154-
this.__validateCodeField.setEnabled(true);
155-
this.__validateCodeField.focus();
156-
this.__validateCodeField.activate();
157-
this.__enableEnterCommand(this.__validateCodeBtn);
143+
const validateCodeField = this.getChildControl("validate-code-field");
144+
validateCodeField.setEnabled(true);
145+
validateCodeField.focus();
146+
validateCodeField.activate();
147+
this.__enableEnterCommand(validateCodeBtn);
158148
})
159149
.catch(err => {
160150
osparc.FlashMessenger.logError(err);
@@ -165,35 +155,39 @@ qx.Class.define("osparc.auth.ui.VerifyPhoneNumberView", {
165155
},
166156

167157
__validateCodeRegister: function() {
168-
this.__validateCodeBtn.setFetching(true);
158+
const validateCodeField = this.getChildControl("validate-code-field");
159+
const validateCodeBtn = this.getChildControl("validate-code-button");
160+
161+
validateCodeBtn.setFetching(true);
169162

170163
const loginFun = log => {
171164
osparc.FlashMessenger.logAs(log.message, "INFO");
172-
this.__validateCodeBtn.setFetching(false);
173-
this.__validateCodeField.setEnabled(false);
174-
this.__validateCodeBtn.setEnabled(false);
175-
this.__validateCodeBtn.setIcon("@FontAwesome5Solid/check/12");
165+
validateCodeField.setEnabled(false);
166+
validateCodeBtn.setFetching(false);
167+
validateCodeBtn.setEnabled(false);
168+
validateCodeBtn.setIcon("@FontAwesome5Solid/check/12");
176169
this.fireDataEvent("done", log.message);
177170
};
178171

179172
const failFun = err => {
180173
osparc.FlashMessenger.logError(err);
181-
this.__validateCodeBtn.setFetching(false);
174+
validateCodeBtn.setFetching(false);
182175
// TODO: can get field info from response here
183176
err = String(err) || this.tr("Invalid code");
184-
this.__validateCodeField.set({
177+
validateCodeField.set({
185178
invalidMessage: err,
186179
valid: false
187180
});
188181
};
189182

190183
const manager = osparc.auth.Manager.getInstance();
191184
const itiInput = this.getChildControl("intl-tel-input");
192-
manager.validateCodeRegister(this.getUserEmail(), itiInput.getNumber(), this.__validateCodeField.getValue(), loginFun, failFun, this);
185+
manager.validateCodeRegister(this.getUserEmail(), itiInput.getNumber(), validateCodeField.getValue(), loginFun, failFun, this);
193186
},
194187

195188
__requestCodeViaEmail: function() {
196-
this.__sendViaEmail.setFetching(true);
189+
const sendViaEmail = this.getChildControl("send-via-email-button");
190+
sendViaEmail.setFetching(true);
197191
osparc.auth.Manager.getInstance().resendCodeViaEmail(this.getUserEmail())
198192
.then(data => {
199193
const message = osparc.auth.core.Utils.extractMessage(data);
@@ -206,7 +200,7 @@ qx.Class.define("osparc.auth.ui.VerifyPhoneNumberView", {
206200
});
207201
})
208202
.catch(err => osparc.FlashMessenger.logError(err))
209-
.finally(() => this.__sendViaEmail.setFetching(false));
203+
.finally(() => sendViaEmail.setFetching(false));
210204
},
211205

212206
__enableEnterCommand: function(onBtn) {
@@ -219,7 +213,9 @@ qx.Class.define("osparc.auth.ui.VerifyPhoneNumberView", {
219213
__disableCommands: function() {
220214
const verifyPhoneNumberBtn = this.getChildControl("verify-number-button");
221215
verifyPhoneNumberBtn.setCommand(null);
222-
this.__validateCodeBtn.setCommand(null);
216+
217+
const validateCodeBtn = this.getChildControl("validate-code-button");
218+
validateCodeBtn.setCommand(null);
223219
},
224220

225221
_onAppear: function() {

0 commit comments

Comments
 (0)