From: Joey Hess Date: Wed, 13 May 2015 20:44:43 +0000 (-0400) Subject: generalized the openid selector to a login selector X-Git-Tag: 3.20150610~72^2~14 X-Git-Url: http://git.vanrenterghem.biz/git.ikiwiki.info.git/commitdiff_plain/ab4d9a54677c2c17b186048ba5d86986a161bcef generalized the openid selector to a login selector This includes some CSS changes to names of elements. Also, added Email login button (doesn't work yet of course), and brought back the small openid login buttons. Demoted yahoo and verison to small buttons. This makes the big buttons be the main login types, and the small buttons be provider-specific helpers. --- diff --git a/IkiWiki/Plugin/openid.pm b/IkiWiki/Plugin/openid.pm index 00652ebb7..bfd130ace 100644 --- a/IkiWiki/Plugin/openid.pm +++ b/IkiWiki/Plugin/openid.pm @@ -25,15 +25,18 @@ sub checkconfig () { # a reference to the normal signin form. require IkiWiki::CGI; my $real_cgi_signin; - my $nonopenidform_label=gettext("Other"); + my $otherform_label=gettext("Other"); if (keys %{$IkiWiki::hooks{auth}} > 1) { $real_cgi_signin=\&IkiWiki::cgi_signin; - if (keys %{$IkiWiki::hooks{auth}} == 2 && exists $IkiWiki::hooks{auth}->{passwordauth}) { - $nonopenidform_label=gettext("Password"); + my %h=%{$IkiWiki::hooks{auth}}; + delete $h{openid}; + delete $h{emailauth}; + if (keys %h == 1 && exists $h{passwordauth}) { + $otherform_label=gettext("Password"); } } inject(name => "IkiWiki::cgi_signin", call => sub ($$) { - openid_selector($real_cgi_signin, $nonopenidform_label, @_); + openid_selector($real_cgi_signin, $otherform_label, @_); }); } } @@ -61,12 +64,12 @@ sub getsetup () { sub openid_selector { my $real_cgi_signin=shift; - my $nonopenidform_label=shift; + my $otherform_label=shift; my $q=shift; my $session=shift; + my $template=IkiWiki::template("openid-selector.tmpl"); my $openid_url=$q->param('openid_identifier'); - my $openid_error; if (! load_openid_module()) { if ($real_cgi_signin) { @@ -75,19 +78,17 @@ sub openid_selector { } error(sprintf(gettext("failed to load openid module: "), @_)); } - elsif (defined $q->param("action") && $q->param("action") eq "verify") { + elsif (defined $q->param("action") && $q->param("action") eq "verify" && defined $openid_url && length $openid_url) { validate($q, $session, $openid_url, sub { - $openid_error=shift; + $template->param(login_error => shift()) }); } - my $template=IkiWiki::template("openid-selector.tmpl"); $template->param( cgiurl => IkiWiki::cgiurl(), - (defined $openid_error ? (openid_error => $openid_error) : ()), (defined $openid_url ? (openid_url => $openid_url) : ()), - ($real_cgi_signin ? (nonopenidform => $real_cgi_signin->($q, $session, 1)) : ()), - nonopenidform_label => $nonopenidform_label, + ($real_cgi_signin ? (otherform => $real_cgi_signin->($q, $session, 1)) : ()), + otherform_label => $otherform_label, ); IkiWiki::printheader($session); diff --git a/doc/style.css b/doc/style.css index fe1eb903d..f0846c0d6 100644 --- a/doc/style.css +++ b/doc/style.css @@ -465,40 +465,40 @@ li.L8 { list-style: upper-alpha; } display: none; } -/* openid selector */ -#openid_choice { +/* login selector */ +#login_choice { display: none; } -#openid_input_area { +#login_input_area { clear: both; padding: 10px; } -#openid_btns, #openid_btns br { +#login_btns, #login_btns br { clear: both; } -#openid_highlight { +#login_highlight { background-color: black; float: left; } -.openid_large_btn { +.login_large_btn { padding: 1em 1.5em; border: 1px solid #DDD; margin: 3px; float: left; } -.openid_small_btn { +.login_small_btn { padding: 4px 4px; border: 1px solid #DDD; margin: 3px; float: left; } -a.openid_large_btn:focus { +a.login_large_btn:focus { outline: none; } -a.openid_large_btn:focus { +a.login_large_btn:focus { outline-style: none; } -.openid_selected { +.login_selected { border: 4px solid #DDD; } diff --git a/doc/wikiicons/emaillogin.png b/doc/wikiicons/emaillogin.png new file mode 100644 index 000000000..1b16befd6 Binary files /dev/null and b/doc/wikiicons/emaillogin.png differ diff --git a/templates/openid-selector.tmpl b/templates/openid-selector.tmpl index 95ba086fe..03eb5d779 100644 --- a/templates/openid-selector.tmpl +++ b/templates/openid-selector.tmpl @@ -2,42 +2,42 @@ -
-
+ +
-
-
+
+
-
+
- -
+ +
-
+
-
- +
+
- +
diff --git a/underlays/openid-selector/ikiwiki/openid/aol.png b/underlays/openid-selector/ikiwiki/openid/aol.png new file mode 100644 index 000000000..d47f5fa54 Binary files /dev/null and b/underlays/openid-selector/ikiwiki/openid/aol.png differ diff --git a/underlays/openid-selector/ikiwiki/openid/goa-account-flickr.png b/underlays/openid-selector/ikiwiki/openid/goa-account-flickr.png new file mode 100644 index 000000000..5321642f6 Binary files /dev/null and b/underlays/openid-selector/ikiwiki/openid/goa-account-flickr.png differ diff --git a/underlays/openid-selector/ikiwiki/openid/livejournal.png b/underlays/openid-selector/ikiwiki/openid/livejournal.png new file mode 100644 index 000000000..d86ee5eac Binary files /dev/null and b/underlays/openid-selector/ikiwiki/openid/livejournal.png differ diff --git a/underlays/openid-selector/ikiwiki/openid/openid-jquery.js b/underlays/openid-selector/ikiwiki/openid/openid-jquery.js index 2c72f19fb..db8dca235 100644 --- a/underlays/openid-selector/ikiwiki/openid/openid-jquery.js +++ b/underlays/openid-selector/ikiwiki/openid/openid-jquery.js @@ -1,11 +1,25 @@ /* -Simple OpenID Plugin +Based on the Simple OpenID Plugin http://code.google.com/p/openid-selector/ This code is licenced under the New BSD License. */ -var providers_large = { +var selections_large = { + email: { + name: 'Email', + icon: 'wikiicons/email.png', + label: 'Enter your email address:', + url: null + }, + openid: { + name: 'OpenID', + icon: 'wikiicons/openidlogin-bg.gif', + label: 'Enter your OpenID:', + url: null + }, +}; +var selections_small = { verisign: { name: 'Verisign', icon: 'ikiwiki/openid/verisign.png', @@ -13,154 +27,160 @@ var providers_large = { url: 'http://{username}.pip.verisignlabs.com/' }, yahoo: { - name: 'Yahoo', + name: 'Yahoo', icon: 'ikiwiki/openid/goa-account-yahoo.png', url: 'http://me.yahoo.com/' - }, - openid: { - name: 'OpenID', - icon: 'wikiicons/openidlogin-bg.gif', - label: 'Enter your OpenID:', - url: null + }, + flickr: { + name: 'Flickr', + icon: 'ikiwiki/openid/goa-account-flickr.png', + label: 'Enter your Flickr username:', + url: 'http://flickr.com/photos/{username}/' + }, + wordpress: { + name: 'Wordpress', + icon: 'ikiwiki/openid/wordpress.png', + label: 'Enter your Wordpress.com username:', + url: 'http://{username}.wordpress.com/' + }, + aol: { + name: 'AOL', + icon: 'ikiwiki/openid/aol.png', + label: 'Enter your AOL username:', + url: 'http://openid.aol.com/{username}' } }; -var providers_small = { -}; -var providers = $.extend({}, providers_large, providers_small); +var selections = $.extend({}, selections_large, selections_small); -var openid = { +var selector = { - demo: false, ajaxHandler: null, cookie_expires: 6*30, // 6 months. - cookie_name: 'openid_provider', + cookie_name: 'openid_selection', // historical name cookie_path: '/', img_path: 'images/', input_id: null, - provider_url: null, - provider_id: null, - localsignin_id: null, + selection_url: null, + selection_id: null, + othersignin_id: null, - init: function(input_id, localsignin_id, localsignin_label) { + init: function(input_id, othersignin_id, othersignin_label) { - var openid_btns = $('#openid_btns'); + var selector_btns = $('#login_btns'); this.input_id = input_id; - $('#openid_choice').show(); - $('#openid_input_area').empty(); + $('#login_choice').show(); + $('#login_input_area').empty(); - // add box for each provider - for (id in providers_large) { - openid_btns.append(this.getBoxHTML(providers_large[id], 'large')); + // add box for each selection + for (id in selections_large) { + selector_btns.append(this.getBoxHTML(selections_large[id], 'large')); } - if (localsignin_label != "") { - this.localsignin_label=localsignin_label; + if (othersignin_label != "") { + this.othersignin_label=othersignin_label; } else { - this.localsignin_label="other"; + this.othersignin_label="other"; } - if (localsignin_id != "") { - this.localsignin_id=localsignin_id; - openid_btns.append( - '' + + 'class="othersignin login_large_btn">' + '' + - ' ' + this.localsignin_label + + ' ' + this.othersignin_label + '' ); - $('#'+this.localsignin_id).hide(); + $('#'+this.othersignin_id).hide(); } - if (providers_small) { - openid_btns.append('
'); + if (selections_small) { + selector_btns.append('
'); - for (id in providers_small) { - - openid_btns.append(this.getBoxHTML(providers_small[id], 'small')); + for (id in selections_small) { + selector_btns.append(this.getBoxHTML(selections_small[id], 'small')); } } - $('#openid_form').submit(this.submit); + $('#login_selector_form').submit(this.submit); var box_id = this.readCookie(); if (box_id) { this.signin(box_id, true); } }, - getBoxHTML: function(provider, box_size) { + getBoxHTML: function(selection, box_size) { var label=""; var title="" if (box_size == 'large') { - label=' ' + provider["name"]; + label=' ' + selection["name"]; } else { - title=' title="'+provider["name"]+'"'; + title=' title="'+selection["name"]+'"'; } - var box_id = provider["name"].toLowerCase(); - return '' + - '' + + 'class="' + box_id + ' login_' + box_size + '_btn">' + + '' + label + ''; }, - /* Provider image click */ + /* selection image click */ signin: function(box_id, onload) { - if (box_id == 'localsignin') { + if (box_id == 'othersignin') { this.highlight(box_id); - $('#openid_input_area').empty(); - $('#'+this.localsignin_id).show(); + $('#login_input_area').empty(); + $('#'+this.othersignin_id).show(); this.setCookie(box_id); return; } else { - if (this.localsignin_id) { - $('#'+this.localsignin_id).hide(); + if (this.othersignin_id) { + $('#'+this.othersignin_id).hide(); } } - var provider = providers[box_id]; - if (! provider) { + var selection = selections[box_id]; + if (! selection) { return; } this.highlight(box_id); - this.provider_id = box_id; - this.provider_url = provider['url']; + this.selection_id = box_id; + this.selection_url = selection['url']; // prompt user for input? - if (provider['label']) { + if (selection['label']) { this.setCookie(box_id); - this.useInputBox(provider); + this.useInputBox(selection); } else { this.setCookie(''); - $('#openid_input_area').empty(); + $('#login_input_area').empty(); if (! onload) { - $('#openid_form').submit(); + $('#login_selector_form').submit(); } } }, /* Sign-in button click */ submit: function() { - - var url = openid.provider_url; + var url = selector.selection_url; if (url) { - url = url.replace('{username}', $('#openid_username').val()); - openid.setOpenIdUrl(url); + url = url.replace('{username}', $('#entry').val()); + selector.setOpenIdUrl(url); } - if(openid.ajaxHandler) { - openid.ajaxHandler(openid.provider_id, document.getElementById(openid.input_id).value); - return false; - } - if(openid.demo) { - alert("In client demo mode. Normally would have submitted OpenID:\r\n" + document.getElementById(openid.input_id).value); + else { + selector.setOpenIdUrl(""); + } + if(selector.ajaxHandler) { + selector.ajaxHandler(selector.selection_id, document.getElementById(selector.input_id).value); return false; } return true; @@ -171,18 +191,18 @@ var openid = { if (hidden.length > 0) { hidden.value = url; } else { - $('#openid_form').append(''); + $('#login_selector_form').append(''); } }, highlight: function (box_id) { // remove previous highlight. - var highlight = $('#openid_highlight'); + var highlight = $('#login_highlight'); if (highlight) { - highlight.replaceWith($('#openid_highlight a')[0]); + highlight.replaceWith($('#login_highlight a')[0]); } // add new highlight. - $('.'+box_id).wrap('
'); + $('.'+box_id).wrap('
'); }, setCookie: function (value) { @@ -202,17 +222,17 @@ var openid = { } return null; }, - useInputBox: function (provider) { + useInputBox: function (selection) { - var input_area = $('#openid_input_area'); + var input_area = $('#login_input_area'); var html = ''; - var id = 'openid_username'; + var id = 'entry'; var value = ''; - var label = provider['label']; + var label = selection['label']; var style = ''; - if (provider['name'] == 'OpenID') { + if (selection['name'] == 'OpenID') { id = this.input_id; value = ''; style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;'; @@ -220,17 +240,15 @@ var openid = { if (label) { html = ''; } + html += '' html += '' + - ''; + ''; input_area.empty(); input_area.append(html); $('#'+id).focus(); }, - setDemoMode: function (demoMode) { - this.demo = demoMode; - }, setAjaxHandler: function (ajaxFunction) { this.ajaxHandler = ajaxFunction; } diff --git a/underlays/openid-selector/ikiwiki/openid/wordpress.png b/underlays/openid-selector/ikiwiki/openid/wordpress.png new file mode 100644 index 000000000..96e08bd99 Binary files /dev/null and b/underlays/openid-selector/ikiwiki/openid/wordpress.png differ