From: Eevee <git@veekun.com>
Date: Mon, 30 Nov 2009 03:00:20 +0000 (-0800)
Subject: Added a full-blown login page with a description of OpenID.
X-Git-Url: http://git.veekun.com/zzz-floof.git/commitdiff_plain/d85bba8088c64b1acc4061cc4047e87583259540

Added a full-blown login page with a description of OpenID.
---

diff --git a/floof/controllers/account.py b/floof/controllers/account.py
index 7dabaa6..71e73a0 100644
--- a/floof/controllers/account.py
+++ b/floof/controllers/account.py
@@ -19,7 +19,7 @@ class AccountController(BaseController):
     openid_store = FileOpenIDStore('/var/tmp')
 
     def login(self):
-        return render('/login.mako')
+        return render('/account/login.mako')
 
     def login_begin(self):
         """Step one of logging in with OpenID; we redirect to the provider"""
diff --git a/floof/public/layout.css b/floof/public/layout.css
index b175705..e74974e 100644
--- a/floof/public/layout.css
+++ b/floof/public/layout.css
@@ -1,8 +1,9 @@
 /*** Main layout ***/
 body { font-family: sans-serif; font-size: 12px; }
 
-#header { padding: 1em; background: #c0c0c0; }
-#header #user { text-align: right; }
+#header { overflow: hidden /* float context */; padding: 1em; background: #c0c0c0; }
+#header #user { float: right; }
+#header #user form p { margin: 0; }
 
 #body { padding: 1em; }
 
@@ -14,9 +15,19 @@ body { font-family: sans-serif; font-size: 12px; }
 .artwork-grid li {display:inline;}
 
 /*** Common bits and pieces ***/
-a {color:blue; text-decoration:none; pointer:cursor;} /* Who needs visited links */
+h1 { margin: 0.5em 0 0.25em; font-size: 2em; border-bottom: 1px solid #404040; text-shadow: #a0a0a0 1px 1px 1px; }
 
-p { margin: 0.25em 0 1em 0; }
+a { color: #647cc4; font-weight: bold; text-decoration: none; pointer: cursor; }
+a:visited { color: #48598e; }
+a:hover { color: #8e4848; }
+
+p { margin: 0.75em 0; line-height: 1.33; }
+p img { vertical-align: middle; }
+
+code { font-family: monospace; }
+var { font-style: italic; background: #e8e8e8; }
+
+input[type='button'], input[type='submit'], input[type='reset'] { cursor: pointer; }
 
 /* General form layout */
 dl.form { margin: 1em 0; padding-left: 1em; border-left: 0.5em solid gray; }
@@ -31,3 +42,16 @@ dl.form dd { margin-bottom: 0.5em; }
 
 /*** Individual page layout ***/
 .selected {color:red;}
+
+/* Login */
+form#big-login { text-align: center; }
+form#big-login input { font-size: 2em; margin: 0 auto; }
+form#big-login input#identity-url { width: 20em; padding-left: 16px; }
+
+dl#openid_examples { overflow: hidden /* new float context */; }
+dl#openid_examples > dt { float: left; clear: left; width: 15.5em; margin-right: 0.5em; text-align: right; color: #2457a0; }
+dl#openid_examples > dt:after { content: ':'; }
+dl#openid_examples > dd { width: 32em; padding-left: 16em /* float width */; }
+dl#openid_examples > dd:after { content: 'float clear'; display: block; clear: both; height: 0; visibility: hidden; }
+dl#openid_examples > dt,
+dl#openid_examples > dd { line-height: 1.5; }
diff --git a/floof/templates/account/login.mako b/floof/templates/account/login.mako
new file mode 100644
index 0000000..d00593b
--- /dev/null
+++ b/floof/templates/account/login.mako
@@ -0,0 +1,35 @@
+<%inherit file="/base.mako"/>
+
+<h1>Log in</h1>
+<p>You can log in or register with any <a href="http://openid.net/"><img src="/icons/openid.png" alt=""> OpenID</a>.</p>
+
+<form action="${url(controller='account', action='login_begin')}" method="POST" id="big-login">
+<p>
+    <input type="text" name="identity_url" id="identity-url">
+    <input type="submit" value="Log in">
+</p>
+</form>
+
+<h1>What is this?</h1>
+<p>An OpenID is a special URL that you own.  Instead of entering a username and password, you only need to give us the URL.</p>
+<p>For example, if you have the account <var>foo</var> on LiveJournal, you can enter <code>http://foo.livejournal.com/</code> as your OpenID.  LiveJournal will then ask you to confirm that you want to log in here.  Agree, LiveJournal will tell us that you are who you say you are, and then you'll be logged in.  We never see any passwords for you, and there's no need to confirm an email address.</p>
+<p>Here are some other services that provide OpenIDs:</p>
+
+<dl id="openid_examples">
+<dt><a href="http://www.livejournal.com/">LiveJournal</a></dt>
+<dd><code>http://<var>username</var>.livejournal.com/</code></dd>
+<dt><a href="http://www.aim.com/">AOL Instant Messenger</a></dt>
+<dd><code>http://openid.aol.com/<var>screenname</var></code></dd>
+<dt><a href="http://www.blogger.com/">Blogger</a></dt>
+<dd><code>http://<var>blogname</var>.blogspot.com/</code></dd>
+<dt><a href="http://www.flickr.com/">Flickr</a></dt>
+<dd><code>http://www.flickr.com/<var>username</var></code></dd>
+<dt><a href="http://www.yahoo.com/">Yahoo!</a></dt>
+<dd><code>http://www.yahoo.com/</code></dd>
+<dt><a href="http://www.google.com/profiles">Google</a></dt>
+<dd><code>http://www.google.com/accounts/o8/id</code>
+    <br>You can also use <code>http://www.google.com/profiles/<var>username</var></code>, but you must first enable it at the bottom of <a href="http://www.google.com/profiles/me/editprofile?edit=t">this page</a>.</dd>
+</dl>
+
+<p>Wikipedia has a <a href="http://en.wikipedia.org/wiki/List_of_OpenID_providers">more comprehensive list</a>.</p>
+<p>If you don't use any of these services, or would like an OpenID that doesn't piggyback on another service, you can create a new OpenID through an independent provider, such as <a href="https://www.myopenid.com/">myOpenID</a>.</p>
diff --git a/floof/templates/base.mako b/floof/templates/base.mako
index 569c387..2fb385a 100644
--- a/floof/templates/base.mako
+++ b/floof/templates/base.mako
@@ -37,10 +37,12 @@ ${h.end_form()}
         </form>
         % else:
         <form action="${url(controller='account', action='login_begin')}" method="POST">
+        <p>Log in or register with <img src="/icons/openid.png" alt="OpenID" title="OpenID"> OpenID:</p>
         <p>
-            Identity URL: <input type="text" name="identity_url">
+            <input type="text" name="identity_url" id="identity-url">
             <input type="submit" value="Log in">
         </p>
+        <p class="what"><a href="${url(controller='account', action='login')}">What's this?</a></p>
         </form>
         % endif
     </div>