B4J Question ABMaterial INPUT_PASSWORD vs INPUT_TEXT

[John Naylor]

Hi everyone!

I have an ABMaterial login dialog which works perfectly.

I also have a form for the user to reset their password.

I request that the old password is entered correctly and the new password is entered twice. As I've set the ABMInput controls with the ABM.INPUT_PASSWORD options they work as expected and do not show what's being typed into the input boxes.

From elsewhere I can force a user to change their password at next login, the system simply recognises a correct login but then displays the change password requirements.

My problem is simply that my browser recognises a password editbox and insists on offering passwords that it has stored. As such it already knows the old password. I can't have that happen! If a device was accessed that has stored passwords on it an unscrupulous user could change the password without them actually knowing what the old one was.

Is there a way to make an ABMinput control set to ABM_TEXT mask out the typed characters (and act like a password edit box but without letting the browser know that's what it is being used for)?

Any advice greatly welcomed!

 

[Harris]

As per the demo of ABM.
I have tried for the past 1.5 hours to make a password mask - but no luck...., cause I stupid...

    Dim inp10 As ABMInput
    inp10.Initialize(page, "inp10", ABM.INPUT_TEXT, "With date mask", False, "input")   
    ' check out http://robinherbots.github.io/jquery.inputmask/ for more info how to build your masks
    inp10.inputMask = "'mask': 'd/m/y'"
    page.Cell(16,1).AddComponent(inp10)

 

[John Naylor]

@Harris yes I've fiddled about with the input mask too but to no avail.

 

[Daestrum]

If you can add an entry to the generated javascript for the input try
autocomplete = "new-password"

<form id="login" action="signup.php" method="post">
  <input type="text" autocomplete="username">
  <input type="password" autocomplete="new-password">
  <input type="password" autocomplete="new-password">
  <input type="submit" value="Sign Up!">
</form>

From this page password fields

 

[Harris]

I would have to assume the TYPE_PASSWORD uses a mask to accomplish what it does. As stated, this type also invokes the show all passwords issue.
I agree, TYPE_TEXT with the proper (password) mask would fix the requirement. Is it CSS controlled or in the core lib...?

Here is a snippet from the HTML from my login. I don't see how the type=password (logininp2) is doing anything different from type=text (logininp1)...

<div id="login-content-r2_cont" class="container">
<div id="login-content-r2"  data-b4js="" data-b4jsextra="false"  class="row transparent    only-print " style=" margin-top: 0px; margin-bottom: 20px;" data-click="login-content,2">
<div name="login.content.cell(2,1)"  data-b4js="" data-b4jsextra="false"  id="login-content-r2c1" class="col s12 m12 l12 offset-s0 offset-m0 offset-l0 transparent    " style=" margin-top: 0px; margin-bottom: 0px; padding-left: 0px; padding-right: 0px;"  data-click="login-content,2;1">
<div id="login-content-logininp1-parent" class="input-field input-fielddefault col s12 m12 l12 offset-s0 offset-m0 offset-l0   transparent grey-text text-darken-2 only-print " >
<input  data-b4js="" data-b4jsextra=""   id="login-content-logininp1" type="text" evname="logininp1" class=" validate black-text" value=""  style="text-align:start"><label id="login-content-logininp1label" for="login-content-logininp1"  style="">User Name</label>
</div>
<div id="login-content-logininp2-parent" class="input-field input-fielddefault col s12 m12 l12 offset-s0 offset-m0 offset-l0   transparent grey-text text-darken-2 only-print " >
<input  data-b4js="" data-b4jsextra=""   id="login-content-logininp2" type="password" evname="logininp2" class=" validate black-text" value=""  style="text-align:start"><label id="login-content-logininp2label" for="login-content-logininp2"  style="">Password</label>
</div>
</div></div>
</div>

 

[John Naylor]

I've just come across some advanced text formatting in the AlwaysBusy blog from March 2018 where B4JS is used to create a credit card entry system - Maybe I can use a similar method to write a text box password mask.

@Daestrum I'll certainly see if I can use your suggestion later when I can get some time to try.

Thank's guys I'll report back as I figure something out.