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.

Merci pour ce code, trop pratique qui change ma vie et celle de tous les membres adeptes des multi !

Annonce version 1.1.0

Salutations ! o/

Je vous annonce aujourd'hui la toute première mise à jour officielle de Switcheroo et l'arrivée de trois nouvelles fonctionnalités !

Changer l'ordre des comptes

L'option enableReorder est ajoutée et activée par défaut. Elle permet de réorganiser vos comptes dans l'ordre que vous voulez, il suffit juste de drag and drop le compte au bon endroit (glisser/déposer).

Rafraîchir les avatars

L'option updateAvatar est ajoutée et activée par défaut. Elle permet à Switcheroo d'actualiser l'avatar du compte connecté d'un simple clique droit de la souris, à condition que vous ayez déjà changé l'avatar sur le forum. Plus tard, j'aimerais étendre cette fonctionnalité et vous permettre de changer l'avatar de votre compte directement depuis Switcheroo, sans avoir à passer par l'édition du profil... mais il faudra encore attendre un peu. o/

Ajouter des boutons personnalisés

L'option customButtons voit le jour et permet aux plus aventureux d'ajouter de nouveaux boutons personnalisés. Il est possible d'ajouter des liens, mais également d'y attacher une fonction Javascript. Dans les prochains jours, j'ajouterai au sujet de présentation un tutoriel approfondi, mais voici entre-temps une brève démonstration :

Code:

customButtoms: [
  {
    tooltip: 'Logout',
    html: '<i class="material-icons">logout</i>',
    before: true,
    action: function(e, el) {
      alert("Prout, t'es déco !");
      this.logout().then(e => monomer.reload());
    }
  },
  {
    tooltip: 'Sujet Spécial',
    html: '<img src="liendimage" />',
    action: '/t1-sujet-special'
  }
]

J'espère que cette mise à jour vous plaira et soyez assurez que je resterai aux aguets dans les prochains jours pour intercepter tous les petits bugs qui auraient pu se faufiler entre les mailles de mes nombreux tests. o/

Hello !

Ayant un forum RP où les membres ont une plus d'une dizaine de DC pour certains, j'avoue être vraiment fan de l'idée. Je l'ai installé pour tester sur un forum de test avant de le passer sur le forum "normal". J'espère ne pas tout casser en adaptant le code au design du forum... mais c'est une autre histoire.

je pose ici parce que j'ai une question / un truc que je ne trouve pas super clair dans ton tutoriel, et qu'avant d'aller plus loin je préfère poser la question que de faire des bêtises.

Dans la partie "options" tu nous donnes un code qu'on peut personnaliser... Il faut bien l'intégrer dans les codes javascript du forum (modules=>codes javascript) ? Et, si c'est le cas, comment être sûre que ce code va bien être appelé ? Le lien du script doit-il être ajouté quelque part ? Ou ce code doit être passé directement dans le template où est installé le code ?

Merci tout plein en tout cas, faisant partie des membres à 30 comptes de mon forum, ça va me simplifier la vie à un point extraordinaire !

Salutations ! o/

Je peux comprendre que la méthode d'installation et le choix des options puissent paraître compliqués, surtout quand c'est pas une façon standard pour ForumActif (juste d'expliquer comment, sans trop rentrer dans les détails, m'a donné du fil à retordre). En gros, l'installation "de base" se fait directement à la fin du template "overall_footer_end" pour faciliter la sémantique HTML et respecter l'ordre de chargement des pages (ça, c'est un autre sujet plus compliqué encore, donc passons i_i). Voici ce qu'il faut ajouter dans le template, pour la version "de base" :

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'); /* init du plugin */
})();
</script>

Le plugin est initialisé à l'avant dernière ligne, grâce à "new Switcheroo('#switcheroo');", c'est à ce petit bout de code qu'il faut ajouter les options, juste après le premier argument de la fonction ('#switcheroo'), entre accolades. Par exemple, si je reprends le code complet plus haut pour installer le plugin et y rajouter le logo, la fin du template (juste avant la femeture de la balise "</body>") ressemblerait à ça :

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', {
            logo: '<img src="image" />' /* hop, option du logo */
      }); /* init du plugin */
})();
</script>

Les options se déclarent comme ça, à cet endroit. Comme le plugin est installé et initialisé directement dans le template "overall_footer_end", tout doit être modifié à la même place, en javascript dans le dernier "<script></script>", en même temps que Switcheroo est "initialisé".

En gros, la partie "options" du tutoriel permet de montrer toutes les options que le plugin utilise par défaut, et pour les modifier il faut les ajouter à la déclaration de Switcheroo (comme logo, dans l'exemple au-dessus). Il faut s'assurer de respecter le formattage en javascript (entre les accolades) et ne pas oublier la virgule après chaque option. Pour ajouter un logo et changer le message de confirmation, toujours dans le template "overall_footer_end" il faudrait faire comme ça :

Code:

<script>
(function() {
      new Switcheroo('#switcheroo', {
            logo: '<img src="image" />', /* hop, option du logo */
            confirmMsg: 'Changer de personnage ?' /* et hop, option du message de confirmation */
      }); /* init du plugin */
})();
</script>

Voilà voilà !
J'espère avoir éclairé ta lanterne o/

Hello !

Je ne suis jamais repassée par là... Donc déjà merci énormément pour tes réponses Ensuite cette nouvelle version est au top, les membres des forums où j'avais installé ton petit bijou sont ravis et moi de même donc merci merci merci
Je suis curieuse de ces nouvelles options sur les petits boutons donc je les essaierai dès que j'aurais un peu de temps, mais franchement, tu es au top !

Hello ! c'est bien plus clair maintenant merci =) je vais bidouiller tout ça <3

En tout cas, mes membres sont hyper enthousiastes à l'idée de l'avoir sur le forum !

C'est encore moi x)

Est ce qu'il est possible d'ajouter une fonction scroll ? J'ai des membres avec plus de 14 comptes, et... malheureusement le bouton d'ajout de compte disparait à partir de 14 comptes ajoutés (oups)


EDIT : à force de bidouiller les options, j'ai pu trouver la bonne valeur à modifier pour mettre le scroll

Merci beaucoup pour ce plug-in qui va complètement nous changer la vie nous qui ne faisons que ça du multi-compte !

Un grand merci! C'est juste fabuleux!

C'est juste génialissime !

J'avais déjà testé deux fonctionnalités dans le genre qui ne marchaient pas du tout et là ça a été hyper simple à installer, je n'ai même pas eu à personnaliser le CSS étant donné que le design s'adapte très bien à ma charte graphique. J'ai juste baissé avec un padding-top les avatars car mon menu de navigation le cachait.

Merci beaucoup pour ce joli travail !!!! Voici le rendu chez moi : https://www.herviefaye.com/forum

Super idée !

Merci ! C'est vraiment un module très cool, ça faisait un moment que je le cherchais parce que je le voyais sur d'autres forums xD

Je tenais juste a dire que depuis le temps que j'attends que Forumactif fasse ce genre de chose... Tu as fait ma journée, même ma semaine !

Ce code est génial et on l'a mit en test sur mon forum d'ailleurs ! Merciiii à toi !

D'ailleurs on a mit un crédit dans la section de la version en cours avec ton pseudo ici ^^ si jamais tu veux qu'on crédite différemment dis-le moi en mp

Merci beaucoup, Switcheroo est vraiment très utile et un outils désormais réclamé par les rôlistes pour se simplifier la vie ! Bravo à toi pour cette superbe création !

Hello, hello, tout d'abord un grand merci pour ce code fabuleux
Je viens de l'installer sur mon forum, il fonctionne à la perfection, je n'arrive juste pas à masquer le tolbar "moche" malgré ton petit CSS, aurais je oublié un truc dans le processus d'installation ?

Merci d'avance pour ta réponse

Édit : j'ai réussi à résoudre ce problème ci en mettant la barre en transparence. J'ai tjr ma barre de navigation bien visible mais je ne vois plus les notifications en revanche :/

Merci beaucoup :)

FRANCHEMENT je sais pas comment te remercier ce code me sauve la vie et je l'ai installer sur mon forum après avoir quand même pas mal galérer
J'ai chercher dans les réponses aux problèmes que tu avais déjà régler et du coup quand ça à enfin fonctionné j'étais aux anges! Pour les gens comme nous qui adorent les multi-comptes c'est franchement la vie!

Je te laisse le lien du Forum et des Crédits ou tu es crédité pour que tu puisse admirer ton oeuvre entre les mains d'autres et te montrer à quel point ton idée est vraiment géniale

https://nigrum-times.forumactif.com/t26-vii-les-credits

Wooooooh, merci énormément !

Bonjour, je viens te remercier d'avoir créer ce code absolument génial.
Et faire une petite suggestion d'ajour au CSS d'un petit scroll, je l'ai moi-même ajouté mais c'est quand même super pratique avec le scroll quand on a pas mal de comptes.
Aussi proposer l'option barre transparente, c'est pas très dur à modifier mais faut savoir où il faut modifier

Voilou encore merci !

Eden Memories a écrit:Bonjour, je viens te remercier d'avoir créer ce code absolument génial.
Et faire une petite suggestion d'ajour au CSS d'un petit scroll, je l'ai moi-même ajouté mais c'est quand même super pratique avec le scroll quand on a pas mal de comptes.
Aussi proposer l'option barre transparente, c'est pas très dur à modifier mais faut savoir où il faut modifier

Voilou encore merci !

J'approuve ! Ca serait une super option ! C'est une modif que je fais aussi à chaque fois que j'installe le plugin sur un forum ! Ca ferait gagner un peu de temps !
Et un gros merci pour ce plugin génial !

Un immense merci !!
Je travaille sur un forum communautaire où cette fonctionnalité va nous changer la vie, alors vraiment merci beaucoup

Quel super travail !!
Je garde ton tuto sous le coup pour un jour prochain
Merci à toi de nous simplifier la vie de fouuuuuu

OMG mais c'est génial, merci !

Bonjour et merci pour cet immense travail.

C'est quelque chose qui a toujours créé ma frustration sur les forums RPG : de ne pas pouvoir changer de compter aussi facilement quand on est maître du jeu. Je m'étais rabattue sur un site mais l'ambiance est moins cool qu'un bon forum auquel on peut tout personnaliser !

Un grand grand merci à ta donation dans le monde du forum, tu as rendu des personnes supers contentes et heureuses. J'ai juste une question. Est-ce dans le CSS ou le javascript que l'on peut modifier le fond de ton "plugin" ? Je suis assez récente dans le milieu en vérité, et dès que y'a du javascript j'ai peur de tout toucher...

Encore une fois, je te remercie tellement.

C'est une tuerie, ce code, merci beaucoup. FINI LES DECO ET RECO !

Petite question en passant : j'essaye de changer la couleur de la barre, en vain. Bon c'est du détail et si jamais tu passes par là...

encore merci

Edit : c'est réglé, ne prenez pas compte de ma question