CODEWITHSUNDEEP
meteoraccount
dome12b
dome12b

Reputation: 623

How to create users client side?

I'm working on a intern document-sharing project for a small company. I want to do this with meteor. I'm very common with html/javascript but not with databases. My problem is to handle the users. Because of my researches here I'm not sure if it's already possible to create users on client side. The official documentation shows some methodes how to deal with users but no examples. I tried to create a list on server side like this:

Users = new Meteor.Collection("users");

Then I want to insert a user on startup like this:

//on Client side
if (Meteor.isClient) {
var username = "My Name";

    Meteor.call("create_user", username, function(error, user_id) {
         Session.set("user_id", user_id);
});
}

//on Server side
if(Meteor.is_server) {
Meteor.methods({
    create_user: function(username) {
        console.log("CREATING USER");
        var USER_id = Users.insert({name: username});
        return user_id;
    },
});
}

But reading the username in the html template doesn't work...

Are there any good examples with a register and login?

Cheers

Upvotes: 3

Views: 3323

Answers (3)

dome12b
dome12b

Reputation: 623

Ok thank you, that's easy. But so I can not modify the loggedInTemplate or the loggedOutTemplate.

I show you what I've got:

//the html

<head>
   <title>myApp | documents</title>
</head>

<body>
<div id="headerBox">
    {{> header}}
</div>
<div id="sideBox">
    {{> side}}
</div>
<div id="contentsBox">
    {{> contents}}
</div>
</body>


<template name="header">
<h1>Company name</h1>
</template>

<template name="contents">
{{#if currentUser}}
   <p>Welcome to documents</p>
{{else}}
   <h3>Hello! Please log in!</h3>
   <p><input type="text" id="username" placeholder="Username"><input type="text" id="password" placeholder="Password"><input type="button" value="log me in!"></p>
{{/if}}
 </template>

 <template name="side">
<p>Hello {{ activeUser }}</p>
<p><input type="button" value="Create New Document" onclick="createPage()"></p>
<h3>Documents:</h3>
 </template>

and

//client.js

Pages = new Meteor.Collection("pages");

Meteor.startup(function() {
   Session.set("activeUser", "please log in!");
});

Template.side.activeUser = function() {
    return Session.get("activeUser");
};

and

//server.js

Meteor.startup(function() {
    Accounts.createUser({username: "MyName", email: "[email protected]", password: "123456"});
});

and I'm searching for a manual way to log this user created on startup in. And of course later to allow this user to create new users...

The problem is adding

// Returns an event_map key for attaching "ok/cancel" events to
// a text input (given by selector)
var okcancel_events = function (selector) {
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
};

// Creates an event handler for interpreting "escape", "return", and "blur"
// on a text field and calling "ok" or "cancel" callbacks.
var make_okcancel_handler = function (options) {
var ok = options.ok || function () {};
var cancel = options.cancel || function () {};

return function (evt) {
    if (evt.type === "keydown" && evt.which === 27) {
    // escape = cancel
    cancel.call(this, evt);
  } else if (evt.type === "keyup" && evt.which === 13) {
    // blur/return/enter = ok/submit if non-empty
    var value = String(evt.target.value || "");
    if (value)
      ok.call(this, value, evt);
    else
      cancel.call(this, evt);
   }
 };
};

Template.contents.events = {};

Template.contents.events[okcancel_events('#password')] = make_okcancel_handler({
    ok: function (text, event){
        var usernameEntry = document.getElementById('username');
        var passwordEntry = document.getElementById('password');
        Meteor.loginWithPassword({usernameEntry, passwordEntry});
        event.target.value = "";    
    }
});

to the client doesn't work...

Upvotes: 0

syllogismos
syllogismos

Reputation: 660

Adding the accounts functionality is very easy in Meteor.. may it be simple email, password, or by using facebook connect/twitter etc..

do the following to get a simple meteor app with user accounts set up..

meteor create simpleapp
cd simpleapp

add the accounts-ui and accounts-password packages

meteor add accounts-ui
meteor add accounts-password

you simply add other accounts related packages for implementing facebook/twitter/github/google login etc

to list other available meteor packages use this command

meteor list

now edit your simpleapp.html file to this to add login buttons etc..

<head>
  <title>simpleapp</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Click" />
  {{loginButtons}}
</template>

I simply added {{loginButtons}} to the default html file to add the default login buttons..

now run the meteor app and go to localhost:3000

meteor

you implemented the login functionality without doing much work. 4-5 lines of code, it even takes care of things like forgot password, registering new user etc

next thing is you need to display a particular html when the user is signed in. you do this using the {{currentUser}} global

you implement it accordingly

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Click" />
  {{loginButtons}}
  {{#if currentUser}}
    {{> loggedInTemplate}}
  {{else}}
    {{> loggedOutTemplate}}
  {{/if}}
</template>

<template name="loggedInTemplate">
  <!-- user is logged in -->
</template>
<template name="loggedOutTemplate">
  <!-- user is logged out -->
</template>

Upvotes: 8

Rahul
Rahul

Reputation: 12231

You don't need to create a user system manually. Just use the accounts package:

The Meteor Accounts system builds on top of the userId support in publish and methods. The core packages add the concept of user documents stored in the database, and additional packages add secure password authentication, integration with third party login services, and a pre-built user interface.

Your code should work, though. But you're not exposing the username property to the client, so maybe that's why you can't see it in your template.

Upvotes: 1

Related Questions