OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright 2017 The LUCI Authors. All rights reserved. | 2 Copyright 2017 The LUCI Authors. All rights reserved. |
3 Use of this source code is governed under the Apache License, Version 2.0 | 3 Use of this source code is governed under the Apache License, Version 2.0 |
4 that can be found in the LICENSE file. | 4 that can be found in the LICENSE file. |
5 | 5 |
6 The `auth-signin` element displays sign-in/sign-out button, user email and | 6 The `auth-signin` element displays sign-in/sign-out button, user email and |
7 avatar. | 7 avatar. |
8 It has a google-signin/google-signin-aware element under the hood that handles | 8 It has a google-signin/google-signin-aware element under the hood that handles |
9 the actual OAuth logic. | 9 the actual OAuth logic. |
10 | 10 |
(...skipping 28 matching lines...) Expand all Loading... |
39 .center { vertical-align: middle; } | 39 .center { vertical-align: middle; } |
40 | 40 |
41 .typeface { | 41 .typeface { |
42 font-size: 75%; | 42 font-size: 75%; |
43 color: white; | 43 color: white; |
44 } | 44 } |
45 </style> | 45 </style> |
46 | 46 |
47 <google-signin-aware id="aware" | 47 <google-signin-aware id="aware" |
48 client-id="[[client_id]]" | 48 client-id="[[client_id]]" |
| 49 initialized="{{initialized}}" |
49 scopes="email" | 50 scopes="email" |
50 on-google-signin-aware-success="_onSignin" | 51 on-google-signin-aware-success="_onSignin" |
51 on-google-signin-aware-signed-out="_onSignout"> | 52 on-google-signin-aware-signed-out="_onSignout"> |
52 </google-signin-aware> | 53 </google-signin-aware> |
53 | 54 |
54 <template is="dom-if" if="[[!signed_in]]"> | 55 <template is="dom-if" if="[[!signed_in]]"> |
55 <div id="signinContainer"> | 56 <div id="signinContainer"> |
56 <!-- TODO(cwpayton): Before official deployment, change href to "/#/" --
> | 57 <!-- TODO(cwpayton): Before official deployment, change href to "/#/" --
> |
57 <a class="typeface" on-tap="signIn" href="/newui#/">Sign in</a> | 58 <a class="typeface" on-tap="signIn" href="/newui#/">Sign in</a> |
58 </div> | 59 </div> |
59 </template> | 60 </template> |
60 | 61 |
61 <template is="dom-if" if="[[signed_in]]"> | 62 <template is="dom-if" if="[[signed_in]]"> |
62 <img class="center" id="avatar" src="[[profile.imageUrl]]" width="30" heig
ht="30"> | 63 <img class="center" id="avatar" src="[[profile.imageUrl]]" width="30" heig
ht="30"> |
63 <span class="center typeface">[[profile.email]]</span> | 64 <span class="center typeface">[[profile.email]]</span> |
64 <span class="center typeface">|</span> | 65 <span class="center typeface">|</span> |
65 <!-- TODO(cwpayton): Before official deployment, change href to "/#/" --> | 66 <!-- TODO(cwpayton): Before official deployment, change href to "/#/" --> |
66 <a class="center typeface" on-tap="signOut" href="/newui#/">Sign out</a> | 67 <a class="center typeface" on-tap="signOut" href="/newui#/">Sign out</a> |
67 </template> | 68 </template> |
68 </template> | 69 </template> |
69 <script> | 70 <script> |
70 'use strict'; | 71 'use strict'; |
71 Polymer({ | 72 Polymer({ |
72 is: 'auth-signin', | 73 is: 'auth-signin', |
73 properties: { | 74 properties: { |
74 auth_headers: { | 75 auth_headers: { |
75 type: Object, | 76 type: Object, |
76 value: () => {}, | 77 value: () => null, |
77 notify: true | 78 notify: true |
78 }, | 79 }, |
79 | 80 |
80 auth_response: { | 81 auth_response: { |
81 type: Object, | 82 type: Object, |
82 notify: true, | 83 notify: true, |
83 observer: '_makeHeader' | 84 observer: '_makeHeader' |
84 }, | 85 }, |
85 | 86 |
86 client_id: { | 87 client_id: { |
87 type: String | 88 type: String |
88 }, | 89 }, |
89 | 90 |
| 91 initialized: { |
| 92 type: Boolean, |
| 93 value: false, |
| 94 observer: '_onInitialized' |
| 95 }, |
| 96 |
90 profile: { | 97 profile: { |
91 type: Object, | 98 type: Object, |
92 notify: true | 99 notify: true |
93 }, | 100 }, |
94 | 101 |
95 signed_in: { | 102 signed_in: { |
96 type: Boolean, | 103 type: Boolean, |
97 value: false, | 104 value: false, |
98 notify: true | 105 notify: true |
| 106 }, |
| 107 |
| 108 user: { |
| 109 type: Object, |
| 110 value: () => null, |
99 } | 111 } |
100 }, | 112 }, |
101 | 113 |
102 ready: function() { | 114 ready: function() { |
103 if (!this.client_id) { | 115 if (!this.client_id) { |
104 return; | 116 return; |
105 } | 117 } |
106 // If a page is opened in a new tab, we are (likely) already logged in | 118 }, |
107 // so we wait for the gapi and auth2 to be loaded and re-extract our | 119 |
108 // access_token. | 120 _onInitialized: function() { |
109 window.setTimeout(function(){ | 121 if (this.initialized) { |
110 // The 'gapi' checks are the same that signin-aware does. We do them | 122 this.set('user', null); |
111 // to avoid extraneous errors in the console. | 123 this.set('user', gapi.auth2.getAuthInstance().currentUser.get()); |
112 if (!this.signed_in && !this._signingIn){ | 124 if (!(this.user && this.user.getAuthResponse().access_token)) { |
113 if (('gapi' in window) && ('auth2' in window.gapi)) { | 125 this.fire('fetch-configs'); |
114 var user = gapi.auth2.getAuthInstance().currentUser.get(); | |
115 if (user && user.getAuthResponse().access_token) { | |
116 // User is already logged in, can use the access_token. | |
117 this._onSignin(); | |
118 } else { | |
119 window.setTimeout(this.ready.bind(this), 50); | |
120 } | |
121 } else { | |
122 window.setTimeout(this.ready.bind(this), 50); | |
123 } | |
124 } | 126 } |
125 }.bind(this), 50); | 127 } |
126 }, | 128 }, |
127 | 129 |
128 _onSignin: function() { | 130 _onSignin: function() { |
129 this._signingIn = true; | 131 this._signingIn = true; |
130 var user = gapi.auth2.getAuthInstance().currentUser.get(); | 132 this.set('user', null); |
131 var profile = { email: user.getBasicProfile().getEmail(), | 133 this.set('user', gapi.auth2.getAuthInstance().currentUser.get()); |
132 imageUrl: user.getBasicProfile().getImageUrl() }; | 134 var profile = { email: this.user.getBasicProfile().getEmail(), |
133 this.set('profile', {}); | 135 imageUrl: this.user.getBasicProfile().getImageUrl() }; |
| 136 this.set('profile', null); |
134 this.set('profile', profile); | 137 this.set('profile', profile); |
135 this.set('auth_response', user.getAuthResponse()); | 138 this.set('auth_response', this.user.getAuthResponse()); |
136 this.signed_in = true; | 139 this.signed_in = true; |
137 // The credential will expire after a while (usually an hour) | 140 // The credential will expire after a while (usually an hour) |
138 // so we need to reload it. | 141 // so we need to reload it. |
139 this.async(function(){ | 142 this.async(function(){ |
140 console.log("reloading credentials"); | 143 console.log("reloading credentials"); |
141 user.reloadAuthResponse(); | 144 this.user.reloadAuthResponse(); |
142 this._onSignin(); | 145 this._onSignin(); |
143 }, this.auth_response.expires_in * 1000); // convert seconds to ms | 146 }, this.auth_response.expires_in * 1000); // convert seconds to ms |
| 147 this.fire('fetch-configs'); |
144 this._signingIn = false; | 148 this._signingIn = false; |
145 }, | 149 }, |
146 | 150 |
147 _onSignout: function(e) { | 151 _onSignout: function(e) { |
148 this.signed_in = false; | 152 this.signed_in = false; |
149 this.set('profile', null); | 153 this.set('profile', null); |
150 }, | 154 }, |
151 | 155 |
152 _makeHeader: function() { | 156 _makeHeader: function() { |
153 if (!this.auth_response) { | 157 if (!this.auth_response) { |
154 this.set('auth_headers', {}); | 158 this.set('auth_headers', null); |
155 } | 159 } |
156 this.set('auth_headers', | 160 this.set('auth_headers', |
157 { | 161 { |
158 "authorization": this.auth_response.token_type + " " + | 162 "authorization": this.auth_response.token_type + " " + |
159 this.auth_response.access_token | 163 this.auth_response.access_token |
160 }); | 164 }); |
161 }, | 165 }, |
162 | 166 |
163 signIn: function() { | 167 signIn: function() { |
164 this.$.aware.signIn(); | 168 this.$.aware.signIn(); |
165 }, | 169 }, |
166 | 170 |
167 signOut: function() { | 171 signOut: function() { |
168 this.$.aware.signOut(); | 172 this.$.aware.signOut(); |
169 window.location.reload(); | 173 window.location.reload(); |
170 } | 174 } |
171 }); | 175 }); |
172 </script> | 176 </script> |
173 </dom-module> | 177 </dom-module> |
OLD | NEW |