GNOME.org
 

[snowy] Adding support for more openid providers via openid-selector

commit 9e521560b3fccee42c43c9181433d0a284dacd92
Author: Jeff Schroeder <jeffschroeder computer org>
Date:   Sun Aug 1 23:31:08 2010 -0700

    Adding support for more openid providers via openid-selector
    
    http://code.google.com/p/openid-selector

 accounts/templates/openid/login.html               |   43 ++++--
 site_media/css/openid.css                          |   45 +++++
 site_media/img/accounts/openid/aol.gif             |  Bin 0 -> 2205 bytes
 site_media/img/accounts/openid/blogger.ico         |  Bin 0 -> 3638 bytes
 site_media/img/accounts/openid/claimid.ico         |  Bin 0 -> 3638 bytes
 site_media/img/accounts/openid/facebook.gif        |  Bin 0 -> 2075 bytes
 site_media/img/accounts/openid/flickr.ico          |  Bin 0 -> 1150 bytes
 site_media/img/accounts/openid/google.gif          |  Bin 0 -> 1596 bytes
 site_media/img/accounts/openid/launchpad.gif       |  Bin 0 -> 1548 bytes
 site_media/img/accounts/openid/livejournal.ico     |  Bin 0 -> 5222 bytes
 site_media/img/accounts/openid/myopenid.ico        |  Bin 0 -> 2862 bytes
 .../img/accounts/openid/openid-inputicon.gif       |  Bin 0 -> 237 bytes
 site_media/img/accounts/openid/openid.gif          |  Bin 0 -> 740 bytes
 site_media/img/accounts/openid/technorati.ico      |  Bin 0 -> 2294 bytes
 site_media/img/accounts/openid/verisign.gif        |  Bin 0 -> 2550 bytes
 site_media/img/accounts/openid/verisign.ico        |  Bin 0 -> 4710 bytes
 site_media/img/accounts/openid/vidoop.ico          |  Bin 0 -> 1406 bytes
 site_media/img/accounts/openid/wordpress.ico       |  Bin 0 -> 1150 bytes
 site_media/img/accounts/openid/yahoo.gif           |  Bin 0 -> 1682 bytes
 site_media/js/config.js                            |   82 +++++++++
 site_media/js/openid-jquery.js                     |  173 ++++++++++++++++++++
 21 files changed, 330 insertions(+), 13 deletions(-)
---
diff --git a/accounts/templates/openid/login.html b/accounts/templates/openid/login.html
index 118c6c9..1e05bd8 100644
--- a/accounts/templates/openid/login.html
+++ b/accounts/templates/openid/login.html
@@ -4,11 +4,14 @@
 {% block extra_head %}
 {{ block.super }}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/accounts.css">
+<link rel="stylesheet" href="{{ MEDIA_URL }}css/openid.css" />
+<script type="text/javascript" src="{{ MEDIA_URL }}js/config.js"></script>
+<script type="text/javascript" src="{{ MEDIA_URL }}js/openid-jquery.js"></script>
 <script type="text/javascript">
-function submit_form(name)
-{
-    document.getElementsByName(name)[0].submit();
-}
+    $(document).ready(function() {
+        openid.img_path = '{{ MEDIA_URL }}img/accounts/openid/';
+        openid.init('openid_identifier');
+    });
 </script>
 
 {% endblock %}
@@ -48,15 +51,29 @@ function submit_form(name)
 <div id="login-rightcolumn">
     <h3>{% trans "...or use one of the following services:" %}</h3>
     <br />
-    <form name="google_login_form" action="{{ action }}" method="post">
-        <input type="hidden" name="openid_identifier" value="http://www.google.com/accounts/o8/id";>
-        <a href="javascript: submit_form('google_login_form')">
-            <img src="{{ MEDIA_URL }}img/accounts/google-accounts-logo.png" alt="Google Accounts Logo" class="rounded-corners-button">
-        </a>
-        {% if next %}
-        <input type="hidden" name="next" value="{{ next }}" />
-        {% endif %}
-    </form>
+<!-- Simple OpenID Selector -->
+<form action="{{ action }}" method="post" id="openid_form">
+    <!--<input type="hidden" name="action" value="verify" />-->
+
+    <fieldset>
+            <legend>Sign-in or Create New Account</legend>
+            <div id="openid_choice">
+                <p>Please click your account provider:</p>
+                <div id="openid_btns"></div>
+            </div>
+            <div id="openid_input_area">
+                <input id="openid_identifier" name="openid_identifier" type="text" value="http://"; />
+                <input id="openid_submit" type="submit" value="Sign-In"/>
+            </div>
+            <noscript>
+            <p>OpenID is service that allows you to log-on to many different websites using a single indentity.
+            Find out <a href="http://openid.net/what/";>more about OpenID</a> and <a href="http://openid.net/get/";>how to get an OpenID enabled account</a>.</p>
+            </noscript>
+            {% if next %}
+            <input type="hidden" name="next" value="{{ next }}" />
+            {% endif %}
+    </fieldset>
+</form>
 </div>
 
 <!-- the following div makes sure the float layout works correctly -->
diff --git a/site_media/css/openid.css b/site_media/css/openid.css
new file mode 100644
index 0000000..66a3dc5
--- /dev/null
+++ b/site_media/css/openid.css
@@ -0,0 +1,45 @@
+#openid_form {
+	width: 696px;
+}
+	#openid_form legend {
+		font-weight: bold;
+	}
+#openid_choice {
+	display: none;
+}
+#openid_input_area {
+	clear: both;
+	padding: 10px;
+}
+#openid_btns, #openid_btns br {
+	clear: both;
+}
+	#openid_highlight {
+		padding: 3px;
+		background-color: #FFFCC9;
+		float: left;
+	}
+	.openid_large_btn {
+		width: 100px;
+		height: 60px;
+		border: 1px solid #DDD;
+		margin: 3px;
+		float: left;
+	}
+	.openid_small_btn {
+		width: 24px;
+		height: 24px;
+		border: 1px solid #DDD;
+		margin: 3px;
+		float: left;
+	}
+	a.openid_large_btn:focus {
+		outline: none;
+	}
+	a.openid_large_btn:focus
+	{
+	-moz-outline-style: none;
+	}
+	.openid_selected {
+		border: 4px solid #DDD;
+	}
diff --git a/site_media/img/accounts/openid/aol.gif b/site_media/img/accounts/openid/aol.gif
new file mode 100644
index 0000000..decc4f1
Binary files /dev/null and b/site_media/img/accounts/openid/aol.gif differ
diff --git a/site_media/img/accounts/openid/blogger.ico b/site_media/img/accounts/openid/blogger.ico
new file mode 100644
index 0000000..1b9730b
Binary files /dev/null and b/site_media/img/accounts/openid/blogger.ico differ
diff --git a/site_media/img/accounts/openid/claimid.ico b/site_media/img/accounts/openid/claimid.ico
new file mode 100644
index 0000000..2b80f49
Binary files /dev/null and b/site_media/img/accounts/openid/claimid.ico differ
diff --git a/site_media/img/accounts/openid/facebook.gif b/site_media/img/accounts/openid/facebook.gif
new file mode 100644
index 0000000..b997b35
Binary files /dev/null and b/site_media/img/accounts/openid/facebook.gif differ
diff --git a/site_media/img/accounts/openid/flickr.ico b/site_media/img/accounts/openid/flickr.ico
new file mode 100644
index 0000000..11f6e07
Binary files /dev/null and b/site_media/img/accounts/openid/flickr.ico differ
diff --git a/site_media/img/accounts/openid/google.gif b/site_media/img/accounts/openid/google.gif
new file mode 100644
index 0000000..1b6cd07
Binary files /dev/null and b/site_media/img/accounts/openid/google.gif differ
diff --git a/site_media/img/accounts/openid/launchpad.gif b/site_media/img/accounts/openid/launchpad.gif
new file mode 100644
index 0000000..1f8c1d8
Binary files /dev/null and b/site_media/img/accounts/openid/launchpad.gif differ
diff --git a/site_media/img/accounts/openid/livejournal.ico b/site_media/img/accounts/openid/livejournal.ico
new file mode 100644
index 0000000..f3d21ec
Binary files /dev/null and b/site_media/img/accounts/openid/livejournal.ico differ
diff --git a/site_media/img/accounts/openid/myopenid.ico b/site_media/img/accounts/openid/myopenid.ico
new file mode 100644
index 0000000..ceb06e6
Binary files /dev/null and b/site_media/img/accounts/openid/myopenid.ico differ
diff --git a/site_media/img/accounts/openid/openid-inputicon.gif b/site_media/img/accounts/openid/openid-inputicon.gif
new file mode 100644
index 0000000..cde836c
Binary files /dev/null and b/site_media/img/accounts/openid/openid-inputicon.gif differ
diff --git a/site_media/img/accounts/openid/openid.gif b/site_media/img/accounts/openid/openid.gif
new file mode 100644
index 0000000..c718b0e
Binary files /dev/null and b/site_media/img/accounts/openid/openid.gif differ
diff --git a/site_media/img/accounts/openid/technorati.ico b/site_media/img/accounts/openid/technorati.ico
new file mode 100644
index 0000000..fa1083c
Binary files /dev/null and b/site_media/img/accounts/openid/technorati.ico differ
diff --git a/site_media/img/accounts/openid/verisign.gif b/site_media/img/accounts/openid/verisign.gif
new file mode 100644
index 0000000..faa6aaa
Binary files /dev/null and b/site_media/img/accounts/openid/verisign.gif differ
diff --git a/site_media/img/accounts/openid/verisign.ico b/site_media/img/accounts/openid/verisign.ico
new file mode 100644
index 0000000..3953af9
Binary files /dev/null and b/site_media/img/accounts/openid/verisign.ico differ
diff --git a/site_media/img/accounts/openid/vidoop.ico b/site_media/img/accounts/openid/vidoop.ico
new file mode 100644
index 0000000..bbd9a0d
Binary files /dev/null and b/site_media/img/accounts/openid/vidoop.ico differ
diff --git a/site_media/img/accounts/openid/wordpress.ico b/site_media/img/accounts/openid/wordpress.ico
new file mode 100644
index 0000000..31b7d2c
Binary files /dev/null and b/site_media/img/accounts/openid/wordpress.ico differ
diff --git a/site_media/img/accounts/openid/yahoo.gif b/site_media/img/accounts/openid/yahoo.gif
new file mode 100644
index 0000000..42adbfa
Binary files /dev/null and b/site_media/img/accounts/openid/yahoo.gif differ
diff --git a/site_media/js/config.js b/site_media/js/config.js
new file mode 100644
index 0000000..0f4b470
--- /dev/null
+++ b/site_media/js/config.js
@@ -0,0 +1,82 @@
+/*
+ Separated out into a different js file for ease of use by jschroeder
+ */
+var providers_large = {
+    google: {
+        name: 'Google',
+        url: 'https://www.google.com/accounts/o8/id'
+    },
+    launchpad: {
+        name: 'Launchpad',
+        label: 'Your Launchpad.net username',
+        url: 'https://launchpad.net/~{username}'
+    },
+    yahoo: {
+        name: 'Yahoo',
+        url: 'http://yahoo.com/'
+    },
+    aol: {
+        name: 'AOL',
+        label: 'Enter your AOL screenname.',
+        url: 'http://openid.aol.com/{username}'
+    },
+    /*
+    verisign: {
+        name: 'Verisign',
+        label: 'Your Verisign username',
+        url: 'http://{username}.pip.verisignlabs.com/'
+    },
+    openid: {
+        name: 'OpenID',     
+        label: 'Enter your OpenID.',
+        url: null
+    }
+    */
+};
+var providers_small = {
+    /*
+    myopenid: {
+        name: 'MyOpenID',
+        label: 'Enter your MyOpenID username.',
+        url: 'http://{username}.myopenid.com/'
+    },
+    */
+    livejournal: {
+        name: 'LiveJournal',
+        label: 'Enter your Livejournal username.',
+        url: 'http://{username}.livejournal.com'
+    },
+    flickr: {
+        name: 'Flickr',
+        label: 'Enter your Flickr username.',
+        url: 'http://flickr.com/{username}/'
+    },
+    technorati: {
+        name: 'Technorati',
+        label: 'Enter your Technorati username.',
+        url: 'http://technorati.com/people/technorati/{username}/'
+    },
+    blogger: {
+        name: 'Blogger',
+        label: 'Your Blogger account',
+        url: 'http://{username}.blogspot.com/'
+    },
+    wordpress: {
+        name: 'Wordpress',
+        label: 'Enter your Wordpress.com username.',
+        url: 'http://{username}.wordpress.com/'
+    },
+
+    /*
+    vidoop: {
+        name: 'Vidoop',
+        label: 'Your Vidoop username',
+        url: 'http://{username}.myvidoop.com/'
+    },
+    claimid: {
+        name: 'ClaimID',
+        label: 'Your ClaimID username',
+        url: 'http://claimid.com/{username}'
+    }
+    */
+};
diff --git a/site_media/js/openid-jquery.js b/site_media/js/openid-jquery.js
new file mode 100644
index 0000000..2d71592
--- /dev/null
+++ b/site_media/js/openid-jquery.js
@@ -0,0 +1,173 @@
+/*
+Simple OpenID Plugin
+http://code.google.com/p/openid-selector/
+
+This code is licenced under the New BSD License.
+*/
+
+var providers = $.extend({}, providers_large, providers_small);
+
+var openid = {
+
+	demo: false,
+	ajaxHandler: null,
+	cookie_expires: 6*30,	// 6 months.
+	cookie_name: 'openid_provider',
+	cookie_path: '/',
+	
+	img_path: 'images/',
+	
+	input_id: null,
+	provider_url: null,
+	provider_id: null,
+	
+    init: function(input_id) {
+        
+        var openid_btns = $('#openid_btns');
+        
+        this.input_id = input_id;
+        
+        $('#openid_choice').show();
+        $('#openid_input_area').empty();
+        
+        // add box for each provider
+        for (id in providers_large) {
+        
+           	openid_btns.append(this.getBoxHTML(providers_large[id], 'large', '.gif'));
+        }
+        if (providers_small) {
+        	openid_btns.append('<br/>');
+        	
+	        for (id in providers_small) {
+	        
+	           	openid_btns.append(this.getBoxHTML(providers_small[id], 'small', '.ico'));
+	        }
+        }
+        
+        $('#openid_form').submit(this.submit);
+        
+        var box_id = this.readCookie();
+        if (box_id) {
+        	this.signin(box_id, true);
+        }  
+    },
+    getBoxHTML: function(provider, box_size, image_ext) {
+            
+        var box_id = provider["name"].toLowerCase();
+        return '<a title="'+provider["name"]+'" href="javascript: openid.signin(\''+ box_id +'\');"' +
+        		' style="background: #FFF url(' + this.img_path + box_id + image_ext+') no-repeat center center" ' + 
+        		'class="' + box_id + ' openid_' + box_size + '_btn"></a>';    
+    
+    },
+    /* Provider image click */
+    signin: function(box_id, onload) {
+    
+    	var provider = providers[box_id];
+  		if (! provider) {
+  			return;
+  		}
+		
+		this.highlight(box_id);
+		this.setCookie(box_id);
+		
+		this.provider_id = box_id;
+		this.provider_url = provider['url'];
+		
+		// prompt user for input?
+		if (provider['label']) {
+			this.useInputBox(provider);
+		} else {
+			$('#openid_input_area').empty();
+			if (! onload) {
+				$('#openid_form').submit();
+			}
+		}
+    },
+    /* Sign-in button click */
+    submit: function() {
+        
+    	var url = openid.provider_url; 
+    	if (url) {
+    		url = url.replace('{username}', $('#openid_username').val());
+    		openid.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);
+    		return false;
+    	}
+    	return true;
+    },
+    setOpenIdUrl: function (url) {
+    
+    	var hidden = document.getElementById(this.input_id);
+    	if (hidden != null) {
+    		hidden.value = url;
+    	} else {
+    		$('#openid_form').append('<input type="hidden" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
+    	}
+    },
+    highlight: function (box_id) {
+    	
+    	// remove previous highlight.
+    	var highlight = $('#openid_highlight');
+    	if (highlight) {
+    		highlight.replaceWith($('#openid_highlight a')[0]);
+    	}
+    	// add new highlight.
+    	$('.'+box_id).wrap('<div id="openid_highlight"></div>');
+    },
+    setCookie: function (value) {
+    
+		var date = new Date();
+		date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
+		var expires = "; expires="+date.toGMTString();
+		
+		document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
+    },
+    readCookie: function () {
+		var nameEQ = this.cookie_name + "=";
+		var ca = document.cookie.split(';');
+		for(var i=0;i < ca.length;i++) {
+			var c = ca[i];
+			while (c.charAt(0)==' ') c = c.substring(1,c.length);
+			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+		}
+		return null;
+    },
+    useInputBox: function (provider) {
+   	
+		var input_area = $('#openid_input_area');
+		
+		var html = '';
+		var id = 'openid_username';
+		var value = '';
+		var label = provider['label'];
+		var style = '';
+		
+		if (label) {
+			html = '<p>' + label + '</p>';
+		}
+		if (provider['name'] == 'OpenID') {
+			id = this.input_id;
+			value = 'http://';
+			style = 'background:#FFF url('+this.img_path+'openid-inputicon.gif) no-repeat scroll 0 50%; padding-left:18px;';
+		}
+		html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' + 
+					'<input id="openid_submit" type="submit" value="Sign-In"/>';
+		
+		input_area.empty();
+		input_area.append(html);
+
+		$('#'+id).focus();
+    },
+    setDemoMode: function (demoMode) {
+    	this.demo = demoMode;
+    },
+    setAjaxHandler: function (ajaxFunction) {
+    	this.ajaxHandler = ajaxFunction;
+    }
+};
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]