interface de login par superposition (transparence) - intranet [Résolu]

mounia.n · 08/07/2008, 10h01

Bonjour à tous,

je voudrais réaliser la chose suivante pour l'authentification des utilisateurs sur un intranet et je ne sais pas trop comment m'y prendre :
je souhaite que l'utilisateur puisse avoir accès à tout moment à l'interface d'authentification (je pense donc mettre un lien login "permanent" dans mon menu).
Et je souhaiterais qu'au clic sur ce lien s'affiche les champs de login et password par dessus la page actuelle (par transparence ce serait génial

) et qu'une fois l'authentification terminée la page du dessous soit simplement rafraichie.

Auriez vous des indications à me donner ?

Merci par avance !

MadStar · 08/07/2008, 13h09

Tu ne vas pas pouvoir faire ça en php. Là tu dois faire appel à du javascript, au moins pour gérer l'évènement du clic sur ton lien "login".
Maintenant je ne peux pas t'en dire plus parce que je ne sais pas trop comment on fait ce genre d'apparition de zone, c'est une question que je me suis souvent posée d'ailleurs mais comme je n'ai jamais eu l'occasion de le mettre en application je ne me suis pas renseigné.

mounia.n · 08/07/2008, 14h54

Merci pour ta réponse...

Effectivement javascript me semble nécessaire, mais je ne sais pas comment gérer la superposition de la zone de login à ma page (iframe?) ni comment gérer le retour à la page après traitement du formulaire d'authentification.

Quelqu'un d'autre aurait une idée svp ?..

defcon_suny · 08/07/2008, 15h10

Salut,

Je pense que tu peux réaliser quelque chose sans trop de difficulté mais tout dépend de ton niveau de connaissance...

Comme dit plus haut, le Javascript est nécessaire et le traitement de ton formulaire en restera inchangé à la soumission.

Voici quelque chose qui pourrait t'aider ou t'inspirer... mooSlideBox

bon dev!

mounia.n · 08/07/2008, 15h40

Merci !

ça a l'air génial, je ne vois pas encore comment ça va se passer pour le traitement du formulaire (je voudrais notamment stocker qques infos non "sécurisées" sur le user dans un cookie une fois que l'authentification est faite), le truc c'est que je n'ai pas encore une très bonne maîtrise de php. Mais je vais regarder tout ça et je reviendrai si j'ai d'autres questions :p

Merci encore

mounia.n · 08/07/2008, 18h13

Re bonjour,

pour l'affichage, c'est super j'ai eu ce que je voulais : la slidebox s'affiche avec mon formulaire d'authentification. J'ai obtenu ça en créant un lien dans mon script de génération de menu (appelé au début du script de toutes mes pages) qui fait appel au outils mooSlideBox.

Mon soucis reste au niveau du traitement du formulaire.

Pour l'instant j'ai fait la chose suivante : dans mon script de génération de menu j'inclus login.php qui contient :

le code de traitement du formulaire.
le formulaire "loginForm" en question.
le code javascript qui utilise mooSlideBox pour l'affichage du formulaire.

Mais lorsque je soumets mon formulaire sur la slidebox, le traitement de celui ci ne se fait pas.

et je ne comprends pas pourquoi...

defcon_suny · 08/07/2008, 19h06

Peux tu poster la sortie html de ta page?

mounia.n · 09/07/2008, 17h53

Voici ce à quoi il ressemble

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<!--mes css-->
</HEAD>
<BODY>
	<table  cellspacing=0 cellpadding=0 border=0>
		<!--mon menu dans lequel j'ajoute le lien ci dessous pour l'apparition de la mooSlideBox-->
		<a href="#" id="toggle" >Toggle login slider</a>
	</table  >
 
	<script language="javascript" type="text/ecmascript" src="http://maMachine/Authentication/mootools.js"></script>
 
	<!--ici dans mon .php j'effectue le traitement de mon formulaire if isset($_POST['monsubmit'])-->
 
	<!--mon formulaire-->
	<div id="test" class="mooSlide" style="visibility:hidden;">
		<form name="loginForm" method="post">
			<div class=loginLine>Login :<input type=text name=sesameID value="mounia.nouda"></div>
			<div class=loginLine>Password :<input type=password name=password value="spring_rolls123"></div>
			<div><input type=submit value="Login" class=loginButton></div>
	</form></div>
 
	<!--script d'instanciation de ma mooSlideBox-->
	<script language="javascript" type="text/ecmascript">
 
	window.addEvent('domready',function(){
 
 
	var mooSlide2 = new Class({
		options:	{
						slideSpeed: 500,
						fadeSpeed:	500,
						effects:	Fx.Transitions.linear,
						toggler:	"myToggle",
						contentID:	 null,
						removeOnClick: true,
						from:		'bottom',
						opacity:	1,
						height:		0,
						isOpen:		0
					},
 
		initialize:	function(options){
			this.setOptions(options);
			if(options['toggler']) this.toggler = options['toggler'];
			if(options['content']) this.content = $(options['content']);
			if(options['height']) this.height = options['height'];
			if(options['opacity']) this.opacity = options['opacity'];
			if(options['slideSpeed']) this.slideSpeed = options['slideSpeed'];
			if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
			if(options['removeOnClick']) this.removeOnClick = options['removeOnClick'];
			if(options['from']) this.from = options['from'];
 
			if(this.removeOnClick){	
			$(this.content).addEvent('click',this.clearit.bindWithEvent(this));
			}	
 
			if(options['effects']){
				this.effects = options['effects'];
			}else{
				this.effects = Fx.Transitions.linear;
			}
			this.content.setStyle('opacity','1');
			this.content.setStyle('visibility','hidden');	
			$(this.content).setStyle('z-index','5000');	
			$(this.toggler).addEvent('click',this.toggle.bindWithEvent(this));
 
		},
 
		clearit: function(){
 
					$(this.content).effect('opacity', {duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(1,0);
					this.isOpen = 0;
 
		},
 
		toggle: function(e){
			e = new Event(e).stop();
			var top =  window.getHeight().toInt() + window.getScrollTop().toInt();
			var width;
 
			if (document.documentElement && document.documentElement.clientWidth) {
				width=document.documentElement.clientWidth;
			}else if (document.body) {
				width=document.body.clientWidth;
			}
 
			var pad1 = $(this.content).getStyle('padding-left').toInt();
			var pad2 = $(this.content).getStyle('padding-right').toInt();
 
			width =  width - (pad1+pad2+5);
 
			if(!window.ie){
				//width -= 15;
			}
 
			if(!this.isOpen){
 
				$(this.content).setStyle('position','absolute');			
				$(this.content).setStyle('top',top);
				$(this.content).setStyle('height',this.height);
			    $(this.content).setStyle('visibility','visible');
				$(this.content).setStyle('opacity',this.opacity);
				$(this.content).setStyle('width',width);
				$(this.content).setStyle('left','0');
 
				var end;
				if(this.from == "bottom"){				
					end = top - this.height;
				}else{
					end = window.getScrollTop() - this.height;
				}
 
				if(this.from == "bottom"){
					$(this.content).effect('top',{ duration: this.slideSpeed, wait:false, transition:this.effects}).start(top,end);
					this.isOpen = 1;
				}else{
					$(this.content).effect('top',{ duration: this.slideSpeed, wait:false, transition:this.effects}).start(end,end+this.height);
					this.isOpen = 1;
				}
 
			}else{
			var myEffects = new Fx.Styles(this.content, {duration: this.fadeSpeed, transition: Fx.Transitions.linear});
			myEffects.start({
   				 'opacity': [1, 0]
			});
 
				this.isOpen = 0;
			}
		}
	})
 
mooSlide2.implement(new Options);
 
var px = new mooSlide2({ slideSpeed: 900, fadeSpeed: 300,  toggler:'toggle', content:'test', height:250, removeOnClick: false, opacity:'1', effects:Fx.Transitions.Quad.easeOut, from:'top' });
 
 
})
 
</script>
 
	<!--reste de ma page-->
 
</BODY>

defcon_suny · 09/07/2008, 18h11

Remplace juste la partie formulaire par ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!--ici dans mon .php j'effectue le traitement de mon formulaire if isset($_POST['monsubmit'])-->
	<?php
	if (isset($_POST['sesameID']))
		echo 'mon formulaire est envoyé';
	?>
	<!--TOUTES LES VALEURS D'ATTRIBUTS DOIVENT ÊTRE MIS ENTRE GUILLEMETS-->
 
	<div id="test" class="mooSlide" >
		<form name="loginForm" method="post">
			<div class="loginLine">Login :<input type="text" name="sesameID" value="mounia.nouda"></div>
			<div class="loginLine">Password :<input type="password" name="password" value="spring_rolls123"></div>
			<div><input type="submit" value="Login" class="loginButton"></div>
	</form></div>

Chez moi, le formulaire est bien envoyé et réceptionné

mounia.n · 10/07/2008, 10h33

Génial, je te remercie !
Le souci c'était que je faisais le test du isset sur la "value" de mon submit et pas son "name".
Le fait que ton test soit passé sur le "sesameID" m'a permis de voir ça.

Merci pour tout.

08/07/2008, 10h01	#1
mounia.n Candidat au titre de Membre du Club Inscription : mai 2007 Messages : 50 Détails du profil Informations forums : Inscription : mai 2007 Messages : 50 Points : 12 Points : 12	interface de login par superposition (transparence) - intranet Bonjour à tous, je voudrais réaliser la chose suivante pour l'authentification des utilisateurs sur un intranet et je ne sais pas trop comment m'y prendre : je souhaite que l'utilisateur puisse avoir accès à tout moment à l'interface d'authentification (je pense donc mettre un lien login "permanent" dans mon menu). Et je souhaiterais qu'au clic sur ce lien s'affiche les champs de login et password par dessus la page actuelle (par transparence ce serait génial ) et qu'une fois l'authentification terminée la page du dessous soit simplement rafraichie. Auriez vous des indications à me donner ? Merci par avance !
	00

08/07/2008, 18h13	#6
mounia.n Candidat au titre de Membre du Club Inscription : mai 2007 Messages : 50 Détails du profil Informations forums : Inscription : mai 2007 Messages : 50 Points : 12 Points : 12	Re bonjour, pour l'affichage, c'est super j'ai eu ce que je voulais : la slidebox s'affiche avec mon formulaire d'authentification. J'ai obtenu ça en créant un lien dans mon script de génération de menu (appelé au début du script de toutes mes pages) qui fait appel au outils mooSlideBox. Mon soucis reste au niveau du traitement du formulaire. Pour l'instant j'ai fait la chose suivante : dans mon script de génération de menu j'inclus login.php qui contient : le code de traitement du formulaire. le formulaire "loginForm" en question. le code javascript qui utilise mooSlideBox pour l'affichage du formulaire. Mais lorsque je soumets mon formulaire sur la slidebox, le traitement de celui ci ne se fait pas. et je ne comprends pas pourquoi...
	00

08/07/2008, 13h09	#2
MadStar Nouveau Membre du Club Développeur Web Inscription : mai 2007 Messages : 27 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2007 Messages : 27 Points : 28 Points : 28	Tu ne vas pas pouvoir faire ça en php. Là tu dois faire appel à du javascript, au moins pour gérer l'évènement du clic sur ton lien "login". Maintenant je ne peux pas t'en dire plus parce que je ne sais pas trop comment on fait ce genre d'apparition de zone, c'est une question que je me suis souvent posée d'ailleurs mais comme je n'ai jamais eu l'occasion de le mettre en application je ne me suis pas renseigné.
	00

08/07/2008, 14h54	#3
mounia.n Candidat au titre de Membre du Club Inscription : mai 2007 Messages : 50 Détails du profil Informations forums : Inscription : mai 2007 Messages : 50 Points : 12 Points : 12	Merci pour ta réponse... Effectivement javascript me semble nécessaire, mais je ne sais pas comment gérer la superposition de la zone de login à ma page (iframe?) ni comment gérer le retour à la page après traitement du formulaire d'authentification. Quelqu'un d'autre aurait une idée svp ?..
	00

08/07/2008, 15h10	#4
defcon_suny Membre éprouvé Développeur informatique Inscription : décembre 2006 Messages : 436 Détails du profil Informations personnelles : Localisation : Belgique Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : décembre 2006 Messages : 436 Points : 486 Points : 486	Salut, Je pense que tu peux réaliser quelque chose sans trop de difficulté mais tout dépend de ton niveau de connaissance... Comme dit plus haut, le Javascript est nécessaire et le traitement de ton formulaire en restera inchangé à la soumission. Voici quelque chose qui pourrait t'aider ou t'inspirer... mooSlideBox bon dev!
	00

08/07/2008, 15h40	#5
mounia.n Candidat au titre de Membre du Club Inscription : mai 2007 Messages : 50 Détails du profil Informations forums : Inscription : mai 2007 Messages : 50 Points : 12 Points : 12	Merci ! ça a l'air génial, je ne vois pas encore comment ça va se passer pour le traitement du formulaire (je voudrais notamment stocker qques infos non "sécurisées" sur le user dans un cookie une fois que l'authentification est faite), le truc c'est que je n'ai pas encore une très bonne maîtrise de php. Mais je vais regarder tout ça et je reviendrai si j'ai d'autres questions :p Merci encore
	00

08/07/2008, 19h06	#7
defcon_suny Membre éprouvé Développeur informatique Inscription : décembre 2006 Messages : 436 Détails du profil Informations personnelles : Localisation : Belgique Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : décembre 2006 Messages : 436 Points : 486 Points : 486	Peux tu poster la sortie html de ta page?
	00

10/07/2008, 10h33	#10
mounia.n Candidat au titre de Membre du Club Inscription : mai 2007 Messages : 50 Détails du profil Informations forums : Inscription : mai 2007 Messages : 50 Points : 12 Points : 12	Génial, je te remercie ! Le souci c'était que je faisais le test du isset sur la "value" de mon submit et pas son "name". Le fait que ton test soit passé sur le "sesameID" m'a permis de voir ça. Merci pour tout.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email