Subversion Repositories Applications.reseau

Compare Revisions

Ignore whitespace Rev 55 → Rev 56

/trunk/widget/modules/auth/squelettes/css/defaut.css
New file
0,0 → 1,189
/*body {
padding: 10px;
}*/
 
/*#widget {
margin: auto;
max-width: 700px;
padding: 5px;
}*/
 
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
display: flex;
align-items: center;
}
 
.boite-centre {
width: 480px;
height: 520px;
padding: 20px;
border: solid #f0f0f0 1px;
border-radius: 5px;
margin: auto;
text-align: center;
}
 
.boite-centre h1 {
margin-top: 0;
margin-bottom: 0;
}
 
.leger {
color: #808080;
}
 
#nom-complet {
font-size: 1.6em;
margin-left: 5px;
}
 
#liste-applications h2 {
font-size: 1.7em;
margin-top: 30px;
margin-bottom: 15px;
}
 
#liste-applications ul {
/*border: solid red 1px;*/
margin: auto;
margin-top: 10px;
padding: 0;
width: 260px;
}
 
#liste-applications ul li {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
/*border: solid blue 1px;*/
}
 
#liste-applications ul li a, #liste-applications ul li a:hover {
text-decoration: none;
}
 
.bouton-appli {
display: block;
width: 64px;
height: 64px;
margin: 10px;
border: solid #d0d0d0 1px;
border-radius: 5px;
font-size: 1.7em;
line-height: 60px;
color: white;
}
 
.www {
background-color: #478DA7;
}
.eflore {
background-color: #5EC563;
}
.cel {
background-color: #66E3F2;
}
.identiplante {
background-color: #F9EF14;
}
.pictoflora {
background-color: #F9EF14;
}
.smartflore {
background-color: #3CE946;
}
.coel {
background-color: #A79247;
}
.referentiels {
background-color: #909090;
}
.wiki {
background-color: #F54521;
}
 
#liste-fournisseurs {
margin-top: 50px;
/*border: solid green 1px;*/
height: 80px;
}
 
#liste-fournisseurs ul {
/*border: solid red 1px;*/
margin: auto;
margin-top: 10px;
padding: 0;
width: 210px;
}
 
#liste-fournisseurs ul li {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
/*border: solid blue 1px;*/
}
 
#liste-fournisseurs ul li a, #liste-fournisseurs ul li a:hover {
text-decoration: none;
}
#liste-fournisseurs ul li a:focus {
border: none;
outline: none;
}
 
#liste-fournisseurs ul li img {
margin: 5px;
}
#liste-fournisseurs ul li img.petite {
margin-top: 32px;
}
#liste-fournisseurs ul li a[data-focus="true"] img.grande {
display: block;
}
#liste-fournisseurs ul li a[data-focus="false"] img.grande {
display: none;
}
#liste-fournisseurs ul li a[data-focus="true"] img.petite {
display: none;
}
#liste-fournisseurs ul li a[data-focus="false"] img.petite {
display: block;
}
 
#info-partenaire {
color: #808080;
margin-bottom: 45px;
}
 
#formulaire-identification {
width: 300px;
height: 260px;
margin: auto;
}
 
#lien-inscription {
float: left;
line-height: 30px;
text-decoration: underline;
margin-left: 5px;
}
 
#bouton-connexion {
float: right;
}
 
.left {
float: left;
}
 
.right {
float: right;
}
 
.info-erreur {
color: red;
}
/trunk/widget/modules/auth/squelettes/auth_fr.tpl.php
New file
0,0 → 1,158
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tela Botanica - Authentification</title>
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
 
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Mathias Chouet" />
<meta name="keywords" content="Tela Botanica, authentification, connexion, login" />
<meta name="description" content="Widget d'authentification" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<link rel="stylesheet" type="text/css" href="<?=$url_css?>" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.tela-botanica.org/commun/bootstrap/3.1.0/css/bootstrap.min.css" />
 
<script src="http://www.tela-botanica.org/commun/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="http://www.tela-botanica.org/commun/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="<?=$url_js?>"></script>
 
<script>
baseUrlAuth = '<?php echo $baseUrlAuth ?>';
</script>
</head>
 
<body>
<!-- <h1>Auth !</h1> -->
<div class="vertical-center">
<div class="boite-centre">
<h1>Tela Botanica</h1>
<div class="contenu-boite" id="panneau-identification" style="display: none;">
<div id="liste-fournisseurs">
<ul>
<li>
<a href="#" data-focus="true" title="Se connecter avec Tela Botanica" data-toggle="tooltip" data-nom-partenaire="Tela Botanica">
<img class="grande" src="http://resources.tela-botanica.org/tb/img/64x64/logo.png" />
<img class="petite" src="http://resources.tela-botanica.org/tb/img/24x24/logo.png" />
</a>
</li>
<li>
<a href="#" data-focus="false" title="Se connecter avec Pl@ntNet" data-toggle="tooltip" data-nom-partenaire="Pl@ntNet">
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/plantnet_64.png" />
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/plantnet_24.png" />
</a>
</li>
<li>
<a href="#" data-focus="false" title="Se connecter avec eRecolnat" data-toggle="tooltip" data-nom-partenaire="eRecolnat">
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/erecolnat_64.png" />
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/erecolnat_24.png" />
</a>
</li>
<li>
<a href="#" data-focus="false" title="Se connecter avec le GBIF" data-toggle="tooltip" data-nom-partenaire="le GBIF">
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/gbif_64.png" />
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/gbif_24.png" />
</a>
</li>
<li>
<a href="#" data-focus="false" title="Se connecter avec Facebook" data-toggle="tooltip" data-nom-partenaire="Facebook">
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/fb_64.png" />
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/fb_24.png" />
</a>
</li>
</ul>
</div>
<form id="formulaire-identification">
<div id="info-partenaire">
Se connecter avec <span id="nom-partenaire">Tela Botanica</span>
</div>
<div class="form-group">
<label class="left" for="login">Login (adresse courriel)</label>
<br/>
<input type="email" required class="form-control" id="login" placeholder="jean@tela-botanica.org">
</div>
<div class="form-group">
<label class="left" for="mdp">Mot de passe</label>
<span class="right">
(<a id="mdp-oublie" href="http://www.tela-botanica.org/page:inscription?m=f_oubli_mdp" target="_blank">oublié ?</a>)
</span>
<br/>
<input type="password" required class="form-control" id="mdp" placeholder="mot de passe">
</div>
<a id="lien-inscription" href="http://www.tela-botanica.org/inscription" target="_blank">S'inscrire</a>
<button id="bouton-connexion" type="submit" class="btn btn-default">Se connecter</button>
</form>
<div class="info-erreur" id="info-erreur-login" style="display:none;">Mauvais identifiant ou mot de passe</div>
<div class="info-erreur" id="info-erreur-serveur" style="display:none;">Erreur du serveur</div>
</div>
 
<div class="contenu-boite" id="panneau-bienvenue" style="display: none;">
<div id="logo-tb">
<img src="http://resources.tela-botanica.org/tb/img/64x64/logo.png" />
</div>
<div id="bienvenue">
<span class="leger">bienvenue</span> <span id="nom-complet"></span>
<br/>
(<a id="deconnexion" href="#">se déconnecter</a>)
</div>
<div id="liste-applications">
<h2>Découvrez nos applications :</h2>
<ul>
<li>
<a href="http://www.tela-botanica.org" title="Site Web" data-toggle="tooltip">
<div class="bouton-appli www">www</div>
</a>
</li>
<li>
<a href="http://www.tela-botanica.org/page:eflore_bdtfx" title="eFlore" data-toggle="tooltip">
<div class="bouton-appli eflore">eF</div>
</a>
</li>
<li>
<a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" data-toggle="tooltip">
<div class="bouton-appli cel">CeL</div>
</a>
</li>
<li>
<a href="http://www.tela-botanica.org/appli:identiplante" title="Identiplante" data-toggle="tooltip">
<div class="bouton-appli identiplante">IP</div>
</a>
</li>
<li>
<a href="http://www.tela-botanica.org/appli:pictoflora" title="Pictoflora" data-toggle="tooltip">
<div class="bouton-appli pictoflora">PF</div>
</a>
</li>
<li>
<a href="http://www.tela-botanica.org/appli:smartflore" title="Smart'Flore" data-toggle="tooltip">
<div class="bouton-appli smartflore">SF</div>
</a>
</li>
<li>
<a href="http://www.tela-botanica.org/appli:coel" title="Collections en Ligne" data-toggle="tooltip">
<div class="bouton-appli coel">Co</div>
</a>
</li>
<li>
<a href="http://referentiels.tela-botanica.org" title="Référentiels" data-toggle="tooltip">
<div class="bouton-appli referentiels">Réf</div>
</a>
</li>
<li>
<a href="http://www.tela-botanica.org/wikini" title="Wikini" data-toggle="tooltip">
<div class="bouton-appli wiki">W</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
/trunk/widget/modules/auth/squelettes/js/defaut.js
New file
0,0 → 1,171
$(document).ready(function() {
// infobulles
$('[data-toggle="tooltip"]').tooltip();
 
// trucage ordre des champs pour passer du login au mdp sans passer
// par le lien "oublié ?" => pas standard, c'est mal - @TODO faire mieux
// Ordre : login => mdp => oublie => s'inscrire
$('#login').keypress(function(e) {
if(e.keyCode == 9) {
if(! e.shiftKey) {
$('#mdp').focus();
return false;
}
}
});
$('#mdp').keypress(function(e) {
if(e.keyCode == 9) {
if(e.shiftKey) {
$('#login').focus();
} else {
$('#mdp-oublie').focus();
}
return false;
}
});
$('#mdp-oublie').keypress(function(e) {
if(e.keyCode == 9) {
if(e.shiftKey) {
$('#mdp').focus();
} else {
$('#lien-inscription').focus();
}
}
return false;
});
$('#lien-inscription').keypress(function(e) {
if(e.keyCode == 9) {
if(e.shiftKey) {
$('#mdp-oublie').focus();
return false;
}
}
});
 
// partenaire avec lequel se connecter
$('#liste-fournisseurs ul li a').click(function() {
$('#liste-fournisseurs ul li a').attr('data-focus', 'false');
$(this).attr('data-focus', 'true');
var nomPartenaire = $(this).data('nom-partenaire');
$('#nom-partenaire').html(nomPartenaire);
});
 
// Connexion au SSO
$('#formulaire-identification').submit(function() {
var login = $('#login').val(),
mdp = $('#mdp').val();
if (login == '' || mdp == '') {
alert('Veuillez entrer votre login et votre mot de passe');
} else {
var urlAuth = baseUrlAuth + '/connexion?login=' + login + '&password=' + mdp;
$.ajax({
url: urlAuth,
type: "GET",
dataType: 'json',
xhrFields: {
withCredentials: true
}
})
.done(function(data) {
definirUtilisateur(data.token);
afficherPanneauBienvenue();
masquerErreurs();
})
.fail(function(error) {
afficherErreurLogin();
});
}
return false;
});
 
// Déconnexion du SSO
$('#deconnexion').click(function() {
var urlAuth = baseUrlAuth + '/deconnexion';
$.ajax({
url: urlAuth,
type: "GET",
dataType: 'json',
xhrFields: {
withCredentials: true
}
})
.done(function(data) {
definirUtilisateur();
afficherPanneauIdentification();
masquerErreurs();
})
.fail(function(error) {
// @TODO gérer l'affichage de l'erreur, mais pas facile à placer
// dans l'interface actuelle sans que ce soit moche
//afficherErreurServeur();
});
return false;
});
 
// vérification de l'état au chargement
var urlAuth = baseUrlAuth + '/identite';
$.ajax({
url: urlAuth,
type: "GET",
dataType: 'json',
xhrFields: {
withCredentials: true
}
}).done(function(data) {
// connecté
definirUtilisateur(data.token);
afficherPanneauBienvenue();
})
.fail(function(error) {
// non connecté
afficherPanneauIdentification();
});
 
function definirUtilisateur(jeton) {
var nomComplet = '';
if (jeton != undefined) {
// décodage jeton
var jetonDecode = decoderJeton(jeton);
nomComplet = jetonDecode.intitule;
}
// affichage
$('#nom-complet').html(nomComplet);
}
 
/**
* Décodage à l'arrache d'un jeton JWT, ATTENTION CONSIDERE QUE LE
* JETON EST VALIDE, ne pas décoder n'importe quoi - pas trouvé de lib simple
* Si pb de cross-browser, tenter ceci : https://code.google.com/p/javascriptbase64/
* ou ceci : https://code.google.com/p/crypto-js
*/
function decoderJeton(jeton) {
parts = jeton.split('.');
payload = parts[1];
payload = atob(payload);
payload = JSON.parse(payload, true);
 
return payload;
}
 
function afficherPanneauIdentification() {
$('#panneau-identification').show();
$('#panneau-bienvenue').hide();
}
 
function afficherPanneauBienvenue() {
$('#panneau-identification').hide();
$('#panneau-bienvenue').show();
}
 
function afficherErreurLogin() {
$('#info-erreur-login').show();
}
 
function afficherErreurServeur() {
$('#info-erreur-serveur').show();
}
 
function masquerErreurs() {
$('.info-erreur').hide();
}
});