Atmosphere useraccounts:materialize package


#1

Hey, hope you can help.

I tried to install the package template useraccounts:materialize.
I used meteor add useraccounts:materialize
It’s added in the .meteor/packages file.
Then I add
meteor add accounts-password… etc.
meteor add materialize:materialize
Then i tried to use {{> atForm}} in my index.html, but it doesn’t appear.
there’s a div class=“at-form” added but it’s empty inside
If I use {{> atForm state=“signUp”}} it appears with the style but the buttons don’t work
I include the cdns.
I create a folder packages into my app and download it from github

I don’t know, what else to do


#2

Is it possible you’re logged in already? Mine doesn’t show up if I’m logged in.


#3

No i’am not logged in :confused:
the normal default account form {{> loginButtons}} works


#4

Does {{>atNavButton}} work?


#5

yes it appears but only the styling no functionality


#6

What router are you using? Mine is working ok. Here is my meteor package list related to materialize and user accounts:

accounts-facebook
accounts-password
materialize:materialize
meteorstuff:materialize-modal
useraccounts:core
useraccounts:flow-routing 
useraccounts:materialize

Plus I have these routes set up.

AccountsTemplates.configureRoute('signIn');
AccountsTemplates.configureRoute('signUp');

Sorry if this isn’t helpful :frowning:


#7

Oh, and I also have this in config.js:

AccountsTemplates.configure({
  defaultLayout: 'mainLayout',
  defaultLayoutRegions: {
    nav: 'nav',
    footer: 'footer',
  },
  defaultContentRegion: 'content',
  showForgotPasswordLink: true,
  overrideLoginErrors: true,
  enablePasswordChange: true,
 
  negativeValidation: true,
  positiveValidation: true,
  negativeFeedback: false,
  positiveFeedback: true
});
AccountsTemplates.addField({
    _id: 'username',
    type: 'text',
    displayName: "Username",
    required: true
});

#9

it’s kind of working now thank you !


#10

I guess that means progress :slight_smile:

The atForm template should show up even without routing, though, so this is still mysterious. Oh, and you don’t need modal. I just included it to provide a complete list.


#11

yes everything is still weird. The normal form appears at the bottom of the page and the {{> atForm}} still doesn’t show up anything. Is it possible to add the project here inside the post?


#12

Paste your index.html. Also run meteor list at your prompt and paste that in.


#13
<head>
    <title>todo_list</title>
    <!-- Compiled and minified CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

    <!-- Compiled and minified JavaScript-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

</head>

<body>
<div class="container">
    <header>
        <h1>meys todo list</h1>
        <!--<div class="login">{{> loginButtons}}</div>-->
        <div>{{> atForm}}</div>
        <div>{{>atNavButton}} </div>

    </header>


    <ul>
        {{#each tasks}}
        {{> task}}
        {{/each}}
    </ul>

    <label class="hide-completed">
        <input type="checkbox" checked="{{hideCompleted}}" class="hide" />
        hide completed tasks
    </label>
    {{#if currentUser}}
    <form class="new-task">
        <input type="text" name="tasktext" placeholder="type to add new task" />
    </form>
    {{/if}}
</div>
</body>

<template name="task">
    <li class="{{#if checked}} checked {{/if}} {{#if private}}private{{/if}}">
        <button class="delete">&times;</button>
        <input type="checkbox" checked="{{checked}}" class="toggle-checked">

        {{#if isOwner}}
        <button class="toggle-private">
            {{#if private}}
            Private
            {{else}}
            Public
            {{/if}}
        </button>
        {{/if}}

        <span class="text"><strong>{{username}}</strong>-{{text}}</span>
    </li>
</template>

accounts-facebook 1.0.6 Login service for Facebook accounts
accounts-password 1.1.4 Password support for accounts
accounts-ui 1.1.6 Simple templates to add login widgets to an…
blaze-html-templates 1.0.1 Compile HTML templates into reactive UI wit…
ecmascript 0.1.6* Compiler plugin that supports ES2015+ in al…
es5-shim 4.1.14 Shims and polyfills to improve ECMAScript …
jquery 1.11.4 Manipulate the DOM using CSS selectors
kadira:blaze-layout 2.3.0 Layout Manager for Blaze (works well with F…
materialize:materialize 0.97.5 Materialize (official): A modern responsiv…
meteor-base 1.0.1 Packages that every Meteor app needs
mobile-experience 1.0.1 Packages for a great mobile user experience
mongo 1.1.3 Adaptor for using MongoDB and Minimongo ove…
session 1.1.1 Session variable
standard-minifiers 1.0.2 Standard minifiers used with Meteor apps by…
tracker 1.0.9 Dependency tracker to allow reactive callbacks
useraccounts:core 1.13.1 Meteor sign up and sign in templates core …
useraccounts:flow-routing 1.13.1 UserAccounts package providing routes conf…
useraccounts:materialize 1.13.1 Accounts Templates styled for Materialize …


#14

You don’t need the cdn since you added the materialize package, but that’s not causing the problem. Do any errors show up in console when the page is loaded?


#15

meteor.js:880 Exception in template helper: TypeError: Cannot read property ‘form’ of undefined
at AT.getState (http://localhost:3000/packages/useraccounts_core.js?e3a764dbf634d8bf2a393797c0a82e9fadef2e7a:1046:20)

one error

do i still need to create local folder: packages with the materialize package from github, cause
i found a .meteor/isopacks/useraccounts_materialize with all the files inside


#16

Hmmm. Show your directory tree?

No - remove packages folder. See if it works.


#17

i don’t have that much in my directory tree because i started with the todo list tutorial on the meteor site. you already saw my index.html

and the only files i’ve is css and the js file

Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient){

  Meteor.subscribe("tasks");

  Template.body.helpers({

    tasks: function () {
      if (Session.get("hideCompleted")) {
        return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
      } else {
        return Tasks.find({}, {sort: {createdAt: -1}});
      }
    }

  });

  Template.body.events({
    "submit .new-task":function(event){
      event.preventDefault();
      var text = event.target.tasktext.value;

      Meteor.call('addTask',text)

      event.target.tasktext.value="";
    },

    "change .hide":function(){
      Session.set("hideCompleted", event.target.checked); //Session with stored value
    }

  });

  Template.task.events({
    "click .delete": function () {
      Meteor.call("deleteTask", this._id);
    },

    "click .toggle-checked":function(){
      Meteor.call("setChecked", this._id, !this.checked);
    },

    "click .toggle-private": function () {
      Meteor.call("setPrivate", this._id, !this.private);
    }

  });

  Template.task.helpers({
    isOwner: function () {
      return this.owner === Meteor.userId();
    }
  });

  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });

  AccountsTemplates.configure({
    defaultLayout: 'fullPageAtForm',
    defaultLayoutRegions: { },
    defaultContentRegion: 'content',
    showForgotPasswordLink: true,
    overrideLoginErrors: true,
    enablePasswordChange: true,

    negativeValidation: true,
    positiveValidation: true,
    negativeFeedback: false,
    positiveFeedback: true
  });
  AccountsTemplates.addField({
    _id: 'username',
    type: 'text',
    displayName: "Username",
    required: true
  });

  AccountsTemplates.configureRoute('signIn');
  AccountsTemplates.configureRoute('signUp');

}


Meteor.methods({

  addTask: function(text) {
      if (!Meteor.userId()) {
          throw new Meteor.Error('not authorized');
      }
    Tasks.insert({
      text: text,
      createdAt: new Date(),
      owner: Meteor.userId(),
      username: Meteor.user().username
    });
  },

  deleteTask: function(taskId) {
    var task = Tasks.findOne(taskId);
    if(task.private && task.owner !== Meteor.userId()){
      throw new Meteor.Error('not authorized');
    }

    Tasks.remove(taskId);
  },

  setChecked: function(taskId, setChecked) {
    var task = Tasks.findOne(taskId);
    if(task.private && task.owner !== Meteor.userId()){
      throw new Meteor.Error('not authorized');
    }

    Tasks.update(taskId, {$set:{checked: setChecked}});
  },

  setPrivate: function (taskId, setPrivate) {
    var task = Tasks.findOne(taskId);

    if(task.owner !== Meteor.userId()){
      throw new Meteor.Error('not authorized');
    }

    Tasks.update(taskId, {$set: {private: setPrivate} });
  }

});

if(Meteor.isServer){

  Meteor.startup(function () {

    Meteor.publish("tasks", function(){
      return Tasks.find({
        $or: [
          {private: {$ne: true}},
          {owner: this.userId}
        ]
      });
    });
  });
}

#18

I think the problem may be your packages folder or you could try uninstalling accounts-ui. You could also just start from scratch, create a new meteor project, add the accounts-password, useraccounts:materialize and materialize:materialize packages (useraccounts:core should install as part of the useraccounts:materialize). Remove autopublish and insecure. Then delete the three default files that meteor created in your new project folder. Copy in the .html, .css and .js files from your bad project folder (only the ones you created). Run and see if it works.


#19

ahhhhh got it now… thank you so much!

the problem was the accounts-ui
i removed it and now it works :smile:


#20

I’m having the same problem and removing accounts-ui fixed it. Meteor Official Guide doesn’t mention anything about removing accounts-ui. That give lots trouble such as this issue.