Permalink
Browse files

Step 9 of TODO App with React tutorial - adding user accounts to the …

…TODO app
  • Loading branch information...
itamaro committed Nov 28, 2015
1 parent 676a772 commit f95e1e853ec4c725d49d7ef9dd833eb7443591dd
Showing with 51 additions and 9 deletions.
  1. +2 −0 .meteor/packages
  2. +13 −0 .meteor/versions
  3. +15 −0 AccountsUIWrapper.jsx
  4. +15 −8 App.jsx
  5. +3 −1 Task.jsx
  6. +3 −0 simple-todos-react.jsx
@@ -19,3 +19,5 @@ ecmascript # Enable ECMAScript2015+ syntax in app code
autopublish # Publish all data to the clients (for prototyping)
insecure # Allow all DB writes from clients (for prototyping)
react
accounts-ui
accounts-password
@@ -1,3 +1,7 @@
accounts-base@1.2.2
accounts-password@1.1.4
accounts-ui@1.1.6
accounts-ui-unstyled@1.1.8
autopublish@1.0.4
autoupdate@1.2.4
babel-compiler@5.8.24_1
@@ -17,12 +21,14 @@ cosmos:browserify@0.8.4
ddp@1.2.2
ddp-client@1.2.1
ddp-common@1.2.2
ddp-rate-limiter@1.0.0
ddp-server@1.2.2
deps@1.0.9
diff-sequence@1.0.1
ecmascript@0.1.6
ecmascript-runtime@0.2.6
ejson@1.0.7
email@1.0.8
es5-shim@4.1.14
fastclick@1.0.7
geojson-utils@1.0.4
@@ -35,7 +41,9 @@ insecure@1.0.4
jquery@1.11.4
jsx@0.2.3
launch-screen@1.0.4
less@2.5.1
livedata@1.0.15
localstorage@1.0.5
logging@1.0.8
meteor@1.1.10
meteor-base@1.0.1
@@ -45,11 +53,13 @@ mobile-experience@1.0.1
mobile-status-bar@1.0.6
mongo@1.1.3
mongo-id@1.0.1
npm-bcrypt@0.7.8_2
npm-mongo@1.4.39_1
observe-sequence@1.0.7
ordered-dict@1.0.4
promise@0.5.1
random@1.0.5
rate-limit@1.0.0
react@0.14.1_1
react-meteor-data@0.2.3
react-runtime@0.14.1_1
@@ -60,9 +70,12 @@ reactive-var@1.0.6
reload@1.1.4
retry@1.0.4
routepolicy@1.0.6
service-configuration@1.0.5
session@1.1.1
sha@1.0.4
spacebars@1.0.7
spacebars-compiler@1.0.7
srp@1.0.4
standard-minifiers@1.0.2
templating@1.1.5
templating-tools@1.0.0
@@ -0,0 +1,15 @@
AccountsUIWrapper = React.createClass({
componentDidMount() {
// Use Meteor Blaze to render login buttons
this.view = Blaze.render(Template.loginButtons,
React.findDOMNode(this.refs.container));
},
componentWillUnmount() {
// Clean up Blaze view
Blaze.remove(this.view);
},
render() {
// Just render a placeholder container that will be filled in
return <span ref="container" />;
}
});
23 App.jsx
@@ -21,7 +21,8 @@ App = React.createClass({
return {
tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),
incompleteCount: Tasks.find({checked: {$ne: true}}).count()
incompleteCount: Tasks.find({checked: {$ne: true}}).count(),
currentUser: Meteor.user()
}
},
@@ -40,7 +41,9 @@ App = React.createClass({
Tasks.insert({
text: text,
createdAt: new Date() // current time
createdAt: new Date(), // current time
owner: Meteor.userId(), // _id of logged in user
username: Meteor.user().username // username of logged in user
});
// Clear form
@@ -68,12 +71,16 @@ App = React.createClass({
Hide Completed Tasks
</label>
<form className="new-task" onSubmit={this.handleSubmit} >
<input
type="text"
ref="textInput"
placeholder="Type to add new tasks" />
</form>
<AccountsUIWrapper />
{ this.data.currentUser ?
<form className="new-task" onSubmit={this.handleSubmit} >
<input
type="text"
ref="textInput"
placeholder="Type to add new tasks" />
</form> : ''
}
</header>
<ul>
@@ -34,7 +34,9 @@ Task = React.createClass({
checked={this.props.task.checked}
onClick={this.toggleChecked} />
<span className="text">{this.props.task.text}</span>
<span className="text">
<strong>{this.props.task.username}</strong>: {this.props.task.text}
</span>
</li>
);
}
@@ -3,6 +3,9 @@ Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code is executed on the client only
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
Meteor.startup(function () {
// Use Meteor.startup to render the component after the page is ready

0 comments on commit f95e1e8

Please sign in to comment.