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