Hide menu if user is not logged in

Will also prompt user to login if user has not logged in
yet. Furthermore I need to see if we actually need to
really delete cache before asking for the user info.
Hmm.

src/app/menu/menu.controller.ts

@@ -5,7 +5,8 @@ import {
   BackendService,
   WebPageService,
   TagStorageService,
-  FileService} from '../services/index';
+  FileService,
+  SettingsService} from '../services/index';
 
 import {IVMScope, ISense} from '../index.interfaces';
 
@@ -20,6 +21,7 @@ export class MenuCtrl {
     private BackendService: BackendService,
     private WebPageService: WebPageService,
     private TagStorageService: TagStorageService,
+    private SettingsService: SettingsService,
     private FileService: FileService) {
     
     $scope.vm = this;
@@ -129,4 +131,28 @@ export class MenuCtrl {
     return this.senses && this.senses.length == 0 && this.selectedWord
   }
 
+  /**
+   * In order to hide the menu before angular has loaded I 
+   * explicitly set display: none; on the div. 
+   * 
+   * Thus to override that after user has logged in 
+   * we use the ng-style attribute in combination with 
+   * this function below.
+   */
+  isUserLoggedIn() {
+    if (!this.SettingsService.isUserLoggedIn()) return null;
+    else return {display: 'block'};  
+  }
+
+  doLogin() {
+    this.$log.debug('doLogin()')
+    if (window.tagitTestMode || typeof chrome === 'undefined') return; //do nothing
+    chrome.runtime.sendMessage({command: 'loginAndRequestUserInfo'})
+  }
+
+  continueWithoutLoggingIn() {
+    this.$log.debug('continueWithoutLoggingIn()')
+    this.SettingsService.setLoggedIn(true);
+  }
+
 }

src/app/menu/menu.tpl.html

@@ -44,6 +44,10 @@
       background-color: #eee;
       cursor: pointer;
     }
+    
+    .ng-hide {
+      display: none !important;
+    }
   </style>
 
 </head>
@@ -65,39 +69,56 @@
 
         <br>
 
-        <p>Actions:
-          <a href ng-click="vm.downloadTagsForPage()">Download tags (current page)</a> |
-          <a href ng-click="vm.downloadAllTagsForDomain()">Download all tags (domain)</a> |
-          <a href ng-click="vm.removeTagsFromLocalStorage()">Delete tags from current page</a>
-        </p>
+        <div ng-show="!vm.isUserLoggedIn()">
+          <p>Welcome dear user!</p>
 
-        <p>
-          Mark one or two words on the page to the right. And we'll supply you with possible definitions. Select a definition and the
-          word will be tagged.
-        </p>
+          <p>Please login to use this application.</p>
 
-        <p ng-if="vm.selectedWord">
-          Currently selected word: <strong>{{vm.selectedWord}}</strong>
-        </p>
+          <p>
+            <a href ng-click="vm.doLogin()">Click here to log in</a>
+          </p>
+          <p>
+            <a href ng-click="vm.continueWithoutLoggingIn()">Click here to use application without logging in.</a>
+          </p>
 
-        <p ng-if="!vm.selectedWord">
-          Currently selected word: <strong>No word selected.</strong>
-        </p>
+        </div>
 
-        <center>
-          <div ng-if="vm.isLoadingSenses()" class="is-active mdl-spinner mdl-spinner--single-color mdl-js-spinner"></div>
-        </center>
+        <!-- use display none on element to hide element before angular is done loading -->
+        <div style="display: none;" ng-style="vm.isUserLoggedIn()">
+          <p>Actions:
+            <a href ng-click="vm.downloadTagsForPage()">Download tags (current page)</a> |
+            <a href ng-click="vm.downloadAllTagsForDomain()">Download all tags (domain)</a> |
+            <a href ng-click="vm.removeTagsFromLocalStorage()">Delete tags from current page</a>
+          </p>
 
-        <ul id="senses">
+          <p>
+            Mark one or two words on the page to the right. And we'll supply you with possible definitions. Select a definition and the
+            word will be tagged.
+          </p>
 
-          <li ng-if="vm.senses.length > 0">
-            <strong>Available sense tags:</strong>
-          </li>
+          <p ng-if="vm.selectedWord">
+            Currently selected word: <strong>{{vm.selectedWord}}</strong>
+          </p>
 
-          <li ng-click="vm.onSenseSelect(sense)" id="sense.senseid" ng-repeat="sense in vm.senses" class="list-unstyled">
-            <strong>{{sense.word}}</strong> {{sense.explanation}}
-          </li>
-        </ul>
+          <p ng-if="!vm.selectedWord">
+            Currently selected word: <strong>No word selected.</strong>
+          </p>
+
+          <center>
+            <div ng-if="vm.isLoadingSenses()" class="is-active mdl-spinner mdl-spinner--single-color mdl-js-spinner"></div>
+          </center>
+
+          <ul id="senses">
+
+            <li ng-if="vm.senses.length > 0">
+              <strong>Available sense tags:</strong>
+            </li>
+
+            <li ng-click="vm.onSenseSelect(sense)" id="sense.senseid" ng-repeat="sense in vm.senses" class="list-unstyled">
+              <strong>{{sense.word}}</strong> {{sense.explanation}}
+            </li>
+          </ul>
+        </div>
 
       </div>
 
@@ -110,15 +131,13 @@
           <p>
             <strong><label for="backend-url">Tag destination url:</label></strong>
             <input id="backend-url" type="text" ng-model="vm.serverToSendTo">
-            <br>
-            As you go about tagging pages the tags will be posted to this server endpoint.
+            <br> As you go about tagging pages the tags will be posted to this server endpoint.
           </p>
 
           <p>
             <strong><label for="tag-email">Tag email:</label></strong>
             <input id="tag-email" type="text" ng-model="vm.emailToTagWith">
-            <br>
-            The email that will be included in the tag when it's sent to the server.
+            <br> The email that will be included in the tag when it's sent to the server.
           </p>
 
         </form>
@@ -127,8 +146,6 @@
 
         <p><a href ng-click="vm.resetDefaults()">Reset to default settings</a></p>
 
-        <p><a href ng-click="vm.testLogin()">Do test login </a> (warning functionality currently being tested)</p>
-
       </div>
     </div>
   </div>

src/app/menu/settings.controller.ts

@@ -31,7 +31,7 @@ export class SettingsCtrl {
 
     $scope.vm = this;
     this.loadSettings()
-    this.startListeningForLogins()
+    this.startListeningToLoginStatus()
   }
 
   loadSettings() {
@@ -66,20 +66,32 @@ export class SettingsCtrl {
     this.SettingsService.resetSettings().then(() => this.loadSettings())
   }
 
-  testLogin() {
+  doLogin() {
     if (typeof chrome === 'undefined') return; //do nothing
-    chrome.runtime.sendMessage({command: 'requestUserInfo'})
+    chrome.runtime.sendMessage({command: 'loginAndRequestUserInfo'})
   }
 
-  startListeningForLogins() {
+  logoutUser() {
+    if (typeof chrome === 'undefined') return; //do nothing
+    chrome.runtime.sendMessage({command: 'logOutUser'})
+  }
+
+  startListeningToLoginStatus() {
+    if (window.tagitTestMode || typeof chrome === 'undefined') return; //do nothing
     chrome.runtime.onMessage.addListener(
     (request, sender, sendResponse) => {
-      if (request.loginObj) {
-        this.$log.debug('listenForLogin() got a message from the extension')
-        this.$log.debug(request)
+      
+      this.$log.debug('listenForLogin() got a message from the extension')
+      this.$log.debug(request)
+
+      if (request === 'deletedUserAuthToken') {
+        this.SettingsService.resetSettings()
       }
-    }
-  );
+      else if (request.loginObj) {
+        this.emailToTagWith = request.loginObj.email
+        this.saveSettings();
+      }
+    })
   }
 
 }

src/app/services/backend.service.ts

@@ -36,7 +36,11 @@ export class BackendService {
   sendTaggedDataToServer(senseTag: ISenseTag) {
     this.$log.debug('sendTaggedDataToServer() was called');
     return this.SettingsService.loadSettings()
-      .then(loadedSettings => this.$http.post(loadedSettings.tagitSenseDestinationUrl, senseTag))
+      .then(loadedSettings => {
+        //let's add in the user's email to the tag.
+        senseTag.userEmail = loadedSettings.emailToTagWith 
+        this.$http.post(loadedSettings.tagitSenseDestinationUrl, senseTag)
+      })
   }
 
 }

src/app/services/settings.service.ts

@@ -18,6 +18,9 @@ export class SettingsService {
   // where to send the senses
   private _defaultSenseDestinationUrl = 'https://www.example.org/somewhere'
 
+  //If we have the user's email we treat the user as logged in.
+  private emailWasLoaded = false;
+
   constructor(private $log: ng.ILogService, private $q: ng.IQService) {
   }
 
@@ -70,7 +73,10 @@ export class SettingsService {
       if (!loadedSettings.tagitSenseDestinationUrl) {
         loadedSettings.tagitSenseDestinationUrl = this._defaultSenseDestinationUrl
       }
-      if (!loadedSettings.emailToTagWith) {
+      
+      if (loadedSettings.emailToTagWith) {
+        this.emailWasLoaded = true;
+      } else {
         loadedSettings.emailToTagWith = ''
       }
 
@@ -78,6 +84,22 @@ export class SettingsService {
     })
   }
 
+  /**
+   * Returns true if user was logged in, which
+   * we treat as true if we have the user's email 
+   */
+  isUserLoggedIn() {
+    return this.emailWasLoaded
+  }
+
+  /**
+   * Purpose: Let user's use the app without 
+   * actually logging in.
+   */
+  setLoggedIn(loggedInState) {
+    this.emailWasLoaded = loggedInState
+  }
+
   resetSettings() {
 
     return this.$q((resolve, reject) => {