'How do I display instant messages, when insecure is removed, with Meteor.methods and Meteor.call?

I am taking coding courses online, so I can build my app sometime next year...

  1. Can you help me with this instant message code please?

a. I am supposed to display an alert message when the user is not logged in. b. Display the usename in the header. c. Display the username with his instant message.

  1. Since insecure is removed, I have to use Meteor.methods and meteor.call. I cannot use Sessions. I keep getting weird errors...

  2. Here is the javascript code I have tried based on the course module, but I get errors that don't make sense to me...

Messages = new Mongo.Collection("messages");

if (Meteor.isClient) {

  // this will configure the sign up field so it
  // they only need a username
  Accounts.ui.config({
    passwordSignupFields: 'USERNAME_ONLY',
  });

  Template.messageForm.events({
    // this event listener is triggered when they click on
    // the post! button on the message form template

    'click .js-save-message': function (event) {
      var messageText = $('#message-text-input').val();
      // notice how tihs has changed since the lsat time
      // now we read the username from the Meteor.user()
      var messageNickname = "Anon";
      if (Meteor.user()) {
        messageNickname = Meteor.user().username;
      }
      var message = {
        messageText: messageText,
        nickname: messageNickname,
        createdOn: new Date()
      };

      // HERE is where you come in ....
      // call a meteor method
      // on the server here instead of
      if (Meteor.isServer) {
        Meteor.methods({ // defines a method, adds extra security layer to app
            insertMessage: function () {
              var doc, user, euser;
              doc = Message.findOne();
              if (!doc) {
                return;
              } // no logged in user, give up
              // now I have a doc and possibly a user
              user = Meteor.user().profile;
              eusers = insertMessage.findOne({ docid: doc._id });
              if (!eusers) {
                eusers = {
                  docid: doc._id,
                  users: {},
                };
              }
              user.lastEdit = new Date();
              eusers.users[this.userId] = user;
              insertMessage.upsert({ _id: eusers._id }, eusers);

            }
          }
        )
      }

      // comment out this code, which won't work as we removed insecure...
      //Messages.insert(message); // the insecure way of doing it
      // ... put code here that calls the
      Meteor.call('insertMesage', message, function (err, res) {
        if (!res) {
          alert('You need to log in!');
        }
      });

      Template.header.helpers({
        // HERE is another one for you - can you
        // complete the template helper for the 'header' template
        // called 'nickname' that
        // returns the nickname from the Session variable?, if they have set it
        nickname: function () {
          if (Meteor.user()) {
            return Meteor.user().username;
          }
        },
      });

      Template.messageList.helpers({
        // this helper provides the list of messages for the
        // messageList template
        messages: function () {
          return Messages.find({}, { sort: { createdOn: -1 } })
        }
      });
    },
  });
}

Here is the html file

<body>
{{>header}}
{{>nicknameForm}}
{{>messageList}}
{{>messageForm}}
</body>


<template name="header">
    <h1>Welcome to M-Instant {{nickname}}</h1>
</template>

<template name="messageList">
    {{#each messages}}
        {{>messageItem}}
    {{/each}}
</template>

<template name="messageItem">
    <h3>{{nickname}} - {{messageText}}</h3>
</template>

<template name="nicknameForm">
    <div class="form-group">
        <label for="nickname-input">Nickname:</label>
        <input type="text" class="form-control" id="nickname-input"
               placeholder="Type message here...">
        <button type="submit" class="btn btn-default js-set-nickname">Set my
            nickname!</button>

    </div>
</template>

<template name="messageForm">
    <div class="form-group">
        <label for="message-text-input">Message:</label>
        <input type="text" class="form-control" id="message-text-input"
               placeholder="Type message here...">
        <button type="submit" class="btn btn-primary js-save-message">Post!
        </button>

    </div>
</template>

Here is the Methods file

Meteor.methods({
  'insertMessage':function(message){
    console.log("If you manage to call the method, you'll see this 
    message in the server console");
    if (!Meteor.user()){
      return;
    }
    else {
      return Messages.insert(message);
    }
  }
})


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source