Digits, Part 7

For this experience, you’ll add multi-user capabilities to your Digits application. There are two major capabilities we’ll add:

If you’re not logged in, you can’t see any contacts.
If you are logged in, you can only see the contacts that you’ve created.

As with the earlier Digits WODs, feel free to watch me solve it first, and then try it yourself.

Before starting this WOD, be sure to have merged the branch containing the “final” version of your previous WOD into master. See the screencast in the Readings for an illustration.

Note that switching branches on a running meteor application has the potential to put the application into an inconsistent state. To minimize problems, whenever you switch branches while doing meteor development, it is best to:

Quit meteor.
Invoke meteor reset to clear out the contents of the database.
Re-invoke meteor. For applications based upon meteor-application-template, the correct invocation is meteor --settings ../config/settings.development.json.

The WOD

Ready? Let’s begin:

Start your timer.
Create and switch to a branch called “multiuser-1” in your local repository. You will do all the work for this WOD in this branch.
While preparing for this WOD, I found a couple of problems. First, there is a bug in import/ui/stylesheets/style.css that results in hidden text in the drop-down signin menu. To fix it, change the CSS selector in style.css to:
```
a#login-sign-in-link {
  color: rgba(255, 255, 255, 0.901961);
}
```
With this fix, the “Close” and “Create account” links will be displayed correctly.

Second, in order to create new accounts, you need to remove the useraccounts:semantic-ui package:
```
 meteor remove useraccounts:semantic-ui
```
Removing this package does not negatively impact on the use of Semantic UI with Meteor.
Add a string field called Owner to the ContactsSchema.
Update contactSeeds with an owner field. Since at startup time there is only one default user, you need to use that user’s ID. Since you import the accounts.js file first in index.js, the default user will be defined by the time this code is run. You can retrieve their ID on the server side with
```
Meteor.users.findOne({ username: Meteor.settings.defaultAccount.username })._id
```
Do a meteor reset and then meteor run --settings ../config/settings.development.json and make sure the application runs successfully, If so, that means you have set up your Contacts to require an owner and have set up the test data to be loaded with the default user.
Update the HTML to show the ID of the item’s owner in the table, and verify that this works.
Update add-contact-page.js to insert the current user’s ID when creating an entry. Make sure you login before testing your page! See settings.development.json for the default user and password.
1. Update edit-contact-page.js to add the owner field to the updatedContact object before running the validation and update. (Important Note! This step is not shown in the video!)
Now logout, and create a second user. Login as that user, and create a couple of new contacts. Now the digits table on the home page should display contacts from two users.
Next, let’s only show contacts when there is a logged-in user. Use the If_Logged_In template in the layouts directory to prevent non-logged in users from seeing contact inforrmation in the home page, the add contact form, and the edit contact form.
The final step is to provide the user with only the contacts they have created. To do this, we change the publication from publishing the entire Contacts collection to publishing only the subset of the collection for which the owner field matches the logged-in user. To do it, you must modify the current subscription (which publishes the entire collection) to the following:
```
 Meteor.publish('Contacts', function publishContactsData() {
   const owner = this.userId;
   return owner ? Contacts.find({ owner }) : this.ready();
 });
```

Now check to see that only the Contacts associated with the logged in user are displayed.

Once you’ve finished, commit your changes to GitHub, and check to see that your changes are there.
Stop your timer and record your time. Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <26 min Av: 26-30 min Sd: 30-35 min DNF: 35+ min

Demonstration

You can watch this before doing the WOD if you like:

If you want to try this WOD again, just commit your branch, then switch to the master branch to reset your system to its state at the end of the first Digits experience. Then create a new branch called multiuser-2 and start over.

Submission instructions

This WOD does not need to be submitted. It is just for review purposes.