B4J Tutorial [ABMaterial]: Creating a Sign In Modal Dialog with Options: Part 3

Hi again

The final code for this installment is in part 3.1 where the user account is also activated via email. You can get it here.


This part of the Sign In Modal will look into the "Not a Member yet? functionality.

The Not a Member yet functionality provides an end user to be able to Sign Up to use the application in question.

Goal

1. When a user selects Not a Member Yet from the Sign In screen, they are taken to the Sign Up page.
2. A user profile prompt is provided asking for the first name, last name, date of birth etc. An option for a single page to enter all the details has been undertaken.
3. Some details of the page are compulsory and thus the page wont be accepted if stuff is missing.
4. The entered email address is verified against existing email addresses.
5. The passwords are checked for match, if they dont match the user is warned.
6. When all details are entered, a user entry is created with an in-active state. The end goal is to send the user an email that they will verify using either php to activate the account.



Reproduction

Creating the Sign Up form

This form adjusts itself according to the device size. The Navigation bar has not been initialized for these pages as the ModalSheet itself has a logo of the application in question. Autocomplete text boxes are being used for the date entry.

Private Sub contLoginBuild() As ABMModalSheet
    Dim contLogin As ABMModalSheet
    Dim dSize As Int = ABM.MODALSHEET_SIZE_LARGE
    If ABMShared.IsPhone(page) Then dSize = ABM.MODALSHEET_SIZE_FULL
    contLogin.Initialize(page, "contLogin", False, ABM.MODALSHEET_TYPE_NORMAL, "ms")
    contLogin.Size = dSize
    contLogin.IsDismissible = False
    contLogin.IsTextSelectable = True
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 12, 12, 0, 0, 0, 0, ABM.VISIBILITY_HIDE_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 12, 12, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 12, 12, 0, 0, 10, 0, ABM.VISIBILITY_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "").AddCellsOSMPV(1, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "").AddCellsOSMPV(1, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 0, 0, ABM.VISIBILITY_ALL, "")
    contLogin.Content.AddRows(1,True,"").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 10, 20, 10, 0, ABM.VISIBILITY_ALL, "").AddCellsOSMPV(1, 0, 0, 0, 12, 6, 6, 0, 0, 10, 10, ABM.VISIBILITY_ALL, "")
    contLogin.Header.BuildGrid  'IMPORTANT once you loaded the complete grid AND before you start adding components
    contLogin.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    contLogin.Footer.BuildGrid  'IMPORTANT once you loaded the complete grid AND before you start adding components
    'Add components to ModalSheet
    Dim txtid As ABMInput
    txtid.Initialize(page, "txtid", ABM.INPUT_TEXT, "id", False, "")
    txtid.Tag = "txtid"
    txtid.Visibility = ABM.VISIBILITY_HIDE_ALL
    contLogin.Content.Cell(1,1).AddComponent(txtid)
    Dim imglogo As ABMImage
    imglogo.Initialize(page, "imglogo", "../images/logo.png?"& DateTime.Now, 1)
    imglogo.Tag = "imglogo"
    imglogo.IsResponsive = False
    imglogo.IsCircular = False
    imglogo.IsClickable = False
    imglogo.IsMaterialBoxed = False
    contLogin.Content.Cell(2,1).AddComponent(imglogo)
    Dim lblheader As ABMLabel
    lblheader.Initialize(page, "lblheader", $"{B}Create a TeenCoach Account{/B}"$, ABM.SIZE_PARAGRAPH, False, "")
    lblheader.istextselectable = True
    lblheader.supportemoji = False
    contLogin.Content.Cell(3,1).AddComponent(lblheader)
    Dim txtfirstname As ABMInput
    txtfirstname.Initialize(page, "txtfirstname", ABM.INPUT_TEXT, "First Name", False, "")
    txtfirstname.Tag = "txtfirstname"
    contLogin.Content.Cell(4,1).AddComponent(txtfirstname)
    Dim txtlastname As ABMInput
    txtlastname.Initialize(page, "txtlastname", ABM.INPUT_TEXT, "Last Name", False, "")
    txtlastname.Tag = "txtlastname"
    contLogin.Content.Cell(4,2).AddComponent(txtlastname)
    Dim txtemail As ABMInput
    txtemail.Initialize(page, "txtemail", ABM.INPUT_EMAIL, "Email Address", False, "")
    txtemail.Tag = "txtemail"
    contLogin.Content.Cell(5,1).AddComponent(txtemail)
    Dim txtcellphone As ABMInput
    txtcellphone.Initialize(page, "txtcellphone", ABM.INPUT_TEL, "Cellphone Number", False, "")
    txtcellphone.Tag = "txtcellphone"
    contLogin.Content.Cell(5,2).AddComponent(txtcellphone)
    Dim txtmonthofbirth As ABMInput
    txtmonthofbirth.Initialize(page, "txtmonthofbirth", ABM.INPUT_TEL, "Birth Month", False, "")
    txtmonthofbirth.Tag = "txtmonthofbirth"
    txtmonthofbirth.AutoCompleteType = ABM.AUTOCOMPLETE_STARTS
    txtmonthofbirth.AddAutoComplete("January","January")
    txtmonthofbirth.AddAutoComplete("February","February")
    txtmonthofbirth.AddAutoComplete("March","March")
    txtmonthofbirth.AddAutoComplete("April","April")
    txtmonthofbirth.AddAutoComplete("May","May")
    txtmonthofbirth.AddAutoComplete("June","June")
    txtmonthofbirth.AddAutoComplete("July","July")
    txtmonthofbirth.AddAutoComplete("August","August")
    txtmonthofbirth.AddAutoComplete("September","September")
    txtmonthofbirth.AddAutoComplete("October","October")
    txtmonthofbirth.AddAutoComplete("November","November")
    txtmonthofbirth.AddAutoComplete("December","December")
    contLogin.Content.Cell(6,1).AddComponent(txtmonthofbirth)
    Dim txtdayofbirth As ABMInput
    txtdayofbirth.Initialize(page, "txtdayofbirth", ABM.INPUT_TEL, "Birth Day", False, "")
    txtdayofbirth.Tag = "txtdayofbirth"
    txtdayofbirth.AutoCompleteType = ABM.AUTOCOMPLETE_STARTS
    txtdayofbirth.AddAutoComplete("01","01")
    txtdayofbirth.AddAutoComplete("02","02")
    txtdayofbirth.AddAutoComplete("03","03")
    txtdayofbirth.AddAutoComplete("04","04")
    txtdayofbirth.AddAutoComplete("05","05")
    txtdayofbirth.AddAutoComplete("06","06")
    txtdayofbirth.AddAutoComplete("07","07")
    txtdayofbirth.AddAutoComplete("08","08")
    txtdayofbirth.AddAutoComplete("09","09")
    txtdayofbirth.AddAutoComplete("10","10")
    txtdayofbirth.AddAutoComplete("11","11")
    txtdayofbirth.AddAutoComplete("12","12")
    txtdayofbirth.AddAutoComplete("13","13")
    txtdayofbirth.AddAutoComplete("14","14")
    txtdayofbirth.AddAutoComplete("15","15")
    txtdayofbirth.AddAutoComplete("16","16")
    txtdayofbirth.AddAutoComplete("17","17")
    txtdayofbirth.AddAutoComplete("18","18")
    txtdayofbirth.AddAutoComplete("19","19")
    txtdayofbirth.AddAutoComplete("20","20")
    txtdayofbirth.AddAutoComplete("21","21")
    txtdayofbirth.AddAutoComplete("22","22")
    txtdayofbirth.AddAutoComplete("23","23")
    txtdayofbirth.AddAutoComplete("24","24")
    txtdayofbirth.AddAutoComplete("25","25")
    txtdayofbirth.AddAutoComplete("26","26")
    txtdayofbirth.AddAutoComplete("27","27")
    txtdayofbirth.AddAutoComplete("28","28")
    txtdayofbirth.AddAutoComplete("29","29")
    txtdayofbirth.AddAutoComplete("30","30")
    txtdayofbirth.AddAutoComplete("31","31")
    contLogin.Content.Cell(6,2).AddComponent(txtdayofbirth)
    Dim txtyearofbirth As ABMInput
    txtyearofbirth.Initialize(page, "txtyearofbirth", ABM.INPUT_TEL, "Birth Year", False, "")
    txtyearofbirth.Tag = "txtyearofbirth"
    contLogin.Content.Cell(6,3).AddComponent(txtyearofbirth)
    Dim txtgender As ABMInput
    txtgender.Initialize(page, "txtgender", ABM.INPUT_TEXT, "Gender", False, "")
    txtgender.Tag = "txtgender"
    txtgender.AutoCompleteType = ABM.AUTOCOMPLETE_STARTS
    txtgender.AddAutoComplete("Male","Male")
    txtgender.AddAutoComplete("Female","Female")
    txtgender.AddAutoComplete("Other","Other")
    txtgender.AddAutoComplete("Rather not say","Rather not say")
    contLogin.Content.Cell(7,1).AddComponent(txtgender)
    Dim txtcity As ABMInput
    txtcity.Initialize(page, "txtcity", ABM.INPUT_TEXT, "City", False, "")
    txtcity.Tag = "txtcity"
    contLogin.Content.Cell(7,2).AddComponent(txtcity)
    Dim txtpassword As ABMInput
    txtpassword.Initialize(page, "txtpassword", ABM.INPUT_PASSWORD, "Password", False, "")
    txtpassword.Tag = "txtpassword"
    contLogin.Content.Cell(8,1).AddComponent(txtpassword)
    Dim txtconfirmpassword As ABMInput
    txtconfirmpassword.Initialize(page, "txtconfirmpassword", ABM.INPUT_PASSWORD, "Confirm Password", False, "")
    txtconfirmpassword.Tag = "txtconfirmpassword"
    contLogin.Content.Cell(8,2).AddComponent(txtconfirmpassword)
    Dim chkagree As ABMCheckbox
    chkagree.Initialize(page, "chkagree", "I agree to{NBSP}{AL}http://www.teencoach.co.za/termsconditions{AT}{C:#993333}Terms & Conditions{/C}{/AL}", False, "")
    chkagree.Tag = "chkagree"
    contLogin.Content.Cell(9,1).AddComponent(chkagree)
    Dim btnNEXT As ABMButton
    btnNEXT.InitializeRaised(page, "btnNEXT", "", "", "NEXT", "")
    btnNEXT.Tag = "btnNEXT"
    btnNEXT.UseFullCellWidth = True
    btnNEXT.Size = ABM.BUTTONSIZE_NORMAL
    contLogin.Content.Cell(9,2).AddComponent(btnNEXT)
    Return contLogin
End Sub

A checkbox at the bottom of the screen that has is "clickable" label to open up the terms and conditions has also been added. I didn't even think that was possible.

Then we get the Sign Up contents when the Next Button is clicked.

Sub contLoginGetContents() As Map
    Dim pMap As Map
    pMap.Initialize
    Dim contLogin As ABMModalSheet
    contLogin = page.ModalSheet("contLogin")
    Dim txtid As ABMInput = contLogin.Content.Component("txtid")
    Dim txtfirstname As ABMInput = contLogin.Content.Component("txtfirstname")
    Dim txtlastname As ABMInput = contLogin.Content.Component("txtlastname")
    Dim txtemail As ABMInput = contLogin.Content.Component("txtemail")
    Dim txtcellphone As ABMInput = contLogin.Content.Component("txtcellphone")
    Dim txtmonthofbirth As ABMInput = contLogin.Content.Component("txtmonthofbirth")
    Dim txtdayofbirth As ABMInput = contLogin.Content.Component("txtdayofbirth")
    Dim txtyearofbirth As ABMInput = contLogin.Content.Component("txtyearofbirth")
    Dim txtgender As ABMInput = contLogin.Content.Component("txtgender")
    Dim txtcity As ABMInput = contLogin.Content.Component("txtcity")
    Dim txtpassword As ABMInput = contLogin.Content.Component("txtpassword")
    Dim txtconfirmpassword As ABMInput = contLogin.Content.Component("txtconfirmpassword")
    Dim chkagree As ABMCheckbox = contLogin.Content.Component("chkagree")
    pMap.put("id", txtid.Text)
    pMap.put("firstname", txtfirstname.Text)
    pMap.put("lastname", txtlastname.Text)
    pMap.put("email", txtemail.Text)
    pMap.put("cellphone", txtcellphone.Text)
    pMap.put("monthofbirth", txtmonthofbirth.Text)
    pMap.put("dayofbirth", txtdayofbirth.Text)
    pMap.put("yearofbirth", txtyearofbirth.Text)
    pMap.put("gender", txtgender.Text)
    pMap.put("city", txtcity.Text)
    pMap.put("password", txtpassword.Text)
    pMap.put("confirmpassword", txtconfirmpassword.Text)
    Dim chkagreeContents As String
    If chkagree.State Then
        chkagreeContents = 1
    Else
        chkagreeContents = 0
    End If
    pMap.put("agree", chkagreeContents)
    Return pMap
End Sub

This is then validated as there are some details that are compulsory...

'Get the contents of the modal sheet from GetContents and check validity
Sub contLoginValidate(gMap As Map) As Boolean
    Dim contLogin As ABMModalSheet
    contLogin = page.ModalSheet("contLogin")
    Dim stxtfirstname As String
    stxtfirstname = gMap.get("firstname")
    If stxtfirstname = "null" Then stxtfirstname = ""
    If stxtfirstname.Length = 0 Then
        ABMShared.Warn(page,"First Name cannot be blank. Please enter a value.")
        Dim txtfirstname As ABMInput = contLogin.Content.Component("txtfirstname")
        txtfirstname.SetFocus
        Return False
    End If
    Dim stxtlastname As String
    stxtlastname = gMap.get("lastname")
    If stxtlastname = "null" Then stxtlastname = ""
    If stxtlastname.Length = 0 Then
        ABMShared.Warn(page,"Last Name cannot be blank. Please enter a value.")
        Dim txtlastname As ABMInput = contLogin.Content.Component("txtlastname")
        txtlastname.SetFocus
        Return False
    End If
    Dim stxtemail As String
    stxtemail = gMap.get("email")
    If stxtemail = "null" Then stxtemail = ""
    If stxtemail.Length = 0 Then
        ABMShared.Warn(page,"Email Address cannot be blank. Please enter a value.")
        Dim txtemail As ABMInput = contLogin.Content.Component("txtemail")
        txtemail.SetFocus
        Return False
    End If
    Dim stxtmonthofbirth As String
    stxtmonthofbirth = gMap.get("monthofbirth")
    If stxtmonthofbirth = "null" Then stxtmonthofbirth = ""
    If stxtmonthofbirth.Length = 0 Then
        ABMShared.Warn(page,"Birth Month cannot be blank. Please enter a value.")
        Dim txtmonthofbirth As ABMInput = contLogin.Content.Component("txtmonthofbirth")
        txtmonthofbirth.SetFocus
        Return False
    End If
    Dim stxtdayofbirth As String
    stxtdayofbirth = gMap.get("dayofbirth")
    If stxtdayofbirth = "null" Then stxtdayofbirth = ""
    If stxtdayofbirth.Length = 0 Then
        ABMShared.Warn(page,"Birth Day cannot be blank. Please enter a value.")
        Dim txtdayofbirth As ABMInput = contLogin.Content.Component("txtdayofbirth")
        txtdayofbirth.SetFocus
        Return False
    End If
    Dim stxtyearofbirth As String
    stxtyearofbirth = gMap.get("yearofbirth")
    If stxtyearofbirth = "null" Then stxtyearofbirth = ""
    If stxtyearofbirth.Length = 0 Then
        ABMShared.Warn(page,"Birth Year cannot be blank. Please enter a value.")
        Dim txtyearofbirth As ABMInput = contLogin.Content.Component("txtyearofbirth")
        txtyearofbirth.SetFocus
        Return False
    End If
    Dim stxtgender As String
    stxtgender = gMap.get("gender")
    If stxtgender = "null" Then stxtgender = ""
    If stxtgender.Length = 0 Then
        ABMShared.Warn(page,"Gender cannot be blank. Please enter a value.")
        Dim txtgender As ABMInput = contLogin.Content.Component("txtgender")
        txtgender.SetFocus
        Return False
    End If
    Dim stxtcity As String
    stxtcity = gMap.get("city")
    If stxtcity = "null" Then stxtcity = ""
    If stxtcity.Length = 0 Then
        ABMShared.Warn(page,"City cannot be blank. Please enter a value.")
        Dim txtcity As ABMInput = contLogin.Content.Component("txtcity")
        txtcity.SetFocus
        Return False
    End If
    Dim stxtpassword As String
    stxtpassword = gMap.get("password")
    If stxtpassword = "null" Then stxtpassword = ""
    If stxtpassword.Length = 0 Then
        ABMShared.Warn(page,"Password cannot be blank. Please enter a value.")
        Dim txtpassword As ABMInput = contLogin.Content.Component("txtpassword")
        txtpassword.SetFocus
        Return False
    End If
    Dim stxtconfirmpassword As String
    stxtconfirmpassword = gMap.get("confirmpassword")
    If stxtconfirmpassword = "null" Then stxtconfirmpassword = ""
    If stxtconfirmpassword.Length = 0 Then
        ABMShared.Warn(page,"Confirm Password cannot be blank. Please enter a value.")
        Dim txtconfirmpassword As ABMInput = contLogin.Content.Component("txtconfirmpassword")
        txtconfirmpassword.SetFocus
        Return False
    End If
    Return True
End Sub

Then, the user details are saved in the database with an in-active status

Private Sub contLoginSignUp() As Boolean
    Dim jSQL As SQL
    'define a map to hold the form contents
    Dim m As Map
    'read the file contents to a map
    m = contLoginGetContents
    'validate the form contents where required
    If contLoginValidate(m) = False Then
        Return False
    End If
    m.remove("id")
    m.put("useractive","1")
    m.put("groupid","2")
    Dim firstname As String = m.getdefault("firstname","")
    Dim lastname As String = m.getdefault("lastname","")
    Dim password As String = m.getdefault("password","")
    Dim confirmpassword As String = m.getdefault("confirmpassword","")
    m.put("fullname",firstname & " " & lastname)
    m.put("username",firstname & lastname)
    If password <> confirmpassword Then
        ABMShared.Warn(page,"The passwords DO NOT match, please correct!")
        Return False
    End If
    'the form contents are ok, continue with the sign up process
    'define the search criteria, fields must equal
    Dim w As Map
    Dim UserMap As Map
    Dim strID As String
    w.Initialize
    'there is an email, ensure these are not duplicated.
    Dim email As String
    email = m.get("email")
    w.Initialize
    w.put("email=", email)
    'Get connection from current pool if MySQL/MSSQL
    jSQL = ABMShared.SQLGet
    UserMap = ABMShared.SQLSelectRecordWhereMap(jSQL,"users", w)
    'Close the connection to the database
    ABMShared.SQLClose(jSQL)
    'If UserMap IsInitialize = True, email exists
    If UserMap.IsInitialized = True Then
        ABMShared.Warn(page,"The Email that has been specified is already taken. Please provide another email.")
        Return False
    End If
    'Register new user to the database
    'Get connection from current pool if MySQL/MSSQL
    jSQL = ABMShared.SQLGet
    'insert the new user
    strID = ABMShared.SQLRecordInsert(jSQL, "users", m)
    If strID > 0 Then
        myToastId = myToastId + 1
        page.ShowToast("toast" & myToastId, "toastgreen", "User Signed Up successfully.", 3000,False)
        'Close the connection to the database
        ABMShared.SQLClose(jSQL)
        Return True
    Else
        myToastId = myToastId + 1
        page.ShowToast("toast" & myToastId, "toastred", "User could not be signed up, please try again.", 3000,False)
        'Close the connection to the database
        ABMShared.SQLClose(jSQL)
        Return False
    End If
End Sub

Related Article

How to change the ABMModalSheet size property at runtime

Ta!