barbatus / ng2-meteor-accounts

Meteor Accounts for Angular2
13 stars 2 forks source link

InjectUser should reset user on Login #1

Closed thinkrapido closed 8 years ago

thinkrapido commented 8 years ago

InjectUser sets the user when the template is rendered.

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

barbatus commented 8 years ago

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

thinkrapido commented 8 years ago

Well, it's not working for me.

thinkrapido commented 8 years ago

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.');
      }
    }
  }
}
barbatus commented 8 years ago

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