Insert login form

The login form enables to unlock a part or all your content to some of your users.

To simplify your life we give you a ready to use form module: don't hesitate to download it and to customize it. You just have to insert it in a Web component in the studio.

We explain how to use this module in this article and how it was built for those who want to customize it. 

Insert premade login form

We created a simple form with two fields: "User Name" and "Password". In our example user has to type "admin" and "admin" to validate the form. 

If you want to change that combination go in index.html file and indicate user name and password at line 15.

Once you have a wonderful form compress your folder into .zip file and be careful to have all your file in the same folder.

1. Go back in the studio and add a Web component. Put it where you want to display your form.
2. In Properties window select OFFLINE and SELECT A MEDIA 
3. Import your .zip file
4. Double-click on the component to preview your form in the studio.
5. Select your component and open the Interactivities window.
6. There a four triggers: Failure,Success, Already registered and First time. 
7. Create animations according to the result of your form. 

Customize the form

In this part we explain the construction  of this form to go further in customization.

This HTML module  is composed of a index.html file, a style.css file, the pandasuite.json description file and panda-bridge connection. 

 Description file: pandasuite.json 

To be able to unlock content it's necessary to know if the form has been correctly filled or not. That's why we need two triggers: one qualifies the success and the other one the failure. 

In the pandasuite.json file we described these triggers (success and failure). Here is name displayed in the studio translated in french. 

<code class="html">"events": [    {      "id": "success",      "name": "Form validation success",      "locale_name": {        "fr_FR": "Succès validation formulaire"      }    },    {      "id": "failure",      "name": "Form validation failure",      "locale_name": {        "fr_FR": "Échec validation formulaire"      }    }  ]

Once these two triggers are declared they appear in the Interactivities window. 

 The file PandaBridge

The PandaBridge makes it easy to communicate between the HTML component and the application, in terms of transmission and reception. You must insert this file in your .zip file.

There are no changes required.

 The methods of the class PandaBridge

Let's have a look at the index.html file. We must include the connection with the panda-bridge and the predefined triggers.

Here are the main additions:

• Insert the script code in the header: <script src="./panda-bridge-2.0.2.min.js"></script>
  
  
• Sending triggers
  
  When validating, it is necessary to contact the studio and thus send the success information with the send method. Similarly with failure. This is why we use the method PandaBridge.send ( "id") within the validate () function.

<code class="html">function validate() {     var username = document.getElementById("username").value;     var password = document.getElementById("password").value;      if (username == "admin" && password == "admin") {         PandaBridge.send("success");         return false;     }     else {         PandaBridge.send("failure");         return false;     }

You can create interactive actions based on each trigger:

• If success: go to the next screen, for example.
• If failure: display an error message (in a pop-up), for example.

You now have all the information required to create your own form and customize triggers.