Mon cahier d’exercices

Widget dvjhPassword

"Auteur : Hagnoul Daniel"

Texte : v1.1.0 2010-04-10

Introduction

Vous connaissez certainement les composants (widgets) pour l'interface utilisateur proposée par jQuery UI. Dès que l’on s’est familiarisé avec eux, l’idée de les adapter à ses besoins vient naturellement. Commence alors la recherche d’explications et d’exemple sur la méthode à suivre. Voici tout ce que j’ai pu trouver :

Bien que l’auteur du tutoriel déclare l’avoir mis à jour pour jQuery UI 1.8, je vous recommande de ne pas prendre exemple sur lui, car il ne respecte pas l’API jQuery UI.

J’ai cherché des exemples de widgets UI sur le web sans succès.

Pour un premier essai, sans autres conseils que ceux cités ci-dessus, je me suis limité volontairement à quelque chose de très simple : un dialogue d’authentification.

Dialogue d'authentification

En route vers le nirvana du développeur !
Photos, vidéos, texte et plus si affinités.
Mais pour activer le lien du bonheur, vous devez vous authentifier.

Téléchargement ftp : dvjhPassword-v1.0.0.zip

Téléchargement https : dvjhPassword-v1.0.0.zip

Les codes du dialogue

Code CSS

/* important, règle la taille du dialogue */
.ui-dvjhPassword {
	font-size:0.8em;
}

Code JavaScript

$("#password").dvjhPassword({
	autoOpen: false,
	labelNameText: "Mon pseudo :",
	labelPasswordText: "Mon pseudo :",
	action: "widget-dvjh/password/passwordList.php", // $.post()
	dvjhData:function(event, data){	// bind event "dvjhData"
		// data peut contenir ce que vous voulez, ici une url
		window.location.href = data;
	}
});

$("#btn").click(function(){
	$("#password").dvjhPassword("open");
});

Code PHP

<?php
	header('Content-Type: text/html; charset=utf-8');
	
    if ((isset($_REQUEST['code'])) &&
        (empty($_REQUEST['code']) == false) &&
        (strlen($_REQUEST['code']) == 128)){
        
        if (file_exists('passwordList.xml')){
            $xml = simplexml_load_file('passwordList.xml');
            $result = '#';
            
            if ($xml){
                foreach($xml->element as $element){
                    if ($element->code == $_REQUEST['code']){
                        $result = $element->url;
                    }
                }
            }
            
            echo $result;
        }
    } else {
        echo '#';
    }
?>

Code XML

Le contenu du tag code a été découpé en deux parties pour la présentation.

<?xml version="1.0" encoding="UTF-8"?>
<list>
    <element>
        <code>5da5990920ba7f2806cbb5d649fd984fc26fe9e3d2cfd6f3fb2945f5cbf888
		5aa09f14dd3113628257b33fed51138cf9b734cc99647581d59f6ed4137a1d015f</code>
        <url>https://www.developpez.com/</url>
    </element>
</list>

Les options

Daniel Hagnoul

Widget jquery.ui.dvjhPassword-1.0.0.js

Code : v1.0.0 2010-04-08
------------------------------------------
Depends:
	jquery.ui.core.js
	jquery.ui.widget.js
	jquery.ui.button.js
	jquery.ui.draggable.js
	jquery.ui.mouse.js
	jquery.ui.position.js
	jquery.ui.resizable.js
	jQuery.ui.dialog.js
	
	jsSHA sha512.js "https://jssha.sourceforge.net/"
------------------------------------------
Options disponibles, réglages par défaut :
	titre: "Zone protégée",
 	labelNameText: "Nom :",
 	labelPasswordText: "Mot de passe :",
 	inputMargin: 12,
 	inputWidth: 400,
 	btnCancelText: "Annuler",
 	btnOKText: "Soumettre",
	action: "rien",
	actionFileType: "php",
	passwordMinLength: 8,
	nameMinLength: 8,
	alertMinLength: "la longueur du nom ou du mot de passe est inférieure à la limite !",
	alertFileType: "l'option action doit contenir un mon de fichier php !"
		
et les options de dialog : "https://jqueryui.com/demos/dialog/"

Le code du widget

(function($){
	$.widget("ui.dvjhPassword", $.ui.dialog, {
		_options:{
			Auteur: "Hagnoul Daniel (https://www.developpez.net/forums/u285162/danielhagnoul/)",
			Copyright: "Creative Commons License Attribution-Share Alike 2.0 Belgium (https://creativecommons.org/licenses/by-sa/2.0/be/legalcode.fr)"
		},
		options:{
			titre: "Zone protégée",
			labelNameText: "Nom :",
			labelPasswordText: "Mot de passe :",
			inputMargin: 12,
			inputWidth: 400,
			btnCancelText: "Annuler",
			btnOKText: "Soumettre",
			action: "rien",
			actionFileType: "php",
			passwordMinLength: 8,
			nameMinLength: 8,
			alertMinLength: "la longueur du nom ou du mot de passe est inférieure à la limite !",
			alertActionFileType: "l'option action doit contenir un mon de fichier php !"
		},
		_create:function(){
			$.ui.dialog.prototype._create.apply(this, arguments);
			
			var self = this;
			
			this._setOption("dialogClass","ui-dvjhPassword");
			this._setOption("modal", true);
			this._setOption("title", this.options.titre);
			
			this.nameLabel = $("<label/>",{
				html: self.options.labelNameText,
				css:{
					margin: self.options.inputMargin
				}
			});
			
			this.nameInput = $("<input/>",{
				type: "text",
				css:{
					margin: self.options.inputMargin,
					marginBottom: self.options.inputMargin*2,
					width: self.options.inputWidth
				}
			});
			
			this.passwordLabel = $("<label/>",{
				html: self.options.labelPasswordText,
				css:{
					margin: self.options.inputMargin
				}
			});
			
			this.passwordInput = $("<input/>",{
				type: "password",
				css:{
					margin: self.options.inputMargin,
					width: self.options.inputWidth
				}
			});
			
			this.form = $("<form/>",{
				css:{
					marginTop: self.options.inputMargin
				}
			}).append(this.nameLabel,"<br/>",this.nameInput,"<br/>",
						this.passwordLabel,"<br/>",this.passwordInput);
			
			this.element.append(this.form);
			
			this._setOption("width", this.options.inputWidth + 50);
								
			this._createButtons({
				Cancel:function(){
					self.close();
				},
				OK:function(event){
					if ((self.options.action != "rien") && (self.options.action.split(".")[1] == self.options.actionFileType)){
						var password = self.passwordInput.val();
						var name = self.nameInput.val();
						
						if ((password.length >= self.options.passwordMinLength) &&
							(name.length >= self.options.nameMinLength)){
							$.post(self.options.action, {code: (new jsSHA(password, "ASCII")).getHMAC(name, "ASCII", "SHA-512", "HEX")}, function(data){
								self._trigger("dvjhData", event, data);
							});
						} else {
							alert("$.ui.dvjhPassword : " + self.options.alertMinLength);
						}
					} else {
						alert("$.ui.dvjhPassword : " + self.options.alertActionFileType);
					}
					
					self.close();
				}
			});
			
			$("span.ui-button-text").each(function(i, item){
				switch(i){
					case 0:
						$(item).text(self.options.btnCancelText);
						break;
					case 1:
						$(item).text(self.options.btnOKText);
						break;
				}
			});
		},
		destroy:function(){
			this.passwordInput.val("");
			this.nameInput.val("");
			this.form.remove();
			
			$.ui.dialog.prototype.destroy.apply(this, arguments);
		},
		close:function(){
			this.passwordInput.val("");
			this.nameInput.val("");
			
			$.ui.dialog.prototype.close.apply(this, arguments);
		},
		open:function(){
			$.ui.dialog.prototype.open.apply(this, arguments);
			
			this.nameInput.focus();
		},
		_setOption:function(key, value){
			switch(key){
				case "titre":
					this.options.titre = value;
					break;
				case "labelNameText":
					this.options.labelNameText = value;
					break;
				case "labelPasswordText":
					this.options.labelPasswordText = value;
					break;
				case "inputMargin":
					this.options.inputMargin = value;
					break;
				case "inputWidth":
					this.options.inputWidth = value;
					break;
				case "passwordMinLength":
					this.options.passwordMinLength = value;
					break;
				case "nameMinLength":
					this.options.nameMinLength = value;
					break;
			}
			
			$.ui.dialog.prototype._setOption.apply(this, arguments);
		}
	});
})(jQuery);

À bientôt !

 

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Avertissement solennel

Autodidacte en informatique, l’auteur a tous les défauts de sa qualité. Si vous vous inspirez, copiez ou pire utilisez le contenu de cette page, vous êtes téméraire, inconscient du danger !

Reconnaissant avoir été dûment informé, vous déchargez l’auteur et à fortiori l’hébergeur du site de toute responsabilité dans les graves dégâts que vous causerez sûrement !

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.

Creative Commons License Attribution-Share Alike 2.0 Belgium Except where otherwise noted, content on this site is licensed under a Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (https://www.developpez.net/forums/u285162/danielhagnoul/)"