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 00652ebb7db2034b5785cd27b2c1fb7aacf545e8..bfd130ace1b7228592acec680a708305b006b263 100644 (file)
--- 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;
                # 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}} > 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 ($$) {
                        }
                }
                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;
 
 sub openid_selector {
        my $real_cgi_signin=shift;

-       my $nonopenidform_label=shift;
+       my $otherform_label=shift;

         my $q=shift;
         my $session=shift;
 
         my $q=shift;
         my $session=shift;
 

+       my $template=IkiWiki::template("openid-selector.tmpl");

        my $openid_url=$q->param('openid_identifier');
        my $openid_url=$q->param('openid_identifier');

-       my $openid_error;

 
        if (! load_openid_module()) {
                if ($real_cgi_signin) {
 
        if (! load_openid_module()) {
                if ($real_cgi_signin) {


@@ -75,19 +78,17 @@ sub openid_selector {
                }
                error(sprintf(gettext("failed to load openid module: "), @_));
        }
                }
                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 {
                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(),
        $template->param(
                cgiurl => IkiWiki::cgiurl(),

-               (defined $openid_error ? (openid_error => $openid_error) : ()),

                (defined $openid_url ? (openid_url => $openid_url) : ()),
                (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);
        );
 
        IkiWiki::printheader($session);

diff --git a/doc/style.css b/doc/style.css
index fe1eb903df00348e72887b3e3fd09aeba47fa0a2..f0846c0d651ef63db8a5d6f73a286cb4603326d7 100644 (file)
--- a/doc/style.css
+++ b/doc/style.css
@@ -465,40 +465,40 @@ li.L8 { list-style: upper-alpha; }
        display: none;
 }
 
        display: none;
 }
 

-/* openid selector */
-#openid_choice {
+/* login selector */
+#login_choice {

        display: none;
 }
        display: none;
 }

-#openid_input_area {
+#login_input_area {

        clear: both;
        padding: 10px;
 }
        clear: both;
        padding: 10px;
 }

-#openid_btns, #openid_btns br {
+#login_btns, #login_btns br {

        clear: both;
 }
        clear: both;
 }

-#openid_highlight {
+#login_highlight {

        background-color: black;
        float: left;
 }
        background-color: black;
        float: left;
 }

-.openid_large_btn {
+.login_large_btn {

        padding: 1em 1.5em;
        border: 1px solid #DDD;
        margin: 3px;
        float: left;
 }
        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;
 }
        padding: 4px 4px;
        border: 1px solid #DDD;
        margin: 3px;
        float: left;
 }

-a.openid_large_btn:focus {
+a.login_large_btn:focus {

        outline: none;
 }
        outline: none;
 }

-a.openid_large_btn:focus {
+a.login_large_btn:focus {

        outline-style: none;
 }
        outline-style: none;
 }

-.openid_selected {
+.login_selected {

        border: 4px solid #DDD;
 }
 
        border: 4px solid #DDD;
 }
 

diff --git a/doc/wikiicons/emaillogin.png b/doc/wikiicons/emaillogin.png
new file mode 100644 (file)
index 0000000..1b16bef
Binary files /dev/null and b/doc/wikiicons/emaillogin.png differ

diff --git a/templates/openid-selector.tmpl b/templates/openid-selector.tmpl
index 95ba086fed20c5163606e24901f69ac01afb948e..03eb5d7795f3894b3314009ff3b31875de9327f6 100644 (file)
--- a/templates/openid-selector.tmpl
+++ b/templates/openid-selector.tmpl
@@ -2,42 +2,42 @@
 <script type="text/javascript" src="ikiwiki/openid/openid-jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 <script type="text/javascript" src="ikiwiki/openid/openid-jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {

-       openid.init('openid_identifier','<TMPL_IF NONOPENIDFORM>nonopenidform</TMPL_IF>', '<TMPL_VAR NONOPENIDFORM_LABEL>');
+       selector.init('openid_identifier','<TMPL_IF OTHERFORM>otherform</TMPL_IF>', '<TMPL_VAR OTHERFORM_LABEL>');

 });
 </script>
 
 <noscript>
 });
 </script>
 
 <noscript>

-<h2>OpenID:</h2>
+<h2>Login:</h2>

 </noscript>
 
 </noscript>
 

-<form action="<TMPL_VAR CGIURL>" method="get" id="openid_form">
-       <fieldset>
+<form action="<TMPL_VAR CGIURL>" method="get" id="login_selector_form">
+       <div>

                <script>
                $('fieldset').append("<legend>Select login method</legend>");
                </script>
                
                <input type="hidden" name="do" value="signin" />
                <input type="hidden" name="action" value="verify" />
                <script>
                $('fieldset').append("<legend>Select login method</legend>");
                </script>
                
                <input type="hidden" name="do" value="signin" />
                <input type="hidden" name="action" value="verify" />

-               <div id="openid_choice">
-                       <div id="openid_btns"></div>
+               <div id="login_choice">
+                       <div id="login_btns"></div>

                </div>
                </div>

-               <div id="openid_input_area">
+               <div id="login_input_area">

                        <label for="openid_identifier" class="block">Enter your OpenID:</label>
                        <input id="openid_identifier" name="openid_identifier" type="text" value="<TMPL_VAR ESCAPE=HTML OPENID_URL>"/>
                        <input id="openid_submit" type="submit" value="Login"/>
                </div>
                        <label for="openid_identifier" class="block">Enter your OpenID:</label>
                        <input id="openid_identifier" name="openid_identifier" type="text" value="<TMPL_VAR ESCAPE=HTML OPENID_URL>"/>
                        <input id="openid_submit" type="submit" value="Login"/>
                </div>

-               <TMPL_IF OPENID_ERROR>
-               <div class="error"><TMPL_VAR OPENID_ERROR></div>
+               <TMPL_IF LOGIN_ERROR>
+               <div class="error"><TMPL_VAR LOGIN_ERROR></div>

                </TMPL_IF>
                </TMPL_IF>

-       </fieldset>
+       </div>

 </form>
 
 </form>
 

-<div id="nonopenidform">
-<TMPL_IF NONOPENIDFORM>
+<div id="otherform">
+<TMPL_IF OTHERFORM>

 <br />
 <noscript>
 <br />
 <noscript>

-<h2><TMPL_VAR NONOPENIDFORM_LABEL>:</h2>
+<h2><TMPL_VAR OTHERFORM_LABEL>:</h2>

 </noscript>
 </TMPL_IF>
 </noscript>
 </TMPL_IF>

-<TMPL_VAR NONOPENIDFORM>
+<TMPL_VAR OTHERFORM>

 </div>
 </div>

diff --git a/underlays/openid-selector/ikiwiki/openid/aol.png b/underlays/openid-selector/ikiwiki/openid/aol.png
new file mode 100644 (file)
index 0000000..d47f5fa
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 (file)
index 0000000..5321642
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 (file)
index 0000000..d86ee5e
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 2c72f19fb1c20d96d296c063c222cbef09d20f7f..db8dca235226198d8bcce45fd415b03a7e595892 100644 (file)
--- 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.
 */
 
 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',
     verisign: {
         name: 'Verisign',
         icon: 'ikiwiki/openid/verisign.png',


@@ -13,154 +27,160 @@ var providers_large = {
         url: 'http://{username}.pip.verisignlabs.com/'
     },
     yahoo: {
         url: 'http://{username}.pip.verisignlabs.com/'
     },
     yahoo: {

-        name: 'Yahoo',      
+        name: 'Yahoo',

         icon: 'ikiwiki/openid/goa-account-yahoo.png',
         url: 'http://me.yahoo.com/'
         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.
        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,
        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;
         
         
         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 {
        }
        else {

-               this.localsignin_label="other";
+               this.othersignin_label="other";

        }
        }

-       if (localsignin_id != "") {
-               this.localsignin_id=localsignin_id;
-               openid_btns.append(
-                       '<a href="javascript: openid.signin(\'localsignin\');"' +
+       if (othersignin_id != "") {
+               this.othersignin_id=othersignin_id;
+               selector_btns.prepend(
+                       '<a href="javascript: selector.signin(\'othersignin\');"' +

                        ' style="background: #FFF" ' +
                        ' style="background: #FFF" ' +

-                       'class="localsignin openid_large_btn">' +
+                       'class="othersignin login_large_btn">' +

                        '<img alt="" width="16" height="16" src="favicon.ico" />' +
                        '<img alt="" width="16" height="16" src="favicon.ico" />' +

-                       ' ' + this.localsignin_label +
+                       ' ' + this.othersignin_label +

                        '</a>'
                );
                        '</a>'
                );

-               $('#'+this.localsignin_id).hide();
+               $('#'+this.othersignin_id).hide();

        }
 
        }
 

-        if (providers_small) {
-               openid_btns.append('<br/>');
+        if (selections_small) {
+               selector_btns.append('<br/>');

                
                

-               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);
         }
     },
         
         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') {
        var label="";
        var title=""
        if (box_size == 'large') {

-               label=' ' + provider["name"];
+               label=' ' + selection["name"];

        }
        else {
        }
        else {

-               title=' title="'+provider["name"]+'"';
+               title=' title="'+selection["name"]+'"';

        }
        }

-        var box_id = provider["name"].toLowerCase();
-        return '<a' + title +' href="javascript: openid.signin(\''+ box_id +'\');"' +
+        var box_id = selection["name"].toLowerCase();
+        return '<a' + title +' href="javascript: selector.signin(\''+ box_id +'\');"' +

                        ' style="background: #FFF" ' + 
                        ' style="background: #FFF" ' + 

-                       'class="' + box_id + ' openid_' + box_size + '_btn">' +
-                       '<img alt="" width="16" height="16" src="' + provider["icon"] + '" />' +
+                       'class="' + box_id + ' login_' + box_size + '_btn">' +
+                       '<img alt="" width="16" height="16" src="' + selection["icon"] + '" />' +

                        label +
                        '</a>';
     
     },
                        label +
                        '</a>';
     
     },

-    /* Provider image click */
+    /* selection image click */

     signin: function(box_id, onload) {
 
     signin: function(box_id, onload) {
 

-       if (box_id == 'localsignin') {
+       if (box_id == 'othersignin') {

                this.highlight(box_id);
                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 {
                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);
                
                        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?
                
                // prompt user for input?

-               if (provider['label']) {
+               if (selection['label']) {

                        this.setCookie(box_id);
                        this.setCookie(box_id);

-                       this.useInputBox(provider);
+                       this.useInputBox(selection);

                } else {
                        this.setCookie('');
                } else {
                        this.setCookie('');

-                       $('#openid_input_area').empty();
+                       $('#login_input_area').empty();

                        if (! onload) {
                        if (! onload) {

-                               $('#openid_form').submit();
+                               $('#login_selector_form').submit();

                        }
                }
     },
     /* Sign-in button click */
     submit: function() {
                        }
                }
     },
     /* Sign-in button click */
     submit: function() {

-        
-       var url = openid.provider_url; 
+       var url = selector.selection_url; 

        if (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;
                return false;
        }
        return true;


@@ -171,18 +191,18 @@ var openid = {
        if (hidden.length > 0) {
                hidden.value = url;
        } else {
        if (hidden.length > 0) {
                hidden.value = url;
        } else {

-               $('#openid_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
+               $('#login_selector_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');

        }
     },
     highlight: function (box_id) {
        
        // remove previous highlight.
        }
     },
     highlight: function (box_id) {
        
        // remove previous highlight.

-       var highlight = $('#openid_highlight');
+       var highlight = $('#login_highlight');

        if (highlight) {
        if (highlight) {

-               highlight.replaceWith($('#openid_highlight a')[0]);
+               highlight.replaceWith($('#login_highlight a')[0]);

        }
        // add new highlight.
        }
        // add new highlight.

-       $('.'+box_id).wrap('<div id="openid_highlight"></div>');
+       $('.'+box_id).wrap('<div id="login_highlight"></div>');

     },
     setCookie: function (value) {
     
     },
     setCookie: function (value) {
     


@@ -202,17 +222,17 @@ var openid = {
                }
                return null;
     },
                }
                return null;
     },

-    useInputBox: function (provider) {
+    useInputBox: function (selection) {

        
        

-               var input_area = $('#openid_input_area');
+               var input_area = $('#login_input_area');

                
                var html = '';
                
                var html = '';

-               var id = 'openid_username';
+               var id = 'entry';

                var value = '';
                var value = '';

-               var label = provider['label'];
+               var label = selection['label'];

                var style = '';
                
                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;';
                        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 = '<label for="'+ id +'" class="block">' + label + '</label>';
                }
                if (label) {
                        html = '<label for="'+ id +'" class="block">' + label + '</label>';
                }

+               html += '<input name="selection" type="hidden" value="' + selection['name'] + '" />'

                html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' + 
                html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' + 

-                                       '<input id="openid_submit" type="submit" value="Login"/>';
+                                       '<input id="selector_submit" type="submit" value="Login"/>';

                
                input_area.empty();
                input_area.append(html);
 
                $('#'+id).focus();
     },
                
                input_area.empty();
                input_area.append(html);
 
                $('#'+id).focus();
     },

-    setDemoMode: function (demoMode) {
-       this.demo = demoMode;
-    },

     setAjaxHandler: function (ajaxFunction) {
        this.ajaxHandler = ajaxFunction;
     }
     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 (file)
index 0000000..96e08bd
Binary files /dev/null and b/underlays/openid-selector/ikiwiki/openid/wordpress.png differ