add gmail button
[ikiwiki] / underlays / openid-selector / ikiwiki / openid / openid-jquery.js
1 /*
2 Simple OpenID Plugin
3 http://code.google.com/p/openid-selector/
4
5 This code is licenced under the New BSD License.
6 */
7
8 var providers_large = {
9     google: {
10         name: 'Google',
11         icon: 'http://google.com/favicon.ico',
12         url: 'https://www.google.com/accounts/o8/id'
13     },
14     yahoo: {
15         name: 'Yahoo',      
16         icon: 'http://yahoo.com/favicon.ico',
17         url: 'http://me.yahoo.com/'
18     },    
19     openid: {
20         name: 'OpenID',     
21         icon: 'wikiicons/openidlogin-bg.gif',
22         label: 'Enter your OpenID:',
23         url: null
24     },
25 };
26 var providers_small = {
27     livejournal: {
28         name: 'LiveJournal',
29         icon: 'http://livejournal.com/favicon.ico',
30         label: 'Enter your Livejournal username:',
31         url: 'http://{username}.livejournal.com/'
32     },
33     wordpress: {
34         name: 'Wordpress',
35         icon: 'https://ddgw.s3.amazonaws.com/wordpress.org.ico',
36         label: 'Enter your Wordpress.com username:',
37         url: 'http://{username}.wordpress.com/'
38     },
39     gmail: {
40         name: 'Gmail',
41         icon: 'http://mail.google.com/favicon.ico',
42         label: 'Enter your Gmail address:',
43         url: 'http://google.com/profiles/{email_username}/'
44     },
45     flickr: {
46         name: 'Flickr',
47         icon: 'http://www.flickr.com/favicon.ico',
48         label: 'Enter your Flickr username:',
49         url: 'http://flickr.com/photos/{username}/'
50     },
51     myopenid: {
52         name: 'MyOpenID',
53         icon: 'http://myopenid.com/favicon.ico',
54         label: 'Enter your MyOpenID username:',
55         url: 'http://{username}.myopenid.com/'
56     },
57     claimid: {
58         name: 'ClaimID',
59         icon: 'http://claimid.com/favicon.ico',
60         label: 'Enter your ClaimID username:',
61         url: 'http://claimid.com/{username}'
62     },
63     aol: {
64         name: 'AOL',     
65         icon: 'http://aol.com/favicon.ico',
66         label: 'Enter your AOL username:',
67         url: 'http://openid.aol.com/{username}'
68     },
69     verisign: {
70         name: 'Verisign',
71         icon: 'http://verisign.com/favicon.ico',
72         label: 'Enter your Verisign username:',
73         url: 'http://{username}.pip.verisignlabs.com/'
74     },
75 };
76 var providers = $.extend({}, providers_large, providers_small);
77
78 var openid = {
79
80         demo: false,
81         ajaxHandler: null,
82         cookie_expires: 6*30,   // 6 months.
83         cookie_name: 'openid_provider',
84         cookie_path: '/',
85         
86         img_path: 'images/',
87         
88         input_id: null,
89         provider_url: null,
90         provider_id: null,
91         
92     init: function(input_id, localloginurl) {
93         
94         var openid_btns = $('#openid_btns');
95         
96         this.input_id = input_id;
97         
98         $('#openid_choice').show();
99         $('#openid_input_area').empty();
100         
101         // add box for each provider
102         for (id in providers_large) {
103                 openid_btns.append(this.getBoxHTML(providers_large[id], 'large'));
104         }
105
106         if (providers_small) {
107                 openid_btns.append('<br/>');
108                 
109                 for (id in providers_small) {
110                 
111                         openid_btns.append(this.getBoxHTML(providers_small[id], 'small'));
112                 }
113         }
114         if (localloginurl != "") {
115                 openid_btns.append(
116                         '<a href="' + localloginurl + '"' +
117                         ' style="background: #FFF" ' +
118                         'class="openid_small_btn">' +
119                         '<img alt="" width="16" height="16" src="favicon.ico" />' +
120                         ' Local Account' +
121                         '</a>'
122                 );
123         }
124         
125         $('#openid_form').submit(this.submit);
126         
127         var box_id = this.readCookie();
128         if (box_id) {
129                 this.signin(box_id, true);
130         }  
131     },
132     getBoxHTML: function(provider, box_size) {
133         var label="";
134         var title=""
135         if (box_size == 'large') {
136                 label=' ' + provider["name"];
137         }
138         else {
139                 title=' title="'+provider["name"]+'"';
140         }
141         var box_id = provider["name"].toLowerCase();
142         return '<a' + title +' href="javascript: openid.signin(\''+ box_id +'\');"' +
143                         ' style="background: #FFF" ' + 
144                         'class="' + box_id + ' openid_' + box_size + '_btn">' +
145                         '<img alt="" width="16" height="16" src="' + provider["icon"] + '" />' +
146                         label +
147                         '</a>';
148     
149     },
150     /* Provider image click */
151     signin: function(box_id, onload) {
152     
153         var provider = providers[box_id];
154                 if (! provider) {
155                         return;
156                 }
157                 
158                 this.highlight(box_id);
159                 
160                 this.provider_id = box_id;
161                 this.provider_url = provider['url'];
162                 
163                 // prompt user for input?
164                 if (provider['label']) {
165                         this.setCookie(box_id);
166                         this.useInputBox(provider);
167                 } else {
168                         this.setCookie('');
169                         $('#openid_input_area').empty();
170                         if (! onload) {
171                                 $('#openid_form').submit();
172                         }
173                 }
174     },
175     /* Sign-in button click */
176     submit: function() {
177         
178         var url = openid.provider_url; 
179         if (url) {
180                 url = url.replace('{username}', $('#openid_username').val());
181                 url = url.replace('{email_username}', $('#openid_username').val().split('@')[0]);
182                 openid.setOpenIdUrl(url);
183         }
184         if(openid.ajaxHandler) {
185                 openid.ajaxHandler(openid.provider_id, document.getElementById(openid.input_id).value);
186                 return false;
187         }
188         if(openid.demo) {
189                 alert("In client demo mode. Normally would have submitted OpenID:\r\n" + document.getElementById(openid.input_id).value);
190                 return false;
191         }
192         return true;
193     },
194     setOpenIdUrl: function (url) {
195     
196         var hidden = $('#'+this.input_id);
197         if (hidden.length > 0) {
198                 hidden.value = url;
199         } else {
200                 $('#openid_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
201         }
202     },
203     highlight: function (box_id) {
204         
205         // remove previous highlight.
206         var highlight = $('#openid_highlight');
207         if (highlight) {
208                 highlight.replaceWith($('#openid_highlight a')[0]);
209         }
210         // add new highlight.
211         $('.'+box_id).wrap('<div id="openid_highlight"></div>');
212     },
213     setCookie: function (value) {
214     
215                 var date = new Date();
216                 date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
217                 var expires = "; expires="+date.toGMTString();
218                 
219                 document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
220     },
221     readCookie: function () {
222                 var nameEQ = this.cookie_name + "=";
223                 var ca = document.cookie.split(';');
224                 for(var i=0;i < ca.length;i++) {
225                         var c = ca[i];
226                         while (c.charAt(0)==' ') c = c.substring(1,c.length);
227                         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
228                 }
229                 return null;
230     },
231     useInputBox: function (provider) {
232         
233                 var input_area = $('#openid_input_area');
234                 
235                 var html = '';
236                 var id = 'openid_username';
237                 var value = '';
238                 var label = provider['label'];
239                 var style = '';
240                 
241                 if (label) {
242                         html = '<p>' + label + '</p>';
243                 }
244                 if (provider['name'] == 'OpenID') {
245                         id = this.input_id;
246                         value = '';
247                         style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;';
248                 }
249                 html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' + 
250                                         '<input id="openid_submit" type="submit" value="Login"/>';
251                 
252                 input_area.empty();
253                 input_area.append(html);
254
255                 $('#'+id).focus();
256     },
257     setDemoMode: function (demoMode) {
258         this.demo = demoMode;
259     },
260     setAjaxHandler: function (ajaxFunction) {
261         this.ajaxHandler = ajaxFunction;
262     }
263 };