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.

Tyarra a écrit:Merci pour ce super ajout, mais j'ai un petit problème : la mise en page ne se fait pas, je n'arrive pas vraiment à comprendre comment créer ce fameux effet "discord" puisque sur mon forum ça n'apparaît qu'en texte.
Si quelqu'un peut éclairer ma lanterne

Salutations ! Assure-toi que le CSS est correctement installé sur ton forum. D'ailleurs, il vient d'être mis à jour et je t'invite, du coup, à relire l'installation correctement pour ne pas manquer les nouvelles directives.

Pour @swgzl, qui faisait partie des intéressés : le nouveau CSS permet d'afficher la barre horizontalement. Il faudra relire l'installation (la balise HTML a un peu changé) et réinstaller le CSS sur vos forums.

Coucou, j'ai c/c tous les codes et la barre apparaît bien, par contre le pop-up n'apparaît pas et la connexion se fait toujours au bas de la page, est-ce que j'ai manqué quelque chose?

Merci pour ta réponse rapide en effet, j'avais zappé le CSS, je ne sais pas pourquoi je ne le voyais pas sur mon écran

En revanche, j'ai maintenant le même soucis que @kay08; pas de pop-up de connexion et on ajoute les comptes en bas de la page, avec des vieux champs grisatres cette fois je ne crois pas avoir raté d'information, et je ne vois pas d'élément de pop-up dans ton tuto ! Mais est-ce que tu as une astuce ?
Je t'avoue ne pas m'y connaître assez bien en templates ou plug-in (ou que sais-je) pour savoir intégrer ça a mon forum sans un petit tuto

Merci encore

Well...

C'est my bad pour ça. En retravaillant le CSS et en le mettant à jour dans le premier post du sujet, j'ai complètement oublié de c/c les parties concernant le modal (pop-up) et le formulaire.

C'est rajouté correctement. o/

Merci beaucoup Monomer, tout est bon de mon côté et fonctionne.

Merci pour ce code c'est tellement pratique

Bonjour !

Tout d'abord merci pour ce codage de dingue !
Même soucis que ma voisine du dessus, j'ai installé le codage hier soir à 23h20 et vers minuit tout avait disparu, et en me baladant sur les forums j'ai vu que c'était pour tout le monde le cas

Bonjour :)

Tout d'abord merci pour ce LS vraiment pratique que j'ai installé hier et qui a fait le bonheur de mes membres. Mais malheureusement, ce matin, tout a disparu.

Failed to load resource: the server responded with a status of 429 ()

Pourriez-vous me guider / conseiller ?

merci :)

Edit : je n'avais pas vu mes prédécesseurs. Donc même soucis ^^

Ahlalaaaaa, bonjour à tous...
Avant toute chose, petit mot de sagesse en ce matin de printemps (chez moi, en tout cas) : si vous utilisez Paypal, ne laissez pas vos identifiants sur le téléphone de votre ex. Se réveiller avec des frais imprévus de 45$ c'est pas des masses agréable.

Alors oui, les fichiers hébergés sur mon Dropbox ont été suspendus dans la nuit, à cause du trop grand trafic qu'ils engendraient, et ce malgré mon abonnement Premium... c'est dire. Malheureusement, ce problème s'applique à tout le monde. Il était plus ou moins prévu que je trouve une autre façon de partager les scripts de Switcheroo éventuellement, mais je ne pensais devoir y remédier aussi rapidement (et surtout, je pensais trouver la force et la motivation de proposer Switcheroo en module d'ici là, mais passons).

J'utilise maintenant jsDelivr qui permet d'offrir des liens miroirs vers mon vieux début de repo github (pas du tout à jour, j'ai jamais utilisé, what the heck is that).


Vous pouvez corriger les anciens liens dans le Template > Général > overall_footer_end (ils sont également édités sur la présentation du plugin) :

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 on va espérer que cette fois-ci la bande passante ne causera plus de problèmes !
Désolé tout le monde pour les inconvénients, je suis fainéant.

Merci beaucoup pour la réaction.
J'ai juste un soucis, l'avatar du compte "actif" ne s'affiche plus.

Merci du partage ! J'ai le même soucis que Lilie, l'avatar du compte actif ne s'affiche pas, mais sinon super code franchement, ça va tellement m'aider pour tous les comptes à gérer XD

Heyy !

Un grand, GRAND merci pour ce super code que tu nous met là à disposition ! Il s'est répendu comme une trainée de poudre sur les forums, pas étonnant que les serveurs ont pas aimé le nombre de requête haha. C'est vraiment le genre d'amélioration dont on avait besoin sur forumactif donc vraiment merci d'avoir pris le temps de faire ça et de le partager si généreusement

Je voulais te demander deux choses :

J'ai réalisé un thème de base de Forumactif : un design de forum clé en main qui facilite la modification des templates et qui implémente des scripts souvent utilités par les forums rpgs. Vu sa popularité, j'aurais aimé savoir si je pouvais l'intégrer à mon thème mis en livre service ? Bien sûr chaque créateur de script est dûement crédité, je m'attribue rien! En plus de te demander l'autorisation, je me demandais si du coup ça n'allait pas poser problème si "trop" de personne se mettait à l'utiliser (en sachant que j'ai déjà quelque forum qui ont uilité mon thème).

Deuxième j'aurais voulu savoir si tu m'autorisais à m'amuser un peu avec l'apparence de Switcheroo (bien que je trouve sa version de base vraiment top) pour proposer d'autre apparence en libre-service ?

Voilà! merci d'avance **

geniuspanda a écrit:Heyy !

Un grand, GRAND merci pour ce super code que tu nous met là à disposition ! Il s'est répendu comme une trainée de poudre sur les forums, pas étonnant que les serveurs ont pas aimé le nombre de requête haha. C'est vraiment le genre d'amélioration dont on avait besoin sur forumactif donc vraiment merci d'avoir pris le temps de faire ça et de le partager si généreusement

Je voulais te demander deux choses :

J'ai réalisé un thème de base de Forumactif : un design de forum clé en main qui facilite la modification des templates et qui implémente des scripts souvent utilités par les forums rpgs. Vu sa popularité, j'aurais aimé savoir si je pouvais l'intégrer à mon thème mis en livre service ? Bien sûr chaque créateur de script est dûement crédité, je m'attribue rien! En plus de te demander l'autorisation, je me demandais si du coup ça n'allait pas poser problème si "trop" de personne se mettait à l'utiliser (en sachant que j'ai déjà quelque forum qui ont uilité mon thème).

Deuxième j'aurais voulu savoir si tu m'autorisais à m'amuser un peu avec l'apparence de Switcheroo (bien que je trouve sa version de base vraiment top) pour proposer d'autre apparence en libre-service ?

Voilà! merci d'avance **

Salutations !

Je t'ai reconnu tout de suite avec ton avatar (et je suis abonné à ton tumblr – qui est magnifique btw –, ça aide). Je surveille ton thème depuis quelques temps déjà et je pensais justement à te contacter dans les prochaines semaines avec une petite idée en tête (sauf que je suis à la bourre depuis... trois semaines, j'en perds la notion du temps et ça m'est sorti de la tête entre-temps, faut croire, fuuuuu).

Alors, pour répondre à ta première question : bien sûr que tu peux proposer Switcheroo aux gens qui se servent de ton thème et maintenant que j'utilise github comme passerelle CDN, il ne devrait plus y avoir de problèmes avec le trafic. Le lien des scripts hébergés ne devraient plus changer non plus (sauf si j'ai vraiment merdé encore une fois, mais j'ai pas l'impression) et en cas de patch, ils seront push direct sur le master, puis purge et refetch sur le CDN - la magie des Internets.

Et bien sûr que tu peux modifier son apparence : son thème de base ne me revient même pas puisqu'il est clairement inspiré de discord. Le CSS/HTML permet maintenant de proposer des thèmes plus facilement (.switcheroo[theme="discord"]) et je suis déjà moi-même en train d'explorer d'autres idées pour quand j'aurai le temps, donc n'hésite surtout pas ! D'ailleurs, si tu le souhaites je pourrais même les ajouter au sujet principal et créditer ton projet de forum en même temps (si j'ai le droit, huhu).

Voilà. o/

Edit: Tous les problèmes d'avatar ou d'icones depuis le changement des scripts devraient être réglés. J'ai malencontreusement hébergé, dans la hâte et la panique du réveil, une demi-heure avant de partir bosser, une future version de Switcheroo qui n'était clairement pas optimisée. J'ai réglé dès mon retour à la maison (si rien n'a changé, un petit CTRL+F5 pour vider votre cache devrait suffire). My bad...
En espérant que tout soit rentré dans l'ordre pour tout le monde. \o/

Hello ici !

Je viens juste passer pour vous demander de passer tous les problèmes du côté de la section Problème avec mon code. Si tu le souhaites @Monomer, on peut s'arranger pour que tu ai un sujet dédié à Switcheroo où les membres viendront poser tous leurs problèmes. L'intérêt ? Tu pourras gagner des Peanut's là-bas (4 par réponse) et ici tu pourras garder uniquement les remerciements et les messages de mise à jour de ton plugin. Tu pourras aussi avoir un sujet unique rassemblant tous les problèmes et solutions liés à ton plugin. En plus de ça, certains codeurs ne squattent que la zone d'entraide et ne viennent pas dans les LS pour regarder s'il y a des problèmes. Il pourra donc y avoir les solutions et avis d'autres codeurs là-bas.

Qu'en penses-tu ? Si tu as un quelconque souci pour la mise en place de ton sujet de problèmes, n'hésites pas à venir me contacter en privé (MP ou Discord).

Ça serait sans doute plus simple de réunir tout au bon endroit, oui (c'est pas tant pour les Peanuts, je suis allergique) ! Je vais regarder ce soir pour y poster un sujet, et peut-être même revoir les questions fréquentes que j'ai reçu par discord/mp (on y échappe pas) pour directement y écrire quelques instructions...

Bonne idée, merci Shaneliae o/

Hello Monomer !

Je reviens parce que j'ai réussi à convaincre un forum où je suis d'utiliser ton plugin. Sauf que sur ce forum la majorité des membres ont beaucoup de comptes (notre record actuel est de 11) et des écrans plutôt petits donc la disposition actuelle de Switcheroo ne convient absolument pas...

J'ai donc créée un thème Switcheroo pour le forum est commencé à l'accordé au thème du forum. Maintenant que la disposition nous convient, on aimerait une fonctionnalité en plus. En fait à la place du logo qui nous ramène à l'accueil du forum, on préférerait avoir un bouton pour ouvrir/fermer la "boîte" de comptes, un peu comme les dossiers sur Discord.

Donc avant de commencer à manipuler le code et casser ton super boulot, je voulais savoir si tu aurais des astuces/conseils pour le faire ? Ou alors tu travailles peut-être même sur cette fonctionnalité ?

Je te remercie d'avance !

Salutations Shaneliae !

Pour répondre à ta question : je n'ai pas prévu de modifier ou d'ajouter de nouvelles fonctionnalités pour cette version de Switcheroo, que je considère maintenant comme une beta, mais je pense l'ajouter à la liste de celles qui pourraient faire partie de la prochaine version. Entre temps, tu peux toi-même adapter le script à ton goût ou passer par un petit relooking CSS (exemple vraiment simple ici) si ça peut convenir au forum intéressé.

Monomer a écrit:Pour @swgzl, qui faisait partie des intéressés : le nouveau CSS permet d'afficher la barre horizontalement. Il faudra relire l'installation (la balise HTML a un peu changé) et réinstaller le CSS sur vos forums.

Merci beaucoup pour tout ça et de l'avoir fait aussi rapidement, c'est ultra cool de ta part. Un grand merci. <3

Bonjour !

Je me permets de repasser par ici car j'aurais quelques questions sur les fonctionnalités du Switcheroo !

Pour commencer je l'ai installé sur un forum crossover aux très nombreux MC par rapport aux doublons de personnages etc et les nombreux univers. Mais toutefois je remarque plusieurs choses.

Tout d'abord, serait-il possible, comme sur Discord, de déplacer les icônes des comptes ? Je m'explique. Certains membres rangent leurs personnages par ordre alphabétique, d'autres par ordre d'arrivée. Pour ceux qui rangent par ordre alphabétique, ils doivent supprimer tous leurs comptes à chaque nouvelle arrivée et tout réorganiser. Pour ceux qui font par ordre d'arrivée, il leur arrive d'avoir misclick et supprimé un compte du début de liste et d'être donc, dans le même cas de figure : devoir tout supprimer pour remettre je dis ça parce que c'est mon cas et j'aime bien avoir mes comptes du premier arrivé au dernier, mais bien évidemment, je peux faire sans pour ma part. Serait-il possible de faire "glisser" les icones pour les remettre à leur place ?

Aussi, pour un autre point, j'ai noté que lorsque l'on changeait d'avatar, celui-ci ne s'actualisait pas dans les petites bulles des comptes et qu'il fallait enlever et remettre. Y aurait-il un script Ajax ou quelque chose qui puisse faire appel à la base de donnée de FA pour mettre à jour le tout en temps et en heure, par hasard ?

Et pour finir, plutôt que le mettre dans le footer du forum est-il possible de le mettre dans le header ? J'aurais voulu le mettre dans une nav en onglet qui est installée dans le header (elle contient le mainmenu d'où l'intérêt de "mélanger" les deux) et il me semble avoir essayé mais sans que cela fonctionne de le mettre dans le overall_header. Y aurait-il un moyen de combler cela, par hasard ?

Merci d'avance et navrée de revenir avec de telles demandes.

Bonne journée à toi

Merciii c'est tellement utile

B-lueberry a écrit:Bonjour !

Salutations !

Une fonction de drag-and-drop pour l'agencement des comptes est en développement pour la prochaine version de Switcheroo, malheureusement je n'ai pas encore de délais pour sa sortie vu toutes les suggestions que j'ai accumulé à gauche et à droite. Si j'ai le temps, aussi, je prends en note et j'essaierai de placer l'actualisation des avatars, mais je ne garantis rien.

B-lueberry a écrit:Et pour finir, plutôt que le mettre dans le footer du forum est-il possible de le mettre dans le header ? J'aurais voulu le mettre dans une nav en onglet qui est installée dans le header (elle contient le mainmenu d'où l'intérêt de "mélanger" les deux) et il me semble avoir essayé mais sans que cela fonctionne de le mettre dans le overall_header. Y aurait-il un moyen de combler cela, par hasard ?

Il est possible de déplacer le plugin ailleurs, mais les scripts Javascript doivent rester dans le footer (par soucis de sémantique, etc).
En partant du principe qu'il est installé dans le footer et fonctionnel, il suffit seulement de déplacer la balise html qui permet d'appeler le plugin dans le header, à l'endroit désiré. Je parle de cette balise nav :

Code:

<nav id="switcheroo" class="switcheroo" theme="discord" direction="horizontal" position="static"></nav>

En changeant la position pour "static" (qui permet de réintégrer la barre dans son contexte, donc bien important de placer la balise au bon endroit). Dépendant de ton header, il y aura certainement des ajustements à faire sur le CSS, mais elle devrait être ajoutée au bon endroit.

J'espère que ça t'aidera pour changer la position du plugin et pour le reste, il faudra attendre que j'ai un peu plus de temps. o/
Voilà voilà.

Un grand merci pour ce partage qui va changer la vie de beaucoup de monde (moi la première xD) !
Je pique donc ce plugin génial, encore merci

Ce code est incroyable ! Bravo pour ce travail et un énorme merci pour le partage !