AccueilRechercherS'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.


    Gestionnaire de multicomptes - Switcheroo v1.0.0

    Monomer
    Monomer
    MasculinAge : 27Messages : 25

    Dim 17 Jan 2021 - 6:43



    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"></nav>

    <script src="https://dl.dropboxusercontent.com/s/zpcdkt4331qt2m2/_monomer-core.min.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/njiwc5md0gfi6fv/switcheroo-dist.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 */
            confirm: true, /* demande une confirmation avant le changement de compte */
            confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
            explore: false, /* permet d'afficher un lien vers la liste des membres "à la discord" style */
            exploreIcon: '<i class="material-icons">group</i>', /* accepte html, icone du lien vers la liste des membres */
            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>


    Apparence


    Pour ce qui est du CSS maintenant, vous le trouverez hébergé ici. 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).
    Pour ce qui est de personnaliser le reste, faites-le à vos risques et périls (surtout si vous ne connaissez pas flexbox, héhé) ! Pour l'instant le plugin est uniquement disponible à la verticale, mais je prévois (peut-être bientôt) lui ajouter quelques petites variantes visuelles, dont un affichage à l'horizontale.
    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 !


    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. ♥

    EDIT pour @Shaneliae : J'ai bien pris en compte ton retour et je répondrai à la suite de ton message (dans quelques jours) lorsque j'aurais évalué tous les points apportés. J'ai tout de même du mal à reproduire ton soucis avec Firefox (de mon côté tout fonctionne bien), mais peut-être que retirer l'utilisation de dropbox résoudra le problème.


    Dernière édition par Monomer le Dim 31 Jan 2021 - 2:58, édité 2 fois
    Shaneliae
    Shaneliae
    FémininAge : 24Messages : 307

    Ven 29 Jan 2021 - 13:37

    Hello @Monomer !

    Alors comme promis je suis venue regarder ça et voir comment ça fonctionne. Malheureusement, le code que tu donnes ne fonctionne pas sur mon forum test (que ça soit en PHPBB2 ou ModernBB). J'ai de nombreuses erreurs sur la console et je ne vois que deux choses possibles : soit Firefox a bloqué ton script (ce qui est possible et même en désactivant mon bloqueur de pubs ça ne fonctionne pas), soit ça vient de l'hébergement de tes scripts sur Dropbox...

    Perso je penche pour la deuxième option. Dropbox est vraiment pas fiable dans le temps, et l'ID des URL fournies peuvent changer quand il y a une mise à jour du fichier, ce qui peut faire que ça plante. Comme Christa te l'a conseillé, je te conseille d'envisager une alternative comme Github qui est gratuite et faite pour cela.

    En plus de cela, le staff (mais surtout les Responsables codage) a prit la décision de toujours demander une copie des codes hébergés dans le post. On a de plus en plus de soucis avec eux et on se retrouve avec des LS qui ne sont plus utilisables après quelques mois parce que le code était hébergé et le membre ne se connecte plus à NU... Je pense aussi que donner ton code JS (ou au moins une partie) pourra t'aider à échanger avec les quelques personnes du domaine que l'on a sur NU.

    Enfin, je te déconseille très fortement (mais vraiment très très fort) de dire aux membres de te contacter personnellement ou à la suite de ton LS s'ils ont un problème :
    1. après avoir reçu des dizaines de messages "merci" tu vas sûrement ne plus regarder ce sujet et en désactiver les notifications...
    2. on a une section pour les problèmes avec les codes, je te conseille de diriger les membres là-bas. Il y a plusieurs membres qui peuvent aider avec ton code, mais aussi les Responsables y passe de temps en temps, si besoin on peut t'y tagguer pour que tu viennes voir les problèmes rencontrés. En plus aider les membres dans cette section rapporte des Peanut's alors qu'en privé non :secret:

    Pour finir je te conseille de passer ton travail du côté des tutos :
    1. Je peux te faire le transfère sans problème quand le code fonctionnera.
    2. Tu pourras prendre le temps d'expliquer un peu plus le code que tu as fait. Et par expérience les LS avec du JS entraînent plus souvent des gaffes/problèmes que les LS plus simples en HTML/CSS. Et quand c'est expliqué côté tutos les membres ont tendance à être un peu plus curieux.
    3. Je pense personnellement que ton travail aura plus de reconnaissance du côté des tutos que des LS. Ici c'est surtout "on prend du code, on remercie et on disparait", alors que côté tutos il y a parfois un peu plus d'interactions entre ceux intéressés par ton tuto mais qui ont des questions, ceux qui testent mais comprennent pas tout, ceux qui veulent refaire à leur sauce pour apprendre, etc.

    Si jamais tu viens à atteindre la limite de caractère en éditant ton premier message, n'hésites pas à le signaler. Tu postes dans un autre message la suite de ton LS/tuto et ensuite dans un autre message tu demandes à supprimer les messages entre le 1er et la suite. Un Responsable ou modo qui passera valider ton sujet s'en occupera.

    Voilà, c'est un peu long, mais j'espère que ton projet finira par fonctionner et recevoir la reconnaissance qu'il mérite ! Je te laisse regarder tout ça et revenir quand tu penses que tout est corrigé.




    Onyx
    Onyx
    FémininAge : 27Messages : 3319

    Dim 31 Jan 2021 - 1:11

    Salut !

    'Christa nous a fait remarquer sur Discord que la fonction dans l'initialisation était mal fermée dans le code que tu donnes, c'est pour cela que ça ne fonctionne pas. Il manque un }. En effet, si tu regarde ici :
    Code:
    <script>
    (function() {
          new Switcheroo('#switcheroo');
    )();
    </script>

    Ça devrait plutôt être :
    Code:
    <script>
    (function() {
          new Switcheroo('#switcheroo');
    })();
    </script>

    Même chose quand tu donne les options.

    Plutôt que cela :
    Code:
    (function() {
        new Switcheroo('#switcheroo', {
            logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
            confirm: true, /* demande une confirmation avant le changement de compte */
            confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
            explore: false, /* permet d'afficher un lien vers la liste des membres "à la discord" style */
            exploreIcon: '<i class="material-icons">group</i>', /* accepte html, icone du lien vers la liste des membres */
            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.',
        });
    )();

    Cela devrait être :
    Code:
    (function() {
        new Switcheroo('#switcheroo', {
            logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
            confirm: true, /* demande une confirmation avant le changement de compte */
            confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
            explore: false, /* permet d'afficher un lien vers la liste des membres "à la discord" style */
            exploreIcon: '<i class="material-icons">group</i>', /* accepte html, icone du lien vers la liste des membres */
            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.',
        });
    })();



    Monomer
    Monomer
    MasculinAge : 27Messages : 25

    Dim 31 Jan 2021 - 3:17

    @Onyx a écrit:Il manque un }.

    Hm, la honte. Rolling Eyes

    C'est le genre de boulette qu'on remarque pas au travers du formatage gris et uniforme de l'éditeur texte ici, comme quoi les habitudes ont la vie dur (thanks Sublime Text). x)
    J'ai corrigé plus haut, ça devrait effectivement aidé Shaneliae, si c'était bien la raison de son problème.

    Pour répondre à Shaneliae, j'aborderai la présentation de Switcheroo différemment quand j'aurai terminé de réécrire et de modulariser mon environnement de travail (ce qui permettra de partager mes futurs codes d'une façon certes compacte et incompréhensible, mais plus simple et plus fiable). En plus, je pense ajouter tout de suite la possibilité d'intégrer des boutons personnalisés (en plus d'un petit lien rapide vers l'édition du profil). J'ai aussi cédé à Github, et même si pour l'instant je rencontre tous les problèmes possibles et inimaginables avec (hi, j'ai oublié de changer de branche et de pull l'origine avant de continuer), j'imagine que les bonnes habitudes viendront avec le temps.
    D'ailleurs, si tu pouvais réparer ma coquille de } oublié et me dire si le plugin fonctionne bien sur ton forum test, ce serait cool (et ça me rassurerait, *imposter syndrome intensifies*), parce que sinon j'ai bien du mal à voir d'où il pourrait venir sachant que la plupart du code s'occupe déjà de ses propres erreurs. :coeur:

    Voilà, je reviendra avec plus de détails sur mes corrections dans les prochains jours.
    Et merci Onyx. o/

    Shaneliae
    Shaneliae
    FémininAge : 24Messages : 307

    Mer 3 Fév 2021 - 11:58

    Hello !

    Désolée de mon temps de réponse ! Effectivement quand Christa' a fait la remarque, j'ai corrigé directement sur mon forum test et le problème est corrigé.

    J'ai donc pu tester, et tout fonctionne plutôt bien ! Je suis plutôt fan de cette fonctionnalité et j'espère pouvoir la conseiller autour de moi :lovebomb:

    Ton LS est validé !
    Tout d'abord, un grand merci pour ta contribution ! Ce genre de LS se fait rare, ton idée est originale et va être utile à beaucoup d'admins de forums ! Je continuerai de regarder de temps en temps comment évolue ce plugin.

    Ton LS va maintenant être déplacé dans la section adéquate et ajouté à son index. Tu peux normalement continuer à modifier ton sujet pour pouvoir corriger et faire évoluer ton code. Si tu viens à rencontrer des problèmes pour éditer ton sujet, ou si tu souhaites le déplacer, n'hésites pas à contacter le staff dans la section Signaler.

    Ton LS étant validé, tu peux ajouter 10XP Architecte dans ton profil qui correspondent à un LS d'élément de forum (hors demande). Cet XP t'aidera à monter en Level (niveau) dans le domaine "Architecte" (codage). Ce LS pourra aussi être utilisé pour demander à rejoindre le groupe des Architectes (couleur verte).



    Kelalin
    Kelalin
    FémininAge : 28Messages : 2425

    Mer 3 Fév 2021 - 22:37

    Wow, j'adore l'idée, et je suis sûre que ton code sera utilisé dans le futur dans de gros forums RP où les membres utilisent le multi-compte ! Un gros merci pour le partage !
    hurry babe
    hurry babe
    FémininAge : 30Messages : 5

    Sam 6 Fév 2021 - 23:58

    C'est juste fabuleux ce code, merci infiniment de partager ça, ça va changer la vie de bien des forums :friends:
    aelyna
    aelyna
    FémininAge : 22Messages : 2

    Mar 23 Fév 2021 - 17:10

    Hello, je me suis permise de prendre ton tuto pour mon forum en construction ! C'est vraiment pratique et compréhensible (en sachant que je comprends rien au codage) je te remercie vraiment :lovebomb: :lovebomb:
    sunshinette
    sunshinette
    FémininAge : 27Messages : 4

    Hier à 3:41

    Bonjour, j'ai une petite question concernant ton sujet Very Happy

    Je l'ai installé sur mon forum test et c'est vraiment parfait ca marche correctement ! Seulement sur l'ordi ca rends très bien, mais sur le portable ou bien la tablette comme la taille de l'écran est plutôt longue que large et bien la barre déborde sur le corps du forum.

    Comment faire pour que cette barre rapetisse en fonction de la taille de l'écran automatiquement ?

    Merci beaucoup pour la réponse accordée :love:
    Carmina
    Carmina
    FémininAge : 34Messages : 424

    Hier à 7:54

    Bonjour mais perfection!
    Je te remercie!
    NOX ETERNAM
    NOX ETERNAM
    FémininAge : 22Messages : 2

    Hier à 20:52

    C'est tout simplement DIVIN. Merci pour ce LS super utile et tant attendu dans le monde rpgique. On m'en a parlé ce matin, je l'ai mis sur mon forum test en personnalisant le CSS en moins d'une heure. Au top, franchement.

    J'ai juste une petite question : quid de la sécurité ? Comment stockes-tu les identifiants des différents comptes pour que la connexion se fasse automatiquement au switch ?

    Merci pour tes précisions et pour ton travail, ça va faciliter la vie à beaucoup de joueurs :ninjahug:
    pastel breathing
    pastel breathing
    FémininAge : 23Messages : 2

    Hier à 21:26

    bonjour :heart:
    on m'en parlait justement plus tôt et je trouve le système révolutionnaire. merci du partage. :love:
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Fév 2021 - 1:42