Switcheroo v1.2.0 - Gestionnaire de multicomptes

Rappel du premier message :

Introduction

Bonjour à tous !

J'en conviens que le LS que je propose aujourd'hui n'est pas très conventionnel, mais j'espère tout de même qu'il vous sera tout aussi utile qu'à vos membres. Il y a un peu plus d'une semaine déjà, j'écrivais un sujet ici pour teaser le plugin sur lequel je travaillais. Il est maintenant terminé et je ne suis pas peu fier d'enfin pouvoir le partager !


Si vous êtes intéressés, je vous invite à lire la suite pour savoir comment Switcheroo fonctionne et comment l'installer sur vos forums !

Prérequis

Switcheroo nécessite quelques modifications de votre part avant d'être installer et je vais expliquer comment tout bien préparer :

1. Tout d'abord, il vous faudra autoriser les formulaires non-officiel à poster leurs données sur votre forum. Pour ce faire, rien de compliqué : accédez au panneau d'administration et suivez ce chemin Général > Forum > Sécurité. Il faudra décocher l'option "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" et sauvegarder les changements (image). Cette modification permettra au formulaire de Switcheroo de fonctionner avec Fetch, une API de Javascript.
   
2. Ensuite, vous devrez vous assurez que la Toolbar de ForumActif est activée. Si ce n'est pas le cas, faites-le en suivant ce chemin : Module > Toolbar > Configuration (image). Si elle était désactivée parce que vous ne l'utilisiez pas, je proposerai plus bas une façon de la rendre invisible, ne vous en faites pas. Cette modification nous permettra de récupérer facilement l'ID d'un membre ainsi que son avatar et de savoir s'il est connecté ou non.
   
3. En dernier, la barre de navigation principale de votre forum (celle qui permet de faire une recherche, de se connecter, de s'inscrire et de se déconnecter) devra être présente quelque part sur toutes les pages. Si vous l'avez retiré de vos templates, assurez-vous de l'ajouter quelque part, dans un <div> quelconque et de la cacher avec un style="display: none;". C'est avec cette barre que nous récupérons l'ID temporaire de votre session, qui permettra de changer de compte instantanément.

Installation

Le plugin en lui-même est très simple à installer. Il comprend deux fichiers Javascript hébergés sur dropbox – ce qui me permettra de pouvoir patcher directement les scripts en cas de besoin. Le premier, monomer_core.js, est un outil où je centralise toutes les fonctions utilitaires dont je me sers. Notamment, c'est grâce à ce script que le formulaire de connexion du plugin est appelé en popup. Le deuxième fichier, c'est le plugin : switcheroo.js.

Voici le code qui permet de tout mettre en place d'un seul coup :

Code:

<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>

<script>
(function() {
      new Switcheroo('#switcheroo');
})();
</script>

Et juste avec ça, le plugin est installé et fonctionnel... bien que tout moche et écrasé dans le bas de votre forum. En même temps c'est normal, il nous manque le CSS pour que tout soit beau. Mais pour l'instant, concentrons-nous sur les options disponibles.

Options

Switcheroo vient avec quelques options qu'il vous est possible de modifier facilement. Elles doivent être ajouter à l'initialisation du plugin pour fonctionner. Celles ci-dessous sont lest options par défaut.

Code:

(function() {
    new Switcheroo('#switcheroo', {
        logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
        enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */
        updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */
        customButtons: [], /* boutons personnalisés, explication plus bas */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();

Code:

<script>
(function() {

    new Switcheroo('#switcheroo', {
        logo: '<img src="https://i.imgur.com/C01GNxF.png" />'
    });

})();
</script>

Boutons Customisés

Explication des custom-buttons:

Apparence

Pour ce qui est du CSS maintenant, vous devez l'installer sur votre forum dans sa totalité. Il est complet et vient avec quelques variables pour vous permettre de modifier les couleurs facilement. Celles par défaut vous donneront le même visuel que celui présenté tout en haut de ce sujet (ou sur le forum d'exemple) :

CSS:

Variantes visuelles

Le CSS vient également avec certaines variantes qui vous permettent, par exemple, de changer l'orientation de la barre (verticale ou horizontale), sa position et son comportement.
Si nous reprenons le HTML installé dans le template "Fin du bas de page" : Template > Général > overall_footer_end, vous remarquerez sans doute certaines valeurs :

Code:

<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

• id="switcheroo" Il s'agit de l'identifiant de la balise, qui permet entre autres au JS de fonctionner.
  
• class="switcheroo" La classe sert surtout pour le style général de la barre. Je vous déconseille de la changer sans également modifier le CSS.
  
• theme="discord" Une option qui permettra, éventuellement, de changer le thème de switcheroo (lorsque j'en aurai ajouté d'autres). Pour l'instant, "discord" est le seul présent et celui à utiliser par défaut.
  
• direction="vertical" Permet de changer la direction de la barre, soit "vertical" (par défaut, voir l'exemple plus haut) ou "horizontal".
  
• position="top" Après révision (et en écrivant ces lignes), je réalise que cette fonction n'était pas très bien réfléchie. Pour l'instant, n'y touchez pas.
  

Masquer la toolbar moche

Comme promis, ce petit bout de CSS vous débarrassera de la toolbar sans la désactiver, permettant ainsi au plugin de fonctionner incognito. Si jamais elle a ajouté un espace indésirable en haut de votre forum, assurez-vous qu'elle ne soit pas fixée à l'écran : comme ceci.

Code:

#fa_toolbar, #fa_toolbar_hidden {
    display: none!important;
}

Conclusion

Voilà. Je pense que c'est tout bon. Si jamais vous avez des questions ou des suggestions pour améliorer ce petit plugin, n'hésitez pas à m'en faire part ! Je suis ouvert à publier des mises à jour et ajouter de nouvelles fonctionnalités si j'en vois l'utilité. Je travaille déjà sur une deuxième version qui devrait ajouter quelques fonctionnalités sympathiques et j'ai d'autres idées potentielles sur lesquelles j'hésite encore. Et qui sait, si vous les proposez vous-même, peut-être que j'y réfléchirai plus sérieusement.

Si vous rencontrez un problème lors de l'installation, quoique ce soit, n'hésitez pas à venir me le dire et je m'empresserai de vous aider !

Et, sur ce... enjoyez bien.

FAQ

Sécurité

Pour reprendre ce que j'ai expliqué à 'Christa, je ne suis clairement pas un expert sur le sujet, mais voici comment est abordée la sécurité de Switcheroo :

• Les identifiants sont enregistrés en LocalStorage (un peu comme les sessions sont enregistrés par FA quand vous cochez "se souvenir de moi" en vous connectant sur un forum).
  
• Ces données sont encryptées, au-moins pour les protéger s'il y a plusieurs membres d'une même famille qui sont sur un forum (auquel cas, ils peuvent quand même se servir du plugin s'ils sont d'accord, mais n'auront pas accès aux mots de passe directement, même en allant fouiller l'inspecteur).
  
• L'utilisation de scripts par les membres d'un forum étant limitée, ils ne peuvent accéder qu'à leurs identifiants même en utilisant la console.
  
• Un administrateur mal intentionné, Switcheroo ou non, pourrait très bien récupérer les identifiants de ses membres avec n'importe quel script JS actif sur n'importe quel formulaire de connexion (ou même changer leurs mot de passe dans son panneau d'administration), donc ce côté là ne change pas.
  
• Switcheroo ne stocke aucunes informations sur une base de données externe.

Changelog

Version 1.1.0

• Une nouvelle option customButtons permet d'ajouter d'autres boutons à la barre.
  
• L'option updateAvatar (activée par défaut) permet de rafraîchir l'avatar du compte connecté au clique droit de la souris.
  
• L'option enableReorder (activée par défaut) permet de changer l'ordre des comptes enregistrés (drag & drop support).

Version 1.0.1

• Amélioration du visuel et ajout d'un mode horizontal. Mise place des thèmes.

Bonjour~♪
Ça faisait un bail que cherchais à ajouter un gestionnaire des DCs sur le forum et, franchement, j'adore ce que tu as fait - un grand merci !
Par contre, même si j'ai suivi toutes les consignes et que j'ai essayé plusieurs choses, le bouton de connexion ne marche toujours pas - donc, je ne peux pas, non plus, ajouter des comptes. Je n'ai pas touché grand-chose sur le CSS (j'ai juste changé la taille des ronds, le gap et la couleur).
Comment pourrait-on y remédier ?

Merci d'avance


Edit: finalement, j'ai trouvé comment le faire marcher =D Navrée du dérangement et merci quand même

Hello
Merci pour ce LS bien pratique, comme beaucoup l'ont dit avant moi. Je vois qu'il est devenu légion sur les fos de mon entourage, du coup j'aurais voulu l'activer sur mon prochain forum également ; malheureusement, j'ai choisi AwesomeBB et je crois bien qu'il ne fonctionne pas sur cette version ?

En fait la Toolbar n'est pas activable sur cette version car il y a un autre système pour afficher ses infos, et la barre de navigation de base n'est pas contenue dans le template (elle n'apparaît que dans un second temps dans une div qui est vide à la base) J'imagine qu'il doit y avoir moyen de récupérer les infos dont on a besoin pour le switcheroo d'une autre façon, mais comme je n'ai pas ton niveau je suis un peu bloquée sgdvxsdvfxc EDIT : en fait j'ai rien dit on peut mettre {GENERATED_NAV_BAR} sur le template awesomebb et ça fonctionne ; mea culpa

edit : aussi, je suis peut-être juste bigleuse mais en me connectant sur ton forum test je ne vois pas le switcheroo

Coucou, comment te dire que tu es un génie ? Vraiment, merci beaucoup pour ton gestionnaire, il est génial ! Je vais essayer de l'installer sur mon forum, si je m'en sors ça va être un sacré gain de temps !

J'ai essayé de me connecter sur ton forum test mais je n'ai pas vu le switcheroo par contre. Tu l'as retiré ? C'est dommage, j'aurais bien aimé voir comment ça fonctionne avant

Tu penses envisager d'autres design prochainement ? Ca changera beaucoup par rapport au design actuel ? Si je peux proposer une idée, pourquoi pas un design horizontal avec des couleurs pastel ou inspiré du printemps ?

En tout cas, merci beaucoup pour ce partage, vraiment ! Tu me sauves des heures de déconnection et reconnection entre le compte admin et mon compte joueur haha

Bonjour, merci pour ce superbe outils !

Merci<333

Merci beaucoup !