Newloginbox

Un article de Typo3 CMS / Documentation Typo3 / Support Typo3.

Nouvelle boite de connexion frontend


Clé d'extension : newloginbox Copyright 2002-2004, kasper@typo3.com, <kasper@typo3.com>

En partie sponsorisé par Headline

Ce document est publié sous licence Open Content disponible sur http://www.opencontent.org/opl.shtml

Le contenu de ce document est relatif à TYPO3 -Gnu/GPL CMS/Framework disponible sur www.typo3.com


Sommaire

[modifier] Introduction

[modifier] A quoi ça sert ?

Il s'agit d'une alternative à la bonne vieille boite de connexion. Cette version comporte un peu plus de fonctionnalités, incluant les messages de succès/erreur, contrôle de cookie, dispositif d'oubli de mot de passe etc.

En fait il y à deux plugins dans cette extension donc vous disposez de même d'un plugin de listage d'utilisateur.

Après avoir installé cette extension sur votre système TYPO3 vous trouverez deux plugins supplémentaires dans la liste plugin de contenu d'éléments. Ultérieurement un template 'newloginbox' statique sera globalement ajouté à vos templates TypoScript.

[modifier] Photos d'écran

Voici la fenêtre de connexion de typo3.org :


Image:image34.jpg


Dans le Backend il est extrêmement facile d'entrer des messages sur mesures pour le plugin :


Image:image35.jpg


... et voici le dispositif 'd'oubli de mot de passe' :


Image:image36.jpg


Liste d'utilisateur

Il existe aussi un plugin pour lister, passer en revue et rechercher les utilisateurs courants :


Image:image37.jpg


... et pour chaque utilisateur vous pouvez cliquez le nom d'utilisateur et obtenir des détails :


Image:image38.jpg

[modifier] Manuel de l'utilisateur

Une meilleure boite de connexion

La boite de connexion par défaut de Typo3 est ce contenu d'élément dédié appelé 'Login'. Vous pouvez toujours l'utilisez si vous le souhaitez. De toute façon il est plutôt simplet et n'offre rien de plus qu'une boite de connexion et un bouton de déconnexion.

Image:image39.jpg


Utilisez ce plugin vous permet d'insérer une boite de connexion plus sympa pour les utilisateurs, sur vos pages. Voici comment faire : Créer une page ou vous souhaitez que soit la boite de connexion et ajoutez alors un nouvel élément :


Image:image40.jpg


Dans la vue d'ensemble d'élément il y a un plugin :


Image:image41.jpg


Après cela (et probablement sélectionner une position pour l'élément) vous aurez ce formulaire qui apparaîtra :

Image:image42.jpg


Les conditions de base sont que le champ 'Type:'soit configuré sur 'Insert Plugin' (insertion de plugin) et le champ 'Plugin:' soit configuré sur 'Better login-box' (Meilleure boite de connexion).

Il y a cinq sections principales et dans chaque section un champ pour un en-tête et du texte.

1.Connexion réussie : Voici le message quand un utilisateur viens d'entrer un nom d'utilisateur et un mot de passe correct et d'appuyer sur le bouton 'Login' (connexion). Insérer le string “###USER###” si vous souhaitez faire apparaître le nom d'utilisateur.

2.Echec de connexion : Ceci apparaît quand le nom d'utilisateur et le mot de passe essayé ne sont pas corrects.

3.Bienvenue : Ce message apparaît si un utilisateur arrive à l'écran de connexion pour la première fois et n'est pas encore connecté.

4.Status : Ce message apparaît si un utilisateur est déjà connecté et viens sur l'écran de connexion. Dans ce cas le plugin affichera le nom d'utilisateur et le vrai nom de cette personne ainsi l'utilisateur peux voir son status. Insérer le string “###USER###” si vous souhaitez faire apparaître le nom d'utilisateur.

5.Déconnexion : Ce message apparaît comme un message d'au-revoir quand l'utilisateur se déconnecte du site.

Dans tout les cas ci-dessus un message par défaut apparaît si le champ est vide. Il est conseillé que vous insériez le plugin sans modifier les champs la première fois – ainsi vous pouvez voir les messages par défaut et si besoin vous pouvez les modifier en entrant vos propres messages.

Le sixième objet dans le formulaire est le lien de la boite à cocher 'Show'Forgot password?' (afficher 'Mot de passe oublié ?'). Si vous configurez cette boite à cocher, un lien sous le formulaire de connexion apparaîtra et l'utilisateur sera guidé vers une page ou il pourra entrer son adresse e-mail et avoir son mot de passe envoyé immédiatement :


Image:image43.jpg

Note en relation à Typo 3.6.0

Dans Typo3 3.6.0 le formulaire pour ajouter tout le contenu de la boite de connexion (voir ci-dessous) a changé. Maintenant il ressemble approximativement à cela (design préliminaire) :


Image:image44.jpg


L'idée derrière ce changement est qu'un champ dans la base de donnée (“pi_flexform”) contient maintenant tout le contenu en XML au lieu d'utiliser 9 précieux champs dans le tableau déjà surchargé tt_content.

Le résultat : Le but des champs sont les mêmes, la méthode de stockage est différente et vous devez visiter chaque page du formulaire pour entrer l'information.

Notification : Quand vous mettez à jour cette extension à partir de la version ultérieure à la version Typo3 3.6.0 soyez sur d'utiliser le menu 'UPGRADE' (mettre à jour) dans le EM – voir plus loin dans la documentation pour les détails !

Une liste d'utilisateur

Vous souhaitez lister tout les utilisateurs sur le site ? Pas de problème. Insérez simplement le plugin de liste d'utilisateur :

Créez une page pour le plugin et ajoutez un nouvel objet. Cette fois vous ne pouvez pas utiliser le wizard, désolé :


Image:image45.jpg


Sélectionner ensuite le type d'élément de contenu 'insert plugin' (insérez un plugin) et le plugin 'User Listing' (Liste d'utilisateur) :


Image:image46.jpg


Finalement vous devez spécifier au plugin ou se trouvent les utilisateurs. Faites cela en configurant la relation de point de départ :


Image:image47.jpg


Sauvegardez cela et maintenant tout les utilisateurs frontend trouvés dans le DB folder seront affichés par le plugin :


Image:image48.jpg


[modifier] FAQ

Le formulaire de connexion ne marche pas ! Je sais que j'ai créé un utilisateur et un mot de passe correctement mais rien ne se passe ! Le formulaire de connexion doit savoir ou sont localisés les utilisateurs dans l'arbre de la page. Dans l'exemple avec la liste d'utilisateur en relation est configuré directement dans le plugin comme étant le point de départ. Ce n'est pas le cas avec le formulaire de connexion. Cela est basé ici sur un nouveau concept appelé une 'page de stockage'. La page de stockage de position actuelle dans l'arbre de la page ou ce formulaire de connexion se trouve est la localisation utilisé par défaut pour regarder les utilisateurs se connectant. Donc de base vous devez d'abord configurer la page de stockage de toute précédente page dans l'arbre de page :

Image:image49.jpg

Je ne vois que le Nom, le nom d'utilisateur et adresse e-mail dans la liste d'utilisateurs. Comment puis-je voir toutes les informations concernant un utilisateur ? Il s'agit simplement d'une restriction basée sur le fait que vous soyez connecté ou non. Seuls le nom, nom d'utilisateur et adresse e-mail (dans la vue détaillée) sont affichés si l'utilisateur du site web n'est pas connecté. Mais quand vous êtes connecté vous voyez toutes les informations :


Image:image50.jpg

[modifier] Configuration

Il y a comme d'habitude beaucoup d'options pour la configuration. Elles sont listées ci-dessous. Cette section peut toujours avoir besoin d'un peu de travail mais l'extension à tout de même du potentiel pour de futur développement, c'est tout ce que vous aurez pour le moment.

[modifier] General

Le plugin supporte toutes les langues système de Typo3. La traduction est effectuée en utilisant les outils de typo3.org. Si vous voulez utiliser, par exemple, la langue danoise cela sera fait automatiquement si l'option est configurée dans votre template : config.language = dk

[modifier] Reference TypoScript

Il y a un nombre modéré d'options Typoscript pour les deux plugins. Voici une photo d'écran de l'explorateur d'objet :


Image:image51.jpg

C'est assez droit et plusieurs des options ci-dessus peuvent être explicites ou au moins (dans le cas... de _pi3 - la liste d'utilisateur) semblable à d'autres plugins connus.

Conseil / Bloc note

Il y a une chose interessante à commenter dans la photo d'écran ci-dessus et c'est la configuration de la valeur “._LOCAL_LANG.default.listFieldHeader_typo3experiences”. Cette valeur surpasse la valeur normal trouvée dans les fichiers local_lang.php. Cette opportunité n'est pas spécifique à ce plugin mais s'applique généralement à toute extension moderne faite sous le kickstarter. En d'autre termes vous pouvez outrepasser ces hardcoded étiquettes par défaut au travers de Typoscript ! Vous devez juste connaître les clés utilisées dans les fichiers local_lang. C'est tout. Dans ce cas l'affichage de détails d'un utilisateur utilisera l'étiquette 'Expérimenté avec Typo3:' au lieu de l'étiquette par défaut étant simplement 'Expérimenté'.

Image:image52.jpg


Le plugin de liste d'utilisateurs

Propriétés Type de données Description Défaut
CMD [Future option]
pidList [Future option]
recursive [Future option]
tableParams_details < TABLE >-params Configurer les attributs du tag tableau de l'affichage de tableau de détails d'utilisateur (affichage unique). Un attribut de classe est automatiquement attribué à ce string ! border=0 cellpadding=1 cellspacing=2 width=90%
listView.results_at_a_time int+ Le nombre d'enregistrement à montrer en une fois dans le listing. 50
listView.maxPages int+ Le nombre maximum de pages à explorer (<PREV, 1, 2, 3....) à afficher. 20
listView.show.email boolean Soit l'adresse e-mail est affiché dans le listing d'utilisateur limité (non connecté) 1
listView.show.email_in_details boolean Soit l'adresse e-mail est affiché dans la vue de details (quand un utilisateur n'est pas connecté) 1
listView.alwaysPrev boolean Soit toujours afficher le lien “<PREV” dans la boite d'exploration. 1
customProcessing.[fieldname] cObject Ici vous pouvez configurer le traitement standard pour les valeurs de champs.

La valeur 'actuelle' est configurée dans la valeur de champ.

L'exemple suivant montre comment faire apparaître le nom d'utilisateur en gras : 

plugin.tx_newloginbox_pi3.customProcessing {
        username = TEXT
        username.current = 1
        username.wrap = |
}

Par défaut le traitement standard est configuré: 

plugin.tx_newloginbox_pi3.customProcessing {
        image = IMAGE
        image.file {
                import = uploads/pics/
                import.current = 1
                maxW = 200
                maxH = 300
        }
}
Cous pouvez aisément changer toutes ces valeurs avec l'explorateur d'objet Typoscript.
_CSS_DEFAULT_STYLE string Style CSS par défaut. Vous devriez désactiver cette valeur et copier le sélecteur de CSS dans une feuille de modèle. Notez que les sélecteurs s'appliqueront à tout template dans la base de donnée Typo3 par défaut !
_LOCAL_LANG.[langkey].[labelkey] string Surpasser les étiquettes de la zone de langue local.
_DEFAULT_PI_VARS.[piVars_key] string Configure les valeurs par défaut d'une valeur piVars (cette valeur utilisée dans les requêtes post/get dans le plugin).

Exemple:

_DEFAULT_PI_VARS.pointer = 2

Cela configurera le pointeur en “Page 3” dans la boite d'exploration par défaut.		 0

[tsref:plugin.tx_newloginbox_pi3]

Le plugin 'Better login box'

Propriétés Type de données Description Défaut
detailsPage int+ Le nombre PID de la page ou les détails de l'utilisateur devraient être affichées. Le nom d'utilisateur est lié à cette page si ce PID est donné.
domains string Liste séparée de virgules de noms de domaine. Si l'URL HTTP_REFERER de l'utilisateur est dans la liste de domaines, l'utilisateur est re-dirigé vers l'URL référant après une connexion réussie.
email_from L'adresse e-mail de l'expéditeur des emails 'mots de passe oublié'
email_fromName Le NOM d'expéditeur des emails 'mot de passe oublié'.
tableParams_details < TABLE >-params Configurer les attributs du tag tableau de l'affichage de tableau des détails utilisateur (affichage unique). Un attribut de classe est automatiquement apposé à ce string ! border=0
replyTo L'adresse e-mail répondre à des emails 'mot de passe oublié'.
_CSS_DEFAULT_STYLE string Style CSS par défaut. Vous devriez désactiver cette valeur et copier les sélecteurs CSS vers une feuille de style. Notez que le sélecteur s'appliquera à tous les templates de la base de donnée Typo3 par défaut !
_LOCAL_LANG.[langkey].[labelkey] string Surpasse les étiquettes de la zone de langue locale.
_DEFAULT_PI_VARS.[piVars_key] string Configure la valeur par défaut de la valeur piVars (cette valeur utilisée dans les requêtes post/get dans le plugin.) 0

[tsref:plugin.tx_newloginbox_pi1]

[modifier] Style CSS

Comme avec tous les plugins modernes ils sont stylés avec des sélecteurs CSS. Voici les sélecteurs que vous pouvez utiliser. Vous devez (pour le moment) deviner/expérimenter lequel fais quoi. 

Formulaire de connexion
     DIV.tx-newloginbox-pi1 {}
     DIV.tx-newloginbox-pi1 H3 {}
     DIV.tx-newloginbox-pi1 P {}
     DIV.tx-newloginbox-pi1 TABLE {}
     DIV.tx-newloginbox-pi1 TABLE TR TD P {}
     DIV.tx-newloginbox-pi1 TABLE TR TD {}
     DIV.tx-newloginbox-pi1 TABLE TR {}
     DIV.tx-newloginbox-pi1 TABLE TR TD INPUT.tx-newloginbox-pi1-submit {}
     DIV.tx-newloginbox-pi1 TABLE TR TD INPUT {}
     DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-forgotP {}
     DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-forgotP A {}
     DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-back {}
     DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-back A {}
     DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-username {}



   Liste d'utilisateur
     DIV.tx-newloginbox-pi3 {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-searchbox {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-searchbox TABLE {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-searchbox TABLE TR {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-searchbox TABLE TR TD {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-searchbox TABLE TR TD INPUT.tx-newloginbox-pi3-searchbox-sword {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-searchbox TABLE TR TD INPUT.tx-newloginbox-pi3-searchbox-button {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-searchbox TABLE TR TD INPUT {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox P SPAN.tx-newloginbox-pi3-browsebox-strong {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE TR {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE TR TD.tx-newloginbox-pi3-browsebox-SCell {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE TR TD.tx-newloginbox-pi3-browsebox-SCell P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE TR TD.tx-newloginbox-pi3-browsebox-SCell P A {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE TR TD P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE TR TD {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-browsebox TABLE TR TD P A {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-header {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-header TD {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-header TD P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-header TD P A {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR TD {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-odd TD P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-odd TD {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR TD P A {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-odd TD P A {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR.tx-newloginbox-pi3-listrow-odd {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-listrow TABLE TR TD P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView H3 {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView TABLE {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView TABLE TR TD.tx-newloginbox-pi3-singleView-HCell {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView TABLE TR TD.tx-newloginbox-pi3-singleView-HCell P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView TABLE TR TD {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView TABLE TR TD P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView TABLE TR {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView TABLE TR TD P A {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView P {}
     DIV.tx-newloginbox-pi3 DIV.tx-newloginbox-pi3-singleView P A {}

[modifier] Choses à faire

Voir 'doc/TODO.txt' dans l'extension.

[modifier] Liste des modifications

Dans les versions plus récentes, compatibles avec Typo3 3.6.0 le champ créé dans tt_content à été RETIRE et substitué par du contenu stocké dans le champ “pi_flexform” par un flexform configuré par “flexform_ds.xml”.

Afin de mettre à jour proprement soyez sur d'aller dans le module 'UPDATE' (mise à jour) pour l'extension disponible dans le menu de fonction dee la vue des détails pour l'extension dans Extension Manager. Ce module lira toutes les VIEILLES valeurs du champ de la base de donnée obsolète et le déplacera dans XML dans le flexform ! Ainsi vous pouvez mettre à jour régulièrement sans perte de données !


Image:image53.jpg

Récupérée de « http://oblawiki.marcel.dev.oblady.com/index.php/Newloginbox »