Technote Details :: How to create a user login in an Ajax Panel

Learn how to use MX Kollection 3 and MX AJAX Toolbox in order to add a login form to a panel. The login form will be displayed until the user logs in. Afterwards, a welcome message and the logout link will be displayed.

Before creating the actual login form, you need to prepare your site by following these steps:

1. First define a new Ajax site. You can do so by creating a new site in Dreamweaver and selecting the Site > New AJAX site command. Follow the instructions in the wizard to define the main site layout.
2. Create a database connection to the table storing user information.
3. Create a panel where to display the user login / welcome message. You only need the default state for the panel.
4. Define the login settings, using the InterAKT Control Panel. You can learn how to do this by following this tutorial. The only difference is that you do not need to specify different pages for the login form, login successful and login failed fields. Instead use index for the first and third, and add a parameter for the second (e.g. index.php?Content__state=).
   
   

 Now you can create the AJAX version of the login form. To do so, follow these steps:

1. On the MX AJAX Toolbox tab of the Insert bar click the Edit states icon. From the menu select the login panel with the default state.
2. Place the mouse cursor inside the login panel and remove any default generated content (e.g. Lorem Ipsum text).
3. On the MX Kollection tab of the Insert bar click the Login form icon. If you have correctly configured the login settings, you can click the Finish button directly.
4. Select the content added by the wizard. Then, from the Server Behaviors tab > Plus (+) > MX Kollection > Conditional Regions apply the Show If User Is Logged in server behavior. Tick the Has Else option and click OK to apply it.
5. Cut the previously selected content and paste it instead of the Else text. Replace this section. This way the login form will only be displayed when the user is not logged in.
   
   
   
6. Place the mouse cursor before the {else} dynamic text. Here type Welcome and then drag and drop the kt_login_user session variable.
7. Create a new paragraph after the session variable and from the Server Behaviors tab > Plus (+) > MX Kollection > User login apply the Logout Form Wizard. Configure it to create a new logout link and to redirect to the index page.

Now save the changes into the panel, and then of the master page. You can test out the page by loading it in a browser and logging in with the right credentials. The welcome message and logout link will be displayed.