git.fiddlerwoaroof.com
Browse code

Split login into its own html file

- Implementing it as an angular route had a couple annoying side-effects
that this commit fixed
- Sometimes, clicking the "login" button didn't seem to take.
- Logging out didn't necessarily clear stored data

fiddlerwoaroof authored on 11/09/2015 04:38:42
Showing 4 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,2 @@
1
+marrow
2
+marrowpass
0 3
new file mode 100644
... ...
@@ -0,0 +1,322 @@
1
+window.URL = window.URL || window.webkitURL;
2
+var marrowApp = angular.module('marrowApp', ['ngRoute', 'marrowApp.services', 'marrowApp.directives', 'marrowApp.utils',
3
+                                             'marrowApp.directives.boneList', 'marrowApp.directives.userBadge',
4
+                                             'angulartics', 'angulartics.google.analytics', 'angulartics.piwik']);
5
+
6
+marrowApp.config(['$routeProvider',
7
+  function($routeProvider) {
8
+    $routeProvider.
9
+      when('/random', {templateUrl: 'partials/random.html', controller: 'RandomMarrowCtrl'}).
10
+      when('/settings', {templateUrl: 'partials/user-settings.html', controller: 'UserSettingCtrl'}).
11
+      when('/subscriptions', {templateUrl: 'partials/subscription.html', controller: 'SubscriptionCtrl'}).
12
+      when('/', {templateUrl: 'partials/default.html', controller: 'MarrowCtrl'}).
13
+      when('/user/:user', {template: '<div ng-include="templateUrl">Loading...</div>', controller: 'UserCtrl'});
14
+  }
15
+])
16
+.factory('authHttpResponseInterceptor',['$q','$location', '$window',function($q,$location,$window){
17
+    return {
18
+        response: function(response){
19
+            if (response.status === 401) {
20
+                console.log("Response 401");
21
+            }
22
+            return response || $q.when(response);
23
+        },
24
+        responseError: function(rejection) {
25
+            if (rejection.status === 401) {
26
+                console.log("Response Error 401",rejection);
27
+                $window.location.href = '/login.html#' + encodeURIComponent($location.path());
28
+            }
29
+            return $q.reject(rejection);
30
+        }
31
+    };
32
+}])
33
+.config(['$httpProvider',function($httpProvider) {
34
+    //Http Intercpetor to check auth failures for xhr requests
35
+    $httpProvider.interceptors.push('authHttpResponseInterceptor');
36
+}]);
37
+
38
+marrowApp.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode(true); }]);
39
+
40
+//marrowApp.controller('LoginCtrl', function ($scope,$http,$route,$location) {
41
+<<<<<<< HEAD
42
+//  $scope.tab = 'login';
43
+
44
+//  $scope.message = '';
45
+
46
+//  var check_login = function () {
47
+//    var injector = angular.injector(['ng']);
48
+//    var $http = injector.get('$http');
49
+=======
50
+//  $scope.message = '';
51
+//
52
+//  var check_login = function () {
53
+//    injector = angular.injector(['ng']);
54
+//    $http = injector.get('$http');
55
+>>>>>>> Split login into its own html file
56
+//    return $http.get("/api/user/check").success(function(is_loggedon) {
57
+//      if (is_loggedon.result === true) {
58
+//        angular.element(document.body).addClass('is-logged-on');
59
+//      }
60
+//    });
61
+//  };
62
+<<<<<<< HEAD
63
+
64
+=======
65
+//
66
+>>>>>>> Split login into its own html file
67
+//  check_login().success(
68
+//    function(is_loggedon) {
69
+//      if (is_loggedon.result) { $location.url('/');}
70
+//  });
71
+<<<<<<< HEAD
72
+
73
+=======
74
+//
75
+>>>>>>> Split login into its own html file
76
+//  $scope.newuser = function () {
77
+//    var username = $scope.username;
78
+//    var password = $scope.password;
79
+//    var postObj = {"username":username, "password": password};
80
+//    $http.post("/api/user/add", postObj)
81
+//    .success(function(added_user) {
82
+//      if (added_user.status === true) {$location.url('/');}
83
+//      else {$scope.message = added_user.message;}
84
+//    });
85
+//  };
86
+<<<<<<< HEAD
87
+
88
+//  $scope.login = function () {
89
+//    var username = $scope.username;
90
+//    var password = $scope.password;
91
+
92
+=======
93
+//
94
+//  $scope.login = function () {
95
+//    var username = $scope.username;
96
+//    var password = $scope.password;
97
+//
98
+>>>>>>> Split login into its own html file
99
+//    $http.post("/api/user/login", {"username":username, "password":password})
100
+//    .success(
101
+//      function (login_succeeded) {
102
+//        var el = angular.element(document.querySelector('#login_form'));
103
+//        if (login_succeeded.status === true) {$location.url('/');}
104
+//        else {$scope.message = login_succeeded.message;}
105
+//    });
106
+//  };
107
+//});
108
+
109
+<<<<<<< HEAD
110
+marrowApp.controller('RootCtrl', function ($scope,$http,$location,$route, SubscribedTo, BoneService, UserService) {
111
+=======
112
+marrowApp.controller('RootCtrl', function ($scope,$http,$location,$route, SubscribedTo, BoneService, UserService, $window) {
113
+>>>>>>> Split login into its own html file
114
+  $scope.url = "";
115
+  $scope.title = "";
116
+
117
+  $scope.toggleSubscribe = function (txt) {
118
+    var postObj = {"from":$scope.bone.sectionTitle, "to":$scope.bone.sectionTitle};
119
+    var promise = null;
120
+
121
+    if ($scope.iFollow.follows) {
122
+      promise = $http.post('/api/bones/unsubscribe', postObj);
123
+    } else {
124
+      promise = $http.post('/api/bones/subscribe', postObj);
125
+    }
126
+
127
+    return promise.success(function(result) {
128
+      result = JSON.parse(result);
129
+      if (result) {
130
+        $scope.iFollow.follows = ! $scope.iFollow.follows;
131
+      }
132
+    });
133
+  };
134
+
135
+  $scope.bone = {sectionTitle: "", marrow: []};
136
+  $scope.friends = {data: []};
137
+
138
+  $scope.update = function() {
139
+    var config = {params: $scope.args? $scope.args: {}};
140
+    return $scope.getendpoint($scope.serviceParams, function(data) {
141
+      $scope.bone.sectionTitle = data.sectionTitle;
142
+      $scope.bone.marrow = data.marrow;
143
+      $scope.iFollow = UserService.follows({user:$scope.bone.sectionTitle});
144
+    }).$promise.then($scope._update);
145
+  };
146
+
147
+  UserService.check(function(is_loggedon) {
148
+    if (is_loggedon.result === true) {
149
+      angular.element(document.body).addClass('is-logged-on');
150
+    } else {
151
+<<<<<<< HEAD
152
+      //$window.location.href = '/login.html';
153
+=======
154
+      $window.location.href = '/login.html';
155
+>>>>>>> Split login into its own html file
156
+    }
157
+
158
+    $scope.update();
159
+  });
160
+
161
+});
162
+
163
+marrowApp.controller('RandomMarrowCtrl', function ($controller, $scope,$http,$location,$route, SubscribedTo, BoneService, UserService) {
164
+  $scope._update = function() {};
165
+  $scope.getendpoint = BoneService.random;
166
+  angular.extend(this, $controller('RootCtrl', {$scope: $scope}));
167
+});
168
+
169
+marrowApp.controller('SubscriptionCtrl', function ($controller,$scope,$http,$location,$route, SubscribedTo, BoneService, UserService) {
170
+  $scope.uncheckOthers = function (list) {
171
+    for (var n in list) {
172
+      if (n !== 'all' && list[n] === true) { list[n] = false; }
173
+    }
174
+  };
175
+
176
+  $scope.friend = Object.create(null);
177
+  $scope.friend.all = true;
178
+
179
+  $scope.upVote = function(boneItem) {
180
+    var apiCall = boneItem.myVote === 0? BoneService.vote_up: BoneService.vote_zero;
181
+    apiCall({url: boneItem.url}).$promise.then(function(r) {
182
+      if (r.success) {
183
+        boneItem.votes = r.votes;
184
+        boneItem.myVote = r.myVote;
185
+      }
186
+    }).then($scope._update);
187
+  };
188
+
189
+  $scope.backAPage = function() {
190
+    var bone = $scope.bone.marrow;
191
+    var lastitem = bone[bone.length-1].posted;
192
+    BoneService.subscriptions({before: lastitem}).$promise.then(function(r) {
193
+      while (r.marrow.length) {
194
+        $scope.bone.marrow.push(r.marrow.shift());
195
+      }
196
+    }).then($scope._update);
197
+  };
198
+
199
+  $scope.emptyOrEquals = function(actual, expected) {
200
+    var result = false;
201
+    if (!expected) { result = true; }
202
+    else if (expected.all) { result = true; }
203
+    else {result = expected[actual]; }
204
+    return result;
205
+  };
206
+
207
+  $scope.getBucket = function(date, buckets, classes) {
208
+    date = Date.parse(date);
209
+    var result = buckets.filter(function(x) {
210
+      return x >= date;
211
+    });
212
+    return classes[result[result.length-1]];
213
+  };
214
+
215
+  $scope.following_set = Object.create(null);
216
+  $scope._update = function() {
217
+    var marrow = $scope.bone.marrow;
218
+    var first = marrow[0].posted, last = marrow[marrow.length-1].posted;
219
+    first = Date.parse(first);
220
+    last = Date.parse(last);
221
+    var range = first - last;
222
+    console.log(range);
223
+    var bucketWidth = Math.ceil(range/20);
224
+    var buckets = [];
225
+    var bucketClasses= {};
226
+    for (var x = first; x > last; x -= bucketWidth) {
227
+      buckets.push(x);
228
+    }
229
+    for (var x = 0; x < 20; x++) { // jshint ignore:line
230
+      var bucket = x;
231
+      bucketClasses[buckets[bucket]] = 'bucket-'+bucket;
232
+    }
233
+    $scope.bone.marrow.map(function(o) {
234
+      o.colorClass = $scope.getBucket(o.posted, buckets, bucketClasses);
235
+      if (!(o.poster in $scope.following_set)) {
236
+        $scope.following_set[o.poster] = true;
237
+        $scope.friends.data.push(o.poster);
238
+      }
239
+    });
240
+    $scope.friends.reps = UserService.reputations($scope.friends.data);
241
+  };
242
+
243
+  $scope.getendpoint = BoneService.subscriptions;
244
+  angular.extend(this, $controller('RootCtrl', {$scope: $scope}));
245
+});
246
+
247
+marrowApp.controller('MarrowCtrl', function ($controller,$scope,$http,$location,$route, SubscribedTo, BoneService, UserService) {
248
+  $scope.postobj = {url: "", title: ""};
249
+
250
+  $scope.delete = function (linkid) {
251
+    $http.delete('/api/bones/link/'+linkid).success(function (deleted) {
252
+      deleted = JSON.parse(deleted);
253
+      if (deleted === true) { $scope.update(); }
254
+    });
255
+  };
256
+
257
+  $scope.addLink = function() {
258
+    $http.post('/api/bones/add', $scope.postobj).success(function(data) {
259
+      if (data.success) {
260
+        $scope.postobj.url = "";
261
+        $scope.update();
262
+      }
263
+    });
264
+  };
265
+
266
+  if ($scope.getendpoint === undefined) {
267
+    $scope.getendpoint = BoneService.get;
268
+  }
269
+  angular.extend(this, $controller('RootCtrl', {$scope: $scope}));
270
+});
271
+
272
+marrowApp.controller('UserCtrl', function ($controller, $scope,$http,$routeParams, UserService, BoneService) {
273
+  var user = $routeParams.user;
274
+  $scope.getendpoint = BoneService.user;
275
+  $scope.serviceParams = {user: user};
276
+
277
+  angular.extend(this, $controller('MarrowCtrl', {$scope: $scope}));
278
+  $scope._update = function() {
279
+    $scope.iFollow.$promise.then(function(result) {
280
+      $scope.templateUrl = result.me === user? "/partials/default.html": "/partials/random.html";
281
+    });
282
+  };
283
+
284
+});
285
+
286
+marrowApp.controller('UserSettingCtrl', function ($scope,$http,$location) {
287
+  $scope.oldPassword = '';
288
+  $scope.newPassword = '';
289
+  $scope.changePassword = function() {
290
+    var postObj = {"old_password": $scope.oldPassword, "new_password": $scope.newPassword};
291
+    $http.post('/api/user/change-password', postObj).success(function(result) {
292
+      if (result.status === true) {
293
+        $location.url('/');
294
+      } else {
295
+        $scope.message = result.message;
296
+      }
297
+    });
298
+  };
299
+});
300
+
301
+marrowApp.controller('SidebarCtrl', function ($scope,$http,$location,$route, $window) {
302
+  $scope.subscriptions = function() {
303
+    if ($location.url() !== '/subscriptions') { $location.url('/subscriptions'); }
304
+    else { $route.reload(); }
305
+  };
306
+
307
+  $scope.random = function() {
308
+    if ($location.url() !== '/random') { $location.url('/random'); }
309
+    else { $route.reload(); }
310
+  };
311
+
312
+  $scope.logout = function() {
313
+    $http.get('/api/user/logout').success(function() {
314
+<<<<<<< HEAD
315
+      $window.location.href = '/';
316
+=======
317
+      $window.location.href = '/login.html';
318
+>>>>>>> Split login into its own html file
319
+    });
320
+  };
321
+});
322
+
0 323
new file mode 100644
... ...
@@ -0,0 +1,49 @@
1
+<<<<<<< HEAD
2
+window.URL = window.URL || window.webkitURL;
3
+var loginModule = angular.module('marrowLogin', ['ngResource','ngRoute','angulartics', 'angulartics.google.analytics']);
4
+=======
5
+var loginModule = angular.module('marrowApp.login', ['ngResource','ngRoute','angulartics', 'angulartics.google.analytics']);
6
+>>>>>>> Split login into its own html file
7
+
8
+loginModule.controller('LoginCtrl', function ($scope,$http,$route,$window) {
9
+  $scope.message = '';
10
+
11
+  var check_login = function () {
12
+    injector = angular.injector(['ng']);
13
+    $http = injector.get('$http');
14
+    return $http.get("/api/user/check").success(function(is_loggedon) {
15
+      if (is_loggedon.result === true) {
16
+        angular.element(document.body).addClass('is-logged-on');
17
+      }
18
+    });
19
+  };
20
+
21
+  check_login().success(
22
+    function(is_loggedon) {
23
+      if (is_loggedon.result) { $window.location.href = '/';}
24
+  });
25
+
26
+  $scope.newuser = function () {
27
+    var username = $scope.username;
28
+    var password = $scope.password;
29
+    var postObj = {"username":username, "password": password};
30
+    $http.post("/api/user/add", postObj)
31
+    .success(function(added_user) {
32
+      if (added_user.status === true) {$window.location.href = '/';}
33
+      else {$scope.message = added_user.message;}
34
+    });
35
+  };
36
+
37
+  $scope.login = function () {
38
+    var username = $scope.username;
39
+    var password = $scope.password;
40
+
41
+    $http.post("/api/user/login", {"username":username, "password":password})
42
+    .success(
43
+      function (login_succeeded) {
44
+        var el = angular.element(document.querySelector('#login_form'));
45
+        if (login_succeeded.status === true) {$window.location.href = '/';}
46
+        else {$scope.message = login_succeeded.message;}
47
+    });
48
+  };
49
+});
0 50
new file mode 100644
... ...
@@ -0,0 +1,75 @@
1
+<html lang="en">
2
+<head>
3
+  <title>Marrow</title>
4
+  <base href="/login.html" />
5
+  <meta charset="utf-8">
6
+  <meta name="msapplication-TileColor" content="#000000">
7
+  <meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png">
8
+  <meta name="msapplication-config" content="/images/icons/browserconfig.xml">
9
+  <meta name="theme-color" content="#000000">
10
+  <meta name="viewport" content="width=device-width, initial-scale=1">
11
+
12
+  <!-- Favicons/App Icons -->
13
+  <link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png">
14
+  <link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png">
15
+  <link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png">
16
+  <link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png">
17
+  <link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png">
18
+  <link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png">
19
+  <link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png">
20
+  <link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png">
21
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon-180x180.png">
22
+  <link rel="icon" type="image/png" href="/images/icons/favicon-32x32.png" sizes="32x32">
23
+  <link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192">
24
+  <link rel="icon" type="image/png" href="/images/icons/favicon-96x96.png" sizes="96x96">
25
+  <link rel="icon" type="image/png" href="/images/icons/favicon-16x16.png" sizes="16x16">
26
+  <link rel="manifest" href="/images/icons/manifest.json">
27
+  <link rel="shortcut icon" href="/images/icons/favicon.ico">
28
+  <!-- JS -->
29
+  <script src="//crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
30
+  <script src="/lib/angular.min.js"></script>
31
+  <script src="/lib/angular-route.min.js"></script>
32
+  <script src="/lib/angular-resource.min.js"></script>
33
+  <script src="/lib/angulartics.min.js"></script>
34
+  <script src="/lib/angulartics-ga.min.js"></script>
35
+  <script src="/js/new/login.js"></script>
36
+  <!-- CSS -->
37
+  <link rel="stylesheet" href="/lib/formalize.css" media="screen" />
38
+  <link rel="stylesheet" href="/css/main.css" media="screen" />
39
+</head>
40
+
41
+<body ng-app="marrowLogin">
42
+  <header>
43
+    <h1 class="site-logo">Marrow</h1>
44
+  </header>
45
+  <main ng-controller="LoginCtrl">
46
+  <div id="login_form">
47
+    <form>
48
+      <div class="message">{{message}}</div>
49
+      <input type="text" ng-model="username" placeholder="Username" />
50
+      <input type="password" ng-model="password" placeholder="Password" />
51
+      <button ng-click="login()">Log In</button>
52
+      <button ng-click="newuser()">Add User</button>
53
+    </form>
54
+  </div>
55
+  </main>
56
+<!-- Piwik -->
57
+<script type="text/javascript">
58
+  var _paq = _paq || [];
59
+  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
60
+  _paq.push(["setCookieDomain", "*.joinmarrow.com"]);
61
+  _paq.push(["setDomains", ["*.joinmarrow.com"]]);
62
+  _paq.push(['trackPageView']);
63
+  _paq.push(['enableLinkTracking']);
64
+  (function() {
65
+    var u="//piwik.elangley.org/";
66
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
67
+    _paq.push(['setSiteId', 2]);
68
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
69
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
70
+  })();
71
+</script>
72
+<noscript><p><img src="//piwik.elangley.org/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
73
+<!-- End Piwik Code -->
74
+</body>
75
+</html>