[snowy: 10/26] Add Google accounts button to OpenID login page

[Sanford Armstrong <sharm src gnome org>]

commit 0f8938ecb41ac0b7c6b0e5a17df97f1936745e26
Author: Leon Handreke <leon handreke gmail com>
Date:   Sun Apr 18 14:04:51 2010 +0200

    Add Google accounts button to OpenID login page

 accounts/templates/openid/login.html             |   92 +++++++++++++---------
 site_media/css/accounts.css                      |   21 +++++
 site_media/img/accounts/google-accounts-logo.png |  Bin 0 -> 7525 bytes
 3 files changed, 77 insertions(+), 36 deletions(-)
---
diff --git a/accounts/templates/openid/login.html b/accounts/templates/openid/login.html
index 1819771..118c6c9 100644
--- a/accounts/templates/openid/login.html
+++ b/accounts/templates/openid/login.html
@@ -1,48 +1,68 @@
 {% extends "site_base.html" %}
 
 {% load i18n %}
+{% block extra_head %}
+{{ block.super }}
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/accounts.css">
+<script type="text/javascript">
+function submit_form(name)
+{
+    document.getElementsByName(name)[0].submit();
+}
+</script>
+
+{% endblock %}
 
 {% block content %}
 
-<h3>{% trans "Log in with your OpenID" %}</h3>
+<div id="login-leftcolumn">
+    <h3>{% trans "Log in with your OpenID" %}</h3>
 
-{% if form.errors %}
-<p class="errors">{% trans "Please correct errors below:" %}<br />
-    {% if form.openid_identifier.errors %} 
-    <span class="error">{{ form.openid_identifier.errors|join:", " }}</span>
+    {% if form.errors %}
+    <p class="errors">{% trans "Please correct errors below:" %}<br />
+        {% if form.openid_identifier.errors %}
+        <span class="error">{{ form.openid_identifier.errors|join:", " }}</span>
+        {% endif %}
+        {% if form.next.errors %}
+        <span class="error">{{ form.next.errors|join:", " }}</span>
+        {% endif %}
+    </p>
     {% endif %}
-    {% if form.next.errors %} 
-    <span class="error">{{ form.next.errors|join:", " }}</span>
-    {% endif %}
-</p>
-{% endif %}
-
-<form name="fopenid" action="{{ action }}" method="post">
-    <table>
-        <tr>
-            <td style="width: 100px;"><b>{% trans "OpenID:"%}</b></td>
-            <td>{{ form.openid_identifier }}</td>
-        </tr>
-    </table>
-    <input name="bsignin" type="submit" value="{% trans "Log in with your OpenID" %}"></div>
-
-    {% if next %}
-    <input type="hidden" name="next" value="{{ next }}" />
-    {% endif %}
-</form>	
-<br />
-<div>{% trans "Don't have an OpenID yet? Get one " %}<a href="http://openid.net/get-an-openid/"; alt="Get an OpenID">{% trans "here!" %}</a></div>
-
-<small>{% trans "Or " %} <a href="{% url auth_login %}">{% trans "log in the old way" %}</a>{% trans "." %}</small>
-{% endblock %}
 
+    <form name="fopenid" action="{{ action }}" method="post">
+        <table>
+            <tr>
+                <td style="width: 100px;"><b>{% trans "OpenID:"%}</b></td>
+                <td>{{ form.openid_identifier }}</td>
+            </tr>
+        </table>
+        <input name="bsignin" type="submit" value="{% trans "Log in with your OpenID" %}">
+        {% if next %}
+        <input type="hidden" name="next" value="{{ next }}" />
+        {% endif %}
+    </form>
+    <br />
+    <div>{% trans "Don't have an OpenID yet? Get one " %}<a href="http://openid.net/get-an-openid/"; alt="Get an OpenID">{% trans "here!" %}</a></div>
+</div>
 
+<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>
+</div>
 
+<!-- the following div makes sure the float layout works correctly -->
+<div style="clear: both;"></div>
 
-<!--<style type="text/css">
-input.openid {
-  background: url({% url openid-logo %}) no-repeat; 
-  background-position: 0 50%;
-  padding-left: 16px;
-}
-</style>-->
+<br />
+<hr>
+<div style="display: block;"><small>{% trans "...or " %} <a href="{% url auth_login %}">{% trans "log in the old way" %}</a>{% trans "." %}</small></div>
+{% endblock %}
diff --git a/site_media/css/accounts.css b/site_media/css/accounts.css
new file mode 100644
index 0000000..4e85dad
--- /dev/null
+++ b/site_media/css/accounts.css
@@ -0,0 +1,21 @@
+.rounded-corners-button {
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border: 1px solid #94C7B6;
+    padding: 5px;
+}
+
+#login-leftcolumn {
+    border-right: 1px solid #000;
+    width: 45%;
+    display: block;
+    float: left;
+    margin-right: 10px;
+}
+
+#login-rightcolumn {
+    width: 45%;
+    display: block;
+    float: left;
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/site_media/img/accounts/google-accounts-logo.png b/site_media/img/accounts/google-accounts-logo.png
new file mode 100644
index 0000000..601b457
Binary files /dev/null and b/site_media/img/accounts/google-accounts-logo.png differ