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