Insérer un écran de login

Le formulaire de login permet de réserver une partie ou l'intégralité du contenu de votre application à certains utilisateurs.

Nous vous fournissons un module de formulaire prêt à l'emploi : n'hésitez pas à le télécharger et à le personnaliser dans votre application. Dans le studio de création, vous n'avez qu'à insérer ce modèle dans le composant HTML.

Dans cet article, nous vous expliquons comment utiliser ce modèle et pour ceux qui voudraient le personnaliser, nous vous détaillons également sa construction.

 Téléchargez le module du formulaire

 

Insérer le formulaire de login prêt-à-l'emploi

Nous avons créé un formulaire simple comprenant deux champs : User Name et Password. Dans notre exemple, l'utilisateur doit indiquer admin et admin pour valider le formulaire.

Si vous souhaitez changer cette combinaison, rendez-vous dans le fichier index.html et indiquez à la ligne 15 le nom d'utilisateur et le mot de passe de votre choix.

Ce formulaire a le bon design des années 1990. Si vous vous connaissez en CSS, n'hésitez pas à rajouter un peu de style dans le fichier style.css ! :-)

Une fois que le formulaire vous plaît, zippez les fichiers en faisant attention à bien mettre vos fichiers à la racines :  ils doivent être directement accessibles dès l’extraction pour pouvoir être utilisés.

Dans le studio de création, insérez un composant HTML là où vous voulez afficher le formulaire de login. Dans la fenêtre Propriétés du composant, sélectionnez le type HORS LIGNE, cliquez sur AJOUTER UNE SOURCE et uploadez le dossier .zip du formulaire.

Pour afficher votre formulaire, double-cliquez sur la zone transparente du composant !

Sélectionnez le composant et ouvrez la fenêtre Interactivités. Ce composant comprend deux déclencheurs par défaut : le succès et l'échec du remplissage du formulaire. Vous pouvez ainsi créer des actions spécifiques en fonction du résultat du formulaire :-)

 

interactivités HTML

 

 

Modifier le formulaire

Cette partie détaille pas-à-pas la construction du formulaire pour aller plus loin dans la personnalisation.

Ce module HTML est composé d'un fichier index.html, d'un fichier style.css, du fichier de description pandasuite.json et de la connexion panda-bridge.

Capture_d_e_cran_2018-03-26_a__12.53.16.png

 

 

json-dot-png.png Le fichier de description : pandasuite.json 

Pour être en mesure de débloquer le contenu, il est nécessaire de savoir si le formulaire a été correctement rempli ou non. C'est pourquoi nous avons besoin de deux déclencheurs : l'un qui qualifie le succès, l'autre l'échec du remplissage.

Dans le fichier pandasuite.json, nous avons décrit ces déclencheurs dont les ID sont success et failure. Nous avons choisi le nom qui apparaît dans le studio et sa traduction française.

"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"
     }
   }
 ]

 

Une fois ces deux déclencheurs déclarés, ils apparaissent dans la fenêtre Interactivités du studio de création.

 

bridge-dot-jpg.jpg Le fichier PandaBridge

Pour que le dossier .zip communique avec le studio, il est nécessaire d'inclure ce fichier qui permet d'accéder à la classe PandaBridge et ses différentes méthodes. Il n'y a aucune modification à apporter à ce fichier.

 

html-dot-jpg.jpg Les méthodes de la classe PandaBridge

Nous nous intéressons maintenant au fichier index.html. Il est nécessaire d'inclure la connection avec le panda-bridge et les déclencheurs précédemment déclarés.

Voici les différents ajouts :

  • Insertion du script dans le header du code : <script src="./panda-bridge-2.0.2.min.js"></script>

  • Envoi des déclencheurs

    Lors de la validation, il est nécessaire de communiquer avec le studio et donc d'envoyer l'information success avec la méthode send. De même avec l'information failure. C'est pourquoi nous utilisons la méthode PandaBridge.send("id") au sein de la fonction validate().
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;
    }

Vous pourrez ainsi créer des actions interactives en fonction de chaque déclencheur :

  • Au succès de la validation : aller à l'écran suivant par exemple
  • A l'échec de la validation : lancer une pop d'erreur par exemple

actions-dot-png.png 

Tout compris ? Vous avez maintenant toutes les informations nécessaires pour créer votre propre formulaire et personnaliser ses déclencheurs !

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !