If you are unable to create a new account, please email support@bspsoftware.com

 

Custom Login Screen - submit with enter key

Started by Lynn, 20 Mar 2017 05:43:36 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Lynn

20 Mar 2017 05:43:36 AM
I have implemented a custom login page and it looks great but does not submit unless I use the mouse to click on the button. I want it to submit when I press the enter key. Sadly, I lack sufficient skills to make this happen.

The button does not respond if I change the type to submit. I also tried adding an onkeypress event to the password input field as shown below but nothing happened with this either. I don't see a form element anywhere so perhaps both of these techniques are not applicable in this situation?

Code Select

<input id="sample.password" name="CAMPassword" placeholder="Password" aria-label="Password"
class="sample.password sampleAuthInput sampleUserPromptInput" type="password"
onkeypress="document.getElementById('sample.login').click()">


I have attached the original sample login html in case anyone can help.

Lynn

#1
20 Mar 2017 05:44:31 AM
Attached here is the .js file in case the answer lies in modifying this file rather than the .html.

bdbits

#2
22 Mar 2017 10:04:29 AM
It would be more common to use onkeyup, but in either case you are going to get that whenever the user presses a key with the input element in focus, e.g. when trying to type a character in their password. So even thought it should work with or without a <form>, it's probably not what you want.

When I look at the page source, it is just a <div>. No <head>, <body>, etc. And it looks to me like perhaps there is an additional file expected to be included (which could be in <head>). I do not currently have access to a Cognos box to look at the default page to see what you might be missing. And it would probably matter which version you are on, though given the (c) notice I would guess v11.

I would have a look at the "real" login page source to see what is missing, but it might have enough content in it to be overwhelming if you are not used to this kind of thing. You could copy it and remove stuff until it breaks, tedious as that might be.

Sorry I am not much help, but maybe my ramblings will jog something loose for you.

Lynn

#3
23 Mar 2017 03:02:31 AM
Thanks for the info. I should have mentioned version 11.0.5. I have limited skills in this area so overwhelming is an understatement!

As it happens, I had to remove my custom login page for the moment because some IE users have an issue where they get an invalid credentials error as soon as they put even one character into the password box. Must be some setting differences since others with the same browser version have no problem. I've not had a chance yet to compare settings. I also want to test with the unadulterated samples IBM provides with the great outdoors branding to verify it isn't down to something I fat-fingered inadvertently.

Of course it is not a problem on other browsers. Sigh.

If I find resolution to any of this I will post back and hopefully spare someone else the agony.

bdbits

#4
24 Mar 2017 01:03:53 PM
Oddly enough, the invalid credentials mean your code was actually probably working for those people. The act of typing a character would have triggered and onkeypress and your code, which would have clicked the button and tried to log them in. Now I wonder why it did not work for others.

If you get it figured out, I am sure there will be other people looking to solve the same problem.

AnalyticsWithJay

#5
27 Mar 2017 12:00:31 PM
Quote from: Lynn on 20 Mar 2017 05:44:31 AM
Attached here is the .js file in case the answer lies in modifying this file rather than the .html.

Hi Lynn,

I took a quick look at the JS and I see the following:

Code Select

var loginBtn = root.getElementsByClassName('sample.loginBtn')[0];
loginBtn.onclick = function() {...}


Currently the code will only fire when a button is clicked, so we need at add another listener. Although we could change that code, the easiest method is to add an event listener on key-up to check for enter. If enter is clicked, we fire off the button.

Try adding this:
Code Select

document.getElementById("sample.login")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("sample.login").click();
}
});


Apologies, I haven't had time to test this.

Lynn

#6
31 Mar 2017 08:11:49 AM
Thanks Jay,
I've been pulled into other things and haven't had a chance to try this yet. I'll post back with the outcome once I can get back to it.

Many Thanks again!

Ridiculon

#7
17 Apr 2017 09:58:44 AM
Hi, I've been trying to solve the same problem. When I put that block into the sample login javascript it only seems to trigger after I have already clicked the button, but it won't trigger the event before I've clicked the button. I am not very familiar with javascript, could this be dependent on where that event listener block is in the code?

simplebi_guy

#8
20 Apr 2017 02:24:16 PM
I had the same issue with my custom login and then noticed its an issue with the provided login sample as well and I'm inheriting the issue from there. I've tried to adjust the css but no luck. I'll try the above suggestion because having to stop and press the button is jarring!   But had a question as well.  Does anyone else get a slight stutter on welcome page load with 11.0.6?  I noticed it and then when I iplemented the sample login extention I noticed it happened on login page as well.  There is a brief transition where a it looks like the default template and SVG graphics are being displayed, but very large.  I am wondering if it is a glitch in v6 or something to do with the gateway and URL rewrite.

Lynn

#9
21 Apr 2017 01:55:44 AM
Quote from: simplebi_guy on 20 Apr 2017 02:24:16 PM
I had the same issue with my custom login and then noticed its an issue with the provided login sample as well and I'm inheriting the issue from there. I've tried to adjust the css but no luck. I'll try the above suggestion because having to stop and press the button is jarring!   But had a question as well.  Does anyone else get a slight stutter on welcome page load with 11.0.6?  I noticed it and then when I iplemented the sample login extention I noticed it happened on login page as well.  There is a brief transition where a it looks like the default template and SVG graphics are being displayed, but very large.  I am wondering if it is a glitch in v6 or something to do with the gateway and URL rewrite.

I still haven't had a chance to come back to this issue so I've not yet tried Jay's suggestion.

I also see that stutter on v5.

AnalyticsWithJay

#10
21 Apr 2017 07:50:12 AM
Sounds like more than one person needs this functionality...

I'll give this a try shortly in 11.0.5 and report back.

Lynn

#12
05 Jun 2017 09:23:13 AM
Quote from: CognoidJay on 21 Apr 2017 02:10:33 PM
Here you go  :). Tested in 11.0.5:

http://www.cognoswithjay.com/submit-using-enter-key-cognos-analytics-custom-sign-view/

Hi Jay,
A colleague of mine has successfully implemented your solution on our test environment and we will be rolling it out shortly to our customer. Many thanks for your help!
Lynn

AnalyticsWithJay

#13
07 Jun 2017 07:54:00 AM
Quote from: Lynn on 05 Jun 2017 09:23:13 AM
Hi Jay,
A colleague of mine has successfully implemented your solution on our test environment and we will be rolling it out shortly to our customer. Many thanks for your help!
Lynn

My pleasure Lynn!

psahay

#14
05 Nov 2018 11:48:00 AM
So finally we are now migrating to cognos 11 and iam trying to create our own log in screen. I am now having the same problem of not able to use the enter key for submitting user id and password from the users. They have to click on to log in button. Can you plese send me a sample Java script for this to work. Do we have to edit the Login html also? Please help Thanks.

Lynn

#15
06 Nov 2018 02:07:34 AM
Quote from: psahay on 05 Nov 2018 11:48:00 AM
So finally we are now migrating to cognos 11 and iam trying to create our own log in screen. I am now having the same problem of not able to use the enter key for submitting user id and password from the users. They have to click on to log in button. Can you plese send me a sample Java script for this to work. Do we have to edit the Login html also? Please help Thanks.

There is already a solution in this thread posted by AnalyticsWithJay.

Quote from: AnalyticsWithJay on 21 Apr 2017 02:10:33 PM
Here you go  :). Tested in 11.0.5:

http://www.cognoswithjay.com/submit-using-enter-key-cognos-analytics-custom-sign-view/

psahay

#16
06 Nov 2018 10:43:17 AM
Good Morning and thanks for your reply. I did try that URL which is mentioned in this thread. But looks like that URL is no more active I get error when I try that URL. if you have a solution it will you be able to send thanks a lot.

goran.mihalinec

#17
28 Apr 2020 11:00:31 AM
Hello, same problem in 2020. :-) Anyone has a code posted by AnalyticsWithJay?

goran.mihalinec

#18
28 Apr 2020 11:24:12 AM
Found the solution:

If your custom homepage is based on the IBM samples, insert the following code after

Code Select
var loginBtn = root.getElementsByClassName("sample.loginBtn")[0];

Code Select
var inputs = root.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("keypress", function(e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
      loginBtn.click();
      return false;
    }
  })
}


That should work.
Print
Go Up Pages1
User actions
BSP Software Documentation
MetaManager Documentation and Knowledgebase
Version Control Documentation and Knowledgebase
BSP Software Resources About Us
MetaManager BSP Software Training BSP Software
Integrated Control Suite YouTube Channel Micro Strategies Inc
Security Migration IBM Cognos
Integrated Management Suite