B4J Tutorial [BANano] A tabbed dialog to Login, Register, Forgot Password & Reset Password

Ola

For the next part of my project, I need functionality for anyone to apply online to the college. So I thought perhaps for the first part, one can just be provided with a single screen for

1. Login
2. Register
3. Forgot Password and
4. Reset Password

And depending on what the user needs at a particular time, they can just select the tab they need.

To do this, we are using a single tab with containers inside. The tabs have a UL (unordered list) that contains 2 columns, 1 with 4 columns and another with 8 columns.

For each of the sections, a container is designed and through a data-toggler, the appropriate screen is shown. More functionality will be added to directly get/set data to a MySQL database.

Update: 2019-06-06

It seems feasible that due to this likely to be used on modile devices I might as well save space as much as I can.

 

[Mashiane]

When one selects Apply Online, the expectation is that they need to first Register, then Login and its only then they can update their online profile for the application form.

Im creating a container that will host the vertical tab, this contains other containers for each of the sections needed. The navigation tabs (nav) can be placed either on the left or the right side of the component.

Sub SignIn(thisApp As UOENowApp) As UOENowModal
    App = thisApp
    Dim mdl As UOENowModal
    mdl.Initialize(App,"signinm","",False,"")
    mdl.AddTitle("Amitek Business College")
    mdl.CenterHeading
    mdl.LargeSize
    mdl.AddClose
    
    Dim vt As UOENowVerticalTabs
    vt.Initialize(App,"vt",App.EnumThemes.Primary,"","")
    vt.AddItem("login","Log In","",False,True,LoginContainer)
    vt.AddItem("register","Register","",False,False,RegisterContainer)
    vt.AddItem("forgot","Forgot Password","",False,False,ForgotPassword) 
    vt.AddItem("reset","Reset Password","",False,False,ResetPassword)
    mdl.Body.AddVerticalTabs(0,0,vt)
    Return mdl
End Sub[/CODE

1. Login

[CODE]
Sub LoginContainer As UOENowContainer
    Dim lgn As UOENowContainer
    lgn.Initialize(App,"registerc",False,"","","")
    lgn.AddRows(5).AddColumns12
    lgn.AddParagraph(1,1,"","Please enter the email address and password that you used to register.","","",True)
    lgn.AddEmailTitle(2,1,"login_email","Email Address","","")
    lgn.AddPasswordTitle(3,1,"login_password", "Password","","")
    lgn.AddHorizontalRule(4,1)
    Dim btnLogin As UOENowButton
    btnLogin.Initialize(App,"btnLogin","Login","","","",App.EnumThemes.Primary,"","")
    btnLogin.FullWidth = True
    btnLogin.IsOutline = True
    btnLogin.IsPill = True
    lgn.AddButton(5,1,btnLogin)
    Return lgn
End Sub

I'm adding 5 rows on a container and then the input controls needed to login, in this case the email and password. When the Login button is clicked, the login_email and login_password should be checked/validated, if available, these should be read from a db. If available the next process will take place.

2. Register

The register screen is rather cumbersome. This has been split into two sections for more content to fit.

Sub RegisterContainer() As UOENowContainer
    Dim rc As UOENowContainer
    rc.Initialize(App,"registerc",False,"","","")
    rc.AddRows(1).AddColumns12
    rc.AddRows(1).AddColumns(1,"12","6","6","6")
    rc.AddRows(4).AddColumns(1,"12","6","6","6").AddColumns(1,"12","6","6","6")
    rc.AddRows(3).AddColumns12
    rc.AddParagraph(1,1,"","Please enter all the information required here so that we can create a profile for you.","","",True)
    rc.AddTelTitle(2,1,"id","Identity #","","")
    rc.AddTextBoxTitle(3,1,"firstname","First Name","","")
    rc.AddTextBoxTitle(3,2,"lastname","Last Name","","")
    rc.AddTextBoxTitle(4,1,"email","Email Address","","")
    rc.AddTelTitle(4,2,"telephone","Cellphone #","","")
    rc.AddRadioGroupJSON(5,1,"gender","gender","Gender","","",$"{"Male":"Male","Female":"Female"}"$,"","")
    rc.AddDatePicker1(5,2,"dateofbirth","Date of Birth","","","","","","")
    rc.AddPasswordTitle(6,1,"password", "Password","","")
    rc.AddPasswordTitle(6,2,"confirmpassword", "Confirm Password","","")
    rc.AddCheckBox1(7,1,"confirm","I agree with Amitek's Privacy Policy & Terms of Service","confirm","","","",False,False,False,CreateMap("padding-bottom":"15px"))
    rc.AddHorizontalRule(8,1)
    Dim btnRegister As UOENowButton
    btnRegister.Initialize(App,"btnRegister","Register","","","",App.EnumThemes.Primary,"","")
    btnRegister.FullWidth = True
    btnRegister.IsOutline = True
    btnRegister.IsPill = True
    rc.AddButton(9,1,btnRegister)
    Return rc
End Sub

We need more details for the registration process. The firstname, lastname, email address, gender and date of birth are some of the compulsory content.

3. Forgot Password & Reset Password

When a user forgets a password or wants to reset it, they need to specify the email address they used to register.

When login credentials are forgot, if the email address is valid, the system will send the login details to that email address. On reset, the system should generate a new password and email this to the user. The user should have an option to change the password.

I should add another section to Change Password where the old password should be specified.

Sub ResetPassword As UOENowContainer
    Dim rp As UOENowContainer
    rp.Initialize(App,"rp",False,"","","")
    rp.AddRows(4).AddColumns12
    rp.AddParagraph(1,1,"","Please enter the email address that you used to register.","","",True)
    rp.AddEmailTitle(2,1,"rp_email","Email Address","","")
    rp.AddHorizontalRule(3,1)
    Dim btnReset As UOENowButton
    btnReset.Initialize(App,"btnReset","Reset Password","","","",App.EnumThemes.Primary,"","")
    btnReset.FullWidth = True
    btnReset.IsOutline = True
    btnReset.IsPill = True
    rp.AddButton(4,1,btnReset)
    Return rp
End Sub

Sub ForgotPassword As UOENowContainer
    Dim fp As UOENowContainer
    fp.Initialize(App,"fp",False,"","","")
    fp.AddRows(4).AddColumns12
    fp.AddParagraph(1,1,"","Please enter the email address that you used to register.","","",True)
    fp.AddEmailTitle(2,1,"fp_email","Email Address","","")
    fp.AddHorizontalRule(3,1)
    Dim btnForgot As UOENowButton
    btnForgot.Initialize(App,"btnForgot","Forgot Password","","","",App.EnumThemes.Primary,"","")
    btnForgot.FullWidth = True
    btnForgot.IsOutline = True
    btnForgot.IsPill = True
    fp.AddButton(4,1,btnForgot)
    Return fp
End Sub

And I guess a checkbox to conform "I am not a robot!"

Ta!

 

[Mashiane]

I like where this is going. Decided to add a not robot check box and also one to be able to change the password. This will work closely with the Reset Password stuff as one will be sent a system generated password with special characters, random text etc.

I need to find out how to hash passwords when being saved to the MySQL DB.

Sub ChangePwdContainer() As UOENowContainer
    Dim rc As UOENowContainer
    rc.Initialize(App,"changerc",False,"","","")
    rc.AddRows(8).AddColumns12
    rc.AddParagraph(1,1,"","Please enter all the information required here so that we can change your password.","","",True)
    rc.AddTextBoxTitle(2,1,"change_email","Email Address","","")
    rc.AddPasswordTitle(3,1,"change_oldpassword", "Old Password","","")
    rc.AddPasswordTitle(4,1,"change_newpassword", "New Password","","")
    rc.AddPasswordTitle(5,1,"change_confirmpassword", "Confirm New Password","","")
    rc.AddCheckBox1(6,1,"change_notrobot","I'm not a robot","confirm","","","",False,False,False,CreateMap("padding-bottom":"15px"))
    rc.AddHorizontalRule(7,1)
    Dim btnRegister As UOENowButton
    btnRegister.Initialize(App,"btnChangePassword","Change Password","","","",App.EnumThemes.Primary,"","")
    btnRegister.FullWidth = True
    btnRegister.IsOutline = True
    btnRegister.IsPill = True
    rc.AddButton(8,1,btnRegister)
    Return rc
End Sub

 

[Mashiane]

Getting Form Data by Serializing It using $JQuery

I have initialized a BANano Object named JQuery to be initialize with $.

Dim JQuery As BANanoObject
JQuery.Initialize("$")

This ensures that I can call jquery commands within my code.

For my elements above, I have categorized the elements into groups, each having its own form element. Each element added to the form has a name attribute which should also be unique mostly except for group radio. For example, the email and password on the login page I have enclosed in a form element named form_login

Reading all the input elements with a name attribute at once...

Dim dataQuery As String = JQuery.Selector("#form_login").RunMethod("serialize",Null).Result
    Log(dataQuery)

OUTPUT: login_email=anele%40mbangas.com&login_password=Thepassword&login_notrobot=notrobot

    Dim data As List = JQuery.Selector("#form_login").RunMethod("serializeArray",Null).Result
    Log(data)

OUTPUT:
[LIST=1]
[*]0: {name: "login_email", value: "[email protected]"}
[*]1: {name: "login_password", value: "Thepassword"}
[*]2: {name: "login_notrobot", value: "notrobot"}
[/LIST]

In both instances, when the checkbox is not selected, the element is not included in the results. This seems an easier and will work better with post requests to MySQL.

Ta!