From d21e1ccc1cb79c72105caf92f5b387f0ad7fcb8d Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Wed, 3 May 2017 22:48:53 -0700
Subject: [PATCH] Unify styling on password reset flow pages.

---
 static/styles/portico.css           | 19 +++++--
 templates/zerver/reset_confirm.html | 82 +++++++++++++++--------------
 templates/zerver/reset_done.html    |  8 ++-
 templates/zerver/reset_emailed.html | 14 +++--
 4 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/static/styles/portico.css b/static/styles/portico.css
index 539ce67980..ae91e1dfa2 100644
--- a/static/styles/portico.css
+++ b/static/styles/portico.css
@@ -272,6 +272,7 @@ img.screenshot {
 #pw_strength {
     /* Same width as a Bootstrap default text <input> with padding */
     width: 220px;
+    height: 8px;
 }
 
 #registration #pw_strength {
@@ -1115,20 +1116,28 @@ input.new-organization-button {
 }
 
 /* -- password reset container -- */
-.password-container {
-    text-align: center;
-    margin-top: calc(50vh - 290px);
-}
-
 .password-reset {
     display: inline-block;
     text-align: left;
 }
 
+.password-reset form {
+    margin: 0px;
+}
+
+.password-reset #pw_strength {
+    width: 328px;
+    margin-top: 20px;
+}
+
 .password-reset .control-group .control-label {
     display: block;
 }
 
+.password-reset {
+    width: 328px;
+}
+
 .password-reset .pitch {
     width: auto;
 }
diff --git a/templates/zerver/reset_confirm.html b/templates/zerver/reset_confirm.html
index 6a2894271f..904a684502 100644
--- a/templates/zerver/reset_confirm.html
+++ b/templates/zerver/reset_confirm.html
@@ -6,73 +6,75 @@
 
 {% block portico_content %}
 
-<div class="password-container">
-    <div class="password-reset">
-        <!-- TODO: Ask about meta viewport 1:1 scaling -->
-        <div class="pitch">
-            <h3>{{ _('Reset your password.') }}</h3>
+<div class="password-container flex full-page new-style">
+    <div class="bg-image"></div>
+
+    <!-- wrapper for flex content -->
+    <div>
+        <div class="get-started">
+            <h1>{{ _('Reset your password.') }}</h1>
         </div>
+        <div class="password-reset white-box">
+            <!-- TODO: Ask about meta viewport 1:1 scaling -->
 
-        {% if validlink %}
-        <form method="post" id="password_reset" class="form-horizontal" autocomplete="off">
-            {{ csrf_input }}
-            <div class="input-group" id="email-section">
-                <label for="id_email">{{ _("Email") }}</label>
-                <div>
-                    <input type="text" name="name" placeholder='{{ form.user.email }}' disabled />
+            {% if validlink %}
+            <form method="post" id="password_reset" class="form-horizontal" autocomplete="off">
+                {{ csrf_input }}
+                <div class="input-box" id="email-section">
+                    <label for="id_email">{{ _("Email") }}</label>
+                    <div>
+                        <input type="text" name="name" placeholder='{{ form.user.email }}' disabled />
+                    </div>
                 </div>
-            </div>
 
-            <div class="input-group">
-                <label for="id_new_password1" class="">{{ _('Password') }}</label>
-                <div class="">
+                <div class="input-box">
+                    <label for="id_new_password1" class="">{{ _('Password') }}</label>
                     <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"
                            data-min-length="{{password_min_length}}"
-                           data-min-quality="{{password_min_quality}}" />
+                           data-min-quality="{{password_min_quality}}" required />
+                    <img class="valid" src="/static/images/checkbox-valid.svg" />
                     {% if form.new_password1.errors %}
                         {% for error in form.new_password1.errors %}
                         <div class="alert alert-error">{{ error }}</div>
                         {% endfor %}
                     {% endif %}
                 </div>
-            </div>
-            <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 class="input-box">
+                    <div class="">
+                        <div class="progress" id="pw_strength">
+                            <div class="bar bar-danger" style="width: 10%;"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="input-group">
-                <label for="id_new_password2" class="">{{ _('Confirm password') }}</label>
-                <div class="">
+                <div class="input-box">
+                    <label for="id_new_password2" class="">{{ _('Confirm password') }}</label>
                     <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" />
+                           maxlength="100" required />
+                    <img class="valid" src="/static/images/checkbox-valid.svg" />
                     {% if form.new_password2.errors %}
                         {% for error in form.new_password2.errors %}
                         <div class="alert alert-error">{{ error }}</div>
                         {% endfor %}
                     {% endif %}
                 </div>
-            </div>
 
-            <div class="input-group m-t-30">
-                <div class="centered-button">
-                    <input type="submit" class="btn btn-primary" value="Submit" />
+                <div class="input-box m-t-30">
+                    <div class="centered-button">
+                        <button type="submit" class="" value="Submit">Submit</button>
+                    </div>
                 </div>
-            </div>
-        </form>
+            </form>
 
-        <script type="text/javascript">
-            autofocus('#id_new_password1');
-        </script>
-        {% else %}
-        <p>{{ _('Sorry, the link you provided is invalid or has already been used.') }}</p>
-        {% endif %}
+            <script type="text/javascript">
+                autofocus('#id_new_password1');
+            </script>
+            {% else %}
+            <p>{{ _('Sorry, the link you provided is invalid or has already been used.') }}</p>
+            {% endif %}
+        </div>
     </div>
 </div>
 
diff --git a/templates/zerver/reset_done.html b/templates/zerver/reset_done.html
index 4db8f425a4..d39e981df7 100644
--- a/templates/zerver/reset_done.html
+++ b/templates/zerver/reset_done.html
@@ -1,6 +1,10 @@
 {% extends "zerver/portico_signup.html" %}
 {% block portico_content %}
-<h1 style="margin-top: 20px">{{ _("We've reset your password!") }}</h1>
-<p>{% trans login_url=url('django.contrib.auth.views.login') %}Please <a href="{{ login_url }}">log in</a>.{% endtrans %}</p>
+<div class="flex full-page new-style">
+    <div class="inline-block">
+        <h1 style="margin-top: 20px">{{ _("We've reset your password!") }}</h1>
+        <p>{% trans login_url=url('django.contrib.auth.views.login') %}Please <a href="{{ login_url }}">log in</a>.{% endtrans %}</p>
+    </div>
+</div>
 
 {% endblock %}
diff --git a/templates/zerver/reset_emailed.html b/templates/zerver/reset_emailed.html
index ba42ccca01..3e563cc0ae 100644
--- a/templates/zerver/reset_emailed.html
+++ b/templates/zerver/reset_emailed.html
@@ -1,8 +1,12 @@
 {% extends "zerver/portico_signup.html" %}
 {% block portico_content %}
-    {% trans %}
-    <h1 style="margin-top: 20px">We just sent you a password reset!</h1>
-    <h1>Check your email to finish the process.</h1>
-    <p>(Or don't, but then why did you fill out this form?)</p>
-    {% endtrans %}
+    <div class="flex full-page new-style">
+        <div class="inline-block">
+            {% trans %}
+            <h1 style="margin-top: 20px">We just sent you a password reset!</h1>
+            <h1>Check your email to finish the process.</h1>
+            <p>(Or don't, but then why did you fill out this form?)</p>
+            {% endtrans %}
+        </div>
+    </div>
 {% endblock %}