B4J Question [ABMaterial] Issue with ABMInput

Harris · May 3, 2020

The Adim password and Verify Admin password input fields are both set as ABM.INPUT_TEXT.
The verify admin password INSISTS on providing the stored password list....
I can see when set as ABM.INPUT_PASSWORD, it will provide the user/password list. However - this is a text input style, so I can't figure out why this behaviour?

If I comment out the verify (inp111) code, then the Admin Password input shows the same issue...

Thanks

B4X:

    Dim inp10 As ABMInput
    inp10.Initialize(page, "inp10", ABM.INPUT_TEXT, "Administrator Password (6 chars or more)", False, "")
    inp10.IconName = "mdi-action-lock"
    page.Cell(3,2).AddComponent(inp10)

    Dim inp111 As ABMInput
    inp111.Initialize(page,  "inp111", ABM.INPUT_TEXT, "Verify Admin Password ", False,"")
    inp111.IconName = "mdi-action-lock"
    page.Cell(3,3).AddComponent(inp111)

Harris · May 4, 2020

Here is another one... This input has nothing to do with username / password... (City - Sate/Prov)
Weird Beans....

B4X:

    Dim inp7 As ABMInput
    inp7.Initialize(page, "inp7", ABM.INPUT_TEXT, "City - State/Prov", False, "")
    inp7.IconName = "mdi-communication-location-on"
    page.Cell(2,2).AddComponent(inp7)

alwaysbusy · May 4, 2020

Yes, this is a very annoying and tricky one. Looks like every browser has its own system. And then sometimes within versions of the same browser it may change.

But I've noticed that one of the things it appears to stick to is the id of the input. I see in your last example your component is called inp7. There is a good chance somewhere else in your code you have another one called inp7 that would've hold the text 'mhw1' at some point.

After all the inputs are added you may try to run this. I had mixed results with it (in some browsers it does work, other just ignore it).
Check in the generated html (chrome - F12 - Elements) what the exact generated id is.

B4X:

...
page.Refresh
...
Page.ws.Eval($"$("#inp7").autocomplete({disabled: false });"$, null)
Page.ws.Flush

or even try to do it for all inputs on the page of type text:

B4X:

Page.ws.Eval($"$('input[type=text]').autocomplete({disabled: false });"$)
Page.ws.Flush

Alwaysbusy

Harris · May 4, 2020

mhw1 was never used as an id for any item, it is a username, in a list of usernames/passwords stored and exposed by Chrome...

inp7 was used in the previous example for the exact same thing on a different page (input_text - City, State/Prov)

inp7. Note: class="validate black-text valid" This shows the username/password suggestions on Chrome
<input data-b4js="" data-b4jsextra="" id="inp7" type="text" evname="inp7" class="validate black-text valid" value="" style="text-align:start">

inp6. The only difference is: class=" validate black-text" (without valid).
<input data-b4js="" data-b4jsextra="" id="inp6" type="text" evname="inp6" class=" validate black-text" value="" style="text-align:start">

I have even tried renaming ids that exhibit this issue and rid the system of that knowledge - to no avail - (almost no - it worked once for about 2 seconds and then re-appeared)

The chrome browser on my Android tablet (Samsung) does not exhibit any of this weird behaviour.

UPDATE:
page.ws.Eval($"$('input[type=text]').autocomplete({disabled: false });"$, Null) - Note: had to append the , Null to this line to stop error it generated on compile....
page.ws.Flush

This worked! However, page.ws.Eval($"$("#inp7").autocomplete({disabled: false });"$, Null) did nothing...

<input data-b4js="" data-b4jsextra="" id="inp7" type="text" evname="inp7" class="validate black-text" value="" style="text-align:start">
Now inp7 does not have the valid in: (class="validate black-text")

How it gets there in the first place, when html code is built, is beyond me....

MORE EDIT:

It is hit and miss.... sometimes the username is there - sometimes not... Cleared cache and usual stuff...

Harris · May 4, 2020

Seems to have something to do with the ABMLoginHandler... and its' modal sheet...

Note the The User Name of the login form does not have the stored username populated.
It was assigned to the Administrator Login User Name of the page from which it was called.
The "ids" for each input are definitely unique...

Each page will call the ShowLogin when menu item clicked...

B4X:

Sub Page_NavigationbarClicked(Action As String, Value As String)
    
    If Action = "Login" Then       
        ABMLoginHandler.ShowLogin(page)
        Return
    End If
    ABMShared.NavigateToPage(ws, ABMPageId, Value)
    
End Sub

From the Contact Us page, the login modal works properly...

The BuildLoginsheet and ShowLogin from handler module....

B4X:

Sub BuildLoginSheet(AppPage As ABMPage) As ABMModalSheet
    Dim myModal As ABMModalSheet
    myModal.Initialize(AppPage, "login",   False,  False, "loginform")
    myModal.IsDismissible = False
    
    ' create the grid for the content
    myModal.Content.AddRowsM(1, True, 20,0, "").AddCellsOSMP(1,0,0, 0,6,6,6, 0, 0,0, 0,"").AddCellsOSMP(1,0,0, 0,6,6,6, 10, 0,0, 0,"") '  AddCells12(1, "") cnter
    
    myModal.Content.AddRowsM(1,True,20,0, "").AddCells12(1,"")
    myModal.Content.AddRowsM(2, True, 10,20, "").AddCellsOSMP(1,0,0, 0,6,6,6, 0, 0,0, 0,"").AddCellsOSMP(1,0,0, 0,6,6,6, 0, 0,0, 0,"") '  AddCells12(1, "") cnter
    
    myModal.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components


    Dim logo As ABMImage
    logo.Initialize(AppPage,"imglogo", "../images/mmslogo.png", 1.0)
    Log(" loading logo image")
    logo.SetFixedSize(200,70 )
            
    logo.IsResponsive = True
    myModal.Content.Cell(1,1).AddComponent(logo)
    myModal.Content.Cell(1,1).UseTheme("loginform")

'    Dim loglbl1 As ABMLabel
'    loglbl1.Initialize(AppPage,    "loglbl1", "M M S", ABM.SIZE_H5, False, "")
'    loglbl1.IsFlowText = True
'    myModal.Content.Cell(1,1).AddComponent(loglbl1)
'    myModal.Content.Cell(1,1).UseTheme("loginform")

    
    Dim loglbl As ABMLabel
    loglbl.Initialize(AppPage,    "loglbl", "{B}"&"Please Login"&"{/B}", ABM.SIZE_H5, False, "")
    loglbl.IsFlowText = True
    myModal.Content.Cell(1,2).AddComponent(loglbl)

    myModal.Content.Cell(1,2).UseTheme("loginform")
    
    
'    Dim inp1 As ABMInput
'    inp1.Initialize(AppPage, "logininp1", ABM.INPUT_TEXT, "User Name", False, "")
'    myModal.Content.Cell(2,1).AddComponent(inp1)
' 
'    Dim inp2 As ABMInput
'    inp2.Initialize(AppPage, "logininp2", ABM.INPUT_PASSWORD , "Password", False, "")
'    myModal.Content.Cell(2,1).AddComponent(inp2)
 
    Dim msbtn1 As ABMButton
    msbtn1.InitializeFlat(AppPage, "loginbtn",  "mdi-action-verified-user",  ABM.ICONALIGN_CENTER, "Login", "btngreen")
    msbtn1.SetBorderEx(ABM.COLOR_TRANSPARENT,ABM.INTENSITY_LIGHTEN1,1,ABM.BORDER_GROOVE,"10px")
    myModal.Content.Cell(3,1).AddComponent(msbtn1)
    myModal.Content.Cell(3,1).UseTheme("loginform")


    Dim msbtn2 As ABMButton
    msbtn2.InitializeFlat(AppPage, "logincancelbtn", "mdi-content-clear",  ABM.ICONALIGN_CENTER, "Cancel", "btnred")
    msbtn2.SetBorderEx(ABM.COLOR_TRANSPARENT,ABM.INTENSITY_LIGHTEN1,1,ABM.BORDER_GROOVE,"10px")

    myModal.Content.Cell(3,2).AddComponent(msbtn2)
    myModal.Content.Cell(3,2).UseTheme("loginform")

 
    myModal.Content.SetBorderex(ABM.COLOR_BLACK, ABM.INTENSITY_DARKEN2,  4, ABM.BORDER_GROOVE, "25px")
'    myModal.Footer.Cell(1,1).AddComponent(msbtn2)   
    

    Return myModal
End Sub



public Sub ShowLogin(page As ABMPage)

    Dim mymodal As ABMModalSheet = page.ModalSheet("login")
    
'    mymodal.Content.Cell(2,1).RemoveAllComponents
'    mymodal.Content.Cell(1,1).RemoveAllComponents
    
    Dim logo As ABMImage
    logo.Initialize(page,"imglogo", "../images/mmslogo.png", 1.0)
    Log(" loading logo image")
    If page.IsPhone Or page.IsTablet Then
'    If ABMShared.IsPhone(page) Then
        logo.SetFixedSize( 120,50 )
        
    Else
        logo.SetFixedSize(200,70 )
            
    End If
    logo.IsResponsive = True
    mymodal.Content.Cell(1,1).AddComponent(logo)
    mymodal.Content.Cell(1,1).UseTheme("loginform")
    
    
    Dim inp1 As ABMInput
    inp1.Initialize(page, "logininp1", ABM.INPUT_TEXT, "User Name",  False, "lightblue")
    mymodal.Content.Cell(2,1).AddComponent(inp1)
    
    Dim inp2 As ABMInput
    inp2.Initialize(page, "logininp2", ABM.INPUT_PASSWORD, "Password", False, "lightblue")
    mymodal.Content.Cell(2,1).AddComponent(inp2)


    Dim inp3 As ABMInput
    inp3.Initialize(page, "logininp3", ABM.INPUT_TEXT, "Provide Registration Number ( Then LOGIN Again )", False, "lightblue")
    mymodal.Content.Cell(2,1).AddComponent(inp3)
    inp3.Visibility = ABM.VISIBILITY_HIDE_ALL

    If ABMShared.IsPhone(page) Or Not(ABMShared.IsPhone(page)) Then
        Log(" --- ")
    End If


Dim ps As String = page.GetCurrentPageSize
    Log(" page.GetCurrentPageSize result: "&ps)
    Log(" page.Isphone result: "&page.IsPhone)
    Log(" page.IsTablet result: "&page.IsTablet)
    Log(" page.IsDesktop result: "&page.IsDesktop)
    Log(" --- ")

    
    If page.GetCurrentPageSize = "phone" Then
    ' MHW - on phones, alter the modal sheet to fit the small screen size....
'    If ABMShared.IsPhone(page) Then
        mymodal.Size = ABM.MODALSHEET_SIZE_FULL
        mymodal.MaxHeight = "100%"
'        Dim loginbtn As ABMButton = mymodal.Content.Component("loginbtn")
'        Dim logincancelbtn As ABMButton = mymodal.Content.Component("logincancelbtn")
'        logincancelbtn.Text = "CAN"
'        loginbtn.Text = "GO"
        mymodal.Refresh
'        page.ShowModalSheetAbsolute("login",  "0px","1px",  "100%","100%")
        page.ShowModalSheetAbsolute("login",  "-5%","1%",  "110%","100%")

        Log(" Phone - setting login to full screen!!!!!!!")
        Return
    Else If page.IsTablet Then
        mymodal.Size = ABM.MODALSHEET_SIZE_FULL
        mymodal.MaxHeight = "100%"
'        Dim loginbtn As ABMButton = mymodal.Content.Component("loginbtn")
'        Dim logincancelbtn As ABMButton = mymodal.Content.Component("logincancelbtn")
'        logincancelbtn.Text = "CAN"
'        loginbtn.Text = "GO"
        mymodal.Refresh
'        page.ShowModalSheetAbsolute("login",  "0px","1px",  "100%","100%")
        page.ShowModalSheetAbsolute("login",   "10%","1%",  "78%","100%")

        Log("Tablet setting login to full screen!!!!!!!")
        Return
        
    Else
        Dim ps As String = page.GetCurrentPageSize
        Log("full page size: "&ps)
        
        mymodal.MaxWidth = "35%"
        mymodal.Refresh
        Log("NOT  -  setting login to full screen")
    
    End If
    
    
    Dim CSS As String = $"$('#login').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
                          $('#login-content').removeClass('transparent').addClass('white');"$
    page.ws.Eval(CSS, Null)
    page.ws.Flush
    
    page.ShowModalSheet("login")

    
End Sub

Harris · May 6, 2020

Here's what I do know...

Anytime you use "ABM.INPUT_PASSWORD" as the inputType, the previous ABM.INPUT_TEXT field will be the UserName!
In Chrome, this will invoke the username / password component (saved passwords)...

The Login Modalsheet (template) which is added to each public page using:
ABMLoginHandler.BuildModalSheets(page)
which uses:
apppage.AddModalSheetTemplate( BuildLoginSheet(apppage)) - from the handler.

This sheet contains the type_password - which we want here!

The last input (type - text) on the page will contain the username (unfortunately), and NOT the username of the login sheet.

Here is the dirty workaround, a real hack:
Add a dummy input - type TEXT... as the LAST ABMInput
AFTER FinishedLoading in ConnectPage(), get the dummy component and HIDE it... ( ABM.VISIBILITY_HIDE_ALL )

B4X:

Sub ConnectPage()
    'NEW
    
    ABMShared.ConnectNavigationBar2(page,  "Products", "Products", "Products",  Not(ws.Session.GetAttribute2("IsAuthorized", "") = ""))

    ABMShared.ConnectFooterFixed(page)

    ' SetRows for the page.  The next lines are in a sub called "SetRows"
' ***********************************
    ' last input to hide
    Dim inp112 As ABMInput
    inp112.Initialize(page,  "inp112", ABM.INPUT_TEXT, "hack", False,"")
    page.Cell(3,3).AddComponent(inp112)
' **********************************

    page.FinishedLoading 'IMPORTANT

' hack to stop Google User/Password from populating LAST input on main page.. and Properly use it in the login modelsheet template

    Dim lastinput As ABMInput = page.Component("inp112")
    lastinput.Visibility = ABM.VISIBILITY_HIDE_ALL
    lastinput.Refresh
    
End Sub

Xandoca · Jul 9, 2020

Harris said:
Here's what I do know...

Anytime you use "ABM.INPUT_PASSWORD" as the inputType, the previous ABM.INPUT_TEXT field will be the UserName!
In Chrome, this will invoke the username / password component (saved passwords)...

The Login Modalsheet (template) which is added to each public page using:
ABMLoginHandler.BuildModalSheets(page)
which uses:
apppage.AddModalSheetTemplate( BuildLoginSheet(apppage)) - from the handler.

This sheet contains the type_password - which we want here!

The last input (type - text) on the page will contain the username (unfortunately), and NOT the username of the login sheet.

Here is the dirty workaround, a real hack:
Add a dummy input - type TEXT... as the LAST ABMInput
AFTER FinishedLoading in ConnectPage(), get the dummy component and HIDE it... ( ABM.VISIBILITY_HIDE_ALL )

B4X:

Sub ConnectPage() 'NEW ABMShared.ConnectNavigationBar2(page, "Products", "Products", "Products", Not(ws.Session.GetAttribute2("IsAuthorized", "") = "")) ABMShared.ConnectFooterFixed(page) ' SetRows for the page. The next lines are in a sub called "SetRows" ' *********************************** ' last input to hide Dim inp112 As ABMInput inp112.Initialize(page, "inp112", ABM.INPUT_TEXT, "hack", False,"") page.Cell(3,3).AddComponent(inp112) ' ********************************** page.FinishedLoading 'IMPORTANT ' hack to stop Google User/Password from populating LAST input on main page.. and Properly use it in the login modelsheet template Dim lastinput As ABMInput = page.Component("inp112") lastinput.Visibility = ABM.VISIBILITY_HIDE_ALL lastinput.Refresh End Sub

Hello Harris, how are you?

I'm facing the same problem. I did what you said: (add lastinput and hide it). but how can I "and Properly use it in the login modelsheet template"?

Thanks.

B4J Question [ABMaterial] Issue with ABMInput

Harris

Expert

Harris

Expert

alwaysbusy

Expert

Harris

Expert

Harris

Expert

Harris

Expert

Xandoca

Active Member

Similar Threads