Added ability to close the login box (it redirects to home page).

modified: Gemfile.lock modified: app/assets/javascripts/angular/controllers/login.js modified: app/assets/javascripts/angular/directives/auth.js modified: app/assets/javascripts/angular/services/services.js modified: app/assets/javascripts/app.js modified: app/assets/stylesheets/_base.css.scss modified: app/assets/stylesheets/_layout.css.scss modified: app/assets/stylesheets/_login_control.css.scss modified: app/assets/templates/error_404.html modified: app/assets/templates/home.html modified: app/assets/templates/projects_index.html modified: app/views/layouts/application.html.erb
QutEcoacoustics · Dec 18, 2012 · 57e88c0 · 57e88c0
1 parent 57f920e
commit 57e88c0
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 78 deletions.
diff --git a/app/assets/javascripts/angular/controllers/login.js b/app/assets/javascripts/angular/controllers/login.js
@@ -1,15 +1,15 @@
-function LoginCtrl($scope, $http, authService, AuthenticationProviders) {
+function LoginCtrl($scope, $http, $location, authService, AuthenticationProviders) {
 
     $scope.requireMoreInformation = null;
     $scope.additionalInformation = null;
 
-
     $scope.submit = function (provider) {
 
        var authProvider = AuthenticationProviders[provider];
 
         if (!authProvider) {
-            throw "LoginCtrl:submit: Unknown Provider!"
+            console.error('Unknown provider',authProvider, provider);
+            throw "LoginCtrl:submit: Unknown Provider!";
         }
 
         if (authProvider.requires) {
@@ -20,7 +20,6 @@ function LoginCtrl($scope, $http, authService, AuthenticationProviders) {
                 return;
             }
 
-
             authProvider.login($scope.additionalInformation);
 
             $scope.requireMoreInformation = null;
@@ -39,31 +38,36 @@ function LoginCtrl($scope, $http, authService, AuthenticationProviders) {
 
     $scope.logout = function() {
 
-        var p, ap;
+        var provider, actualProvider;
         try {
-            p = $scope.$root.userData.provider_id;
+            provider = $scope.$root.userData.provider_id;
+        }
+        catch(e){
+            console.error('Error getting provider id', e);
         }
-        catch(e){}
 
-        if (p) {
-            ap = AuthenticationProviders[p];
-            if (ap) {
-                ap.logout();
+        if (provider) {
+            actualProvider = AuthenticationProviders[provider];
+            if (actualProvider) {
+                actualProvider.logout();
+                //$reloadView();
             }
         }
     };
 
-    $scope.loggedIn = false;
+    $scope.cancelLogin = function(){
+        $scope.$emit('event:auth-loginCancelled');
+        $location.path('/')
+    };
+
+
     $scope.displayName = "";
     $scope.email = "";
 
-    $scope.$watch('$root.userData', function (){
-        var token = $scope.$root.authorisationToken,
-            userData = $scope.$root.userData;
-        $scope.loggedIn = (token && userData) ? true : false;
+    $scope.$watch('$root.loggedIn', function (){
         if ($scope.loggedIn) {
-            $scope.displayName = userData.friendly_name;
-            $scope.email = userData.email;
+            $scope.displayName = $scope.userData.friendly_name;
+            $scope.email = $scope.userData.email;
         }
         else{
             $scope.userName = "";
@@ -73,4 +77,4 @@ function LoginCtrl($scope, $http, authService, AuthenticationProviders) {
 
 }
 
-LoginCtrl.$inject = ['$scope', '$http', 'authService', 'AuthenticationProviders'];
+LoginCtrl.$inject = ['$scope', '$http', '$location', 'authService', 'AuthenticationProviders'];
diff --git a/app/assets/javascripts/angular/directives/auth.js b/app/assets/javascripts/angular/directives/auth.js
@@ -18,19 +18,30 @@ angular.module('angular-auth', ['http-auth-interceptor'])
 
                 scope.$on('event:auth-loginRequired', function () {
                     // TODO: add extra checks to stop multiple animations
-
-                    if (login.is(':animated')) {
-                        // noop
-                    }
-                    else {
+                    var loginIsVisible = $('#login-holder').is(':visible');
+                    var loginIsHidden = $('#login-holder').is(':hidden');
+                    var mainIsVisible = $('#content').is(':visible');
+                    var mainIsHidden = $('#content').is(':hidden');
+
+                    if(loginIsVisible || !loginIsHidden || !mainIsVisible || mainIsHidden || login.is(':animated')){
+                        // noop - do nothing, since login is already shown
+                    }else {
                         console.warn("sliding login window down");
                         login.slideDown('slow', function () {
 
                             main.hide();
                         });
                     }
                 });
+
                 scope.$on('event:auth-loginConfirmed', function () {
+                    console.warn("sliding login window up");
+                    main.show();
+                    login.slideUp();
+                });
+
+                scope.$on('event:auth-loginCancelled', function () {
+                    console.warn("sliding login window up");
                     main.show();
                     login.slideUp();
                 });

diff --git a/app/assets/javascripts/angular/services/services.js b/app/assets/javascripts/angular/services/services.js
@@ -162,7 +162,7 @@
                 login:  openIdLogin,
                 logout: signOut,
                 requires: {
-                    text: "Enter your OpenID URL",
+                    text: "Enter your OpenID URL:",
                     type: "url"
                 }
             }

diff --git a/app/assets/javascripts/app.js b/app/assets/javascripts/app.js
@@ -23,7 +23,7 @@ var bawApp = (function (undefined) {
         var path = "/" + resourceName;
         var detailsPath = path + "/" + id;
         var asset = "/assets/" + resourceName + "_index.html";
-        var asset_details = "/assets/" + singularResourceName + "_details.html";
+        var assetDetails = "/assets/" + singularResourceName + "_details.html";
 
         return this
             // many
@@ -33,11 +33,11 @@ var bawApp = (function (undefined) {
                 this.when(path + "/manage", {templateUrl: asset.replace("index.html", "manager.html"), controller: controllerMany})
             })
             // details
-            .when(detailsPath, {templateUrl: asset_details, controller: controllerOne})
+            .when(detailsPath, {templateUrl: assetDetails, controller: controllerOne})
             // create
-            .when(path + "/create", {templateUrl: asset_details, controller: controllerOne})
+            .when(path + "/create", {templateUrl: assetDetails, controller: controllerOne})
             // edit
-            .when(detailsPath + "/:editing", {templateUrl: asset_details, controller: controllerOne})
+            .when(detailsPath + "/:editing", {templateUrl: assetDetails, controller: controllerOne})
             ;
     }
 
@@ -90,8 +90,8 @@ var bawApp = (function (undefined) {
 
             //when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
             when('/', {templateUrl: '/assets/home.html', controller: HomeCtrl}).
-            when('/404', {controller: ErrorCtrl}).
-            when('/404?path=:errorPath', {controller: ErrorCtrl}).
+            when('/404', {templateUrl: '/assets/error_404.html', controller: ErrorCtrl}).
+            when('/404?path=:errorPath', {templateUrl: '/assets/error_404.html', controller: ErrorCtrl}).
             otherwise({
                 redirectTo: function (params, location, search) {
                     return '/404?path=' + location;
@@ -176,6 +176,15 @@ var bawApp = (function (undefined) {
             return angularCopies.toKeyValue($rootScope.authTokenParams());
         };
 
+        $rootScope.loggedIn = false;
+
+        $rootScope.$watch('userData', function (){
+            var token = $rootScope.authorisationToken,
+                userData = $rootScope.userData;
+            $rootScope.loggedIn = (token && userData) ? true : false;
+
+        });
+
 
     }]);
 

diff --git a/app/assets/stylesheets/_base.css.scss b/app/assets/stylesheets/_base.css.scss
@@ -63,6 +63,7 @@ $standard-glow-alpha: 0.2;
 
 @mixin gradient($type, $to...) {
   // old browsers
+  // http://www.colorzilla.com/gradient-editor/
   background-color: nth($to, 1);
 
   @if $type == "linear" {

diff --git a/app/assets/stylesheets/_layout.css.scss b/app/assets/stylesheets/_layout.css.scss
@@ -29,19 +29,26 @@ a {
   color: nth($master-dark, 1);
 
   &:visited {
-    color: nth($master-dark-2, 1);;
+    color: nth($master-dark-2, 1);
   }
 
   &:hover {
-    text-decoration: none;
     color: nth($master-highlight, 1);
   }
 
   &:active {
-    color: nth($master-complementary, 1)
+    color: nth($master-complementary, 1);
   }
 }
 
+h2 {
+  margin: 0.83em 0;
+}
+
+h3 {
+  margin: 0.70em 0;
+}
+
 baw-debug-info {
   margin-top: 2em;
 }
@@ -66,7 +73,6 @@ html {
 }
 
 label {
-  display: block;
 
   &>span {
     display: block;
@@ -126,24 +132,46 @@ ul {
   }
 }
 
+button {
+  padding: 1px 6px;
+  margin: 2px;
+}
+
 /*
  *
  *  Specific styles
  *
  */
 $footer-height: 40px;
 
-
 /* Header
 -----------------------------------------------------------------------------*/
 header {
-    height: 75px;
-    background: nth($master-highlight-2, 1);
-    border-bottom:2px solid nth($master-highlight, 1);
-    h1 {
-      font-size:2em;
-      padding:15px 0 0 15px;
+  height: 60px;
+  @include gradient("linear", nth($master-highlight-2,1) , nth($master-highlight-2,2));
+  border-bottom:2px solid nth($master-highlight, 1);
+  margin: 0;
+  & h1 {
+    font-size: 2em;
+    margin: 0 0 0 15px;
+    float:left;
+    line-height:60px;
+    & a {
+      text-decoration: none;
     }
+  }
+  & ul {
+    list-style-type: none;
+    float: right;
+    line-height:60px;
+    margin: 0 15px 0 0;
+    & li {
+      display: inline-block;
+      padding: 0;
+      margin: 3px;
+      float:left;
+    }
+  }
 }
 
 /* Middle
@@ -155,23 +183,22 @@ header {
   height: auto !important;
   //height: 100%;
   position: relative;
-  top: -5px;
+  //top: -5px;
 }
 
 #content-wrapper{
-  margin-top:    5px;
+  margin-top:    0px;
   margin-right:  15px;
   margin-left:   15px;
   margin-bottom: $footer-height;
 
+  padding-top:  15px;
 }
 
-
 #content {
   margin:5px 15px;
 }
 
-
 /* Footer
 -----------------------------------------------------------------------------*/
 footer {
@@ -190,9 +217,6 @@ footer {
     }
 }
 
-
-
-
 /* General Classes
 -----------------------------------------------------------------------------*/
 .short-guid {

diff --git a/app/assets/stylesheets/_login_control.css.scss b/app/assets/stylesheets/_login_control.css.scss
@@ -73,6 +73,15 @@ body.waiting-for-angular div#initializing-panel {
   position: relative;
   width: 508px;
 }
+#loginboxclose{
+  position:absolute;
+  top:10px;
+  right:10px;
+  font-weight: bold;
+  font-size: 16px;
+  font-family: monospace;
+  text-decoration: none;
+}
 #login-inner {
   font-family: Tahoma;
   font-size: 13px;

diff --git a/app/assets/templates/error_404.html b/app/assets/templates/error_404.html
@@ -0,0 +1 @@
+not found
diff --git a/app/assets/templates/home.html b/app/assets/templates/home.html
@@ -1,16 +1,31 @@
 <div id="content" data-ng-controller="HomeCtrl">
-    <h2>Welcome</h2>
-
-    <p>{{welcomeMessage}}</p>
-
-<a href="/projects">Projects</a>
-<a href="/sites">Sites</a>
-<a href="/photos">Photos</a>
-<a href="/recordings">Audio Recordings</a>
+    <h2>Home</h2>
+    <p>
+        Welcome to a place where you can listen, learn, share your discoveries and help out the environment!
+        The Bioacoustic Workbench is a repository for audio recordings of the environment and tools that aid in
+        analysing the sounds.
+    </p>
+    <p>
+        We gather recordings from a wide range of environments, find practical ways to annotate
+        the sounds with information about what's going on in them, and then enable that
+        information to be put to use by ecologists and other parties interested in conservation.
+    </p>
+    <p ng-show="loggedIn">
+        Welcome back to the Bioacoustic Workbench, <span>{{userData.friendly_name}}</span>! We're glad you're here.
+    </p>
+    <p ng-hide="loggedIn" ng-controller="LoginCtrl">
+        Time to get started! You can <a href ng-click="login()">sign in</a> using an account you have at an external website.
+    </p>
 
-<a href="/listen">Listen</a>
-<a href="/listen/1bd0d668-1471-4396-adc3-09ccd8fe949a">Listen2</a>
+    <p>
+        <a href="/projects">Projects</a>
+        <a href="/sites">Sites</a>
+        <a href="/photos">Photos</a>
+        <a href="/recordings">Audio Recordings</a>
 
+        <a href="/listen">Listen</a>
+        <a href="/listen/1bd0d668-1471-4396-adc3-09ccd8fe949a">Listen2</a>
+    </p>
     <p>
         <a href="/search/">New search</a>
         <a href="/searches/">Saved searches</a>
@@ -21,5 +36,4 @@ <h3>Download annotations</h3>
         Download all annotations on site (temporary). In
         <a ng-href="{{downloadAnnotationLink}}" target="_blank" >csv</a> format.
     </p>
-
 </div>