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
requirements.txt
History View file @ 4448c85
... ... 
@@ -1,7 +1,10 @@
1 1 
 Flask==0.10.1
2 
-Flask-Cors==2.0.1
3 
-Flask-Limiter==0.8
4 
-Flask-Login==0.2.11
2 
+Flask-Cors==2.1.0
3 
+Flask-Limiter==0.8.1
4 
+Flask-Login==0.3.0
5 
+Flask-OAuth==0.12
6 
+Flask-Security==1.7.4
7 
+Flask-WTF==0.11
5 8 
 lxml==3.4.4
6 9 
 psycopg2==2.6.1
7 10 
 python-dateutil==2.4.2
static/js/new/controller.js
History View file @ 4448c85
... ... 
@@ -5,7 +5,6 @@ var marrowApp = angular.module('marrowApp', ['ngRoute', 'marrowApp.services', 'm
5 5 
 marrowApp.config(['$routeProvider',
6 6 
   function($routeProvider) {
7 7 
     $routeProvider.
8 
-      when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'}).
9 8 
       when('/random', {templateUrl: 'partials/random.html', controller: 'RandomMarrowCtrl'}).
10 9 
       when('/settings', {templateUrl: 'partials/user-settings.html', controller: 'UserSettingCtrl'}).
11 10 
       when('/subscriptions', {templateUrl: 'partials/subscription.html', controller: 'SubscriptionCtrl'}).
... ... 
@@ -97,7 +96,7 @@ marrowApp.controller('RootCtrl', function ($scope,$http,$location,$route, Subscr
97 96 
     if (is_loggedon.result === true) {
98 97 
       angular.element(document.body).addClass('is-logged-on');
99 98 
     } else {
100 
-      $location.url('/login');
99 
+      $window.location.href = '/login.html';
101 100 
     }
102 101
103 102 
     $scope.update();
... ... 
@@ -243,7 +242,7 @@ marrowApp.controller('UserSettingCtrl', function ($scope,$http,$location) {
243 242 
   };
244 243 
 });
245 244
246 
-marrowApp.controller('SidebarCtrl', function ($scope,$http,$location,$route) {
245 
+marrowApp.controller('SidebarCtrl', function ($scope,$http,$location,$route, $window) {
247 246 
   $scope.subscriptions = function() {
248 247 
     if ($location.url() !== '/subscriptions') { $location.url('/subscriptions'); }
249 248 
     else { $route.reload(); }
... ... 
@@ -256,7 +255,7 @@ marrowApp.controller('SidebarCtrl', function ($scope,$http,$location,$route) {
256 255
257 256 
   $scope.logout = function() {
258 257 
     $http.get('/api/user/logout').success(function() {
259 
-      $location.url('/login');
258 
+      $window.location.href = '/login.html';
260 259 
     });
261 260 
   };
262 261 
 });
static/js/new/login.js
History View file @ 4448c85
263 262 
new file mode 100644
... ... 
@@ -0,0 +1,44 @@
1 
+var loginModule = angular.module('marrowApp.login', ['ngResource','ngRoute','angulartics', 'angulartics.google.analytics']);
2 
+
3 
+loginModule.controller('LoginCtrl', function ($scope,$http,$route,$window) {
4 
+  $scope.message = '';
5 
+
6 
+  var check_login = function () {
7 
+    injector = angular.injector(['ng']);
8 
+    $http = injector.get('$http');
9 
+    return $http.get("/api/user/check").success(function(is_loggedon) {
10 
+      if (is_loggedon.result === true) {
11 
+        angular.element(document.body).addClass('is-logged-on');
12 
+      }
13 
+    });
14 
+  };
15 
+
16 
+  check_login().success(
17 
+    function(is_loggedon) {
18 
+      if (is_loggedon.result) { $window.location.href = '/';}
19 
+  });
20 
+
21 
+  $scope.newuser = function () {
22 
+    var username = $scope.username;
23 
+    var password = $scope.password;
24 
+    var postObj = {"username":username, "password": password};
25 
+    $http.post("/api/user/add", postObj)
26 
+    .success(function(added_user) {
27 
+      if (added_user.status === true) {$window.location.href = '/';}
28 
+      else {$scope.message = added_user.message;}
29 
+    });
30 
+  };
31 
+
32 
+  $scope.login = function () {
33 
+    var username = $scope.username;
34 
+    var password = $scope.password;
35 
+
36 
+    $http.post("/api/user/login", {"username":username, "password":password})
37 
+    .success(
38 
+      function (login_succeeded) {
39 
+        var el = angular.element(document.querySelector('#login_form'));
40 
+        if (login_succeeded.status === true) {$window.location.href = '/';}
41 
+        else {$scope.message = login_succeeded.message;}
42 
+    });
43 
+  };
44 
+});
static/login.html
History View file @ 4448c85
... ... 
@@ -1,7 +1,57 @@
1 
-<html>
2 
-<head></head>
3 
-<body>
4 
-  <form action="/api/login" method="post">
5 
-  </form>
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="marrowApp.login">
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>
6 56 
 </body>
7 57 
 </html>