underlays/openid-selector/ikiwiki/openid/openid-jquery.js

   1 /*
   2 Based on the 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 selections_large = {
   9     email: {
  10         name: 'Email',
  11         icon: 'wikiicons/email.png',
  12         label: 'Enter your email address:',
  13         url: null
  14     },
  15     openid: {
  16         name: 'OpenID',
  17         icon: 'wikiicons/openidlogin-bg.gif',
  18         label: 'Enter your OpenID:',
  19         url: null
  20     },
  21 };
  22 var selections_small = {
  23     verisign: {
  24         name: 'Verisign',
  25         icon: 'ikiwiki/openid/verisign.png',
  26         label: 'Enter your Verisign username:',
  27         url: 'http://{username}.pip.verisignlabs.com/'
  28     },
  29     yahoo: {
  30         name: 'Yahoo',
  31         icon: 'ikiwiki/openid/goa-account-yahoo.png',
  32         url: 'http://me.yahoo.com/'
  33     },
  34     flickr: {
  35        name: 'Flickr',
  36        icon: 'ikiwiki/openid/goa-account-flickr.png',
  37        label: 'Enter your Flickr username:',
  38        url: 'http://flickr.com/photos/{username}/'
  39     },
  40     wordpress: {
  41         name: 'Wordpress',
  42        icon: 'ikiwiki/openid/wordpress.png',
  43         label: 'Enter your Wordpress.com username:',
  44         url: 'http://{username}.wordpress.com/'
  45     },
  46     aol: {
  47         name: 'AOL',
  48         icon: 'ikiwiki/openid/aol.png',
  49         label: 'Enter your AOL username:',
  50         url: 'http://openid.aol.com/{username}'
  51     }
  52 };
  53 var selections = $.extend({}, selections_large, selections_small);
  54
  55 var selector = {
  56
  57         ajaxHandler: null,
  58         cookie_expires: 6*30,   // 6 months.
  59         cookie_name: 'openid_selection', // historical name
  60         cookie_path: '/',
  61
  62         img_path: 'images/',
  63
  64         input_id: null,
  65         selection_url: null,
  66         selection_id: null,
  67         othersignin_id: null,
  68
  69     init: function(input_id, othersignin_id, othersignin_label) {
  70
  71         var selector_btns = $('#login_btns');
  72
  73         this.input_id = input_id;
  74
  75         $('#login_choice').show();
  76         $('#login_input_area').empty();
  77
  78         // add box for each selection
  79         for (id in selections_large) {
  80                 selector_btns.append(this.getBoxHTML(selections_large[id], 'large'));
  81         }
  82         if (othersignin_label != "") {
  83                 this.othersignin_label=othersignin_label;
  84         }
  85         else {
  86                 this.othersignin_label="other";
  87         }
  88         if (othersignin_id != "") {
  89                 this.othersignin_id=othersignin_id;
  90                 selector_btns.prepend(
  91                         '<a href="javascript: selector.signin(\'othersignin\');"' +
  92                         ' style="background: #FFF" ' +
  93                         'class="othersignin login_large_btn">' +
  94                         '<img alt="" width="16" height="16" src="favicon.ico" />' +
  95                         ' ' + this.othersignin_label +
  96                         '</a>'
  97                 );
  98                 $('#'+this.othersignin_id).hide();
  99         }
 100
 101         if (selections_small) {
 102                 selector_btns.append('<br/>');
 103
 104                 for (id in selections_small) {
 105                         selector_btns.append(this.getBoxHTML(selections_small[id], 'small'));
 106                 }
 107         }
 108
 109         $('#login_selector_form').submit(this.submit);
 110
 111         var box_id = this.readCookie();
 112         if (box_id) {
 113                 this.signin(box_id, true);
 114         }
 115     },
 116     getBoxHTML: function(selection, box_size) {
 117         var label="";
 118         var title=""
 119         if (box_size == 'large') {
 120                 label=' ' + selection["name"];
 121         }
 122         else {
 123                 title=' title="'+selection["name"]+'"';
 124         }
 125         var box_id = selection["name"].toLowerCase();
 126         return '<a' + title +' href="javascript: selector.signin(\''+ box_id +'\');"' +
 127                         ' style="background: #FFF" ' +
 128                         'class="' + box_id + ' login_' + box_size + '_btn">' +
 129                         '<img alt="" width="16" height="16" src="' + selection["icon"] + '" />' +
 130                         label +
 131                         '</a>';
 132
 133     },
 134     /* selection image click */
 135     signin: function(box_id, onload) {
 136
 137         if (box_id == 'othersignin') {
 138                 this.highlight(box_id);
 139                 $('#login_input_area').empty();
 140                 $('#'+this.othersignin_id).show();
 141                 this.setCookie(box_id);
 142                 return;
 143         }
 144         else {
 145                 if (this.othersignin_id) {
 146                         $('#'+this.othersignin_id).hide();
 147                 }
 148         }
 149
 150         var selection = selections[box_id];
 151                 if (! selection) {
 152                         return;
 153                 }
 154
 155                 this.highlight(box_id);
 156
 157                 this.selection_id = box_id;
 158                 this.selection_url = selection['url'];
 159
 160                 // prompt user for input?
 161                 if (selection['label']) {
 162                         this.setCookie(box_id);
 163                         this.useInputBox(selection);
 164                 } else {
 165                         this.setCookie('');
 166                         $('#login_input_area').empty();
 167                         if (! onload) {
 168                                 $('#login_selector_form').submit();
 169                         }
 170                 }
 171     },
 172     /* Sign-in button click */
 173     submit: function() {
 174         var url = selector.selection_url;
 175         if (url) {
 176                 url = url.replace('{username}', $('#entry').val());
 177                 selector.setOpenIdUrl(url);
 178         }
 179         else {
 180                 selector.setOpenIdUrl("");
 181         }
 182         if(selector.ajaxHandler) {
 183                 selector.ajaxHandler(selector.selection_id, document.getElementById(selector.input_id).value);
 184                 return false;
 185         }
 186         return true;
 187     },
 188     setOpenIdUrl: function (url) {
 189
 190         var hidden = $('#'+this.input_id);
 191         if (hidden.length > 0) {
 192                 hidden.value = url;
 193         } else {
 194                 $('#login_selector_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
 195         }
 196     },
 197     highlight: function (box_id) {
 198
 199         // remove previous highlight.
 200         var highlight = $('#login_highlight');
 201         if (highlight) {
 202                 highlight.replaceWith($('#login_highlight a')[0]);
 203         }
 204         // add new highlight.
 205         $('.'+box_id).wrap('<div id="login_highlight"></div>');
 206     },
 207     setCookie: function (value) {
 208
 209                 var date = new Date();
 210                 date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
 211                 var expires = "; expires="+date.toGMTString();
 212
 213                 document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
 214     },
 215     readCookie: function () {
 216                 var nameEQ = this.cookie_name + "=";
 217                 var ca = document.cookie.split(';');
 218                 for(var i=0;i < ca.length;i++) {
 219                         var c = ca[i];
 220                         while (c.charAt(0)==' ') c = c.substring(1,c.length);
 221                         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 222                 }
 223                 return null;
 224     },
 225     useInputBox: function (selection) {
 226
 227                 var input_area = $('#login_input_area');
 228
 229                 var html = '';
 230                 var id = 'entry';
 231                 var value = '';
 232                 var label = selection['label'];
 233                 var style = '';
 234
 235                 if (selection['name'] == 'OpenID') {
 236                         id = this.input_id;
 237                         value = '';
 238                         style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;';
 239                 }
 240                 if (label) {
 241                         html = '<label for="'+ id +'" class="block">' + label + '</label>';
 242                 }
 243                 html += '<input name="selection" type="hidden" value="' + selection['name'] + '" />'
 244                 html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' +
 245                                         '<input id="selector_submit" type="submit" value="Login"/>';
 246
 247                 input_area.empty();
 248                 input_area.append(html);
 249
 250                 $('#'+id).focus();
 251     },
 252     setAjaxHandler: function (ajaxFunction) {
 253         this.ajaxHandler = ajaxFunction;
 254     }
 255 };