Skip to content

Commit 0f2371f

Browse files
Mortega5Mortega5
committed
Bug fixed
1 parent 747b737 commit 0f2371f

File tree

3 files changed

+196
-5
lines changed

3 files changed

+196
-5
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎github-login.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<link rel="import" href="bower_components/polymer/polymer.html">
2-
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
3-
<link rel="import" href="bower_components/paper-button/paper-button.html">
4-
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
1+
<link rel="import" href="../polymer/polymer.html">
2+
<link rel="import" href="../iron-ajax/iron-ajax.html">
3+
<link rel="import" href="../paper-button/paper-button.html">
4+
<link rel="import" href="../iron-icon/iron-icon.html">
55

66
<dom-module id="github-login">
77
<style is="custom-style">
@@ -187,4 +187,4 @@
187187
}
188188
})
189189
</script>
190-
</dom-module>
190+
</dom-module>

‎github-login.html~‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<link rel="import" href="bower_components/polymer/polymer.html">
2+
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
3+
<link rel="import" href="bower_components/paper-button/paper-button.html">
4+
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
5+
6+
<dom-module id="github-login">
7+
<style is="custom-style">
8+
.large{
9+
background: rgba(71,68,67,1);
10+
background: -moz-linear-gradient(left, rgba(71,68,67,1) 0%, rgba(87,87,87,1) 58%, rgba(71,68,67,1) 100%);
11+
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(71,68,67,1)), color-stop(58%, rgba(87,87,87,1)), color-stop(100%, rgba(71,68,67,1)));
12+
background: -webkit-linear-gradient(left, rgba(71,68,67,1) 0%, rgba(87,87,87,1) 58%, rgba(71,68,67,1) 100%);
13+
background: -o-linear-gradient(left, rgba(71,68,67,1) 0%, rgba(87,87,87,1) 58%, rgba(71,68,67,1) 100%);
14+
background: -ms-linear-gradient(left, rgba(71,68,67,1) 0%, rgba(87,87,87,1) 58%, rgba(71,68,67,1) 100%);
15+
background: linear-gradient(to right, rgba(71,68,67,1) 0%, rgba(87,87,87,1) 58%, rgba(71,68,67,1) 100%);
16+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474443', endColorstr='#474443', GradientType=1 );
17+
color: #fff;
18+
border-radius: 3px;
19+
text-transform: none;
20+
width: 205px;
21+
height: 50px;
22+
font-size: 16px;
23+
}
24+
.sort{
25+
background-image: linear-gradient(#202d5f, #614381);
26+
border-radius: 3px;
27+
cursor: pointer;
28+
vertical-align: center;
29+
margin: 0;
30+
height: 46px;
31+
width: 82px;
32+
}
33+
34+
.disconnected {
35+
background: rgb(102,102,102);
36+
}
37+
38+
.icon{
39+
margin-left: -12px;
40+
margin-right: 6px;
41+
--iron-icon-width: 24px;
42+
--iron-icon-height: 24px;
43+
background-repeat:no-repeat;
44+
}
45+
46+
.sortIcon{
47+
--iron-icon-width: 30px;
48+
--iron-iron-height: 25px;
49+
}
50+
51+
</style>
52+
53+
<template>
54+
<iron-ajax
55+
id="githubcode" url="http://github-login-lab.appspot.com/oauth/github"
56+
method="GET"
57+
params='{
58+
"action": "request_token",
59+
"code": "{{code}}"
60+
}'
61+
handleAs="json"
62+
on-response='response'>
63+
</iron-ajax>
64+
65+
<!-- large and disconnected -->
66+
<template is="dom-if" if="[[_largeAndDisconnected(logged, sort)]]">
67+
<paper-button class="large" title="Github" on-click="_login">
68+
<iron-icon src='images/github-image.png' class="icon" ></iron-icon>
69+
<span>Login with GitHub</span>
70+
</paper-button>
71+
</template>
72+
73+
<!-- large and connected -->
74+
<template is="dom-if" if="[[_largeAndConnected(logged, sort)]]">
75+
<paper-button class="large disconnected" title="Github" on-click="_logout" >
76+
<iron-icon src="images/github-image.png" class="icono" ></iron-icon>
77+
<span>Logout from GitHub</span>
78+
</paper-button>
79+
</template>
80+
81+
<!-- sort and disconnected -->
82+
<template is="dom-if" if="[[_sortAndDisconnected(logged, sort)]]">
83+
84+
<paper-button class="sort" title="Github" on-click="_login" >
85+
<iron-icon src='images/github-image.png' class="sortIcon" ></iron-icon>
86+
</paper-button>
87+
</template>
88+
89+
<!-- sort and connected -->
90+
<template is="dom-if" if="[[_sortAndConnected(logged, sort)]]">
91+
<paper-button class="sort disconnected" title="Github" on-click="_logout" >
92+
<iron-icon src="images/github-image.png" class="sortIcon"></iron-icon>
93+
</paper-button>
94+
</template>
95+
</template>
96+
97+
<script>
98+
Polymer({
99+
is: "github-login",
100+
properties: {
101+
logged: {
102+
type: Boolean,
103+
value: false,
104+
refrectToAttrbiute: true
105+
},
106+
sort: {
107+
type: Boolean,
108+
value: false,
109+
refrectToAttrbiute: true
110+
},
111+
endpoint: {
112+
type: String,
113+
value: "",
114+
refrectToAttrbiute: true
115+
},
116+
access_token: {
117+
type: String,
118+
value: "",
119+
refrectToAttrbiute: true
120+
},
121+
code: {
122+
type: String,
123+
value: "",
124+
refrectToAttrbiute: true
125+
},
126+
scope: {
127+
type: String,
128+
value: "",
129+
refrectToAttrbiute: true
130+
}
131+
},
132+
133+
_response: function(e, d, s){
134+
this.accessToken = s.response;
135+
this.fire('github-logged',{token:this.accessToken,redSocial:'github'});
136+
},
137+
138+
_login: function(event, detail, sender){
139+
// Generamos la direccion donde vamos a realizar la peticion
140+
var url = 'https://github.com/login/oauth/authorize?';
141+
url += 'scope='+this.scope;
142+
url+='&client_id='+this.client_id;
143+
url+='&redirect_uri='+this.endpoint;
144+
// Guardamos en una variable el scope de la ventana principal
145+
var back = this;
146+
// Abrimos la ventana para que se realice la autenticacion
147+
var win = window.open(url, "Autentícate", 'width=800, height=600');
148+
// Escuchamos la direccion hasta que cambia con el codigo
149+
// NOTA: el callback y la ventana actual deben tener el mismo:
150+
// dominio,puerto y protocolo
151+
var pollTimer = window.setInterval(function() {
152+
try {
153+
// Esperamos a que nos devuelan un token
154+
if (win.document.URL.indexOf('code') != -1) {
155+
// Eliminamos el timer
156+
window.clearInterval(pollTimer);
157+
// Sacamos el codigo mediante expresion regular
158+
var url = win.document.URL;
159+
var patron = "code"+"=([^&#]*)";
160+
var exp = new RegExp(patron);
161+
// Ponemos en valor en una variable de la ventana principal
162+
back.code = exp.exec(url)[1];
163+
// Llamamos a backend para que obtenga el token
164+
back.$.githubcode.go();
165+
back.logged = true;
166+
win.close();
167+
}
168+
} catch (e) {
169+
}
170+
}, 100);
171+
},
172+
_logout: function(event, detail, sender){
173+
var back = this;
174+
this.logged = false;
175+
},
176+
_largeAndDisconnected: function (logged,sort) {
177+
return !logged && !sort;
178+
},
179+
_largeAndConnected: function(logged, sort) {
180+
return logged && !sort;
181+
},
182+
_sortAndDisconnected: function(logged, sort) {
183+
return !logged && sort;
184+
},
185+
_sortAndConnected: function(logged, sort) {
186+
return logged && sort;
187+
}
188+
})
189+
</script>
190+
</dom-module>

0 commit comments

Comments
 (0)