Ask user to login with google email on startup

Squashed commit of the following:

commit e6574f0fa51b78df71201d3674e40b13993c4ce3
Author: Nils Norman Haukås <mail@nilsnh.no>
Date:   Thu Aug 25 18:45:11 2016 +0200

    bump version number

commit 1286a15c3e
Author: Nils Norman Haukås <mail@nilsnh.no>
Date:   Thu Aug 25 17:47:10 2016 +0200

    Reload settings after receiving logged in userinfo

commit ca518d4978
Author: Nils Norman Haukås <mail@nilsnh.no>
Date:   Thu Aug 25 17:46:42 2016 +0200

    Add 'identity.email' permission

commit 4b9579ceee
Author: Nils Norman Haukås <mail@nilsnh.no>
Date:   Thu Aug 25 17:45:43 2016 +0200

    Bugfix background.js initialization. Added logging

commit 6747062ed6
Author: Nils Norman Haukås <mail@nilsnh.no>
Date:   Thu Aug 25 17:45:18 2016 +0200

    Prevent error from dist folder being there

commit e5c9317569
Author: Nils Norman Haukås <mail@nilsnh.no>
Date:   Thu Aug 25 16:47:39 2016 +0200

    Use chromium as the default test browser

commit cd02b08a9f
Author: Nils Norman Haukås <nils@thunki.com>
Date:   Sun Aug 14 23:44:30 2016 +0200

    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.

commit fd66219b3c
Author: Nils Norman Haukås <nils@thunki.com>
Date:   Sun Aug 14 23:44:03 2016 +0200

    Promisified background.js
This commit is contained in:
Nils Norman Haukås 2016-08-25 18:46:22 +02:00
parent 90d769ed76
commit efc3c808bd
9 changed files with 182 additions and 68 deletions

View file

@ -3,7 +3,7 @@
# Note: The javascript is generated by the
# package.json before calling this script.
mkdir dist #ensure there's a folder
mkdir -p dist #ensure there's a folder
#copy styles
cp -v src/app/style.css dist/

View file

@ -6,7 +6,7 @@
"scripts": {
"clean": "rm -r dist typings node_modules jspm_packages || true",
"build": "jspm bundle-sfx src/app/main.ts dist/app.js --inline-source-maps && ./build.sh",
"start": "browser-sync start --no-notify -b google-chrome --startPath test/ --server --files 'src/**/*'",
"start": "browser-sync start --no-notify -b chromium-browser --startPath test/ --server --files 'src/**/*'",
"package": "rm dist.zip && zip -r dist.zip dist",
"postinstall": "typings install && jspm install"
},

View file

@ -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);
}
}

View file

@ -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>

View file

@ -31,10 +31,11 @@ export class SettingsCtrl {
$scope.vm = this;
this.loadSettings()
this.startListeningForLogins()
this.startListeningToLoginStatus()
}
loadSettings() {
this.$log.debug('loadSettings()')
this.SettingsService.loadSettings().then((settings) => {
this.senseQueryUrl = settings.tagitSenseQueryUrl
this.serverToSendTo = settings.tagitSenseDestinationUrl
@ -44,7 +45,7 @@ export class SettingsCtrl {
saveSettings() {
this.$log.debug('saving!')
this.SettingsService.saveSettings({
return this.SettingsService.saveSettings({
'tagitSenseDestinationUrl': this.serverToSendTo,
'tagitSenseQueryUrl': this.senseQueryUrl,
'emailToTagWith': this.emailToTagWith
@ -53,7 +54,7 @@ export class SettingsCtrl {
this.savedSetting = true
this.$timeout(()=> {
this.savedSetting = false
}, 3000)
}, 3000);
})
}
@ -66,20 +67,33 @@ 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
this.$log.debug('startListeningToLoginStatus()')
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().then(() => this.loadSettings());
}
})
}
}

View file

@ -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)
})
}
}

View file

@ -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) => {

View file

@ -12,7 +12,7 @@ chrome.browserAction.onClicked.addListener(function (tab) {
});
function isMenuOpen(callback) {
messageExtension('isMenuOpen', callback);
messageExtension('isMenuOpen').then(callback);
}
function injectIframe(tab) {
@ -32,36 +32,66 @@ function injectIframe(tab) {
* javascript.
*/
chrome.runtime.onMessage.addListener((msg) => {
if (msg.command === 'requestUserInfo') {
console.log('chrome.runtime.onMessage.addListener(msg)');
console.log(msg);
if (msg.command === 'loginAndRequestUserInfo') {
console.log('Extension got a command to retrieve user info');
loginUser()
.then(askForUserEmail)
.then(function (userInfo) {
console.log('Background.js received userInfo:');
console.log(userInfo);
messageExtension({ loginObj: userInfo });
});
}
if (msg.command === 'logOutUser') {
logOutUser().then(function () {
messageExtension('deletedUserAuthToken');
});
}
});
function loginUser() {
return new Promise(function (resolve, reject) {
chrome.identity.getAuthToken({ interactive: true }, function (token) {
console.log('user was logged in and token is: ');
console.log(token);
//with the user logged in we can finally ask for email.
askForUserEmail();
resolve(token);
})
}
});
function askForUserEmail() {
chrome.identity.getProfileUserInfo((userInfo) => {
console.log(userInfo)
messageExtension({ loginObj: userInfo })
});
}
function messageExtension(messageToSend, callback) {
function askForUserEmail() {
return new Promise(function (resolve, reject) {
chrome.identity.getProfileUserInfo(resolve);
});
}
function logOutUser() {
return new Promise(function (resolve, reject) {
loginUser()
.then(function (loadedToken) {
chrome.identity.removeCachedAuthToken({ token: loadedToken }, resolve);
})
});
}
function messageExtension(messageToSend) {
/**
* small note: Cannot query tab for currentWindow: true because
* opening a new window to approve the app permissions
* will prevent this script from finding the right
* tab to message with the user info.
*/
chrome.tabs.query({ active: true }, function (tabs) {
if (callback) {
chrome.tabs.sendMessage(tabs[0].id, messageToSend, callback);
} else {
chrome.tabs.sendMessage(tabs[0].id, messageToSend);
}
});
return new Promise(function (resolve, reject) {
chrome.tabs.query({ active: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, messageToSend, resolve);
});
})
}

View file

@ -1,7 +1,7 @@
{
"name": "Tag you're it",
"description": "A browser tool for tagging words with exact definitions.",
"version": "1.0.6",
"version": "1.0.7",
"manifest_version": 2,
"icons": {
"16": "icon16.png",
@ -13,6 +13,7 @@
"storage",
"activeTab",
"identity",
"identity.email",
"https://imdb.uib.no/"
],
"oauth2": {