From 68ac5cba3304e8e1e17ab75b37998d162a5ac2f8 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Fri, 7 Jun 2024 10:18:56 +0200
Subject: [PATCH] New style for old login page

---
 modoboa/core/forms.py                         |  11 +-
 modoboa/core/templatetags/core_tags.py        |   2 +-
 modoboa/static/css/modoboa-white.png          | Bin 0 -> 8336 bytes
 modoboa/static/css/offline.css                | 150 +++++++++++++++---
 modoboa/templates/registration/base.html      |  28 +---
 modoboa/templates/registration/login.html     |  41 ++---
 .../registration/password_reset_complete.html |   2 +-
 .../registration/password_reset_confirm.html  |  37 +++--
 .../registration/password_reset_done.html     |   3 +-
 .../registration/password_reset_form.html     |  39 ++---
 test_project/test_project/settings.py         |   3 +-
 11 files changed, 202 insertions(+), 114 deletions(-)
 create mode 100644 modoboa/static/css/modoboa-white.png

diff --git a/modoboa/core/forms.py b/modoboa/core/forms.py
index 6358d365e..08a44abf8 100644
--- a/modoboa/core/forms.py
+++ b/modoboa/core/forms.py
@@ -10,7 +10,6 @@ from django.utils.translation import gettext as _, gettext_lazy
 import django_otp
 
 from modoboa.core.models import User, UserFidoKeys
-from modoboa.core import utils
 from modoboa.lib.form_utils import UserKwargModelFormMixin
 from modoboa.parameters import tools as param_tools
 
@@ -120,8 +119,8 @@ class ProfileForm(forms.ModelForm):
 
 class TwoFAChoiceForm(forms.Form):
     """Form to select the 2FA method of choice."""
-    two_fa_choices = forms.ChoiceField(choices=(),
-                                       required=True)
+
+    two_fa_choices = forms.ChoiceField(choices=(), required=True)
 
     def __init__(self, *args, **kwargs):
         user = kwargs.pop("user")
@@ -129,8 +128,8 @@ class TwoFAChoiceForm(forms.Form):
         if fido_keys.exists():
             self.fields["two_fa_choices.choices"].choices = [
                 ("TOTP", "TOTP or recovery codes"),
-                ("FIDO", "Webauthn device")
-                ]
+                ("FIDO", "Webauthn device"),
+            ]
 
 
 class APIAccessForm(forms.Form):
@@ -169,7 +168,7 @@ class PasswordResetForm(auth_forms.PasswordResetForm):
     ):
         """Send message to secondary email instead."""
         to_email = context["user"].secondary_email
-        super(PasswordResetForm, self).send_mail(
+        super().send_mail(
             subject_template_name,
             email_template_name,
             context,
diff --git a/modoboa/core/templatetags/core_tags.py b/modoboa/core/templatetags/core_tags.py
index 859996d0d..e7285fcf3 100644
--- a/modoboa/core/templatetags/core_tags.py
+++ b/modoboa/core/templatetags/core_tags.py
@@ -249,7 +249,7 @@ def get_modoboa_logo():
     except AttributeError:
         logo = None
     if logo is None:
-        return os.path.join(settings.STATIC_URL, "css/modoboa.png")
+        return os.path.join(settings.STATIC_URL, "css/modoboa-white.png")
     return logo
 
 
diff --git a/modoboa/static/css/modoboa-white.png b/modoboa/static/css/modoboa-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d49dd63b36b4ffc6285deda740859c1d0c006a7
GIT binary patch
literal 8336
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
RdHut$r}gYf^<#(E{{s#?;Y|Pl

literal 0
HcmV?d00001

diff --git a/modoboa/static/css/offline.css b/modoboa/static/css/offline.css
index 9defa70a5..62288a7a4 100644
--- a/modoboa/static/css/offline.css
+++ b/modoboa/static/css/offline.css
@@ -1,40 +1,138 @@
-@media (max-width: 767px) {
-    form div.checkbox button.btn {
-        margin-top: 20px;
-        margin-bottom: 0;
-    }
-}
-
 body {
-    background-color: #EDEDEC;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    height: 100vh;
+    background-color: #f0f2f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-#logo {
-    margin-bottom: 5%;
+.container {
+    display: flex;
+    width: 100%;
+    height: 100%;
 }
 
-html body div.container div#box div#logo.row ul.thumbnails li {
-    list-style-type: none;
+.column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
 }
 
-.thumbnail {
-    background-color: transparent;
-    border-color: transparent;
+.left-column {
+    background-color: #046bf8;
+    text-align: center;
 }
 
-.thumbnails {
-    padding-left: 0;
+.right-column {
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login-box {
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+}
+
+.message-box {
+    width: 100%;
+    max-width: 600px;
+    text-align: center;
+}
+
+.logo img {
+    width: 400px;
+    margin-bottom: 20px;
+}
+
+h2 {
+    margin-bottom: 20px;
+    font-size: 24px;
+    color: #333;
 }
 
 .input-group {
-    border-collapse: separate;
-    display: table;
-    position: relative;
+    margin-bottom: 15px;
+    text-align: left;
+    width: 100%;
 }
 
-.form-actions { 
-    background-color: transparent;
-    padding-right: 0px;
-    padding-left: 0px;
-    margin-bottom: 0px;
-}
\ No newline at end of file
+.input-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 14px;
+    color: #555;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 16px;
+    color: #333;
+}
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+}
+
+.checkbox-group input {
+    width: auto;
+    margin-right: 10px;
+}
+
+.btn {
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+
+.footer {
+    margin-top: 20px;
+}
+
+.footer a {
+    color: #007bff;
+    text-decoration: none;
+    font-size: 14px;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.alert-box {
+    background-color: #007bff;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+  .column {
+    width: 100%;
+  }
+}
diff --git a/modoboa/templates/registration/base.html b/modoboa/templates/registration/base.html
index 8c1343368..12feed341 100644
--- a/modoboa/templates/registration/base.html
+++ b/modoboa/templates/registration/base.html
@@ -7,35 +7,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>{% trans "Welcome to Modoboa" %}</title>
     <link rel="icon" type="image/png" href="{% static 'css/logo-icon.png' %}" />
-    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" />
     <link rel="stylesheet" type="text/css" href="{% static 'css/offline.css' %}" />
     {% block extra_css %}{% endblock %}
   </head>
   <body>
     <div class="container">
-      <div id="box" class="col-lg-9 col-lg-offset-1">
-        <div id="logo" class="row">
-          <ul class="thumbnails">
-            <li>
-              <div class="col-lg-offset-4 col-lg-5 col-md-offset-4 col-md-5 col-sm-offset-4 col-sm-5">
-                <a href="#" class="thumbnail">
-                  <img src="{% get_modoboa_logo %}" />
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class=" divider"></div>
+      <div class="column left-column">
+        <a href="#" class="logo">
+          <img src="{% get_modoboa_logo %}" />
+        </a>
+        {% block sub_content %}{% endblock %}
+      </div>
+      <div class="column right-column">
         {% block main_content %}{% endblock %}
       </div>
-      {% block sub_content %}{% endblock %}
     </div>
-    <!-- Javascript -->
-    <script type="text/javascript" src="{% static 'jquery/jquery.min.js' %}"></script>
-    <script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>
-    {% if TEMPLATE_DEBUG %}
-    <script src="//maxcdn.bootstrapcdn.com/bootlint/0.4.0/bootlint.min.js"></script>
-    {% endif %}
     <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
     {% block extra_js %}{% endblock %}
   </body>
diff --git a/modoboa/templates/registration/login.html b/modoboa/templates/registration/login.html
index 931f296bc..3ee975c4f 100644
--- a/modoboa/templates/registration/login.html
+++ b/modoboa/templates/registration/login.html
@@ -7,25 +7,28 @@
 {% endblock %}
 
 {% block main_content %}
-  <form method="post" action="{% url 'core:login' %}" class="login-form form-horizontal">
-    {% csrf_token %}
-    {% render_field form.username %}
-    {% render_field form.password %}
-    <input type="hidden" name="next" value="{{ next }}" />
-    <div class="form-group">
-      <div class="control-label col-lg-4 col-md-4 col-sm-4 ">
+  <div class="login-box">
+    <h2>{% translate "Identification" %}</h2>
+    <form method="post" action="{% url 'core:login' %}" class="login-form form-horizontal">
+      {% csrf_token %}
+      <div class="input-group">
+        {% render_field form.username %}
       </div>
-      <div class="col-lg-5 col-md-5 col-sm-5">
-        <div class="checkbox">
-          <label class="checkbox" for="id_rememberme">
-            <input type="checkbox" id="id_rememberme" name="rememberme" />{% trans "Remember me" %}
-          </label>
-          <button class="btn btn-primary col-lg-12" type="submit">{% trans "Log in" %}</button>
-          <a class="pull-right" href="{% url 'password_reset' %}">{% trans "Forgot password?" %}</a>
-        </div>
+      <div class="input-group">
+        {% render_field form.password %}
       </div>
+      <input type="hidden" name="next" value="{{ next }}" />
+
+      <div class="input-group checkbox-group">
+        <input type="checkbox" id="remember" name="remember">
+        <label for="remember">{% translate "Remember me" %}</label>
+      </div>
+      <button class="btn" type="submit">{% trans "Log in" %}</button>
+    </form>
+    <div class="footer">
+      <a class="pull-right" href="{% url 'password_reset' %}">{% trans "Forgot password?" %}</a>
     </div>
-  </form>
+  </div>
   <div class="login-error">
     {% if error %}{% alert error "danger" %}{% endif %}
   </div>
@@ -33,15 +36,15 @@
 
 {% block sub_content %}
   {% for annoucement in annoucements %}
-    <div class="col-xs-12 col-sm-offset-3 col-sm-6">{{ annoucement|safe }}</div>
+    <div>{{ annoucement|safe }}</div>
   {% endfor %}
 {% endblock %}
 
 {% block extra_js %}
   <script type="text/javascript">
    $(document).ready(function() {
-       $("form").submit(function(){  
-           $(":submit",this).attr("disabled","disabled");  
+       $("form").submit(function(){
+           $(":submit", this).attr("disabled", "disabled");
        });
        $('#id_username').focus();
    });
diff --git a/modoboa/templates/registration/password_reset_complete.html b/modoboa/templates/registration/password_reset_complete.html
index 94fa32a98..8b6e9cc7e 100644
--- a/modoboa/templates/registration/password_reset_complete.html
+++ b/modoboa/templates/registration/password_reset_complete.html
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block main_content %}
-  <div class="alert alert-success">
+  <div class="message-box">
     {% url 'core:login' as login_url %}
     {% blocktrans with url=login_url trimmed %}
       Your password has been set. You may go ahead and <a href="{{ url }}">sign in</a> now.
diff --git a/modoboa/templates/registration/password_reset_confirm.html b/modoboa/templates/registration/password_reset_confirm.html
index dc7c9a965..c219b77d2 100644
--- a/modoboa/templates/registration/password_reset_confirm.html
+++ b/modoboa/templates/registration/password_reset_confirm.html
@@ -3,21 +3,26 @@
 {% load i18n form_tags %}
 
 {% block main_content %}
-  {% if validlink %}
-    <h3 class="text-center">{% trans "Change password" %}</h3>
-    <form method="post" class="form-horizontal" style="margin-top: 20px">
-      {% csrf_token %}
-      {% render_form form %}
-      <div class="col-sm-offset-4 col-sm-5">
-        <button class="btn btn-primary col-lg-12" type="submit">{% trans "Submit" %}</button>
+  <div class="login-box">
+    {% if validlink %}
+      <h3 class="text-center">{% trans "Change password" %}</h3>
+      <form method="post" style="margin-top: 20px">
+        {% csrf_token %}
+        <div class="input-group">
+          {% render_field form.new_password1 %}
+        </div>
+        <div class="input-group">
+          {% render_field form.new_password2 %}
+        </div>
+        <button class="btn" type="submit">{% trans "Submit" %}</button>
+      </form>
+    {% else %}
+      <div class="alert alert-danger">
+        {% blocktrans trimmed %}
+          The password reset link was invalid, possibly because it has already been used.
+          Please request a new password reset.
+        {% endblocktrans %}
       </div>
-    </form>
-  {% else %}
-    <div class="alert alert-danger">
-      {% blocktrans trimmed %}
-        The password reset link was invalid, possibly because it has already been used.
-        Please request a new password reset.
-      {% endblocktrans %}
-    </div>
-  {% endif %}
+    {% endif %}
+  </div>
 {% endblock %}
diff --git a/modoboa/templates/registration/password_reset_done.html b/modoboa/templates/registration/password_reset_done.html
index f75e8954f..4068be476 100644
--- a/modoboa/templates/registration/password_reset_done.html
+++ b/modoboa/templates/registration/password_reset_done.html
@@ -3,7 +3,8 @@
 {% load i18n %}
 
 {% block main_content %}
-  <div class="alert alert-info">
+  <div class="message-box">
+    <h3 class="text-center">{% trans "Forgot password?" %}</h3>
     {% blocktrans trimmed %}
       <p>We've emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.</p>
       <p>If you don't receive an email, please make sure you've entered your primary address, and check your spam folder.</p>
diff --git a/modoboa/templates/registration/password_reset_form.html b/modoboa/templates/registration/password_reset_form.html
index 672e40bea..1dae339fd 100644
--- a/modoboa/templates/registration/password_reset_form.html
+++ b/modoboa/templates/registration/password_reset_form.html
@@ -3,31 +3,26 @@
 {% load i18n form_tags %}
 
 {% block main_content %}
-
-  {% if announcement %}
-    <div class="row">
-      <div class="col-xs-12 col-sm-offset-3 col-sm-7">
-        <div class="alert alert-warning text-center">
-          {{ announcement }}
+  <div class="login-box">
+    {% if announcement %}
+      <div class="row">
+        <div class="col-xs-12 col-sm-offset-3 col-sm-7">
+          <div class="alert alert-warning text-center">
+            {{ announcement }}
+          </div>
         </div>
       </div>
-    </div>
-  {% endif %}
+    {% endif %}
 
-  <h3 class="text-center">{% trans "Forgot password?" %}</h3>
-  <form class="form-horizontal" method="post" style="margin-top: 20px">
-    {% csrf_token %}
-    {% render_field form.email %}
-    <div class="row">
+    <h3 class="text-center">{% trans "Forgot password?" %}</h3>
+    <form method="post" style="margin-top: 20px">
+      {% csrf_token %}
+      <div class="input-group">
+        {% render_field form.email %}
+      </div>
       <div class="col-sm-offset-4 col-sm-5">
-        <div class="alert alert-info">
-          {% trans "Please fill-in your primary email address" %}
-        </div>
+        <button type="submit" class="btn">{% trans "Submit" %}</button>
       </div>
-    </div>
-    <div class="col-sm-offset-4 col-sm-5">
-      <button type="submit" class="btn btn-primary col-lg-12">{% trans "Submit" %}</button>
-    </div>
-  </form>
-
+    </form>
+  </div>
 {% endblock %}
diff --git a/test_project/test_project/settings.py b/test_project/test_project/settings.py
index c80457f14..f5671c574 100644
--- a/test_project/test_project/settings.py
+++ b/test_project/test_project/settings.py
@@ -47,6 +47,7 @@ DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
 
 # The email address that error messages come from, such as those sent to ADMINS
 # SERVER_EMAIL = 'webmaster@example.net'
+EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
 # Security settings
 
@@ -76,7 +77,7 @@ INSTALLED_APPS = (
     "django_otp.plugins.otp_static",
     "django_rename_app",
     "django_rq",
-    "django_extensions", # Just for docker (SSL support)
+    "django_extensions",  # Just for docker (SSL support)
 )
 
 # A dedicated place to register Modoboa applications