3 http://code.google.com/p/openid-selector/
5 This code is licenced under the New BSD License.
8 var providers_large = {
11 icon: 'http://google.com/favicon.ico',
12 url: 'https://www.google.com/accounts/o8/id'
16 icon: 'http://yahoo.com/favicon.ico',
17 url: 'http://me.yahoo.com/'
21 icon: 'wikiicons/openidlogin-bg.gif',
22 label: 'Enter your OpenID:',
26 var providers_small = {
29 icon: 'http://livejournal.com/favicon.ico',
30 label: 'Enter your Livejournal username:',
31 url: 'http://{username}.livejournal.com/'
35 icon: 'https://ddgw.s3.amazonaws.com/wordpress.org.ico',
36 label: 'Enter your Wordpress.com username:',
37 url: 'http://{username}.wordpress.com/'
41 icon: 'http://mail.google.com/favicon.ico',
42 label: 'Enter your Gmail address:',
43 url: 'http://google.com/profiles/{email_username}/'
47 icon: 'http://www.flickr.com/favicon.ico',
48 label: 'Enter your Flickr username:',
49 url: 'http://flickr.com/photos/{username}/'
53 icon: 'http://myopenid.com/favicon.ico',
54 label: 'Enter your MyOpenID username:',
55 url: 'http://{username}.myopenid.com/'
59 icon: 'http://claimid.com/favicon.ico',
60 label: 'Enter your ClaimID username:',
61 url: 'http://claimid.com/{username}'
65 icon: 'http://aol.com/favicon.ico',
66 label: 'Enter your AOL username:',
67 url: 'http://openid.aol.com/{username}'
71 icon: 'http://verisign.com/favicon.ico',
72 label: 'Enter your Verisign username:',
73 url: 'http://{username}.pip.verisignlabs.com/'
76 var providers = $.extend({}, providers_large, providers_small);
82 cookie_expires: 6*30, // 6 months.
83 cookie_name: 'openid_provider',
92 init: function(input_id, localloginurl) {
94 var openid_btns = $('#openid_btns');
96 this.input_id = input_id;
98 $('#openid_choice').show();
99 $('#openid_input_area').empty();
101 // add box for each provider
102 for (id in providers_large) {
103 openid_btns.append(this.getBoxHTML(providers_large[id], 'large'));
106 if (providers_small) {
107 openid_btns.append('<br/>');
109 for (id in providers_small) {
111 openid_btns.append(this.getBoxHTML(providers_small[id], 'small'));
114 if (localloginurl != "") {
116 '<a href="' + localloginurl + '"' +
117 ' style="background: #FFF" ' +
118 'class="openid_small_btn">' +
119 '<img alt="" width="16" height="16" src="favicon.ico" />' +
125 $('#openid_form').submit(this.submit);
127 var box_id = this.readCookie();
129 this.signin(box_id, true);
132 getBoxHTML: function(provider, box_size) {
135 if (box_size == 'large') {
136 label=' ' + provider["name"];
139 title=' title="'+provider["name"]+'"';
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"] + '" />' +
150 /* Provider image click */
151 signin: function(box_id, onload) {
153 var provider = providers[box_id];
158 this.highlight(box_id);
160 this.provider_id = box_id;
161 this.provider_url = provider['url'];
163 // prompt user for input?
164 if (provider['label']) {
165 this.setCookie(box_id);
166 this.useInputBox(provider);
169 $('#openid_input_area').empty();
171 $('#openid_form').submit();
175 /* Sign-in button click */
178 var url = openid.provider_url;
180 url = url.replace('{username}', $('#openid_username').val());
181 url = url.replace('{email_username}', $('#openid_username').val().split('@')[0]);
182 openid.setOpenIdUrl(url);
184 if(openid.ajaxHandler) {
185 openid.ajaxHandler(openid.provider_id, document.getElementById(openid.input_id).value);
189 alert("In client demo mode. Normally would have submitted OpenID:\r\n" + document.getElementById(openid.input_id).value);
194 setOpenIdUrl: function (url) {
196 var hidden = $('#'+this.input_id);
197 if (hidden.length > 0) {
200 $('#openid_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
203 highlight: function (box_id) {
205 // remove previous highlight.
206 var highlight = $('#openid_highlight');
208 highlight.replaceWith($('#openid_highlight a')[0]);
210 // add new highlight.
211 $('.'+box_id).wrap('<div id="openid_highlight"></div>');
213 setCookie: function (value) {
215 var date = new Date();
216 date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
217 var expires = "; expires="+date.toGMTString();
219 document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
221 readCookie: function () {
222 var nameEQ = this.cookie_name + "=";
223 var ca = document.cookie.split(';');
224 for(var i=0;i < ca.length;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);
231 useInputBox: function (provider) {
233 var input_area = $('#openid_input_area');
236 var id = 'openid_username';
238 var label = provider['label'];
242 html = '<p>' + label + '</p>';
244 if (provider['name'] == 'OpenID') {
247 style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;';
249 html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' +
250 '<input id="openid_submit" type="submit" value="Login"/>';
253 input_area.append(html);
257 setDemoMode: function (demoMode) {
258 this.demo = demoMode;
260 setAjaxHandler: function (ajaxFunction) {
261 this.ajaxHandler = ajaxFunction;