From 262695e73859519726bc26c2036c8791c2143422 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jun 11 2018 07:59:38 +0000
Subject: Fix formatting on login, create user and password change pages


The new UI change left the pages for user management on instances
that dont use external auth looking a bit sad. This fixes up the
formatting of the following pages:

* Login
* Create new user
* Request password change
* reset password

Fixes: #3293

Signed-off-by: Ryan Lerch <rlerch@redhat.com>

---

diff --git a/pagure/templates/_formhelper.html b/pagure/templates/_formhelper.html
index ffef53b..6b8d21d 100644
--- a/pagure/templates/_formhelper.html
+++ b/pagure/templates/_formhelper.html
@@ -12,7 +12,7 @@
 </div>
 {% endmacro %}
 
-{% macro render_bootstrap_field(field, field_description="", formclass="") %}
+{% macro render_bootstrap_field(field, field_description="", formclass="", rightlink=None) %}
   <fieldset class="form-group {% if field.errors %}has-error{% endif %} {% if formclass %}issue-metadata-form{% endif %}">
     {% set formclasses = "form-control"%}
     {% if field.errors %} {% set formclasses = formclasses + " form-control-error" %} {% endif %}
@@ -30,7 +30,12 @@
           <small class="text-muted">{{ field_description }}</small>
         {% endif %}
     {% else %}
-      <strong>{{ field.label }}</strong>
+      <div>
+        <strong>{{ field.label }}</strong>
+      {% if rightlink %}
+      <div class="float-right"><a href="{{rightlink['url']}}">{{rightlink['text']}}</a>
+      {% endif %}
+      </div>
       {{ field(class_=formclasses)|safe }}
       <div>
         {% if field_description %}
diff --git a/pagure/templates/login/login.html b/pagure/templates/login/login.html
index 4b184a7..a65b10a 100644
--- a/pagure/templates/login/login.html
+++ b/pagure/templates/login/login.html
@@ -8,33 +8,20 @@
 
 <div class="container">
   <div class="row">
-    <div class="col-md-8 col-md-offset-2">
-      <div class="card m-t-3">
-        <div class="card-header">
-          <strong>Login</strong>
-        </div>
-        <div class="card-block">
-          <form action="{{ url_for('ui_ns.do_login') }}" method="post">
-            <input type="hidden" value="{{ next_url }}" name="next_url" />
-            {{ render_bootstrap_field(form.username) }}
-            {{ render_bootstrap_field(form.password) }}
-            <input class="btn btn-primary" type="submit" value="Login">
-            <input type="button" value="Cancel" class="btn btn-default" onclick="history.back();">
-            {{ form.csrf_token }}
-          </form>
-        </div>
-        <div class="card-block">
-          <p>
-            If you do not have already an account: <a href="{{
-                url_for('ui_ns.new_user') }}">
-            Create one!</a>
-          </p>
-          <p>
-          <a href="{{ url_for('ui_ns.lost_password') }}">
-            Forgot your password?</a>
-          </p>
-
-        </div>
+    <div class="col-md-4 mx-auto pt-5">
+      <h4 class="text-center font-weight-bold mb-4">Login</h4>
+      <form action="{{ url_for('ui_ns.do_login') }}" method="post">
+        <input type="hidden" value="{{ next_url }}" name="next_url" />
+        {{ render_bootstrap_field(form.username) }}
+        {{ render_bootstrap_field(form.password,
+                                  rightlink={'url': url_for('ui_ns.lost_password'), 'text': 'Forgot?' }) }}
+        <input class="btn btn-primary btn-block mt-4" type="submit" value="Login">
+        {{ form.csrf_token }}
+      </form>
+      <div>
+        <a class="btn btn-link btn-block" href="{{url_for('ui_ns.new_user') }}">
+          Create a new account
+        </a>
       </div>
     </div>
   </div>
diff --git a/pagure/templates/login/password_change.html b/pagure/templates/login/password_change.html
index 2b2d17a..9d8e538 100644
--- a/pagure/templates/login/password_change.html
+++ b/pagure/templates/login/password_change.html
@@ -8,20 +8,13 @@
 
 <div class="container">
   <div class="row">
-    <div class="col-md-8 col-md-offset-2">
-      <div class="card m-t-3">
-        <div class="card-header">
-          <strong>Lost password</strong>
-        </div>
-        <div class="card-block">
-          <form action="{{ url_for('ui_ns.lost_password') }}" method="post">
-            {{ render_bootstrap_field(form.username) }}
-            <input class="btn btn-primary" type="submit" value="Send email">
-            <input type="button" value="Cancel" class="btn btn-default" onclick="history.back();">
-            {{ form.csrf_token }}
-          </form>
-        </div>
-      </div>
+    <div class="col-md-6 mx-auto pt-5">
+      <h4 class="text-center font-weight-bold mb-4">Reset Password</h4>
+      <form action="{{ url_for('ui_ns.lost_password') }}" method="post">
+        {{ render_bootstrap_field(form.username) }}
+        <input class="btn btn-primary btn-block mt-4" type="submit" value="Send reset email">
+        {{ form.csrf_token }}
+      </form>
     </div>
   </div>
 </div>
diff --git a/pagure/templates/login/password_recover.html b/pagure/templates/login/password_recover.html
index 53d44f8..cd48bf0 100644
--- a/pagure/templates/login/password_recover.html
+++ b/pagure/templates/login/password_recover.html
@@ -8,24 +8,16 @@
 
 <div class="container">
   <div class="row">
-    <div class="col-md-8 col-md-offset-2">
-      <div class="card m-t-3">
-        <div class="card-header">
-          <strong>Change password</strong>
-        </div>
-        <div class="card-block">
-          <form action="{{ url_for('ui_ns.change_password')}}" method="post">
-            {{ render_bootstrap_field(form.old_password) }}
-            {{ render_bootstrap_field(form.password) }}
-            {{ render_bootstrap_field(form.confirm_password) }}
-            {{ form.csrf_token }}
-            <input class="btn btn-primary" type="submit" value="Update"
-              title="Update description">
-            <input type="button" value="Cancel" class="btn btn-default"
-              onclick="history.back();">
-          </form>
-        </div>
-      </div>
+    <div class="col-md-6 mx-auto pt-5">
+      <h4 class="text-center font-weight-bold mb-4">Change Password</h4>
+      <form action="{{ url_for('ui_ns.change_password')}}" method="post">
+        {{ render_bootstrap_field(form.old_password) }}
+        {{ render_bootstrap_field(form.password) }}
+        {{ render_bootstrap_field(form.confirm_password) }}
+        {{ form.csrf_token }}
+        <input class="btn btn-primary btn-block mt-4" type="submit" value="Update"
+          title="Update description">
+      </form>
     </div>
   </div>
 </div>
diff --git a/pagure/templates/login/user_new.html b/pagure/templates/login/user_new.html
index 52df1b2..e435514 100644
--- a/pagure/templates/login/user_new.html
+++ b/pagure/templates/login/user_new.html
@@ -7,29 +7,22 @@
 {% block content %}
 <div class="container">
   <div class="row">
-    <div class="col-md-8 col-md-offset-2">
-      <div class="card m-t-3">
-        <div class="card-header">
-          <strong>Create new User</strong>
-        </div>
-        <div class="card-block">
-          <form action="{{ url_for('ui_ns.new_user') }}" method="post">
-            {{ render_bootstrap_field(
-                form.user, field_description="username of the user") }}
-            {{ render_bootstrap_field(
-                form.fullname, field_description="full name of the user") }}
-            {{ render_bootstrap_field(
-                form.email_address, field_description="email address of the user") }}
-            {{ render_bootstrap_field(
-                form.password, field_description="password of the user") }}
-            {{ render_bootstrap_field(
-                form.confirm_password, field_description="confirm the password") }}
-            <input class="btn btn-primary" type="submit" value="Create" title="Update description">
-            <input type="button" value="Cancel" class="btn btn-default" onclick="history.back();">
-            {{ form.csrf_token }}
-          </form>
-        </div>
-      </div>
+    <div class="col-md-6 mx-auto pt-5">
+      <h4 class="text-center font-weight-bold mb-4">Create new account</h4>
+      <form action="{{ url_for('ui_ns.new_user') }}" method="post">
+        {{ render_bootstrap_field(
+            form.user) }}
+        {{ render_bootstrap_field(
+            form.fullname) }}
+        {{ render_bootstrap_field(
+            form.email_address) }}
+        {{ render_bootstrap_field(
+            form.password) }}
+        {{ render_bootstrap_field(
+            form.confirm_password) }}
+        <input class="btn btn-primary btn-block mt-4" type="submit" value="Create" title="Update description">
+        {{ form.csrf_token }}
+      </form>
     </div>
   </div>
 </div>