Skip to content

Commit 29cc98a

Browse files
herbertvuijkherbertvuijk
committed
New version with single input
New version with single input because of IOS issues. Similar style as ABN AMRO banking app. Included default CSS in widget now for less styling
1 parent e3ec12f commit 29cc98a

6 files changed

Lines changed: 125 additions & 157 deletions

File tree

‎Helpers/HtmlTemplate.html‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1 @@
1-
<div class="mobileLogin">
2-
<div class="loginContainer">
3-
<div id="fulllogin" style="display: none;">
4-
<div id="errormessages" style="display: none;"></div>
5-
<label id="usernamelabel" autocapitalize="off" autocorrect="off" style="display:block;"></label>
6-
<input id="username" type="text" style="width:100%" />
7-
<label id="passwordlabel" autocapitalize="off" autocorrect="off" style="display:block;"></label>
8-
<input id="password" type="password" style="width:100%" />
9-
<label id="chooseshortcode" style="display:block;"></label>
10-
<div class="shortcode">
11-
<input id="inlog1" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'inlog2\').focus() };" onfocus="this.value = \'\'" />
12-
<input id="inlog2" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'inlog3\').focus() };" onfocus="this.value = \'\'" />
13-
<input id="inlog3" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'inlog4\').focus() };" onfocus="this.value = \'\'" />
14-
<input id="inlog4" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'inlog5\').focus() };" onfocus="this.value = \'\'" />
15-
<input id="inlog5" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.hitch(globalLoginRef, globalLoginRef.submitFullLogin)(); };" onfocus="this.value = \'\'" />
16-
</div>
17-
</div>
18-
<div id="quicklogin" style="display: none">
19-
<label id="givelogincode" style="display:block;"></label>
20-
<div class="shortcode">
21-
<input id="qinlog1" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'qinlog2\').focus() };" onfocus="this.value = \'\'" />
22-
<input id="qinlog2" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'qinlog3\').focus() };" onfocus="this.value = \'\'" />
23-
<input id="qinlog3" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'qinlog4\').focus() };" onfocus="this.value = \'\'" />
24-
<input id="qinlog4" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.byId(\'qinlog5\').focus() };" onfocus="this.value = \'\'" />
25-
<input id="qinlog5" type="number" pattern="[0-9]*" maxlength="1" onkeyup="if(this.value.length >= 1) { dojo.hitch(globalLoginRef, globalLoginRef.submitQuickLogin)(); };" onfocus="this.value = \'\'" />
26-
</div>
27-
<input type="button" onclick="dojo.hitch(globalLoginRef, globalLoginRef.reset)();" id="rechoose" class="button" />
28-
</div>
29-
</div>
30-
</div>
1+
<div class="mobileLogin"><div class="loginContainer"><div id="errormessages" class="alert alert-danger" style="display: none;">.</div><div id="fulllogin" style="display: none;"><label id="usernamelabel" style="display:block;">.</label><input id="username" class="textinput form-control" autocapitalize="off" autocorrect="off" type="text" style="width:100%" /><label id="passwordlabel" style="display:block;">.</label><input id="password" class="textinput form-control" autocapitalize="off" autocorrect="off" type="password" style="width:100%" /><label id="chooseshortcode" style="display:block;">.</label><div class="shortcode" style="width:100%;position:relative;"><div class="position" id="position1">.</div><div class="position" id="position2">.</div><div class="position" id="position3">.</div><div class="position" id="position4">.</div><div class="position" id="position5">.</div><input id="inlog5" type="number" class="shortcodeinput" pattern="[0-9]*" maxlength="5" style="background-color:transparent; border:0px;" onkeyup="dojo.hitch(globalLoginRef, globalLoginRef.submitFullLogin)();" onfocus="this.value = \'\'; dojo.hitch(globalLoginRef, globalLoginRef.inputChecker)(\'\');" /><div style="clear:both;visibility:hidden;height:0px;">.</div></div></div><div id="quicklogin" style="display: none"><label id="givelogincode" style="display:block;">.</label><div class="shortcode" style="width:100%;position:relative;"><div class="position" id="qposition1">.</div><div class="position" id="qposition2">.</div><div class="position" id="qposition3">.</div><div class="position" id="qposition4">.</div><div class="position" id="qposition5">.</div><input id="qinlog5" type="number" class="shortcodeinput" pattern="[0-9]*" maxlength="5" style="background-color:transparent; border:0px;" onkeyup="dojo.hitch(globalLoginRef, globalLoginRef.submitQuickLogin)();" onfocus="this.value = \'\'; dojo.hitch(globalLoginRef, globalLoginRef.inputChecker)(\'q\');" /><div style="clear:both;visibility:hidden;height:0px;">.</div></div><input type="button" style="display:block; clear:both;" onclick="dojo.hitch(globalLoginRef, globalLoginRef.reset)();" id="rechoose" class="btn btn-primary loginButton" /></div></div></div>

‎Helpers/example.css‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

‎Output/SimpleLogin.mpk‎

1021 Bytes
Binary file not shown.

‎Output/SimpleLoginModule.mpk‎

804 Bytes
Binary file not shown.

‎SimpleLogin/SimpleLogin.js‎

Lines changed: 65 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var globalLoginRef;
44
mendix.widget.declare("SimpleLogin.SimpleLogin", {
55
addons : [dijit._Templated],
66

7-
templateString : '<div class="mobileLogin"><div class="loginContainer"><div id="errormessages" style="display: none;"></div><div id="fulllogin" style="display: none;"><label id="usernamelabel" style="display:block;"></label><input id="username" autocapitalize="off" autocorrect="off" type="text" style="width:100%" /><label id="passwordlabel" style="display:block;"></label><input id="password" autocapitalize="off" autocorrect="off" type="password" style="width:100%" /><label id="chooseshortcode" style="display:block;"></label><div class="shortcode"><input id="inlog5" type="number" pattern="[0-9]*" maxlength="5" onkeyup="if(this.value.length >= 5) { dojo.hitch(globalLoginRef, globalLoginRef.submitFullLogin)(); };" onfocus="this.value = \'\'" /></div></div><div id="quicklogin" style="display: none"><label id="givelogincode" style="display:block;"></label><div class="shortcode"><input id="qinlog5" type="number" pattern="[0-9]*" maxlength="5" onkeyup="if(this.value.length >= 5) { dojo.hitch(globalLoginRef, globalLoginRef.submitQuickLogin)(); };" onfocus="this.value = \'\'" /> </div><input type="button" onclick="dojo.hitch(globalLoginRef, globalLoginRef.reset)();" id="rechoose" class="button" /></div></div></div>',
7+
templateString : '<div class="mobileLogin"><div class="loginContainer"><div id="errormessages" class="alert alert-danger" style="display: none;">.</div><div id="fulllogin" style="display: none;"><label id="usernamelabel" style="display:block;">.</label><input id="username" class="textinput form-control" autocapitalize="off" autocorrect="off" type="text" style="width:100%" /><label id="passwordlabel" style="display:block;">.</label><input id="password" class="textinput form-control" autocapitalize="off" autocorrect="off" type="password" style="width:100%" /><label id="chooseshortcode" style="display:block;">.</label><div class="shortcode" style="width:100%;position:relative;"><div class="position" id="position1">.</div><div class="position" id="position2">.</div><div class="position" id="position3">.</div><div class="position" id="position4">.</div><div class="position" id="position5">.</div><input id="inlog5" type="number" class="shortcodeinput" pattern="[0-9]*" maxlength="5" style="background-color:transparent; border:0px;" onkeyup="dojo.hitch(globalLoginRef, globalLoginRef.submitFullLogin)();" onfocus="this.value = \'\'; dojo.hitch(globalLoginRef, globalLoginRef.inputChecker)(\'\');" /><div style="clear:both;visibility:hidden;height:0px;">.</div></div></div><div id="quicklogin" style="display: none"><label id="givelogincode" style="display:block;">.</label><div class="shortcode" style="width:100%;position:relative;"><div class="position" id="qposition1">.</div><div class="position" id="qposition2">.</div><div class="position" id="qposition3">.</div><div class="position" id="qposition4">.</div><div class="position" id="qposition5">.</div><input id="qinlog5" type="number" class="shortcodeinput" pattern="[0-9]*" maxlength="5" style="background-color:transparent; border:0px;" onkeyup="dojo.hitch(globalLoginRef, globalLoginRef.submitQuickLogin)();" onfocus="this.value = \'\'; dojo.hitch(globalLoginRef, globalLoginRef.inputChecker)(\'q\');" /><div style="clear:both;visibility:hidden;height:0px;">.</div></div><input type="button" style="display:block; clear:both;" onclick="dojo.hitch(globalLoginRef, globalLoginRef.reset)();" id="rechoose" class="btn btn-primary loginButton" /></div></div></div>',
88

99
inputargs: {
1010
urlMf : '',
@@ -52,8 +52,6 @@ mendix.widget.declare("SimpleLogin.SimpleLogin", {
5252

5353
this.guid = window.localStorage.getItem("devicecode");
5454

55-
this.resetFieldValues();
56-
5755
if(this.guid != null){
5856
// show quick login
5957
dojo.byId("quicklogin").style.display = "block";
@@ -70,43 +68,71 @@ mendix.widget.declare("SimpleLogin.SimpleLogin", {
7068
blocker : function(){
7169
this.indicator.start();
7270
},
73-
submitFullLogin : function(){
74-
this.blocker();
75-
76-
this.removeError();
77-
78-
var username = dojo.byId("username").value;
79-
var password = dojo.byId("password").value;
80-
var shortcode = dojo.byId("inlog5").value;
81-
82-
var xhrArgs = {
83-
url: this.hostname+"/registerAppDevice/",
84-
postData: "username=" + username + "&password=" + password + "&shortcode=" + shortcode,
85-
handleAs: "text",
86-
load: dojo.hitch(this, this.succesHandler),
87-
error: dojo.hitch(this, this.errorHandler)
88-
};
71+
inputChecker: function(q){
72+
if(typeof q == 'undefined'){
73+
q= "";
74+
}
75+
var shortcode = dojo.byId(q + "inlog5").value;
76+
var position = shortcode.length + 1;
8977

90-
dojo.xhrPost(xhrArgs);
91-
this.resetFieldValues();
78+
for(var i=1;i<=5; i++){
79+
var el = dojo.byId(q + "position" + i);
80+
if(position==i){
81+
dojo.removeClass(el, "positionfilled");
82+
dojo.addClass(el, "positionselected");
83+
}
84+
else if(position < i){
85+
dojo.removeClass(el,"positionfilled");
86+
dojo.removeClass(el,"positionselected");
87+
}
88+
else {
89+
dojo.addClass(el,"positionfilled");
90+
dojo.addClass(el, "positionselected");
91+
}
92+
93+
}
94+
return position==6;
95+
},
96+
97+
submitFullLogin : function(){
98+
if(this.inputChecker("")){
99+
this.blocker();
100+
101+
this.removeError();
102+
103+
var username = dojo.byId("username").value;
104+
var password = dojo.byId("password").value;
105+
var shortcode = dojo.byId("inlog5").value;
106+
107+
var xhrArgs = {
108+
url: this.hostname+"/registerAppDevice/",
109+
postData: "username=" + username + "&password=" + password + "&shortcode=" + shortcode,
110+
handleAs: "text",
111+
load: dojo.hitch(this, this.succesHandler),
112+
error: dojo.hitch(this, this.errorHandler)
113+
};
114+
115+
dojo.xhrPost(xhrArgs);
116+
}
92117
},
93118

94119
submitQuickLogin : function(){
95-
this.blocker();
96-
97-
this.removeError();
98-
var shortcode = dojo.byId("qinlog5").value;
99-
100-
var xhrArgs = {
101-
url: this.hostname+"/loginAppDevice/",
102-
postData: "device=" + this.guid + "&shortcode=" + shortcode,
103-
handleAs: "text",
104-
load: dojo.hitch(this, this.succesHandlerQuickLogin),
105-
error: dojo.hitch(this, this.errorHandler)
106-
};
107-
108-
dojo.xhrPost(xhrArgs);
109-
this.resetFieldValues();
120+
if(this.inputChecker("q")){
121+
this.blocker();
122+
123+
this.removeError();
124+
var shortcode = dojo.byId("qinlog5").value;
125+
126+
var xhrArgs = {
127+
url: this.hostname+"/loginAppDevice/",
128+
postData: "device=" + this.guid + "&shortcode=" + shortcode,
129+
handleAs: "text",
130+
load: dojo.hitch(this, this.succesHandlerQuickLogin),
131+
error: dojo.hitch(this, this.errorHandler)
132+
};
133+
134+
dojo.xhrPost(xhrArgs);
135+
}
110136
},
111137

112138

@@ -121,11 +147,14 @@ mendix.widget.declare("SimpleLogin.SimpleLogin", {
121147
resetFieldValues : function(){
122148
dojo.byId("inlog5").value = "";
123149
dojo.byId("qinlog5").value = "";
150+
this.inputChecker();
124151

125152
},
126153
errorHandler : function(){
127154
dojo.byId("errormessages").innerHTML = this.loginFailed;
128155
dojo.byId("errormessages").style.display = "block";
156+
157+
this.resetFieldValues();
129158
this.indicator.stop();
130159
},
131160
removeError: function(){

‎SimpleLogin/ui/SimpleLogin.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
2+
/**MOBILE LOGIN*/
3+
.mobileLogin label {
4+
font-weight:bold;
5+
}
6+
7+
/* Verberg pijtljes FF en Webkit */
8+
.mobileLogin input[type=number] {
9+
-moz-appearance: textfield;
10+
}
11+
::-webkit-inner-spin-button { -webkit-appearance: none;}
12+
::-webkit-outer-spin-button { -webkit-appearance: none;}
13+
14+
.mobileLogin input[type=number]::-moz-inner-spin-button,
15+
.mobileLogin input[type=number]::-moz-outer-spin-button,
16+
.mobileLogin input[type=number]::-webkit-inner-spin-button,
17+
.mobileLogin input[type=number]::-webkit-outer-spin-button {
18+
-webkit-appearance: none;
19+
margin: 0;
20+
}
21+
.position{
22+
float:left;
23+
width:50px;
24+
height:50px;
25+
line-height:40px;
26+
background-color:#eee;
27+
text-align:center;
28+
vertical-align:middle;
29+
font-size:20px;
30+
border-right:1px solid #ccc;
31+
}
32+
.positionselected {
33+
border-bottom:2px solid #bbb;
34+
box-sizing:border-box;
35+
-moz-box-sizing:border-box;
36+
-webkit-box-sizing:border-box;
37+
38+
}
39+
.positionfilled {
40+
border-bottom:2px solid #bbb;
41+
box-sizing:border-box;
42+
-moz-box-sizing:border-box;
43+
-webkit-box-sizing:border-box;
44+
font-size:40px;
45+
color:#d55058;
46+
line-height:28px;
47+
}
48+
.mobileLogin .shortcodeinput {
49+
width:250px;
50+
position:absolute;
51+
52+
left:0;
53+
height:50px;
54+
color:transparent;
55+
overflow:hidden;
56+
}
57+
.mobileLogin .loginButton {
58+
margin-top:10px;
59+
}

0 commit comments

Comments
 (0)