From dfcb560f8f8343d9ffa3cbe24e2036fd4cd55acf Mon Sep 17 00:00:00 2001
From: Tom Christie <tom@tomchristie.com>
Date: Mon, 29 Oct 2012 13:57:46 +0000
Subject: [PATCH] Fix up login styling

---
 .../templates/rest_framework/login.html       | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)
diff --git a/rest_framework/templates/rest_framework/login.html b/rest_framework/templates/rest_framework/login.html
index 65af512e1..c1271399b 100644
--- a/rest_framework/templates/rest_framework/login.html
+++ b/rest_framework/templates/rest_framework/login.html
@@ -3,42 +3,50 @@
 <html>
 
     <head>
-        <link rel="stylesheet" type="text/css" href='{% get_static_prefix %}rest_framework/css/style.css'/>
+        <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}rest_framework/css/bootstrap.min.css"/>
+        <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}rest_framework/css/bootstrap-tweaks.css"/>
+        <link rel="stylesheet" type="text/css" href='{% get_static_prefix %}rest_framework/css/default.css'/>
     </head>
 
-    <body class="login">
+    <body class="container">
 
-        <div id="container">
-
-            <div id="header">
-                <div id="branding">
-                    <h1 id="site-name">Django REST framework</h1>
+<div class="container-fluid" style="margin-top: 30px">
+        <div class="row-fluid">
+         
+        <div class="well" style="width: 320px; margin-left: auto; margin-right: auto">
+            <div class="row-fluid">
+                <div>
+                    <h3 style="margin: 0 0 20px;">Django REST framework</h3>
                 </div>
-            </div>
+            </div><!-- /row fluid -->
 
-            <div id="content" class="colM">
-                <div id="content-main">
-                    <form method="post" action="{% url 'rest_framework:login' %}" id="login-form">
+            <div class="row-fluid">
+                <div>
+                    <form action="{% url 'rest_framework:login' %}" class=" form-inline" method="post">
                         {% csrf_token %}
-                        <div class="form-row">
-                            <label for="id_username">Username:</label> {{ form.username }}
+                        <div id="div_id_username" class="clearfix control-group">
+                            <div class="controls" style="height: 30px">
+                                <Label class="span4" style="margin-top: 3px">Username:</label>
+                                <input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username">
+                            </div>
                         </div>
-                        <div class="form-row">
-                            <label for="id_password">Password:</label> {{ form.password }}
-                            <input type="hidden" name="next" value="{{ next }}" />
+                        <div id="div_id_password" class="clearfix control-group">
+                            <div class="controls" style="height: 30px">
+                                <Label class="span4" style="margin-top: 3px">Password:</label>
+                                <input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password">
+                            </div>
                         </div>
-                        <div class="form-row">
-                            <label>&nbsp;</label><input type="submit" value="Log in">
+                        <input type="hidden" name="next" value="{{ next }}" />
+                        <div class="form-actions-no-box">
+                            <input type="submit" name="submit" value="Log in" class="btn btn-primary" id="submit-id-submit">
                         </div>
                     </form>
-                    <script type="text/javascript">
-                        document.getElementById('id_username').focus()
-                    </script>
                 </div>
-                <br class="clear">
-            </div>
+            </div><!-- /row fluid -->
+        </div><!--/span-->
 
-            <div id="footer"></div>
+        </div><!-- /.row-fluid -->
+    </div>
 
         </div>
     </body>
