From 433cdfad572123a93aa603f23e302a9b2ed127ef Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brockwhittaker@Brocks-MacBook.local>
Date: Tue, 16 Aug 2016 10:28:02 -0700
Subject: [PATCH] Restyle input groups to be more vertical

This changes the input group elements from the style where labels are
right aligned and input left aligned, to the labels being above the
input.
---
 templates/zerver/reset_confirm.html | 46 ++++++++++++++++-------------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/templates/zerver/reset_confirm.html b/templates/zerver/reset_confirm.html
index 5a8c6c792e..e339379aa2 100644
--- a/templates/zerver/reset_confirm.html
+++ b/templates/zerver/reset_confirm.html
@@ -7,18 +7,25 @@
 {% block portico_content %}
 
 <div class="password-container">
-  <div class="password-reset">
-    <div class="pitch">
-        <hr/>
-        <h3>{{ _('Reset your password') }}.</h3>
-    </div>
+    <div class="password-reset">
+        <!-- TODO: Ask about meta viewport 1:1 scaling -->
+        <div class="pitch">
+            <h3>{{ _('Reset your password') }}.</h3>
+        </div>
 
     {% if validlink %}
-        <form method="post" id="password_reset" class="form-horizontal">
+        <form method="post" id="password_reset" class="form-horizontal" autocomplete="off">
         {{ csrf_input }}
-            <div class="control-group">
-                <label for="id_new_password1" class="control-label">{{ _('Password') }}</label>
-                <div class="controls">
+           <div class="input-group" id="email-section">
+               <label for="id_email">{{ _("Email") }}</label>
+               <div>
+                  <input type="text" name="name" placeholder='{{ form.user.email }}' disabled />
+               </div>
+           </div>
+
+            <div class="input-group">
+                <label for="id_new_password1" class="">{{ _('Password') }}</label>
+                <div class="">
                     <input id="id_new_password1" class="required" type="password" name="new_password1"
                            value="{% if form.new_password1.value() %}{{ form.new_password1.value() }}{% endif %}"
                            maxlength="100" />
@@ -29,17 +36,17 @@
                     {% endif %}
                 </div>
             </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('Password strength') }}</label>
-                <div class="controls">
+            <div class="input-group">
+                <label class="">{{ _('Password strength') }}</label>
+                <div class="">
                     <div class="progress" id="pw_strength">
                         <div class="bar bar-danger" style="width: 10%;"></div>
                     </div>
                 </div>
             </div>
-            <div class="control-group">
-                <label for="id_new_password2" class="control-label">{{ _('Confirm password') }}</label>
-                <div class="controls">
+            <div class="input-group">
+                <label for="id_new_password2" class="">{{ _('Confirm password') }}</label>
+                <div class="">
                     <input id="id_new_password2" class="required" type="password" name="new_password2"
                            value="{% if form.new_password2.value() %}{{ form.new_password2.value() }}{% endif %}"
                            maxlength="100" />
@@ -51,9 +58,9 @@
                 </div>
             </div>
 
-            <div class="control-group">
-                <div class="controls">
-                    <input type="submit" class="btn btn-primary" value="Submit" /><br />
+            <div class="input-group m-t-30">
+                <div class="centered-button">
+                    <input type="submit" class="btn btn-primary" value="Submit" />
                 </div>
             </div>
         </form>
@@ -64,8 +71,7 @@
     {% else %}
         <p>{{ _('Sorry, the link you provided is invalid or has already been used') }}.</p>
     {% endif %}
-
-  </div>
+    </div>
 </div>
 
 {% endblock %}