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 000000000..6d49dd63b Binary files /dev/null and b/modoboa/static/css/modoboa-white.png differ 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 @@ {% trans "Welcome to Modoboa" %} - {% block extra_css %}{% endblock %}
-
- -
+
+ + {% block sub_content %}{% endblock %} +
+
{% block main_content %}{% endblock %}
- {% block sub_content %}{% endblock %}
- - - - {% if TEMPLATE_DEBUG %} - - {% endif %} {% block extra_js %}{% endblock %} 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 %} -
- {% csrf_token %} - {% render_field form.username %} - {% render_field form.password %} - -
-
+