Meteor-React-Ionic Mobile App Part 4.2: Users and Settings

4 min readAug 3, 2015

This is the second part of connecting Meteor’s built-in accounts-password package into a Meteor-React-Ionic hybrid mobile app. If you’re just starting, you’ll definitely want to read the previous article or clone the repo. Note that if you clone the repo, you will need to sign in through the console with the username and password noted in the previous article.

In this article we’re going to start connecting some of the functionality. We’re going to connect the ability to log out and launch modals.

Step 5

The next step is getting each of the settings items to launch a modal. If you want to go into greater detail on modals, check out this article. We’re going to set up modals now.

Create a new file in your components directory called IonModal.jsx and copy-paste this code.

Then, in styles.scss, add this code.

In AppBody, add this function to set the initial state of the modal to false, then create this function to launch the modal (though you might want to change “tab” to “setting”), add the CSSTransitionGroup to the top of the file, and add the modal with the transition.

And finally, we want to connect the modal to each of the settings. But before we can do this, we need to pass the ionModal function through via props. In AppBody, change the following line of code to pass ionModal as a prop to the current route.

...
<ReactRouter.RouteHandler ionModal={this.ionModal}/>
...

Then, we need to pass it one step further to our SettingsList component. Within our Settings component, change the following two lines of code:

...
<Profile ionModal={this.props.ionModal} />
<SettingsList ionModal={this.props.ionModal} />
...

And now we have access to the function that launches the modal. You can add this functionality to each of your settings items by changing the following line of code in your SettingsList component (thanks to Benjamin Cherion for fixing a bug):

...
<div onClick={this.props.ionModal.bind(null, setting, null)} className="item" key={setting}>
  <h2>{setting}</h2>
</div>
...

Step 6

Then we need to connect the placeholder button for Logout. You can do this using state or by using a function that references the data within this.data. The reason for this is that both a change in state and a change in data will trigger a re-render. Within your Profile component, add the following function to get your login status:

getLoginStatus() {
  if (this.data.userLoading || !this.data.user) {return false;}
  if (this.data.user) {return true;}
  return false
},

You can now access your login status by calling this.getLoginStatus(). Let’s give ourselves access to loginStatus within our render() function in our Profile component by adding the following line of code:

render() {
  let loginStatus = this.getLoginStatus();
...

Step 7

Now that we have our login status function working properly, we need to give the user the ability to log out. For the sake of modularity, we’re going to create two new components to accomplish this. First need to create the two components, which we will call LoggedIn and NotLoggedIn. Create these in Settings.jsx:

LoggedIn = React.createClass({
  render() {
    return (
      <div>
        <a>Logout</a>
      </div>
    )
  }
})

Then add the function logout() to the LoggedIn component:

...
logout() {
  Meteor.logout();
},
...

And then attach that function to the related anchor tag:

...
<div>
  <a onClick={this.logout}>Logout</a>
</div>
...

Then we need to create NotLoggedIn, which will include a function to log the user in. We will connect this later:

NotLoggedIn = React.createClass({
  login(user, pass) {
    Meteor.loginWithPassword(user, pass);
  },
  render() {
    return <a>Login</a>
  }
})

The last thing we need to do on this front is add a ternary conditional to our Profile component to render either the LoggedIn or NotLoggedIn components. When we do this, we also want to pass the ionModal function down through props so we can launch a modal for the user’s login form:

...        
<div className="login-wrapper">
  {loginStatus ? <LoggedIn ionModal={this.props.ionModal} /> : <NotLoggedIn ionModal={this.props.ionModal} />}
</div>
...

Step 8

If you’re satisfied with browser-console-based login, then you can stop here. Otherwise, continue to the next article to set up a login modal to allow your users to sign in (coming soon!).

Sam Corcos is the lead developer and co-founder of Sightline Maps, the most intuitive platform for 3D printing topographical maps, as well as LearnPhoenix.io, an advanced tutorial site for building scaleable production apps with Phoenix and React.

Meteor-React-Ionic Mobile App Part 4.2: Users and Settings

Step 5

Step 6

Step 7

Step 8

Additional

Written by Sam Corcos