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

Discussion in 'B4J Tutorials' started by Mashiane, Jun 4, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    MultiForm.gif

    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.

    01Login.png

    02Register.png

    03ForgotPassword.png

    04ResetPassword.png

    05ChangePassword.png
     
    Last edited: Jun 5, 2019
    joulongleu and Don Oso like this.
  2. Mashiane

    Mashiane Expert Licensed User

    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.

    Code:
    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.

    Code:
    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.

    Code:
    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!
     
  3. Mashiane

    Mashiane Expert Licensed User

    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.


    changepassword.png

    Code:
    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
     

    Attached Files:

    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    Getting Form Data by Serializing It using $JQuery

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

    Code:
    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...

    Code:
    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: "anele@mbangas.com"}
    [*]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!
     
    Last edited: Jun 4, 2019
    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice