diff options
Diffstat (limited to 'catapult/third_party/polymer/components/google-signin/demo/index.html')
| -rw-r--r-- | catapult/third_party/polymer/components/google-signin/demo/index.html | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/google-signin/demo/index.html b/catapult/third_party/polymer/components/google-signin/demo/index.html new file mode 100644 index 00000000..0db7e5a9 --- /dev/null +++ b/catapult/third_party/polymer/components/google-signin/demo/index.html @@ -0,0 +1,208 @@ +<!doctype html> +<!-- Copyright (c) 2014 Google Inc. All rights reserved. --> +<html> +<head> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + + <title>google-signin Demo</title> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../google-signin.html"> + <link rel="import" href="../google-signin-aware.html"> + + <!-- Demo only styles --> + <style> + body { + font-family: 'RobotoDraft', 'Roboto', sans-serif; + line-height:1.2; + vertical-align:middle; + background: rgba(204, 204, 204, 0.31); + } + + + .map { + background: whitesmoke; + margin: .5rem -1.5rem 0 -1.5rem; + padding: 0.5rem; + } + + h1 { + font-size: 2rem; + font-weight:200; + clear: both; + } + + h1 strong { + font-weight:300; + color:#539D00; + } + + h2 { + font-size:.9rem; + line-height:2.5; + color:gray; + font-weight:400; + clear: both; + } + + .showcase { + display: inline-block; + margin-right: 2rem; + float: left; + } + </style> + +</head> + +<body> + <p>A <code><google-signin></code> element looks like this button:</p> + + <p><google-signin brand="google" client-id="1054047045356-j8pgqgls9vdef3rl09hapoicumbte0bo.apps.googleusercontent.com"></google-signin> +or like this if plus scopes are present + <google-signin brand="google-plus"></google-signin> + </p> + <p>Signin button can vary its appearance:</p> + <p>Width: + <google-signin brand="google" width="wide"></google-signin> + <google-signin brand="google" width="iconOnly"></google-signin> + Height: + <google-signin brand="google" height="tall"></google-signin> + <google-signin brand="google" height="standard"></google-signin> + <google-signin brand="google" height="short"></google-signin> + </p> + <p> + Theme: + <google-signin brand="google" theme="dark"></google-signin> + <google-signin brand="google" theme="light"></google-signin> + <google-signin brand="google-plus" theme="dark"></google-signin> + <google-signin brand="google-plus" theme="light"></google-signin> + <google-signin brand="google-plus" theme="light" raised></google-signin> + </p> + <!-- Demo the ability to use the google-signin-aware element. --> + <p><code><google-signin-aware></code> is a companion element.</p> + <p>You can use it inside your components to request additional scopes.</p> + <p>Every signin button will request all the scopes present in the document, + and change its appearance to match</p> + <p>For example, here is a signin-aware scope. You can change its scopes via popup</p> + <dom-bind id="awareness"> + <template is="dom-bind"> + <div><code><google-signin-aware + <div>scope= + <select value="{{scope::change}}"> + <option value="">None</option> + <option value="https://www.googleapis.com/auth/analytics">Google Analytics</option> + <option value="https://www.googleapis.com/auth/plus.login">Google Plus view circles</option> + <option value="https://www.googleapis.com/auth/youtube">YouTube</option> + <option value="https://www.googleapis.com/auth/calendar">Calendar</option> + <option value="profile">Profile info</option> + </select> + </div> + <div>openid-prompt= + <input type="checkbox" checked="{{openidPrompt.none::change}}">none + <input type="checkbox" checked="{{openidPrompt.login::change}}">login + <input type="checkbox" checked="{{openidPrompt.consent::change}}">consent + <input type="checkbox" + checked="{{openidPrompt.select_account::change}}">select_account + </div> + <div>offline=<input type="checkbox" checked="{{offline::change}}"></div> + <div>initialized="<span>{{initialized}}</span>"</div> + <div>signedIn="<span>{{signedIn}}</span>"</div> + <div>isAuthorized="<span>{{isAuthorized}}</span>"</div> + <div>needAdditionalAuth:"<span>{{needAdditionalAuth}}</span>"></div> + </code></div> + <p>Every new scope you select will be added to requested scopes.</p> + <p>When you select a Google Plus scope, button will turn red.</p> + <google-signin></google-signin> + </p> + <google-signin-aware + scopes="{{scope}}" + openid-prompt="{{openidPromptValue}}" + initialized="{{initialized}}" + signed-in="{{signedIn}}" + offline="{{offline}}" + is-authorized="{{isAuthorized}}" + need-additional-auth="{{needAdditionalAuth}}" + on-google-signin-aware-error="handleSignInError" + on-google-signin-aware-success="handleSignIn" + on-google-signin-offline-success="handleOffline" + on-google-signin-aware-signed-out="handleSignOut" + on-signed-in-changed="handleStateChange" + on-initialized-changed="handleStateChange"></google-signin-aware> + <p>User name:<span>{{userName}}</span></p> + <p>Testing <code>google-signin-aware</code> events: <span>{{status}}</span></p> + <p>Testing <code>google-signin-offline</code> events: <span>{{offlineCode}}</span></p> + <p>Only display "not signed in" element after auth state is initialized (avoid flickering): <b hidden id="not-signed-in">Not signed in!</b></p> + <p><button on-click="disconnect">Disconnect to start over</button></p> + </template> + </dom-bind> + <script> + var aware = document.querySelector('#awareness'); + if (!Polymer.Element) { + aware = aware.querySelector('template'); + } + + aware.status = 'Not granted'; + aware.offlineCode = 'No offline login.'; + aware.userName = 'N/A'; + aware.openidPrompt = {}; + + aware.handleSignInError = function(event) { + this.status = JSON.stringify(event.detail); + }; + aware.handleSignIn = function(response) { + this.status = 'Signin granted'; + // console.log('[Aware] Signin Response', response); + this.userName = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile().getName(); + }; + aware.handleOffline = function(response) { + this.offlineCode = response.detail.code; + }; + aware.handleSignOut = function(response) { + this.status = 'Signed out'; + // console.log('[Aware] Signout Response', response); + this.userName = 'N/A'; + }; + aware.disconnect = function() { + var currentUser = gapi.auth2.getAuthInstance().currentUser.get(); + if (currentUser) { + currentUser.disconnect(); + } + gapi.auth2.getAuthInstance().signOut(); + }; + + aware.handleStateChange = function(e) { + var signedIn = e.target.signedIn; + var initialized = e.target.initialized; + if(initialized && !signedIn) { + document.querySelector("#not-signed-in").removeAttribute("hidden"); + } else { + document.querySelector("#not-signed-in").setAttribute("hidden", true); + } + }; + + aware.addEventListener('openid-prompt-changed', function(e) { + if (e.detail.value) { + if (e.detail.path === 'openidPrompt.none') { + aware.set('openidPrompt', { + none: true, + login: false, + consent: false, + select_account: false + }); + } else { + aware.set('openidPrompt.none', false); + } + } + + var values = []; + Object.keys(aware.openidPrompt).forEach(function(k) { + if (aware.openidPrompt[k]) { + values.push(k); + } + }); + this.set('openidPromptValue', values.join(' ')); + }); + + </script> +</body> +</html> |