Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Utilisateur

La création d’utilisateur peut parfois être compliquée mais heureusement pour nous, Meteor s’occupe de tout ! 

Ajoutez des utilisateurs

Pour ajouter des utilisateurs dans votre projet, il faut d’abord aller dans le Terminal et taper :

1
meteor add accounts-ui accounts-password

Une fois cela fait on peut ensuite s’occuper de programmer nos utilisateurs.

Dans un premier temps on va permettre créer un fichier dans  :

« imports/config/accounts-config.js »

1
2
3
4
5
import { Accounts } from 'meteor/accounts-base';
 
Accounts.ui.config({
  passwordSignupFields: 'USERNAME_ONLY',
});

Il y a plusieurs valeurs qu’on peut mettre pour passwordSignupFields :

  • « USERNAME_AND_EMAIL »
  • « USERNAME_AND_OPTIONNAL_EMAIL »
  • « USERNAME_ONLY »
  • « EMAIL_ONLY » (celle utilisée par défaut)

Une fois qu’on a crée ce fichier il ne faut pas oublier de l’import dans client/main.js :

1
import '../imports/config/accounts-config.js';

Et à la fin on va ajouter des boutons pour que notre utilisateur puisse se connecter.

<header>
    <h1>Portefolio !</h1>
    {{> loginButtons}}
</header>

Résultat :

Récupérer l'utilisateur connecté

Une fois qu’on a permis à notre utilisateur d’être connecté on peut lui proposer des fonctionnalités différentes comme lui permettre d’avoir une page pour lui tout seul. Ainsi on va créer un bouton dans notre body qu’on va cacher aux utilisateurs non connectés.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<body>
    <header>
        <h1>Portefolio !</h1>
        {{> loginButtons}}
    </header>
    <button class="info">Informations</button>
    <button class="comp">Competence</button>
    {{#if currentUser}}
        <button class="user">{{username}}</button>
    {{/if}}
    <div>
      {{> Template.dynamic template=currentPage}}
    </div>
</body>
Dans notre JavaScript il ne faut pas oublier d’import la bibliothèque nécessaire :
1
import { Meteor } from 'meteor/meteor';
Le if currentUser est natif à Meteor, ça veut dire qu’on n’a pas besoin de le programmer, mais ce n’est pas le cas pour le {{username}} on va donc s’en occuper :
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
Template.body.helpers({

    //template dynamique
    currentPage: function(page){
        return Session.get('page')
    },
    //renvoie le nom de l'utilisateur connecté
    username: function(page){
        return Meteor.user().username;
    }
});
Resultat :