Skip to content

Commit

Permalink
Fix #23: add navigation from login page to dash
Browse files Browse the repository at this point in the history
  • Loading branch information
@kincaidoneil
kincaidoneil committed Mar 24, 2015
1 parent b1f3df5 commit ad41085
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 32 deletions.
8 changes: 4 additions & 4 deletions app/components/plus-login/plus-login.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- POLYMER -->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="plus-login" attributes="defaultTab">
<polymer-element name="plus-login" attributes="defaultTab accounts">
<template>
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="plus-login.css">
Expand All @@ -9,7 +9,7 @@
<paper-shadow id="accountsPane" z="3">
<core-animated-pages transitions="cross-fade" selected="{{authz.inProgress ? 1 : 0}}">
<!-- Page 1 / Accounts -->
<div id="accountsPg">
<div id="accountsPage">
<!-- Tab Container -->
<paper-shadow id="tabContainer" z="1" cross-fade>
<paper-tabs id="tabs" selected="{{defaultTab}}" nobar="true" noink="true">
Expand Down Expand Up @@ -57,11 +57,11 @@
</paper-shadow>
<!-- Finish Button -->
<template if="{{accounts.length >= 1}}">
<paper-button id="finishButton" raised cross-fade>Finish</paper-button>
<paper-button id="finishButton" raised cross-fade on-tap="{{completeLogin}}">Finish</paper-button>
</template>
</div>
<!-- Page 2 / Loading -->
<div id="loadingPg">
<div id="loadingPage">
<div id="loadingContainer" cross-fade><!-- Solves issues with cross-fade not working properly when applied directly. -->
<!-- Setup Progress -->
<paper-spinner id="setupProgress" active></paper-spinner>
Expand Down
11 changes: 10 additions & 1 deletion app/components/plus-login/plus-login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Polymer('plus-login', {
if ($.isEmptyObject(accounts)) {
this.accounts = [];
} else {
this.accounts = accounts;
this.accounts = accounts.accounts;
}
// Wait to load UI until accounts have been checked
this.ui();
Expand Down Expand Up @@ -203,6 +203,7 @@ Polymer('plus-login', {
var oauth_token = this.getURLHash(response).oauth_token;
var oauth_verifier = this.getURLHash(response).oauth_verifier;
$.ajax({
// Set scope of callback functions.
context: this,
data: {
oauth_verifier: oauth_verifier
Expand All @@ -225,6 +226,7 @@ Polymer('plus-login', {
var oauth_token = this.getURLHash(response).oauth_token;
var oauth_token_secret = this.getURLHash(response).oauth_token_secret;
$.ajax({
// Set scope of callback functions.
context: this,
// Generate OAuth Authorization Header.
headers: {'Authorization': twitter.generateAuthzHeader(
Expand Down Expand Up @@ -315,6 +317,13 @@ Polymer('plus-login', {
// Remove the account.
this.accounts.splice(accountIndex, 1);
},
completeLogin: function() {
// Save account data to sync API.
chrome.storage.sync.set({accounts: this.accounts}, function() {
// If successful, navigate to dashboard.
navigatePage(1);
});
},
// Dialogs
showErrorToast: function() {
this.authz.inProgress = false;
Expand Down
53 changes: 26 additions & 27 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<!-- Core Elements -->
<link rel="import" href="bower_components/core-pages/core-pages.html">
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/core-iconset-svg/core-iconset-svg.html">
<link rel="import" href="bower_components/core-list/core-list.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<link rel="import" href="bower_components/core-icons/social-icons.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<!-- Paper Elements -->
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
Expand All @@ -21,58 +23,55 @@
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<!-- Icons -->
<link rel="import" href="bower_components/core-icons/social-icons.html">
<!-- Components -->
<link rel="import" href="components/fb-card/fb-card.html">
<link rel="import" href="components/fb-column/fb-column.html">
<link rel="import" href="components/fb-video/fb-video.html">
<link rel="import" href="components/insta-card/insta-card.html">
<link rel="import" href="components/insta-column/insta-column.html">
<link rel="import" href="components/plus-column/plus-column.html">
<link rel="import" href="components/plus-dash/plus-dash.html">
<link rel="import" href="components/plus-icons/plus-icons.html">
<link rel="import" href="components/plus-img/plus-img.html">
<link rel="import" href="components/plus-login/plus-login.html">
<link rel="import" href="components/plus-time/plus-time.html">
<link rel="import" href="components/twitter-api/twitter-api.html">
<link rel="import" href="components/twitter-card/twitter-card.html">
<link rel="import" href="components/twitter-column/twitter-column.html">
<!-- Fonts -->
<link rel="stylesheet" href="components/plus-fonts/plus-fonts.css">
<!-- STYLES -->
<style type="text/css">

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#navigation {
width: 100%;
height: 100%;
}

</style>
<link rel="stylesheet" href="styles/global.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/velocity/velocity.min.js"></script>
<script type="text/javascript" src="bower_components/GSAP/src/minified/TweenMax.min.js"></script>
<script type="text/javascript" src="bower_components/chrome-app-livereload/livereload.js?host=localhost&amp;port=35729"></script>
<script type="text/javascript">
$(document).ready(function() {
// Use defaults: navigate to dash if accounts exist, and login if they don't.
navigatePage();
});
function navigatePage(page) {
// Prior to navigation, check for accounts.
chrome.storage.sync.get('accounts', function(accounts) {
// If no accounts exist, navigate to the login page. Otherwise, navigate to dash.
$('#navigation')[0].selected = $.isEmptyObject(accounts) ? 0 : 1;
if (typeof page === 'undefined') {
// If no page was passed through AND no accounts exist, navigate to the login page.
$('#navigation')[0].selected = $.isEmptyObject(accounts) ? 0 : 1;
} else {
// Otherwise, navigate to the page specified.
$('#navigation')[0].selected = page;
}
// Regardless of navigation, update account data for both pages.
// For instance, if the navigation is triggered from the login page, accounts have probably been updated (superior to constantly dirty checking).
// $('#loginPage')[0].accounts = accounts.accounts;
$('#dashPage')[0].accounts = accounts.accounts;
});
});
}
</script>
</head>
<!-- MARKUP -->
<body unresolved>
<core-pages id="navigation">
<plus-login defaultTab="0"></plus-login>
<plus-dash></plus-dash>
<plus-login id="loginPage" defaultTab="0"></plus-login>
<plus-dash id="dashPage"></plus-dash>
</core-pages>
</body>
</html>

0 comments on commit ad41085

Please sign in to comment.