From 104ab606bb916d3b658957136d3ed1670c108337 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Carmona?= <juhhcarmona@gmail.com>
Date: Thu, 30 Aug 2018 19:54:59 -0300
Subject: [PATCH] Improve style of auth workflow

---
 .../templates/brasilio_auth/login.html        |  2 +
 .../brasilio_auth/password_reset.html         | 34 ++++++-----
 .../password_reset_complete.html              | 16 +++++-
 .../brasilio_auth/password_reset_done.html    | 19 +++++--
 .../brasilio_auth/password_reset_form.html    | 49 +++++++++-------
 .../brasilio_auth/user_creation_form.html     | 57 ++++++++++---------
 6 files changed, 112 insertions(+), 65 deletions(-)

diff --git a/brasilio_auth/templates/brasilio_auth/login.html b/brasilio_auth/templates/brasilio_auth/login.html
index da2a1a06..d180a719 100644
--- a/brasilio_auth/templates/brasilio_auth/login.html
+++ b/brasilio_auth/templates/brasilio_auth/login.html
@@ -4,6 +4,8 @@
 
   <div class="row m-t-15">
     <div class="col s12 m8 offset-m2">
+      <h4>Login</h4>
+
       {% if form.errors %}
         <p class="red-text text-lighten-3">
           Senha inválida. Por favor tente novamente.
diff --git a/brasilio_auth/templates/brasilio_auth/password_reset.html b/brasilio_auth/templates/brasilio_auth/password_reset.html
index 6f78767b..c1f97e55 100644
--- a/brasilio_auth/templates/brasilio_auth/password_reset.html
+++ b/brasilio_auth/templates/brasilio_auth/password_reset.html
@@ -2,20 +2,28 @@
 
 {% block content %}
 
-{% if form.errors %}
-    {{ form.errors }}
-{% endif %}
+  <div class="row m-t-15">
+    <div class="col s12 m8 offset-m2">
+      <h4>Troque sua senha</h4>
+      <p class="indigo-text text-lighten-1">
+        Informe seu email e lhe enviaremos um link com as intruções para trocar sua senha =)
+      </p>
 
-<form method="post" action="{% url 'brasilio_auth:password_reset' %}">
-{% csrf_token %}
-<table>
-<tr>
-    <td>{{ form.email.label_tag }}</td>
-    <td>{{ form.email }}</td>
-</tr>
-</table>
+      {% if form.errors %}
+          {{ form.errors }}
+      {% endif %}
 
-<input class="btn" type="submit" value="Reset" />
-</form>
+      <form method="post" action="{% url 'brasilio_auth:password_reset' %}">
+        {% csrf_token %}
+
+        {{ form.email.label_tag }}
+        {{ form.email }}
+        <div class="text-center">
+          <input class="btn" type="submit" value="Resetar" />
+        </div>
+      </form>
+
+    </div>
+  </div>
 
 {% endblock %}
diff --git a/brasilio_auth/templates/brasilio_auth/password_reset_complete.html b/brasilio_auth/templates/brasilio_auth/password_reset_complete.html
index a7a9fa07..e3c9c591 100644
--- a/brasilio_auth/templates/brasilio_auth/password_reset_complete.html
+++ b/brasilio_auth/templates/brasilio_auth/password_reset_complete.html
@@ -2,9 +2,19 @@
 
 {% block content %}
 
-<h4>Senha atualizada!</h4>
-<p>Sua senha foi atualizada! Agora você pode seguir e acessar o Brasil.IO de novo.</p>
+  <div class="row m-t-15">
+    <div class="col s12 m8 offset-m2">
+      <h4>Senha atualizada!</h4>
 
-<p><a href="{{ login_url }}">Login</a></p>
+      <p class="indigo-text text-lighten-1">
+        Sua senha foi atualizada! Agora você pode seguir e acessar o Brasil.IO de novo.
+      </p>
+
+      <p>
+        <a href="{{ login_url }}" class="btn"> Login </a>
+      </p>
+
+    </div>
+  </div>
 
 {% endblock %}
diff --git a/brasilio_auth/templates/brasilio_auth/password_reset_done.html b/brasilio_auth/templates/brasilio_auth/password_reset_done.html
index f201bd71..c0c1630d 100644
--- a/brasilio_auth/templates/brasilio_auth/password_reset_done.html
+++ b/brasilio_auth/templates/brasilio_auth/password_reset_done.html
@@ -2,9 +2,20 @@
 
 {% block content %}
 
-<h4>Redefinição de senha enviada</h4>
-<p>Se existir uma conta com o e-mail fornecido, você receberá, em breve, uma mensagem com as instruções para redefinição da sua senha. Verifique sua caixa de entrada.</p>
-  
-<p>Se você não receber um e-mail, por favor verifique se o endereço digitado é o mesmo que você usou para se registrar. Verifique também a sua pasta de spam.</p>
+  <div class="row m-t-15">
+    <div class="col s12 m8 offset-m2">
+
+      <h4> Redefinição de senha enviada </h4>
+      <p class="indigo-text text-lighten-1">
+        Se existir uma conta com o e-mail fornecido, você receberá, em breve,
+        uma mensagem com as instruções para redefinição da sua senha.
+        Verifique sua caixa de entrada.
+      </p>
+
+      <p class="indigo-text text-lighten-1">
+        Se você não receber um e-mail, por favor verifique se o endereço digitado
+        é o mesmo que você usou para se registrar.
+        Verifique também a sua pasta de spam.
+      </p>
 
 {% endblock %}
diff --git a/brasilio_auth/templates/brasilio_auth/password_reset_form.html b/brasilio_auth/templates/brasilio_auth/password_reset_form.html
index a88b35f6..4e1e95ad 100644
--- a/brasilio_auth/templates/brasilio_auth/password_reset_form.html
+++ b/brasilio_auth/templates/brasilio_auth/password_reset_form.html
@@ -2,30 +2,41 @@
 
 {% block content %}
 
-<h4>Atualização de Senha</h4>
+  <div class="row m-t-15">
+    <div class="col s12 m8 offset-m2">
+      <h4>Atualização de Senha</h4>
 
-{% if validlink %}
+      {% if validlink %}
+        <p class="indigo-text text-lighten-1">
+          Por favor, informe sua nova senha duas vezes para que possamos verificar se
+          você a digitou corretamente.
+        </p>
 
-<p>Por favor, informe sua nova senha duas vezes para que possamos verificar se você a digitou corretamente.</p>
+        <form method="post">{% csrf_token %}
+          {{ form.new_password1.errors }}
 
-<form method="post">{% csrf_token %}
-    <div>
-        {{ form.new_password1.errors }}
-        <label for="id_new_password1">Nova senha:</label>
-        {{ form.new_password1 }}
-    </div>
-    <div>
-        {{ form.new_password2.errors }}
-        <label for="id_new_password2">Confirmação de senha:</label>
-        {{ form.new_password2 }}
-    </div>
-    <input class='btn' type="submit" value="Alterar minha senha" />
-</form>
+          <label for="id_new_password1">Nova senha:</label>
+          {{ form.new_password1 }}
+
+          {{ form.new_password2.errors }}
 
-{% else %}
+          <label for="id_new_password2">Confirmação de senha:</label>
+          {{ form.new_password2 }}
 
-<p>O link para atualização de senha está inválido. Provavelmente você já o utilizou ou o link expirou. Por favor, solicite uma nova troca de senha.</p>
+          <div class="text-center">
+            <input class='btn' type="submit" value="Alterar minha senha" />
+          </div>
+        </form>
 
-{% endif %}
+        {% else %}
+        <p class="red-text text-lighten-3">
+          O link para atualização de senha está inválido.
+          Provavelmente você já o utilizou ou o link expirou.
+          Por favor, solicite uma nova troca de senha.
+        </p>
+      {% endif %}
+
+    </div>
+  </div>
 
 {% endblock %}
diff --git a/brasilio_auth/templates/brasilio_auth/user_creation_form.html b/brasilio_auth/templates/brasilio_auth/user_creation_form.html
index 9f812219..9d5e6052 100644
--- a/brasilio_auth/templates/brasilio_auth/user_creation_form.html
+++ b/brasilio_auth/templates/brasilio_auth/user_creation_form.html
@@ -2,42 +2,47 @@
 
 {% block content %}
 
-{% if next %}
-{% include 'contas-gratuitas.html' %}
-{% endif %}
+  <div class="row m-t-15">
+    <div class="col s12 m8 offset-m2">
+      {% if next %}
+          {% include 'contas-gratuitas.html' %}
+      {% endif %}
+      <h4>Cadastre-se</h4>
 
-<h4>Cadastre-se</h4>
+      <form method="post">
+        {% csrf_token %}
 
-<form method="post">{% csrf_token %}
-    <div>
         {{ form.username.errors }}
-        <label for="id_username">Usuário:</label>
+        <label for="id_username"> Usuário: </label>
         {{ form.username }}
-    </div>
-    <div>
+
+
         {{ form.email.errors }}
-        <label for="id_email">Email:</label>
+        <label for="id_email"> Email: </label>
         {{ form.email }}
-    </div>
-    <div>
+
+
         {{ form.password1.errors }}
-        <label for="id_password1">Senha:</label>
+        <label for="id_password1"> Senha: </label>
         {{ form.password1 }}
-    </div>
-    <div>
+
+
         {{ form.password2.errors }}
-        <label for="id_password2">Confirmação de senha:</label>
+        <label for="id_password2"> Confirmação de senha: </label>
         {{ form.password2 }}
-    </div>
-    <div>
-      <label>
-        {{ form.subscribe_newsletter }}
-        <span>Deseja assinar nossa newsletter? </span>
-      </label>
-    </div>
-    <input type="hidden" name="next" value="{{ next }}" />
-    <input class='btn' type="submit" value="Salvar" />
-</form>
 
+        <label>
+          {{ form.subscribe_newsletter }}
+          <span> Deseja assinar nossa newsletter? </span>
+        </label>
+
+          <div class="text-center m-t-10">
+            <input type="hidden" name="next" value="{{ next }}" />
+            <input class='btn' type="submit" value="Salvar" />
+          </div>
+
+      </form>
+    </div>
+  </div>
 
 {% endblock %}