AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-40%
Le deal à ne pas rater :
Tefal Ingenio Emotion – Batterie de cuisine 10 pièces (induction, ...
59.99 € 99.99 €
Voir le deal

    Switcheroo v1.2.0 - Gestionnaire de multicomptes

    Monomer
    Monomer
    MasculinAge : 30Messages : 39

    Dim 17 Jan 2021 - 6:43

    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 !
    Switcheroo est un plugin inspiré par le visuel de Discord qui vous permet d'enregistrer tous vos comptes d'un même forum sur une barre latérale et d'en changer au besoin, d'un simple clique. Il fonctionne sur toutes les versions (en théorie) et ne demande que très peu de manœuvres pour être installé. Vous pouvez trouver ici un forum d'exemple sur lequel il est installé : les identifiants de deux comptes invité sont fournis sur la page d'accueil pour les curieux.


    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>
    Il faudra ajouter ce code à la fin de votre template "Fin du bas de page" : Template > Général > overall_footer_end, juste avant la fermeture de </body>. Comme ceci :
    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.',
        });
    })();

    Pour vous donner l'exemple du forum test qui permet d'afficher un logo vers l'accueil, j'ai ajouter une image à l'option "logo" :
    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:
    Pour ce qui est de personnaliser le reste, faites-le à vos risques et périls (surtout si vous ne connaissez pas flexbox, héhé) !
    Sachez également que ce CSS fonctionne, en théorie, sur toutes les versions de forumactif, mais il n'est pas impossible de rencontrer quelques problèmes de compatibilité qui écraseraient l'apparence de certains éléments. Si c'est le cas, n'hésitez pas à venir chercher de l'aide ici !


    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.


    Dernière édition par Monomer le Dim 18 Avr 2021 - 6:46, édité 11 fois
    Suzu-nee
    Suzu-nee
    FémininAge : 29Messages : 27

    Jeu 24 Nov 2022 - 16:07

    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 !ham3
    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 ♥



    signature supprimée car les liens externes sont interdits dans cette dernière, merci.
    Rheah
    Rheah
    FémininAge : 27Messages : 148

    Dim 4 Déc 2022 - 15:06

    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) Sad 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 :bwaha:

    edit : aussi, je suis peut-être juste bigleuse mais en me connectant sur ton forum test je ne vois pas le switcheroo scratch
    Mayobaka
    Mayobaka
    FémininAge : 24Messages : 22

    Mar 31 Jan 2023 - 11:08

    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 Embarassed

    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 ? Very Happy

    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
    La Nuit
    La Nuit
    MasculinAge : 33Messages : 16

    Mar 23 Mai 2023 - 17:11

    Merci encore pour le partage de cette astuce ! ♥
    Tatout
    Tatout
    FémininAge : 28Messages : 60

    Jeu 31 Aoû 2023 - 20:19

    Bonjour, merci pour ce superbe outils !
    Sahara
    Sahara
    MasculinAge : 26Messages : 4

    Mer 3 Jan 2024 - 2:49

    Merci<333
    Kimirsu Anko
    Kimirsu Anko
    MasculinAge : 23Messages : 89

    Mar 13 Fév 2024 - 16:18

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Lun 15 Avr 2024 - 17:41