{"id":12254,"date":"2024-04-09T10:50:32","date_gmt":"2024-04-09T07:50:32","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12254"},"modified":"2024-04-09T15:56:58","modified_gmt":"2024-04-09T12:56:58","slug":"creating-simple-login-form-javascript-ui-library-dhtmlx-suite","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/creating-simple-login-form-javascript-ui-library-dhtmlx-suite\/","title":{"rendered":"Creating a Simple Login Form with JavaScript UI Library of DHTMLX Suite"},"content":{"rendered":"

Forms can be used in web apps for multiple purposes, but the most common application scenarios are user authentication and authorization via login forms. Such forms are an integral part of identity access management (IAM) aimed at securely managing user validation and resource access. According to Statista, the IAM market generated approximately 16.17 billion U.S. dollars in revenue during 2023, and this number is expected to reach around 18.5 billion U.S. dollars in 2024. <\/p>\n

In this blog post, we provide you with a step-by-step guide on how to build a basic login form using our JavaScript UI widget library<\/a>.<\/p>\n

Step 1: Creating a Window<\/h5>\n

First of all, let us create a window that will contain our future login form. DHTMLX Suite includes a widget (DHTMLX Window<\/a>) for implementing this functionality as well, so it will be convenient to use this widget at this stage.<\/p>\n

The initialization<\/a> is pretty simple and presupposes the use of the dhx.Window<\/strong> object constructor:<\/p>\n

const<\/span> winForm =<\/span> new<\/span> dhx.Window<\/span>(<\/span>{<\/span>
\n    width:<\/span> 550<\/span>,<\/span> \/\/ width of the window<\/span>
\n    height:<\/span> 600<\/span> \/\/ height of the window<\/span>
\n}<\/span>)<\/span>
\nwinForm.show<\/span>(<\/span>)<\/span>;<\/span> \/\/ opens the window<\/span><\/div><\/div>\n
Step 2: Adding a Tabbar to the Window<\/h5>\n

The next step is to add a tabbar element to the window created in the previous step. For this purpose, we will use the corresponding widget<\/a> from the Suite library.<\/p>\n

The tabbar is initialized<\/a> similarly with the dhx.Tabbar<\/strong> object constructor:<\/p>\n

const<\/span> loginTabbar =<\/span> new<\/span> dhx.Tabbar<\/span>(<\/span>null<\/span>,<\/span> {<\/span>
\n    mode:<\/span> "top"<\/span>,<\/span> \/\/ specifies the location of tabs<\/span>
\n    tabAlign:<\/span> "middle"<\/span>,<\/span> \/\/ defines the tabs align<\/span>
\n    css:<\/span> "dhx_widget--bordered"<\/span>,<\/span> \/\/ css classes applying to our tabbar<\/span>
\n    views:<\/span> [<\/span> \/\/the list of the tabs<\/span>
\n        {<\/span> tab:<\/span> "login"<\/span>,<\/span> id:<\/span> "login"<\/span> }<\/span>
\n    ]<\/span>
\n}<\/span>)<\/span><\/div><\/div>\n

You may notice that we\u2019re adding “dhx_widget–bordered”<\/strong> CSS class to the tabbar, but it is not defined anywhere.<\/p>\n

This CSS class is used to add borders on all sides of the tabbar.<\/p>\n

Now, you need to attach the tabbar to the window. It is done with the attach()<\/a><\/strong> method that should be added after the tabbar initialization:<\/p>\n

winForm.attach<\/span>(<\/span>loginTabbar)<\/span><\/div><\/div>\n

Note that when attaching a tabbar to a window with the attach()<\/strong> method you should not define any container for the tabbar, since dhx.Window<\/strong> will serve as this container. Therefore, you should use null<\/em> as the first parameter in its constructor:<\/p>\n

const<\/span> loginTabbar =<\/span> new<\/span> dhx.Tabbar<\/span>(<\/span>null<\/span>,<\/span> {<\/span> \u2026<\/div><\/div>\n

Now, the initialization code should look like this:<\/p>\n

const<\/span> winForm =<\/span> new<\/span> dhx.Window<\/span>(<\/span>{<\/span>
\n    closable:<\/span> false<\/span>,<\/span>
\n    width:<\/span> 550<\/span>,<\/span>
\n    height:<\/span> 600<\/span>
\n}<\/span>)<\/span>
\nwinForm.show<\/span>(<\/span>)<\/span>;<\/span>
\n
\nconst<\/span> loginTabbar =<\/span> new<\/span> dhx.Tabbar<\/span>(<\/span>null<\/span>,<\/span> {<\/span>
\n    mode:<\/span> "top"<\/span>,<\/span>
\n    tabAlign:<\/span> "middle"<\/span>,<\/span>
\n    css:<\/span> "dhx_widget--bordered"<\/span>,<\/span>
\n    views:<\/span> [<\/span>
\n        {<\/span> tab:<\/span> "login"<\/span>,<\/span> id:<\/span> "login"<\/span> }<\/span>
\n    ]<\/span>
\n}<\/span>)<\/span>
\nwinForm.attach<\/span>(<\/span>loginTabbar)<\/span><\/div><\/div>\n

That\u2019s how you will complement the window with a blank “Login” tab that will be further elaborated in the next step.
\n\"loginCheck the sample ><\/a><\/p>\n

Step 3: Creating a Form<\/h5>\n

Now, we proceed to the most interesting part of our guide, namely adding a login form to the tabbar with the DHTMLX Form<\/a> widget. <\/p>\n

Once again, we start with the initialization<\/a> of the Form widget:<\/p>\n

First, create the form<\/strong> object:<\/p>\n

const<\/span> loginForm =<\/span> new<\/span> dhx.Form<\/span>(<\/span>null<\/span>,<\/span> {<\/span>
\n    padding:<\/span> "40px 10px 10px 10px"<\/span>,<\/span> \/\/ paddings of the form<\/span>
\n    rows:<\/span> [<\/span> \/\/structure of the form controls group<\/span>
\n    ]<\/span>
\n}<\/span>)<\/span><\/div><\/div>\n

After that, you need to attach the form to the tabbar:<\/p>\n

loginTabbar.cell<\/span>(<\/span>"login"<\/span>)<\/span>.attach<\/span>(<\/span>loginForm)<\/span><\/div><\/div>\n

To make the form interactive, you need to add the following form controls:<\/p>\n

    \n
  1. Input for the username<\/li>\n
  2. Input for the password<\/li>\n
  3. Button for the form submission<\/li>\n<\/ol>\n

    More details on the input control are provided on this documentation page<\/a>. <\/p>\n

    The username input will have a simple config:<\/p>\n

    {<\/span>
    \nlabel:<\/span> "Username"<\/span>,<\/span> \/\/control label<\/span>
    \n      type:<\/span> "input"<\/span>,<\/span> \/\/control type<\/span>
    \n      name:<\/span> "user"<\/span>,<\/span> \/\/control name used during the form sending<\/span>
    \n}<\/span>,<\/span><\/div><\/div>\n

    With the password input control, you\u2019ll also need to define the “password” input type for it:<\/p>\n

    {<\/span>
    \n  label:<\/span> "Password"<\/span>,<\/span>
    \n  type:<\/span> "input"<\/span>,<\/span>
    \n  name:<\/span> "pass"<\/span>,<\/span>
    \n  inputType:<\/span> "password"<\/span>
    \n}<\/span>,<\/span><\/div><\/div>\n

    The Login button configuration looks like this:<\/p>\n

    {<\/span>
    \n  name:<\/span> "login"<\/span>,<\/span>
    \n  type:<\/span> "button"<\/span>,<\/span>
    \n  submit:<\/span> true<\/span>,<\/span> \/\/enables the button to send form data to a server <\/span>
    \n  text:<\/span> "Log in"<\/span>,<\/span> \/\/text of the button<\/span>
    \n}<\/span><\/div><\/div>\n

    After putting together all these parts in the form config, you will get the following:<\/p>\n

    const<\/span> loginForm =<\/span> new<\/span> dhx.Form<\/span>(<\/span>null<\/span>,<\/span> {<\/span>
    \n      padding:<\/span> "40px 10px 10px 10px"<\/span>,<\/span>
    \n      rows:<\/span> [<\/span>
    \n            {<\/span>
    \n                 label:<\/span> "Username"<\/span>,<\/span>
    \n                 type:<\/span> "input"<\/span>,<\/span>
    \n                 name:<\/span> "user"<\/span>,<\/span>
    \n            }<\/span>,<\/span>
    \n            {<\/span>
    \n                 label:<\/span> "Password"<\/span>,<\/span>
    \n                 type:<\/span> "input"<\/span>,<\/span>
    \n                 name:<\/span> "pass"<\/span>,<\/span>
    \n                 inputType:<\/span> "password"<\/span>
    \n            }<\/span>,<\/span>
    \n            {<\/span>
    \n                 name:<\/span> "login"<\/span>,<\/span>
    \n                 type:<\/span> "button"<\/span>,<\/span>
    \n                 submit:<\/span> true<\/span>,<\/span>
    \n             text:<\/span> "Log in"<\/span>,<\/span>
    \n           }<\/span>
    \n     ]<\/span>
    \n}<\/span>)<\/span>
    \nloginTabbar.cell<\/span>(<\/span>"login"<\/span>)<\/span>.attach<\/span>(<\/span>loginForm)<\/span><\/div><\/div>\n

    That’s what you should see in the UI:
    \n\"login    Check the sample ><\/a><\/p>\n

    Then, you need to pay attention to the arrangement of added elements. Specifically, you need to align the Login button to the right side of the form. You cannot align the controls themselves. Alignment can be applied to the form group sections only i.e. rows or columns.<\/p>\n

    At this point, you have only a single “rows” group allowing you to arrange the nested controls as rows. So you need to add one more section to the form to change the alignment. It will be the column section (“cols”). For this section, you should set “align: ‘end’<\/strong>“. After that, you add the Button control to this section.<\/p>\n

    const<\/span> loginForm =<\/span> new<\/span> dhx.Form<\/span>(<\/span>null<\/span>,<\/span> {<\/span>
    \n    padding:<\/span> "40px 10px 10px 10px"<\/span>,<\/span>
    \n    rows:<\/span> [<\/span>
    \n        {<\/span>
    \n            label:<\/span> "Username"<\/span>,<\/span>
    \n            type:<\/span> "input"<\/span>,<\/span>
    \n            name:<\/span> "user"<\/span>,<\/span>
    \n        }<\/span>,<\/span>
    \n        {<\/span>
    \n            label:<\/span> "Password"<\/span>,<\/span>
    \n            type:<\/span> "input"<\/span>,<\/span>
    \n            name:<\/span> "pass"<\/span>,<\/span>
    \n            inputType:<\/span> "password"<\/span>
    \n        }<\/span>,<\/span>
    \n        {<\/span>
    \n            align:<\/span> "end"<\/span>,<\/span>
    \n            cols:<\/span> [<\/span>
    \n                {<\/span>
    \n                    name:<\/span> "login"<\/span>,<\/span>
    \n                    type:<\/span> "button"<\/span>,<\/span>
    \n                    submit:<\/span> true<\/span>,<\/span>
    \n                    text:<\/span> "Log in"<\/span>,<\/span>
    \n                }<\/span>
    \n            ]<\/span>
    \n        }<\/span>
    \n    ]<\/span>
    \n}<\/span>)<\/span><\/div><\/div>\n
    Step 4: Adding the Form Actions<\/h5>\n

    The form acquired its final appearance, but you also need to add the login action to make it fully functional.<\/p>\n

    In this guide, we do not include any real backend, so you just have to add the click<\/a> event to the form button. Also, you need to make sure that the information entered by users is valid and hide the login window at the end. Programmatically, it is done using the following piece of code:<\/p>\n

    loginForm.getItem<\/span>(<\/span>"login"<\/span>)<\/span>.events<\/span>.on<\/span>(<\/span>"click"<\/span>,<\/span> function<\/span> (<\/span>events)<\/span> {<\/span>
    \n    let values =<\/span> loginForm.getValue<\/span>(<\/span>)<\/span>;<\/span>
    \n    if<\/span> (<\/span>values.user<\/span> ==<\/span> "user"<\/span> &&<\/span> values.pass<\/span> ==<\/span> "password"<\/span>)<\/span> {<\/span>
    \n        dhx.alert<\/span>(<\/span>{<\/span>
    \n            header:<\/span> "Welcome"<\/span>,<\/span>
    \n            text:<\/span> "You have successfully logged in"<\/span>,<\/span>
    \n            buttonsAlignment:<\/span> "center"<\/span>
    \n        }<\/span>)<\/span>;<\/span>
    \n        winForm.hide<\/span>(<\/span>)<\/span>
    \n    }<\/span>
    \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

    To inform end-users about successful login completion, use the dhx.Alert<\/strong> message.<\/p>\n

    According to the docs<\/a>, you can use the following code:<\/p>\n

    dhx.alert<\/span>(<\/span>{<\/span>
    \n      header:<\/span> "Welcome"<\/span>,<\/span>
    \n      text:<\/span> "You have successfully logged in"<\/span>,<\/span>
    \n      buttonsAlignment:<\/span> "center"<\/span>
    \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

    As a result, you get:<\/p>\n

    loginForm.getItem<\/span>(<\/span>"login"<\/span>)<\/span>.events<\/span>.on<\/span>(<\/span>"click"<\/span>,<\/span> function<\/span> (<\/span>events)<\/span> {<\/span>
    \n    let values =<\/span> loginForm.getValue<\/span>(<\/span>)<\/span>;<\/span>
    \n    if<\/span> (<\/span>values.user<\/span> ==<\/span> "user"<\/span> &&<\/span> values.pass<\/span> ==<\/span> "password"<\/span>)<\/span> {<\/span>
    \n        dhx.alert<\/span>(<\/span>{<\/span>
    \n            header:<\/span> "Welcome"<\/span>,<\/span>
    \n            text:<\/span> "You have successfully logged in"<\/span>,<\/span>
    \n            buttonsAlignment:<\/span> "center"<\/span>
    \n        }<\/span>)<\/span>;<\/span>
    \n        winForm.hide<\/span>(<\/span>)<\/span>
    \n    }<\/span>
    \n
    \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

    Using this sample<\/a>, you can fully reproduce the login process.<\/p>\n

    But you also have to ensure that the system will react correctly when invalid credentials are entered into the form:<\/p>\n

      \n
    1. Inform the user about invalid data<\/li>\n
    2. Clear the form so that it can be refilled.<\/li>\n<\/ol>\n

      To inform users about invalid input, you can make use of another Suite widget – Message<\/a>.<\/p>\n

      It can be configured<\/a> during the initialization process:<\/p>\n

       dhx.message<\/span>(<\/span>{<\/span>
      \n     text:<\/span> "Incorrect login\/password"<\/span>,<\/span>
      \n     icon:<\/span> "dxi dxi-alert-circle"<\/span>,<\/span>
      \n     css:<\/span> "error"<\/span>,<\/span>
      \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

      In the icon<\/strong> property, you can use a set of default icons<\/a> provided for the Suite library.<\/p>\n

      As for the background CSS, it can be specified in the following way:<\/p>\n

          .error{<\/span>
      \n        background<\/span>:<\/span> #FFCACA<\/span>
      \n    }<\/span><\/div><\/div>\n

      The final step is to add this message to the click<\/strong> event:<\/p>\n

      loginForm.getItem<\/span>(<\/span>"login"<\/span>)<\/span>.events<\/span>.on<\/span>(<\/span>"click"<\/span>,<\/span> function<\/span> (<\/span>events)<\/span> {<\/span>
      \n    let values =<\/span> loginForm.getValue<\/span>(<\/span>)<\/span>;<\/span>
      \n    if<\/span> (<\/span>values.user<\/span> ==<\/span> "user"<\/span> &&<\/span> values.pass<\/span> ==<\/span> "password"<\/span>)<\/span> {<\/span>
      \n        dhx.alert<\/span>(<\/span>{<\/span>
      \n            header:<\/span> "Welcome"<\/span>,<\/span>
      \n            text:<\/span> "You have successfully logged in"<\/span>,<\/span>
      \n            buttonsAlignment:<\/span> "center"<\/span>
      \n        }<\/span>)<\/span>;<\/span>
      \n        winForm.hide<\/span>(<\/span>)<\/span>
      \n    }<\/span> else<\/span> {<\/span>
      \n        dhx.message<\/span>(<\/span>{<\/span>
      \n            text:<\/span> "Incorrect login\/password"<\/span>,<\/span>
      \n            icon:<\/span> "dxi dxi-alert-circle"<\/span>,<\/span>
      \n            css:<\/span> "error"<\/span>,<\/span>
      \n        }<\/span>)<\/span>;<\/span>
      \n        loginForm.clear<\/span>(<\/span>)<\/span>
      \n    }<\/span>
      \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
      Conclusion<\/h5>\n

      The Suite\u2019s form widget is a suitable tool for building and customizing various types of forms, including login forms. Following the steps described in this blog post, you can add a basic login form to a web page with minimum time and effort. Stay tuned for Part 2, where we will show you how to complement this basic login form with additional capabilities.<\/p>\n

      Related Materials<\/h5>\n

      That’s it, your login form is ready, and it should be similar to the form shown in this sample<\/a>.<\/p>\n

    As a result, the Login button will be aligned to the right side of the form:
    \n\"loging    Check the sample ><\/a><\/p>\n

This is one of the predefined CSS classes available in DHTMLX Suite. You can check the full list with the details on this documentation page<\/a>.<\/p>\n

As a result, you should get a simple window element on your web page.
\n\"LoginCheck the sample ><\/a><\/p>\n