New style for old login page

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,

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
 
 

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;
-}
+.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%;
+  }
+}

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>

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();
    });

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.

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 %}

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>

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 %}

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