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://s2.wp.com/i/favicon.ico',
42 label: 'Enter your Wordpress.com username:',
43 url: 'http://{username}.wordpress.com/'
47 icon: 'http://claimid.com/favicon.ico',
48 label: 'Enter your ClaimID username:',
49 url: 'http://claimid.com/{username}'
53 icon: 'http://aol.com/favicon.ico',
54 label: 'Enter your AOL username:',
55 url: 'http://openid.aol.com/{username}'
59 icon: 'http://verisign.com/favicon.ico',
60 label: 'Enter your Verisign username:',
61 url: 'http://{username}.pip.verisignlabs.com/'
64 var providers = $.extend({}, providers_large, providers_small);
70 cookie_expires: 6*30, // 6 months.
71 cookie_name: 'openid_provider',
81 init: function(input_id, localsignin_id) {
83 var openid_btns = $('#openid_btns');
85 this.input_id = input_id;
87 $('#openid_choice').show();
88 $('#openid_input_area').empty();
90 // add box for each provider
91 for (id in providers_large) {
92 openid_btns.append(this.getBoxHTML(providers_large[id], 'large'));
95 if (providers_small) {
96 openid_btns.append('<br/>');
98 for (id in providers_small) {
100 openid_btns.append(this.getBoxHTML(providers_small[id], 'small'));
103 if (localsignin_id != "") {
104 this.localsignin_id=localsignin_id;
106 '<a href="javascript: openid.signin(\'localsignin\');"' +
107 ' style="background: #FFF" ' +
108 'class="localsignin openid_small_btn">' +
109 '<img alt="" width="16" height="16" src="favicon.ico" />' +
113 $('#'+this.localsignin_id).hide();
116 $('#openid_form').submit(this.submit);
118 var box_id = this.readCookie();
120 this.signin(box_id, true);
123 getBoxHTML: function(provider, box_size) {
126 if (box_size == 'large') {
127 label=' ' + provider["name"];
130 title=' title="'+provider["name"]+'"';
132 var box_id = provider["name"].toLowerCase();
133 return '<a' + title +' href="javascript: openid.signin(\''+ box_id +'\');"' +
134 ' style="background: #FFF" ' +
135 'class="' + box_id + ' openid_' + box_size + '_btn">' +
136 '<img alt="" width="16" height="16" src="' + provider["icon"] + '" />' +
141 /* Provider image click */
142 signin: function(box_id, onload) {
144 if (box_id == 'localsignin') {
145 this.highlight(box_id);
146 $('#openid_input_area').empty();
147 $('#'+this.localsignin_id).show();
148 this.setCookie(box_id);
152 if (this.localsignin_id) {
153 $('#'+this.localsignin_id).hide();
157 var provider = providers[box_id];
162 this.highlight(box_id);
164 this.provider_id = box_id;
165 this.provider_url = provider['url'];
167 // prompt user for input?
168 if (provider['label']) {
169 this.setCookie(box_id);
170 this.useInputBox(provider);
173 $('#openid_input_area').empty();
175 $('#openid_form').submit();
179 /* Sign-in button click */
182 var url = openid.provider_url;
184 url = url.replace('{username}', $('#openid_username').val());
185 openid.setOpenIdUrl(url);
187 if(openid.ajaxHandler) {
188 openid.ajaxHandler(openid.provider_id, document.getElementById(openid.input_id).value);
192 alert("In client demo mode. Normally would have submitted OpenID:\r\n" + document.getElementById(openid.input_id).value);
197 setOpenIdUrl: function (url) {
199 var hidden = $('#'+this.input_id);
200 if (hidden.length > 0) {
203 $('#openid_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
206 highlight: function (box_id) {
208 // remove previous highlight.
209 var highlight = $('#openid_highlight');
211 highlight.replaceWith($('#openid_highlight a')[0]);
213 // add new highlight.
214 $('.'+box_id).wrap('<div id="openid_highlight"></div>');
216 setCookie: function (value) {
218 var date = new Date();
219 date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
220 var expires = "; expires="+date.toGMTString();
222 document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
224 readCookie: function () {
225 var nameEQ = this.cookie_name + "=";
226 var ca = document.cookie.split(';');
227 for(var i=0;i < ca.length;i++) {
229 while (c.charAt(0)==' ') c = c.substring(1,c.length);
230 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
234 useInputBox: function (provider) {
236 var input_area = $('#openid_input_area');
239 var id = 'openid_username';
241 var label = provider['label'];
244 if (provider['name'] == 'OpenID') {
247 style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;';
250 html = '<label for="'+ id +'" class="block">' + label + '</label>';
252 html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' +
253 '<input id="openid_submit" type="submit" value="Login"/>';
256 input_area.append(html);
260 setDemoMode: function (demoMode) {
261 this.demo = demoMode;
263 setAjaxHandler: function (ajaxFunction) {
264 this.ajaxHandler = ajaxFunction;