Advanced login

The purpose of this tutorial is to create a login page that, in case of access granted, displays a panel, and in case of failed access populates a label displaying “Incorrect login”.

Procedure

  1. Create a new project named “PanelLoaderLogin”. Create a Dynamic panel object from MainWindow (type) >> Containers, drag the “LoginForm” Widget into the User interface folder of the project page.

  2. Create a new panel reachable only with login allowed, from User interface >> Containers>> Panel and insert a label. Right-click LoginForm1 and add a NetLogic, from its properties add three variables using the + button.

  3. Rename the second variable to “Panel”, define its type in NodeId and dynamically link it to PanelLoaderLogin >> UI >> Panel1. Rename the third variable to “Message”, define it as String and delete its “0” value.

  4. Open the NetLogic LoginForm1Logic1 script and paste the following code:

[ExportMethod]
public void Login(string username, string password)
{
    if (!PerformLogin(username, password))
    {
        // Set incorrect login message
        var messageVariable = LogicObject.GetVariable("Message");
        messageVariable.Value = "Incorrect login";
        return;
    }

    // Check the correct type of PanelLoader
    PanelLoader panelLoader = (PanelLoader)Owner.Owner;
    if (panelLoader == null)
    {
        Log.Error(panelLoader + " is not a PanelLoader");
        return;
    }

    // Retrieve Panel variable
    var panelVariable =  (NodeId)LogicObject.GetVariable("Panel").Value;

    if (panelVariable == NodeId.Empty)
    {
        Log.Error("Panel variable is empty");
        return;
    }

    // Perform ChangePanel
    panelLoader.ChangePanel(panelVariable, NodeId.Empty);
}

private bool PerformLogin(string username, string password)
{
    return Session.ChangeUser(username, password);
}
  1. From LoginForm1 (type) click LoginButton, from the events replace the “ChangeUser” method with the “Login” method from UI >> LoginForm1Logic1 >> Login.

  2. Expand InputArguments and dynamically link PanelLoaderLogin1 >> UI >> LoginForm1 >> Username >> SelectedValue to “username”, and PanelLoaderLogin >> UI >> LoginForm1 >> Password >> Text to “password”.

  3. Now insert a label in LoginForm1 whose Text property is dynamically linked PanelLoaderLogin >> UI >> LoginForm1Logic1 >> Message.

  4. Add the Admin user whose password is Admin and dynamically link the users folder to the Users property of LoginForm1, then drag LoginForm1 into the Panel property of Panel1Loader.

  5. Add a Logout button to the MainWindow with two methods:

    • Commands >> CoreCommands >> ChangeUser, whose Username argument will be Guest

    • {PanelLoader1} >> PanelLoader1 >> ChangePanel, dynamically link LoginForm1 to the NewPanelPath argument.

  6. Execute the project.

Download the example projects from here.