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: 'http://flickr.com/favicon.ico',
36 label: 'Enter your Flickr username:',
37 url: 'http://flickr.com/photos/{username}/'
41 icon: 'https://ddgw.s3.amazonaws.com/wordpress.org.ico',
42 label: 'Enter your Wordpress.com username:',
43 url: 'http://{username}.wordpress.com/'
47 icon: 'http://myopenid.com/favicon.ico',
48 label: 'Enter your MyOpenID username:',
49 url: 'http://{username}.myopenid.com/'
53 icon: 'http://claimid.com/favicon.ico',
54 label: 'Enter your ClaimID username:',
55 url: 'http://claimid.com/{username}'
59 icon: 'http://aol.com/favicon.ico',
60 label: 'Enter your AOL username:',
61 url: 'http://openid.aol.com/{username}'
65 icon: 'http://verisign.com/favicon.ico',
66 label: 'Enter your Verisign username:',
67 url: 'http://{username}.pip.verisignlabs.com/'
70 var providers = $.extend({}, providers_large, providers_small);
76 cookie_expires: 6*30, // 6 months.
77 cookie_name: 'openid_provider',
87 init: function(input_id, localsignin_id) {
89 var openid_btns = $('#openid_btns');
91 this.input_id = input_id;
93 $('#openid_choice').show();
94 $('#openid_input_area').empty();
96 // add box for each provider
97 for (id in providers_large) {
98 openid_btns.append(this.getBoxHTML(providers_large[id], 'large'));
101 if (providers_small) {
102 openid_btns.append('<br/>');
104 for (id in providers_small) {
106 openid_btns.append(this.getBoxHTML(providers_small[id], 'small'));
109 if (localsignin_id != "") {
110 this.localsignin_id=localsignin_id;
112 '<a href="javascript: openid.signin(\'localsignin\');"' +
113 ' style="background: #FFF" ' +
114 'class="localsignin openid_small_btn">' +
115 '<img alt="" width="16" height="16" src="favicon.ico" />' +
121 $('#openid_form').submit(this.submit);
123 var box_id = this.readCookie();
125 this.signin(box_id, true);
128 getBoxHTML: function(provider, box_size) {
131 if (box_size == 'large') {
132 label=' ' + provider["name"];
135 title=' title="'+provider["name"]+'"';
137 var box_id = provider["name"].toLowerCase();
138 return '<a' + title +' href="javascript: openid.signin(\''+ box_id +'\');"' +
139 ' style="background: #FFF" ' +
140 'class="' + box_id + ' openid_' + box_size + '_btn">' +
141 '<img alt="" width="16" height="16" src="' + provider["icon"] + '" />' +
146 /* Provider image click */
147 signin: function(box_id, onload) {
149 if (box_id == 'localsignin') {
150 this.highlight(box_id);
151 $('#openid_input_area').empty();
152 $('#'+this.localsignin_id).show();
153 this.setCookie(box_id);
157 if (this.localsignin_id) {
158 $('#'+this.localsignin_id).hide();
162 var provider = providers[box_id];
167 this.highlight(box_id);
169 this.provider_id = box_id;
170 this.provider_url = provider['url'];
172 // prompt user for input?
173 if (provider['label']) {
174 this.setCookie(box_id);
175 this.useInputBox(provider);
178 $('#openid_input_area').empty();
180 $('#openid_form').submit();
184 /* Sign-in button click */
187 var url = openid.provider_url;
189 url = url.replace('{username}', $('#openid_username').val());
190 openid.setOpenIdUrl(url);
192 if(openid.ajaxHandler) {
193 openid.ajaxHandler(openid.provider_id, document.getElementById(openid.input_id).value);
197 alert("In client demo mode. Normally would have submitted OpenID:\r\n" + document.getElementById(openid.input_id).value);
202 setOpenIdUrl: function (url) {
204 var hidden = $('#'+this.input_id);
205 if (hidden.length > 0) {
208 $('#openid_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
211 highlight: function (box_id) {
213 // remove previous highlight.
214 var highlight = $('#openid_highlight');
216 highlight.replaceWith($('#openid_highlight a')[0]);
218 // add new highlight.
219 $('.'+box_id).wrap('<div id="openid_highlight"></div>');
221 setCookie: function (value) {
223 var date = new Date();
224 date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
225 var expires = "; expires="+date.toGMTString();
227 document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
229 readCookie: function () {
230 var nameEQ = this.cookie_name + "=";
231 var ca = document.cookie.split(';');
232 for(var i=0;i < ca.length;i++) {
234 while (c.charAt(0)==' ') c = c.substring(1,c.length);
235 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
239 useInputBox: function (provider) {
241 var input_area = $('#openid_input_area');
244 var id = 'openid_username';
246 var label = provider['label'];
250 html = '<p>' + label + '</p>';
252 if (provider['name'] == 'OpenID') {
255 style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;';
257 html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' +
258 '<input id="openid_submit" type="submit" value="Login"/>';
261 input_area.append(html);
265 setDemoMode: function (demoMode) {
266 this.demo = demoMode;
268 setAjaxHandler: function (ajaxFunction) {
269 this.ajaxHandler = ajaxFunction;