Add login/logout.

ojanvafai · Nov 9, 2014 · ca711e5 · ca711e5
1 parent 9cba155
commit ca711e5
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 9 deletions.
diff --git a/app.yaml b/app.yaml
@@ -8,11 +8,15 @@ handlers:
 - url: /favicon\.ico
   static_files: static/images/favicon.ico
   upload: static/images/favicon\.ico
-          
+
 - url: /bower_components
   static_dir: bower_components
   secure: always
 
+- url: /lib
+  static_dir: lib
+  secure: always
+
 - url: /model
   static_dir: model
   secure: always
@@ -21,9 +25,13 @@ handlers:
   static_dir: ui
   secure: always
 
+- url: /users
+  script: users.app
+  secure: always
+
 - url: /.*
   static_files: gift-o-matic.html
   upload: gift-o-matic.html
   secure: always
   http_headers:
-      Strict-Transport-Security: max-age=10886400; includeSubDomains
+      Strict-Transport-Security: max-age=10886400; includeSubDomains
diff --git a/gift-o-matic.html b/gift-o-matic.html
@@ -2,16 +2,16 @@
 <head>
   <script src="bower_components/react/react.js"></script>
   <script src="bower_components/react/JSXTransformer.js"></script>
-
   <script src="bower_components/sugar/release/sugar-full.development.js"></script>
 
+  <script src="lib/net.js"></script>
   <script src="model/ItemData.js"></script>
-
   <script src="ui/GiftOMatic.js" type="text/jsx"></script>
   <script src="ui/GroupedItemLists.js" type="text/jsx"></script>
   <script src="ui/ItemForm.js" type="text/jsx"></script>
   <script src="ui/Item.js" type="text/jsx"></script>
   <script src="ui/ItemList.js" type="text/jsx"></script>
+  <script src="ui/Login.js" type="text/jsx"></script>
   <script src="ui/NewItemForm.js" type="text/jsx"></script>
 
   <style>

diff --git a/lib/net.js b/lib/net.js
@@ -0,0 +1,41 @@
+var net = net || {};
+
+(function () {
+
+net.json = function(url)
+{
+  return net.ajax({
+    url: url,
+    method: "GET",
+    responseType: "json",
+  });
+};
+
+net.ajax = function(options)
+{
+  return new Promise(function(resolve, reject) {
+    var xhr = new XMLHttpRequest();
+    var async = true;
+    xhr.open(options.method, options.url, async);
+    xhr.responseType = options.responseType;
+    xhr.onload = function() {
+      if (xhr.status == 200) {
+        if (options.responseType)
+          resolve(xhr.response);
+        else
+          resolve(xhr.responseText);
+      } else {
+        reject(Error(xhr.statusText));
+      }
+    };
+    xhr.onerror = function(error) {
+      reject(error);
+    };
+    var data = options.data || null;
+    if (data)
+      xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
+    xhr.send(data);
+  });
+};
+
+})();
diff --git a/ui/GiftOMatic.js b/ui/GiftOMatic.js
@@ -26,8 +26,11 @@ var GiftOMatic = React.createClass({
       new ItemData('id2', 1, 'jewree', 'a house'),
       new ItemData('id3', 1, 'jewree', 'a green dress'),
     ];
-    console.log('setState');
     this.setState({data: theDataBeHere});
+
+    net.json('/users').then(function(users) {
+      this.setState({users: users});
+    }.bind(this));
   },
   saveItem: function(owner, quantity, title, link, description) {
     var newData = this.state && this.state.data;
@@ -41,8 +44,11 @@ var GiftOMatic = React.createClass({
   },
   render: function() {
     return <div>
-      <NewItemForm onAdd={this.saveItem} />
+      <div className="flex">
+        <div className="flexOne"><NewItemForm onAdd={this.saveItem} /></div>
+        <Login users={this.state && this.state.users} />
+      </div>
       <GroupedItemLists data={this.state && this.state.data} />
-    </div>
+    </div>;
   },
 });
diff --git a/ui/GroupedItemLists.js b/ui/GroupedItemLists.js
@@ -1,5 +1,4 @@
 function groupByOwner(data) {
-  console.log('group', data);
   var groupedData = {};
   if (!data)
     return groupedData;
@@ -27,7 +26,6 @@ var GroupedItemLists = React.createClass({
         </div>
       );
     });
-    console.log(itemLists);
     return <div>
       {itemLists}
     </div>

diff --git a/ui/Login.js b/ui/Login.js
@@ -0,0 +1,12 @@
+var Login = React.createClass({
+  render: function() {
+    if (!this.props.users)
+      return <div />;
+
+    var current = this.props.users.current_user;
+    if (!current)
+      return <a href={this.props.users.login_url}>Sign in</a>;
+
+    return <div>{current} <a href={this.props.users.logout_url}>Sign out</a></div>;
+  },
+});
diff --git a/users.py b/users.py
@@ -0,0 +1,25 @@
+
+import json
+import webapp2
+
+from google.appengine.api import users
+
+class Users(webapp2.RequestHandler):
+  def get(self):
+    result_json = {}
+
+    user = users.get_current_user()
+
+    # TODO: Have the redirect URL actually be the URL you came from.
+    result_json['login_url'] = users.create_login_url('/')
+    result_json['logout_url'] = users.create_logout_url('/')
+
+    if user:
+      result_json['current_user'] = user.email()
+
+    self.response.headers['Content-Type'] = 'application/json'
+    self.response.out.write(json.dumps(result_json))
+
+app = webapp2.WSGIApplication([
+  ('/users', Users),
+])