1<!doctype html>
2<!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
3<html>
4<head>
5  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
6
7  <title>google-signin Demo</title>
8
9  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10  <link rel="import" href="../google-signin.html">
11  <link rel="import" href="../google-signin-aware.html">
12
13  <!-- Demo only styles -->
14  <style>
15    body {
16      font-family: 'RobotoDraft', 'Roboto', sans-serif;
17      line-height:1.2;
18      vertical-align:middle;
19      background: rgba(204, 204, 204, 0.31);
20    }
21
22
23    .map {
24      background: whitesmoke;
25      margin: .5rem -1.5rem 0 -1.5rem;
26      padding: 0.5rem;
27    }
28
29    h1 {
30      font-size: 2rem;
31      font-weight:200;
32      clear: both;
33    }
34
35    h1 strong {
36      font-weight:300;
37      color:#539D00;
38    }
39
40    h2 {
41      font-size:.9rem;
42      line-height:2.5;
43      color:gray;
44      font-weight:400;
45      clear: both;
46    }
47
48    .showcase {
49      display: inline-block;
50      margin-right: 2rem;
51      float: left;
52    }
53  </style>
54
55</head>
56
57<body>
58  <p>A <code>&lt;google-signin&gt;</code> element looks like this button:</p>
59
60  <p><google-signin brand="google" client-id="1054047045356-j8pgqgls9vdef3rl09hapoicumbte0bo.apps.googleusercontent.com"></google-signin>
61or like this if plus scopes are present
62  <google-signin brand="google-plus"></google-signin>
63  </p>
64  <p>Signin button can vary its appearance:</p>
65  <p>Width:
66    <google-signin brand="google" width="wide"></google-signin>
67    <google-signin brand="google" width="iconOnly"></google-signin>
68  Height:
69    <google-signin brand="google" height="tall"></google-signin>
70    <google-signin brand="google" height="standard"></google-signin>
71    <google-signin brand="google" height="short"></google-signin>
72  </p>
73  <p>
74  Theme:
75    <google-signin brand="google" theme="dark"></google-signin>
76    <google-signin brand="google" theme="light"></google-signin>
77    <google-signin brand="google-plus" theme="dark"></google-signin>
78    <google-signin brand="google-plus" theme="light"></google-signin>
79    <google-signin brand="google-plus" theme="light" raised></google-signin>
80  </p>
81  <!-- Demo the ability to use the google-signin-aware element. -->
82  <p><code>&lt;google-signin-aware&gt;</code> is a companion element.</p>
83  <p>You can use it inside your components to request additional scopes.</p>
84  <p>Every signin button will request all the scopes present in the document,
85  and change its appearance to match</p>
86  <p>For example, here is a signin-aware scope. You can change its scopes via popup</p>
87  <dom-bind id="awareness">
88    <template is="dom-bind">
89      <div><code>&lt;google-signin-aware
90        <div>scope=
91          <select value="{{scope::change}}">
92            <option value="">None</option>
93            <option value="https://www.googleapis.com/auth/analytics">Google Analytics</option>
94            <option value="https://www.googleapis.com/auth/plus.login">Google Plus view circles</option>
95            <option value="https://www.googleapis.com/auth/youtube">YouTube</option>
96            <option value="https://www.googleapis.com/auth/calendar">Calendar</option>
97            <option value="profile">Profile info</option>
98          </select>
99        </div>
100        <div>openid-prompt=
101          <input type="checkbox" checked="{{openidPrompt.none::change}}">none
102          <input type="checkbox" checked="{{openidPrompt.login::change}}">login
103          <input type="checkbox" checked="{{openidPrompt.consent::change}}">consent
104          <input type="checkbox"
105              checked="{{openidPrompt.select_account::change}}">select_account
106        </div>
107        <div>offline=<input type="checkbox" checked="{{offline::change}}"></div>
108        <div>initialized="<span>{{initialized}}</span>"</div>
109        <div>signedIn="<span>{{signedIn}}</span>"</div>
110        <div>isAuthorized="<span>{{isAuthorized}}</span>"</div>
111        <div>needAdditionalAuth:"<span>{{needAdditionalAuth}}</span>"&gt;</div>
112      </code></div>
113      <p>Every new scope you select will be added to requested scopes.</p>
114      <p>When you select a Google Plus scope, button will turn red.</p>
115        <google-signin></google-signin>
116      </p>
117      <google-signin-aware
118          scopes="{{scope}}"
119          openid-prompt="{{openidPromptValue}}"
120          initialized="{{initialized}}"
121          signed-in="{{signedIn}}"
122          offline="{{offline}}"
123          is-authorized="{{isAuthorized}}"
124          need-additional-auth="{{needAdditionalAuth}}"
125          on-google-signin-aware-error="handleSignInError"
126          on-google-signin-aware-success="handleSignIn"
127          on-google-signin-offline-success="handleOffline"
128          on-google-signin-aware-signed-out="handleSignOut"
129          on-signed-in-changed="handleStateChange"
130          on-initialized-changed="handleStateChange"></google-signin-aware>
131      <p>User name:<span>{{userName}}</span></p>
132      <p>Testing <code>google-signin-aware</code> events: <span>{{status}}</span></p>
133      <p>Testing <code>google-signin-offline</code> events: <span>{{offlineCode}}</span></p>
134      <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>
135      <p><button on-click="disconnect">Disconnect to start over</button></p>
136    </template>
137  </dom-bind>
138  <script>
139    var aware = document.querySelector('#awareness');
140    if (!Polymer.Element) {
141      aware = aware.querySelector('template');
142    }
143
144    aware.status = 'Not granted';
145    aware.offlineCode = 'No offline login.';
146    aware.userName = 'N/A';
147    aware.openidPrompt = {};
148
149    aware.handleSignInError = function(event) {
150      this.status = JSON.stringify(event.detail);
151    };
152    aware.handleSignIn = function(response) {
153      this.status = 'Signin granted';
154      // console.log('[Aware] Signin Response', response);
155      this.userName = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile().getName();
156    };
157    aware.handleOffline = function(response) {
158      this.offlineCode = response.detail.code;
159    };
160    aware.handleSignOut = function(response) {
161      this.status = 'Signed out';
162      // console.log('[Aware] Signout Response', response);
163      this.userName = 'N/A';
164    };
165    aware.disconnect = function() {
166      var currentUser = gapi.auth2.getAuthInstance().currentUser.get();
167      if (currentUser) {
168        currentUser.disconnect();
169      }
170      gapi.auth2.getAuthInstance().signOut();
171    };
172
173    aware.handleStateChange = function(e) {
174      var signedIn = e.target.signedIn;
175      var initialized = e.target.initialized;
176      if(initialized && !signedIn) {
177        document.querySelector("#not-signed-in").removeAttribute("hidden");
178      } else {
179        document.querySelector("#not-signed-in").setAttribute("hidden", true);
180      }
181    };
182
183    aware.addEventListener('openid-prompt-changed', function(e) {
184      if (e.detail.value) {
185        if (e.detail.path === 'openidPrompt.none') {
186          aware.set('openidPrompt', {
187            none: true,
188            login: false,
189            consent: false,
190            select_account: false
191          });
192        } else {
193          aware.set('openidPrompt.none', false);
194        }
195      }
196
197      var values = [];
198      Object.keys(aware.openidPrompt).forEach(function(k) {
199        if (aware.openidPrompt[k]) {
200          values.push(k);
201        }
202      });
203      this.set('openidPromptValue', values.join(' '));
204    });
205
206  </script>
207</body>
208</html>
209