barbatus/ng2-meteor-accounts

InjectUser should reset user on Login

Closed this issue · 4 comments

InjectUser sets the user when the template is rendered.

It should reset user when someone logs in or logs out.

No, it follows updates of the Meteor.user, which is reactive and changes when user logs in or logs out.

Well, it's not working for me.

I'm trying the Angular2 example

<div>
{{!!user}}
<button (click)="alertUser()">Alert user</button>
<div *ng-if="!user">Please log in to change parties</div>

<form [ng-form-model]="partiesForm" #f="form" (submit)="addParty(f.value)">
  <label>Name</label>
  <input type="text" ng-control="name">
  <label>Description</label>
  <input type="text" ng-control="description">
  <label>Location</label>
  <input type="text" ng-control="location">
  <label>Public</label>
  <input type="checkbox" ng-control="public">
  <button>Add</button>
  <accounts-ui></accounts-ui>
</form>
</div>
/// <reference path="../../typings/angular2-meteor.d.ts" />
/// <reference path="../../typings/meteor-accounts-ui.d.ts" />
/// <reference path="../../typings/meteor-accounts.d.ts" />

import {Component, View} from 'angular2/angular2';

import {FORM_DIRECTIVES, FormBuilder, Control, ControlGroup, Validators} from 'angular2/angular2';

import {Parties} from 'collections/parties';

import {AccountsUI} from 'meteor-accounts-ui';
import {InjectUser} from 'meteor-accounts';

@Component({
  selector: 'parties-form',
})
@View({
  templateUrl: '/client/parties-form/parties-form.html',
  directives: [FORM_DIRECTIVES, AccountsUI],
})
@InjectUser()
export class PartiesForm {

    partiesForm: ControlGroup;
    user: Object;

  constructor() {
      let fb = new FormBuilder();
      this.partiesForm = fb.group({
        name: ['', Validators.required],
        description: [''],
        location: ['', Validators.required],
        'public': [false],
      })
  }

  alertUser() {
    alert(this.user);
  }

  addParty(party) {
    if (this.partiesForm.valid) {
      if (Meteor.userId()) {
        const userId = this.user ? Meteor.userId() : null;
        Parties.insert({
            name: party.name,
            description: party.description,
            location: party.location,
            'public': party.public,
            owner: userId,
        });

        (<Control>this.partiesForm.controls['name']).updateValue('');
        (<Control>this.partiesForm.controls['description']).updateValue('');
        (<Control>this.partiesForm.controls['location']).updateValue('');
        (<Control>this.partiesForm.controls['public']).updateValue(false);
      }
      else {
        alert('Please log in to add a party.');
      }
    }
  }
}

Ah, there is an issue in the tutorial.
There should be the party-details.ts component instead of the parties-form.ts.
To make it work, you will need to extend MeteorComponent to make it reactive:
export class PartiesForm extends MeteorComponent