Basic facebook auth working.
authorCameron Ball <cameron@getapproved.com.au>
Wed, 15 Oct 2014 07:42:57 +0000 (15:42 +0800)
committerCameron Ball <cameron@getapproved.com.au>
Wed, 15 Oct 2014 07:42:57 +0000 (15:42 +0800)
15 files changed:
.gitignore
app/components/hello/hello-service.js [new file with mode: 0644]
app/components/menu/menu-controller.js [new file with mode: 0644]
app/components/menu/menu.html [new file with mode: 0644]
app/divinelegy.js
app/index.html
app/nbproject/private/private.properties [deleted file]
app/nbproject/project.properties [deleted file]
app/nbproject/project.xml [deleted file]
app/pages/index/index.html [new file with mode: 0644]
app/pages/index/index.js [new file with mode: 0644]
app/pages/upload/style.css [new file with mode: 0644]
app/pages/upload/upload.html [new file with mode: 0644]
app/pages/upload/upload.js [new file with mode: 0644]
bower.json

index ce4f8a0..f96faa2 100644 (file)
@@ -6,3 +6,4 @@ tmp
 .DS_Store
 .idea
 npm-debug.log
+nbproject
diff --git a/app/components/hello/hello-service.js b/app/components/hello/hello-service.js
new file mode 100644 (file)
index 0000000..605d9af
--- /dev/null
@@ -0,0 +1,49 @@
+'use strict';
+
+angular.module("DivinElegy.components.hello", []).
+      
+factory("HelloService", ['$http', function($http)
+{
+    var hello = window.hello;
+    
+    hello.services.facebook.scope.hometown = 'user_hometown';
+    
+    hello.isLoggedIn = function(network)
+    {
+        var session = window.hello(network).getAuthResponse();
+        var current_time = (new Date()).getTime() / 1000;
+        return session && session.access_token && session.expires > current_time;
+    };
+    
+    hello.setAccessToken = function(token, expires)
+    {
+        var facebookObj = hello.utils.store('facebook');
+        facebookObj.access_token = token;
+        facebookObj.expires = expires;
+        window.hello.utils.store('facebook', facebookObj);
+    }
+    
+    hello.facebookLogin = function()
+    {
+        // get the short term token
+        hello('facebook').login( {scope: "hometown"} ).then(function() {
+            var facebookObj = hello.utils.store('facebook');
+        
+            console.log(JSON.stringify({token: facebookObj.access_token}));
+        
+            // send to 
+            $http({
+                url: "http://rock.divinelegy.meeples/user/auth",
+                method: "GET",
+                params: {token: facebookObj.access_token}
+            }).
+            success(function (data)
+            {
+                hello.setAccessToken(data.token, data.expires);
+                console.log(data);
+            });
+        });
+    };
+    
+    return hello; //assume hello has been loaded
+}]);
\ No newline at end of file
diff --git a/app/components/menu/menu-controller.js b/app/components/menu/menu-controller.js
new file mode 100644 (file)
index 0000000..85b7f51
--- /dev/null
@@ -0,0 +1,42 @@
+'use strict';
+
+angular.module("DivinElegy.components.menu", ["DivinElegy.components.hello"]).
+    
+//TODO: This really should be done with directives if I want to reuse the login link stuff    
+controller("MenuController", ['$scope', 'HelloService', function($scope, HelloService)
+{    
+    $scope.doLogin = function()
+    {
+        HelloService.facebookLogin();
+    };
+    
+    $scope.doLogout = function()
+    {
+        HelloService.logout('facebook');
+    };
+
+    $scope.loggedIn = false;
+    $scope.loggedOut = true;
+    $scope.loginLink = 'Login';
+    
+    HelloService.on('auth.login', function(auth)
+    {
+        HelloService(auth.network).api('/me').then(function(r)
+        {
+            $scope.loggedIn = true;
+            $scope.loggedOut = false;
+            $scope.greeting = 'Hi ' + r.name;
+            $scope.logoutLink = 'Logout';
+            $scope.$apply();
+        });
+    });
+    
+    HelloService.on('auth.logout', function(auth)
+    {
+        $scope.loggedIn = false;
+        $scope.loggedOut = true;
+        $scope.greeting = null;
+        $scope.loginLink = 'Login';
+        $scope.$apply();
+    });
+}]);
\ No newline at end of file
diff --git a/app/components/menu/menu.html b/app/components/menu/menu.html
new file mode 100644 (file)
index 0000000..f8a0c8b
--- /dev/null
@@ -0,0 +1,9 @@
+<ul class="menu" ng-controller="MenuController">
+    <li><a href="#/">Home</a></li>
+    <li><a href="#/upload">Upload</a></li>
+    <li>
+        {{greeting}}<a ng-if="loggedIn" href="#" ng-click="doLogout()">{{logoutLink}}</a>
+        <a ng-if="loggedOut" href="#" ng-click="doLogin()">{{loginLink}}</a>
+    </li>
+
+</ul>
\ No newline at end of file
index c4b3935..d035e65 100644 (file)
@@ -3,9 +3,31 @@
 // Declare app level module which depends on views, and components
 angular.module('DivinElegy', [
   'ngRoute',
-  'DivinElegy.Controllers.Index',
-  'DivinElegy.Controllers.Upload'
+  'DivinElegy.components.hello',
+  'DivinElegy.components.menu',
+  'DivinElegy.pages.index',
+  'DivinElegy.pages.upload'
 ]).
+        
 config(['$routeProvider', function($routeProvider) {
-  $routeProvider.otherwise({redirectTo: '/'});
+    $routeProvider.
+    when('/',
+    {
+        templateUrl: 'pages/index/index.html',
+        controller: 'IndexController'
+    }).
+    when('/upload',
+    {
+        templateUrl: 'pages/upload/upload.html',
+        controller: 'UploadController' 
+    }).
+    otherwise({redirectTo: '/'});
+}]).
+    
+run(['HelloService', function(HelloService)
+{
+    HelloService.init({
+        facebook : '383895074998288'
+    });
 }]);
+    
\ No newline at end of file
index 2b5e323..f7583d3 100644 (file)
@@ -7,7 +7,6 @@
         
         <!-- Styles -->
         <link rel="stylesheet" href="style.css"/>
-        <link rel="stylesheet" href="Controllers/Upload/style.css"/>
         <!-- end -->
         
         <!-- In production use:
         <script src="bower_components/angular/angular.js"></script>
         <script src="bower_components/angular-route/angular-route.js"></script>
         <script src="bower_components/angular-file-upload/angular-file-upload.js"></script>
+        <script class="pre" src="bower_components/hello/dist/hello.all.js"></script>
+
+        <!-- components -->
+        <script src="components/hello/hello-service.js"></script>
+        <script src="components/menu/menu-controller.js"></script>
         
-        <!-- Controllers -->
-        <script src="Controllers/Index/index.js"></script>
-        <script src="Controllers/Upload/upload.js"></script>
+        <!-- pages -->
+        <script src="pages/index/index.js"></script>
+        <script src="pages/upload/upload.js"></script>
         <!-- End -->
         
         <!-- good luck cameron -->
         <script src="divinelegy.js"></script>  
     </head>
     <body>
-        <ul class="menu">
-            <li><a href="#/">Home</a></li>
-            <li><a href="#/upload">Upload</a></li>
-        </ul>
+        <div ng-include="'components/menu/menu.html'"></div>
 
         <div ng-view>
             <!-- extreme hard rock for DivinElegy gets loaded in here. -->
         </div>
 
-        <div>Angular seed app: v<span app-version></span></div>
+        <!-- <div>Angular seed app: v<span app-version></span></div> -->
     </body>
 </html>
diff --git a/app/nbproject/private/private.properties b/app/nbproject/private/private.properties
deleted file mode 100644 (file)
index 3b1a22e..0000000
+++ /dev/null
@@ -1 +0,0 @@
-browser=Chrome.INTEGRATED
diff --git a/app/nbproject/project.properties b/app/nbproject/project.properties
deleted file mode 100644 (file)
index b702a75..0000000
+++ /dev/null
@@ -1,5 +0,0 @@
-config.folder=
-file.reference.roll.divinelegy-app=.
-files.encoding=UTF-8
-site.root.folder=${file.reference.roll.divinelegy-app}
-test.folder=
diff --git a/app/nbproject/project.xml b/app/nbproject/project.xml
deleted file mode 100644 (file)
index 6d45fcc..0000000
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://www.netbeans.org/ns/project/1">
-    <type>org.netbeans.modules.web.clientproject</type>
-    <configuration>
-        <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
-            <name>roll.divinelegy</name>
-        </data>
-    </configuration>
-</project>
diff --git a/app/pages/index/index.html b/app/pages/index/index.html
new file mode 100644 (file)
index 0000000..45379b4
--- /dev/null
@@ -0,0 +1 @@
+<h3>{{simpleVariable}}</h3>
\ No newline at end of file
diff --git a/app/pages/index/index.js b/app/pages/index/index.js
new file mode 100644 (file)
index 0000000..97f6cda
--- /dev/null
@@ -0,0 +1,8 @@
+'use strict';
+
+angular.module("DivinElegy.pages.index", [])
+
+.controller("IndexController", ['$scope', function($scope)
+{
+    $scope.simpleVariable = 'hello';
+}]);
\ No newline at end of file
diff --git a/app/pages/upload/style.css b/app/pages/upload/style.css
new file mode 100644 (file)
index 0000000..7dc5985
--- /dev/null
@@ -0,0 +1,69 @@
+canvas {
+    background-color: #f3f3f3;
+    -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
+    -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
+    box-shadow: 3px 3px 3px 0 #e3e3e3;
+    border: 1px solid #c3c3c3;
+    height: 100px;
+    margin: 6px 0 0 6px;
+}
+.nv-file-over {
+    background-color: #FFBEA3;
+}
+.other-drop-zone {
+    border: 2px dashed burlywood;
+    padding: 4px;
+    height: 100px;
+}
+.other-over-zone {
+    background-color: moccasin;
+}
+.bg {
+    background-color: lightgreen;
+}
+.over-zone {
+    border: 2px dashed lavender;
+    height: 100px;
+    padding: 4px;
+}
+.item-progress-box {
+    height: 20px;
+    margin-top: -20px;
+    margin-left: 60px;
+    margin-right: 10px;
+}
+.item-progress {
+    background-color: #90B8DA;
+    height: 100%;
+    width: 0;
+}
+.total-progress-box {
+    height: 20px;
+    margin-top: -20px;
+    margin-left: 90px;
+    margin-right: 10px;
+}
+.total-progress {
+    background-color: #90B8DA;
+    height: 100%;
+    width: 0;
+}
+.box {
+    margin: 20px;
+}
+.progress {
+    background-color: mediumpurple;
+    height: 20px;
+}
+.uploaded {
+    background-color: lightgreen;
+    height: 20px;
+    width: 100px;
+}
+ul > li:nth-child(odd) {
+    background-color: #f5f5f5;
+    margin: 2px;
+}
+.zone {
+    width: 49%;
+}
\ No newline at end of file
diff --git a/app/pages/upload/upload.html b/app/pages/upload/upload.html
new file mode 100644 (file)
index 0000000..154791b
--- /dev/null
@@ -0,0 +1,48 @@
+<div ng-show="uploader.isHTML5">
+    <div class="over-zone zone" nv-file-drop="" nv-file-over="" uploader="uploader" style="float: left;">
+        Base drop zone indication
+    </div>
+    <div style="clear: both;"></div>
+</div>
+<br />
+<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
+<input type="file" nv-file-select="" uploader="uploader" multiple />
+<h2>The queue. Length: {{ uploader.queue.length}}</h2>
+<ul>
+    <li ng-repeat="item in uploader.queue">
+        <div>Name: {{ item.file.name}}</div>
+        <div>Size: {{ item.file.size / 1024 / 1024|number:2 }} Mb</div>
+        <div ng-show="uploader.isHTML5">
+            Progress: {{ item.progress}}
+            <div class="item-progress-box">
+                <div class="item-progress" ng-style="{ 'width': item.progress + '%' }"></div>
+            </div>
+        </div>
+        <div ng-if="controller.isImage(item._file)">
+            Thumbnail (only images):
+            <!-- Image preview -->
+            <!--auto height-->
+            <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
+            <!--auto width-->
+            <div ng-thumb="{ file: item._file, height: 100 }"></div>
+            <!--fixed width and height -->
+            <!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
+        </div>
+        <div>
+            <button ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">Upload</button>
+            <button ng-click="item.cancel()" ng-disabled="!item.isUploading">Cancel</button>
+            <button ng-click="item.remove()">Remove</button>
+        </div>
+    </li>
+</ul>
+<div>
+    <div>
+        Total progress: {{ uploader.progress}}
+        <div class="total-progress-box">
+            <div class="total-progress" ng-style="{ 'width': uploader.progress + '%' }"></div>
+        </div>
+    </div>
+    <button ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">Upload all</button>
+    <button ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">Cancel all</button>
+    <button ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">Remove all</button>
+</div>
\ No newline at end of file
diff --git a/app/pages/upload/upload.js b/app/pages/upload/upload.js
new file mode 100644 (file)
index 0000000..3f379ea
--- /dev/null
@@ -0,0 +1,20 @@
+'use strict';
+
+angular.module("DivinElegy.pages.upload", ['angularFileUpload'])
+
+.controller("UploadController", ['$scope', 'FileUploader', function($scope, FileUploader)
+{
+    var uploader = $scope.uploader = new FileUploader(
+    {
+        url: 'http://rock.divinelegy.meeples/simfiles/upload'
+    });
+    
+    uploader.filters.push(
+    {
+        name: 'customFilter',
+        fn: function(item, options)
+        {
+            return this.queue.length < 10;
+        }
+    });
+}]);
\ No newline at end of file
index 6afd91a..a5feb7c 100644 (file)
@@ -11,6 +11,7 @@
     "angular-loader": "1.2.x",
     "angular-mocks": "~1.2.x",
     "html5-boilerplate": "~4.3.0",
-    "angular-file-upload": "1.1.1"
+    "angular-file-upload": "1.1.1",
+    "hello": "1.2.1"
   }
 }