Create Log In Page

Now after you added the security provider in your server action let's add the login functionality. Right click the security provider step (doesn't matter which security provider type you are using):

Open the Security Provider group:

And add Security Login:

In the login properties you see the Username, Password and Remember fields. Their values contain predefined POST variables - these are just the names of the form fields which this step expects. Of course you can change them, but the easiest way is to create a form with fields using these names instead of changing them later:

Select your Security Provider instance:

Save your server action, as we are done with the server-side part.

Then let's go to the page. We included App Connect and Bootstrap 4 on our page already. Click the add button, where you'd like to create the login form:

Create a Form which contains 3 inputs - username, password and a checkbox. The first field has a Name and ID of "username" and Type "text":

The second field has a Name and ID of "password" and Type "password":

The third input is a checkbox with a Name and ID of "remember" it also has a Static Value 1:

We also created a button and its Type is "submit":

Now, select your form:

And change its method to POST:

Then click the Make Server Connect Form button. This is how we connect the form with the back-end, which expects the values of our form fields:

Click the select server action button:

And select the login server action:

We are done with the login part. Let's setup the redirect on success and an alert message, when wrong user details are provided. Select App in the App Structure and add a new component:

Open the Browser category:

And select Browser:

Select your Server Connect Form (1) and add new Dynamic Event (2):

Open Server Connect category:

And select on Success event:

Click the dynamic action picker button, in order to assign an action on success:

Under the Browser component, select Go To and click the Add button:

Enter the page where the user should be redirected after a successful log in. If you are entering a static URL, make sure to wrap it inside single quotes like: 'your-page.php'. If you are using the dynamic data picker to retrieve the URL from a dynamic data source, then quotes should not be used:

With the form still selected add a new Dynamic Event:

Open the server connect category:

And select on Unauthorized. This event is being triggered, when wrong user details are provided:

Click the dynamic action picker button:

Under Browser select Alert(1) and click the Add button (2):

Enter the alert text wrapped in single quotes, like "Wrong login details!":

And you are done! If the user provides correct login details he will be redirected and if the login details are wrong the alert will be displayed.

NEXT: Learn how to protect your pages and redirect unauthorized or not logged in users.