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" />' +
119 $('#'+this.localsignin_id).hide();
122 $('#openid_form').submit(this.submit);
124 var box_id = this.readCookie();
126 this.signin(box_id, true);
129 getBoxHTML: function(provider, box_size) {
132 if (box_size == 'large') {
133 label=' ' + provider["name"];
136 title=' title="'+provider["name"]+'"';
138 var box_id = provider["name"].toLowerCase();
139 return '<a' + title +' href="javascript: openid.signin(\''+ box_id +'\');"' +
140 ' style="background: #FFF" ' +
141 'class="' + box_id + ' openid_' + box_size + '_btn">' +
142 '<img alt="" width="16" height="16" src="' + provider["icon"] + '" />' +
147 /* Provider image click */
148 signin: function(box_id, onload) {
150 if (box_id == 'localsignin') {
151 this.highlight(box_id);
152 $('#openid_input_area').empty();
153 $('#'+this.localsignin_id).show();
154 this.setCookie(box_id);
158 if (this.localsignin_id) {
159 $('#'+this.localsignin_id).hide();
163 var provider = providers[box_id];
168 this.highlight(box_id);
170 this.provider_id = box_id;
171 this.provider_url = provider['url'];
173 // prompt user for input?
174 if (provider['label']) {
175 this.setCookie(box_id);
176 this.useInputBox(provider);
179 $('#openid_input_area').empty();
181 $('#openid_form').submit();
185 /* Sign-in button click */
188 var url = openid.provider_url;
190 url = url.replace('{username}', $('#openid_username').val());
191 openid.setOpenIdUrl(url);
193 if(openid.ajaxHandler) {
194 openid.ajaxHandler(openid.provider_id, document.getElementById(openid.input_id).value);
198 alert("In client demo mode. Normally would have submitted OpenID:\r\n" + document.getElementById(openid.input_id).value);
203 setOpenIdUrl: function (url) {
205 var hidden = $('#'+this.input_id);
206 if (hidden.length > 0) {
209 $('#openid_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
212 highlight: function (box_id) {
214 // remove previous highlight.
215 var highlight = $('#openid_highlight');
217 highlight.replaceWith($('#openid_highlight a')[0]);
219 // add new highlight.
220 $('.'+box_id).wrap('<div id="openid_highlight"></div>');
222 setCookie: function (value) {
224 var date = new Date();
225 date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
226 var expires = "; expires="+date.toGMTString();
228 document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
230 readCookie: function () {
231 var nameEQ = this.cookie_name + "=";
232 var ca = document.cookie.split(';');
233 for(var i=0;i < ca.length;i++) {
235 while (c.charAt(0)==' ') c = c.substring(1,c.length);
236 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
240 useInputBox: function (provider) {
242 var input_area = $('#openid_input_area');
245 var id = 'openid_username';
247 var label = provider['label'];
250 if (provider['name'] == 'OpenID') {
253 style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;';
256 html = '<label for="'+ id +'" class="block">' + label + '</label>';
258 html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' +
259 '<input id="openid_submit" type="submit" value="Login"/>';
262 input_area.append(html);
266 setDemoMode: function (demoMode) {
267 this.demo = demoMode;
269 setAjaxHandler: function (ajaxFunction) {
270 this.ajaxHandler = ajaxFunction;