Enhancement/bootstrap interface

.gitignore

@@ -25,6 +25,7 @@ reg_settings.py
 schema-populacao-estimada-2019.csv
 schema-populacao-por-municipio.csv
 schema-population.csv
+static_src/node_modules
 
 
 # Ignore patterns from <https://github.com/github/gitignore/blob/main/Python.gitignore>

brasilio_auth/forms.py

@@ -5,7 +5,7 @@
 from django.utils.translation import gettext_lazy as _
 from django_registration.forms import RegistrationFormUniqueEmail
 
-from utils.forms import FlagedReCaptchaField as ReCaptchaField
+from utils.forms import FlaggedReCaptchaField as ReCaptchaField
 
 USERNAME_REGEXP = re.compile(r"[^A-Za-z0-9_]")
 PUNCT_REGEXP = re.compile("[-/ .]")
@@ -18,17 +18,25 @@ def is_valid_username(username):
 
 class UserCreationForm(RegistrationFormUniqueEmail):
     username = forms.CharField(
-        widget=forms.TextInput(),
+        widget=forms.TextInput(attrs={"type": "text", "class": "form-control"}), label=_("Usuário"), required=True
     )
-    email = forms.EmailField()
-    password1 = forms.CharField(label=_("Password"), widget=forms.PasswordInput)
+    email = forms.EmailField(
+        widget=forms.TextInput(attrs={"placeholder": "ex@mail.com", "type": "email", "class": "form-control"}),
+        required=True,
+    )
+    password1 = forms.CharField(label=_("Password"), widget=forms.PasswordInput(attrs={"class": "form-control"}))
     password2 = forms.CharField(
         label=_("Password confirmation"),
-        widget=forms.PasswordInput,
+        widget=forms.PasswordInput(attrs={"class": "form-control"}),
         help_text=_("Enter the same password as above, for verification."),
     )
     captcha = ReCaptchaField(required=True)
-    subscribe_newsletter = forms.BooleanField(required=False)
+    subscribe_newsletter = forms.BooleanField(
+        widget=forms.CheckboxInput(
+            attrs={"type": "checkbox", "class": "form-check-input"},
+        ),
+        required=False,
+    )
 
     class Meta:
         model = get_user_model()

brasilio_auth/templates/brasilio_auth/activation_complete.html

@@ -1,18 +1,23 @@
-{% extends "base.html" %}
+{% extends "brasilio_auth/auth_base.html" %}
 
-{% block content %}
-  <div class="row m-t-15 center">
-    <div class="col s12 m8 p8 offset-m2">
-      <h4>Ativação realizada com sucesso!</h4>
-      <p>
-        Pronto! Sua conta foi ativada e agora você pode acessar todas as páginas do <a href="https://brasil.io/">Brasil.IO</a> (incluindo nossa API). :-)
-      </p>
-      <p>
-        Caso você precise baixar quantidades grandes de dados, por favor opte por <b>baixar os dados completos de cada dataset</b> em vez de utilizar a API ou acessar diretamente a listagem dos dados (basta acessar a página do dataset e clicar em "baixar dados completos").
-      </p>
-      <p>
-        O <a href="https://brasil.io/">Brasil.IO</a> é <b>desenvolvido colaborativamente por voluntários</b>, fica aqui o convite para <a href="{% url "core:collaborate" %}">colaborar com o projeto</a>. :-) Considere também <a href="{% url "core:donate" %}">fazer-nos uma doação</a>.
-      </p>
-    </div>
+{% block cardtitle %}
+  Ativação realizada com sucesso
+{% endblock %}
+
+{% block cardcontent %}
+  <p>
+    Pronto! Sua conta foi ativada e agora você pode acessar todas as páginas do <a href="https://brasil.io/">Brasil.IO</a> (incluindo nossa API). :-)
+  </p>
+  <p>
+    Caso você precise baixar quantidades grandes de dados, por favor opte por <b>baixar os dados completos de cada dataset</b> em vez de utilizar a API ou acessar diretamente a listagem dos dados (basta acessar a página do dataset e clicar em "baixar dados completos").
+  </p>
+  <p>
+    O <a href="https://brasil.io/">Brasil.IO</a> é <b>desenvolvido colaborativamente por voluntários</b>, fica aqui o convite para <a href="{% url "core:collaborate" %}">colaborar com o projeto</a>. :-)
+  </p>
+  <p>
+    Considere também <a href="{% url "core:donate" %}">fazer-nos uma doação</a>.
+  </p>
+  <div class="mt-4">
+    <a href="/" class="auth-btn">Voltar para início</a>
   </div>
 {% endblock %}

brasilio_auth/templates/brasilio_auth/activation_failed.html

@@ -1,13 +1,13 @@
-{% extends "base.html" %}
+{% extends "brasilio_auth/auth_base.html" %}
 
-{% block content %}
-  <div class="row m-t-15 center">
-    <div class="col s12 m8 p8 offset-m2">
-      <h4>Houve um erro na ativação</h4>
-      <p>Parece que ocorreu algum erro na ativação da sua conta. Por favor tente refazer o processo de cadastro novamente</p>
-
-      <p>Informações sobre o ocorrido: <b>{{ activation_error.message }}</b>.</p>
+{% block cardtitle %}
+  Houve um erro na ativação
+{% endblock %}
 
-    </div>
+{% block cardcontent %}
+  <p>Parece que ocorreu algum erro na ativação da sua conta. Por favor tente refazer o processo de cadastro novamente</p>
+  <p>Informações sobre o ocorrido: <b>{{ activation_error.message }}</b>.</p>
+  <div class="mt-4">
+    <a href="{% url 'brasilio_auth:sign_up' %}" class="auth-btn">Refazer cadastro</a>
   </div>
 {% endblock %}

brasilio_auth/templates/brasilio_auth/api_token_sample_usage.html

@@ -4,9 +4,9 @@
 
 {% block content %}
 <div class="section">
-  <div class="row">
-
-  <pre>
+  <h1>Exemplo de uso de Chaves API - Brasil.IO</h1>
+  <div class="row bg-light border shadow-sm p-5 mt-4">
+    <pre>
 ### Exemplo em Python 3
 import json
 from urllib.request import Request, urlopen
@@ -17,8 +17,7 @@
 response = urlopen(request)
 data = json.load(response)
 print(data)
-  </pre>
-
+    </pre>
   </div>
 </div>
 {% endblock %}

brasilio_auth/templates/brasilio_auth/auth_base.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <section
+    class="auth-base-section cards-section-bg"
+    tabindex="-1"
+    role="dialog"
+    id="modalSignin"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content rounded-5 shadow-lg">
+        <div class="modal-header p-5 pb-3 border-bottom-0">
+          <h2 class="fw-bold mb-0">
+            {% block cardtitle %}
+            {% endblock %}
+          </h2>
+        </div>
+
+        <div class="modal-body px-5 pb-5">
+         {% block cardcontent %}
+         {% endblock %}
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}

brasilio_auth/templates/brasilio_auth/list_user_api_tokens.html

@@ -2,51 +2,65 @@
 
 {% block title %}Gerenciamento de Chaves API - Brasil.IO{% endblock %}
 
+{% if messages %}
+  {% block alert %}
+    {% for message in messages %}
+      {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+        {% with message=message|safe type="danger" %}
+          {% include 'includes/toast.html' %}
+        {% endwith %} 
+      {% else %}
+        {% with message=message|safe type="success" %}
+          {% include 'includes/toast.html' %}
+        {% endwith %} 
+      {% endif %}
+    {% endfor %}
+  {% endblock %}
+{% endif %}
+
 {% block content %}
 <div class="section">
-  <div class="row">
-      <div class="col s12">
-        <div class="card">
-          <div class="card-content">
-            <span class="card-title">Gerenciamento de Chaves da API</span>
-            Veja mais informações sobre o uso das Chaves da API <a href="{{ api_keys_blogpost_url }}">neste post do blog do Brasil.IO</a>.
-          </div>
-        </div>
+  <div class="row px-3">
+    <div class="card-info">
+      <div class="card-body">
+        <h1 class="card-title fs-3">Gerenciamento de Chaves da API</h1>
+        <p>
+          Veja mais informações sobre o uso das Chaves da API 
+          <a href="{{ api_keys_blogpost_url }}">neste post do blog do Brasil.IO</a>.
+        </p>
       </div>
+    </div>
   </div>
 
-  {% if messages %}
-  <div class="row">
-
-    <ul class="messages">
-        {% for message in messages %}
-        <li class={% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}"dark-red"{% else %}"dark-green"{% endif %}>{{ message|safe }}</li>
-        {% endfor %}
-    </ul>
-  </div>
-  {% endif %}
-
-  <div class="row table-container" style="padding-left: 0px; overflow: hidden;">
-    <table id="api-tokens-table" class="mdl-data-table table-custom">
-      <tr>
+  <div class="row px-3 table-container table-responsive">
+    <table id="api-tokens-table" class="table table-bordered table-striped table-hover shadow-sm">
+      <thead>
         <th>Chave</th>
         <th>Criada em</th>
         <th>Ações</th>
-      </tr>
+      </thead>
 
       {% for token in tokens %}
-        <tr>
+        <tr class="text-nowrap">
           <td><tt>{{ token.key }}</tt></td>
           <td>{{ token.created }}</td>
-          <td><a href="{% url 'brasilio_auth:delete_api_token' token.key %}">Deletar chave</a></td>
+          <td>
+            <a
+              href="{% url 'brasilio_auth:delete_api_token' token.key %}"
+              title="Deletar chave"
+              class="btn btn-danger p-1"
+            >
+              <i class="bi bi-trash"></i>
+            </a>
+          </td>
         </tr>
       {% endfor %}
     </table>
   </div>
   {% if num_tokens_available %}
-  <div class="row" style="text-align: right; display: block">
-    <a style="display: inline-block" class="btn download-button" href="{{ demo_url }}">Ver exemplo de uso</a>
-    <a style="display: inline-block" data-table-id="api-tokens-table" class="btn download-button" href="{% url 'brasilio_auth:create_api_token' %}">Criar nova Chave de API</a>
+  <div class="d-flex justify-content-end">
+    <a class="btn btn-outline-secondary me-2" href="{{ demo_url }}">Ver exemplo de uso</a>
+    <a class="btn btn-primary" data-table-id="api-tokens-table" href="{% url 'brasilio_auth:create_api_token' %}">Criar nova Chave de API</a>
   </div>
   {% endif %}
 </div>

brasilio_auth/templates/brasilio_auth/login.html

@@ -1,58 +1,58 @@
-{% extends "base.html" %}
-
-{% block content %}
-
-  <div class="row m-t-15">
-    <div class="col s12 m8 offset-m2">
-      <h4>Login</h4>
-
-      {% if form.errors %}
-          {% for field in form %}
-              {% for error in field.errors %}
-                  <p class="red-text text-lighten-3">
-                      {{ error|escape }}
-                  </p>
-              {% endfor %}
-          {% endfor %}
-          {% for error in form.non_field_errors %}
-              <p class="red-text text-lighten-3">
-                  {{ error|escape }}
-              </p>
-          {% endfor %}
-      {% endif %}
-
-      {% if next %}
-          {% if user.is_authenticated %}
-            <p class="red-text text-lighten-3">
-              Seu usuário não possui permissão para acessar esta página.
-              Para seguir, por favor utilize algum usuário com permissão.
-            </p>
-          {% else %}
-            <p class="red-text text-lighten-3">
-              Faça o login para acessar a página.
-            </p>
-          {% endif %}
-      {% endif %}
-
-      <form method="post" action="{% url 'brasilio_auth:login' %}">
-        {% csrf_token %}
-        {{ form.username.label_tag }}
-        {{ form.username }}
-
-        {{ form.password.label_tag }}
-        {{ form.password }}
+{% extends "brasilio_auth/auth_base.html" %}
+
+{% block alert %}
+  {% if form.errors %}
+    {% for error in form.non_field_errors %}
+        {% with message=error|safe type="danger" %}
+          {% include 'includes/toast.html' %}
+        {% endwith %}
+    {% endfor %}
+  {% endif %}
+
+  {% if next %}
+    {% if user.is_authenticated %}
+      {% with message="Seu usuário não possui permissão para acessar esta página. Para seguir, por favor utilize algum usuário com permissão." type="warning" %}
+        {% include 'includes/toast.html' %}
+      {% endwith %}
+    {% else %}
+      {% with message="Faça o login para acessar a página." type="primary" %}
+        {% include 'includes/toast.html' %}
+      {% endwith %}
+    {% endif %}
+  {% endif %}
+{% endblock %}
 
-        <div class="text-center">
-          <input class="btn" type="submit" value="login" />
-          <input type="hidden" name="next" value="{{ next }}" />
-          <p>
-            <a href="{% url 'brasilio_auth:password_reset' %}">
-              Esqueci minha senha
-            </a>
-          </p>
-        </div>
-      </form>
+{% block cardtitle %}
+  Login
+{%endblock%}
+
+{% block cardcontent %}
+  <form method="post" action="{% url 'brasilio_auth:login' %}">
+    {% csrf_token %}
+    <div class="input-group input-group-lg mb-3">
+      <span class="input-group-text" id="basic-addon1">@</span>
+      <input 
+          name="username" type="text" class="form-control"
+          placeholder="Usuário" aria-label="Usuário"
+          aria-describedby="Campo usuário"
+          required
+      >
     </div>
-  </div>
-
+    <div class="input-group input-group-lg mb-4">
+      <span class="input-group-text" id="basic-addon1">
+        <i class="bi bi-lock-fill"></i>
+      </span>
+      <input 
+        name="password" type="password" 
+        class="form-control" placeholder="Senha" 
+        aria-label="Senha"aria-describedby="Campo senha"
+        required
+      >
+    </div>
+    <button class="auth-btn" type="submit">Acessar</button>
+    <input type="hidden" name="next" value="{{ next }}" />
+    <div class="text-center mt-2">
+      <a href="{% url 'brasilio_auth:password_reset' %}">Esqueceu sua senha?</a>
+    </div>
+  </form>
 {% endblock %}