Redesign accounts and sociallogin login pages.

base/components/components.py

@@ -1,7 +1,7 @@
 from typing import Literal
 
 from django_components import Component, register
-from pydantic import BaseModel
+from pydantic import BaseModel, EmailStr
 
 from base.main import TAB_VAR, ObjectList
 from base.pagination import PAGE_VAR, Pagination
@@ -107,3 +107,25 @@ def get_template_data(self, args, kwargs, slots, context):
             "tabs": self.create_all_tabs(object_list),
             "object_list": object_list,
         }
+
+
+@register("contact_information_button")
+class ContactInformationButton(Component):
+    MAINTAINER_EMAILS = [
+        "antoliny0919@gmail.com",
+        "wedgemail@gmail.com",
+    ]
+    template_file = "contact_information_button.html"
+
+    class Kwargs(BaseModel):
+        button_text: str
+        description: str
+        contact_emails: list[EmailStr] | None = None
+
+    def get_template_data(self, args, kwargs, slots, context):
+        contact_emails = kwargs.contact_emails or self.MAINTAINER_EMAILS
+        return {
+            "button_text": kwargs.button_text,
+            "description": kwargs.description,
+            "contact_emails": contact_emails,
+        }

base/components/contact_information_button.html

@@ -0,0 +1,20 @@
+{% if contact_emails %}
+<div class="flex flex-col justify-center items-center" x-data="{ show: false }">
+    <button
+    class="p-0 m-0 text-base-white border-2 px-4 py-2 rounded-lg font-text"
+    :class="show ? 'bg-base-green-400' : 'bg-base-green-600 hover:bg-base-green-400'"
+    @click="show = !show"
+    :aria-expanded="show"
+    >
+    {{ button_text }}
+    </button>
+    <div x-show="show" class="text-center my-4 text-base" x-transition>
+        <span>{{ description }}</span>
+        <div class="flex justify-center gap-4 mt-2">
+            {% for email in contact_emails %}
+            <a class="underline" href="mailto:{{ email }}">{{ email }}</a>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endif %}

base/forms.py

@@ -0,0 +1,9 @@
+from allauth.account.forms import LoginForm
+
+
+class DjangoSnippetsLoginForm(LoginForm):
+
+    def _setup_password_field(self):
+        super()._setup_password_field()
+        # Disable allauth's automatically set help_text
+        self.fields["password"].help_text = None

djangosnippets/adapters.py

@@ -1,13 +1,6 @@
-from allauth.account.adapter import DefaultAccountAdapter
 from allauth.socialaccount.adapter import DefaultSocialAccountAdapter
 
 
-class DjangoSnippetsAccountAdapter(DefaultAccountAdapter):
-    def is_open_for_signup(self, request):
-        """Disabling common signup completely"""
-        return False
-
-
 class DjangoSnippetsSocialAccountAdapter(DefaultSocialAccountAdapter):
     def is_open_for_signup(self, request, sociallogin):
         """

djangosnippets/settings/base.py

@@ -74,6 +74,7 @@ def user_url(user):
     "django_components",
     "rest_framework",
     "django_htmx",
+    "widget_tweaks",
 ]
 
 MIDDLEWARE = (
@@ -137,12 +138,15 @@ def user_url(user):
 MESSAGE_STORAGE = "django.contrib.messages.storage.session.SessionStorage"
 
 ACCOUNT_EMAIL_CONFIRMATION_EXPIRE_DAYS = 7
-ACCOUNT_SIGNUP_FIELDS = ["email*", "username*", "password1*", "password2*"]
+ACCOUNT_SIGNUP_FIELDS = ["username*", "email*", "password1*", "password2*"]
 ACCOUNT_EMAIL_VERIFICATION = "mandatory"
 ACCOUNT_DEFAULT_HTTP_PROTOCOL = "https"
 ACCOUNT_LOGOUT_ON_GET = True
 ACCOUNT_USERNAME_MIN_LENGTH = 3
-ACCOUNT_ADAPTER = "djangosnippets.adapters.DjangoSnippetsAccountAdapter"
+ACCOUNT_FORMS = {
+    "login": "base.forms.DjangoSnippetsLoginForm",
+}
+ACCOUNT_SESSION_REMEMBER = True
 SOCIALACCOUNT_ADAPTER = "djangosnippets.adapters.DjangoSnippetsSocialAccountAdapter"
 SOCIALACCOUNT_AUTO_SIGNUP = False
 SOCIALACCOUNT_LOGIN_ON_GET = True

djangosnippets/templates/account/login.html

@@ -1,48 +1,47 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
-{% load i18n %}
-{% load account %}
-{% load socialaccount %}
+{% load static account socialaccount widget_tweaks %}
 
-{% block head_title %}{% trans "Login" %}{% endblock %}
-
-{% block content_header %}{% trans "Login" %}{% endblock %}
+{% block header%}{% endblock %}
 
 {% block content %}
-<p>
-Please log in with one of the following 3rd party systems or with your existing account.
-</p>
-
-<ul class="socialaccount_providers button-group radius">
-  {% include "socialaccount/snippets/provider_list.html" with process="login" %}
-</ul>
-
-{% include "socialaccount/snippets/login_extra.html" %}
-{% endblock %}
-
-{% block sidebar %}
-<form class="login" method="POST" action="{% url 'account_login' %}">
-  {% csrf_token %}
-  {% for field in form %}
-    {% if field.name == 'remember' %}
-      {{ field }}
-      {{ field.label_tag }}
-    {% else %}
-      {{ field.label_tag }}
-      {{ field }}
-    {% endif %}
-    {% if field.errors %}
-      {{ field.errors }}
-    {% endif %}
-  {% endfor %}
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-  {% endif %}
-  <div class="button-group">
-    <div class="controls">
-      <button type="submit">Log in</button>
-      <a href="{% url 'account_reset_password' %}" class="alt_button">Forgotten your password?</a>
+<div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+    <h3>Sign In</h3>
+    <p>Don't have an account? <a href="{{ signup_url }}" class="underline text-base-green-600 hover:text-base-orange-400">Sign Up</a></p>
+    {% include "socialaccount/snippets/login_extra.html" %}
+    <form class="login flex flex-col items-center w-[80%]" method="POST" action="{% url 'account_login' %}">
+        {% csrf_token %}
+        {% if form.non_field_errors %}
+          <ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
+          {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
+          </ul>
+        {% endif %}
+        {% for field in form %}
+        <div class="w-full my-1">
+            <div class="flex w-full my-2">
+                <label class="text-base text-left">{{ field.label }}</label>
+                <span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
+            </div>
+            {% if field.errors %}
+            {{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
+            {% else %}
+            {{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
+            {% endif %}
+            {% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
+            {% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
+        </div>
+        {% endfor %}
+        <button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Sign In</button>
+    </form>
+    <a href="{% url 'account_reset_password' %}" class="block w-[80%] underline text-right text-base-green-600 hover:text-base-orange-400">Forgotten your password?</a>
+    <div class="flex items-center my-4 w-[80%]">
+      <div class="flex-1 border-t w-full border-gray-400"></div>
+      <span class="px-4 text-gray-800 font-text">OR</span>
+      <div class="flex-1 border-t border-gray-400"></div>
     </div>
-  </div>
-</form>
+    <ul class="socialaccount_providers button-group radius w-[80%]">
+      {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+    </ul>
+</div>
 {% endblock %}
+{% block footer %}{% endblock %}

djangosnippets/templates/account/password_reset.html

@@ -1,27 +1,43 @@
 {% extends "account/base.html" %}
 
-{% load i18n %}
-{% load account %}
+{% load widget_tweaks %}
 
-{% block head_title %}{% trans "Reset password" %}{% endblock %}
+{% block head_title %}Reset password{% endblock %}
 
-{% block content_header %}{% trans "Reset password" %}{% endblock %}
+{% block header %}{% endblock %}
 
 {% block content %}
     {% if user.is_authenticated %}
     {% include "account/snippets/already_logged_in.html" %}
     {% endif %}
-    <p>{% trans "Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it." %}</p>
-
-    <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">{% csrf_token %}
-      {{ form.as_p }}
-      <button type="submit">{% trans "Reset password" %}</button>
-    </form>
-    <p>{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
-{% endblock %}
-
-{% block extra_scripts %}
-<script>
-    $("#id_email").focus();
-</script>
+    <div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+        {% include "socialaccount/snippets/login_extra.html" %}
+        <h3>Forgotten your password?</h3>
+        <p class="text-center font-xl my-4">Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it.</p>
+        <form class="flex flex-col items-center w-[80%]" method="POST" action="{% url 'account_reset_password' %}">
+            {% csrf_token %}
+            {% if form.non_field_errors %}
+              <ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
+              {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
+              </ul>
+            {% endif %}
+            {% for field in form %}
+            <div class="w-full my-1">
+                <div class="flex w-full my-2">
+                    <label class="text-base text-left">{{ field.label }}</label>
+                    <span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
+                </div>
+                {% if field.errors %}
+                {{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
+                {% else %}
+                {{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
+                {% endif %}
+                {% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
+                {% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
+            </div>
+            {% endfor %}
+            <button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Reset My Password</button>
+        </form>
+    </div>
 {% endblock %}
+{% block footer %}{% endblock %}

djangosnippets/templates/account/password_reset_done.html

@@ -1,16 +1,18 @@
 {% extends "account/base.html" %}
 
-{% load i18n %}
-{% load account %}
+{% load static widget_tweaks %}
 
-{% block head_title %}{% trans "Password Reset" %}{% endblock %}
+{% block head_title %}Verify Your E-mail Address{% endblock %}
 
-{% block content_header %}{% trans "Password Reset" %}{% endblock %}
+{% block header%}{% endblock %}
 
 {% block content %}
-    {% if user.is_authenticated %}
-    {% include "account/snippets/already_logged_in.html" %}
-    {% endif %}
-
-    <p>{% blocktrans %}We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.{% endblocktrans %}</p>
+<div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+    <h3>Password Reset</h3>
+    <img src="{% static 'img/verification_sent.png' %}">
+    <p class="my-4 text-xl font-common">We have sent an e-mail to you for verification 🚀</p>
+    <p class="text-center">Follow the link provided to finalize the password reset process. If you do not see the verification email in your main inbox, check your spam folder.</p>
+    {% component 'contact_information_button' button_text="Didn't receive the email ?" description="If you didn't receive the verification email, please contact us at:" / %}
+</div>
 {% endblock %}
+{% block footer %}{% endblock %}

djangosnippets/templates/account/signup.html

@@ -1,20 +1,48 @@
 {% extends "account/base.html" %}
 
-{% load i18n %}
+{% load widget_tweaks %}
 
-{% block head_title %}{% trans "Signup" %}{% endblock %}
+{% block head_title %}Signup{% endblock %}
 
-{% block content_header %}{% trans "Signup" %}{% endblock %}
+{% block header%}{% endblock %}
 
 {% block content %}
-<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">log in</a>.{% endblocktrans %}</p>
-
-<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
-  {% csrf_token %}
-  {{ form.as_p }}
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-  {% endif %}
-  <button type="submit">{% trans "Sign Up" %}</button>
-</form>
+<div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+    <h3>Sign Up</h3>
+    <p>Already have an account? Then please <a class="underline text-base-green-600 hover:text-base-orange-400" href="{{ login_url }}">log in</a></p>
+    {% include "socialaccount/snippets/login_extra.html" %}
+    <form class="flex flex-col items-center w-[80%]" method="POST" action="{% url 'account_signup' %}">
+        {% csrf_token %}
+        {% if form.non_field_errors %}
+          <ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
+          {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
+          </ul>
+        {% endif %}
+        {% for field in form %}
+        <div class="w-full my-1">
+            <div class="flex w-full my-2">
+                <label class="text-base text-left">{{ field.label }}</label>
+                <span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
+            </div>
+            {% if field.errors %}
+            {{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
+            {% else %}
+            {{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
+            {% endif %}
+            {% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
+            {% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
+        </div>
+        {% endfor %}
+        <button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Sign Up</button>
+    </form>
+    <div class="flex items-center my-4 w-[80%]">
+      <div class="flex-1 border-t w-full border-gray-400"></div>
+      <span class="px-4 text-gray-800 font-text">OR</span>
+      <div class="flex-1 border-t border-gray-400"></div>
+    </div>
+    <ul class="socialaccount_providers button-group radius w-[80%]">
+      {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+    </ul>
+</div>
 {% endblock %}
+{% block footer %}{% endblock %}

djangosnippets/templates/account/verification_sent.html

@@ -1,11 +1,18 @@
 {% extends "account/base.html" %}
 
-{% load i18n %}
+{% load static widget_tweaks %}
 
-{% block head_title %}{% trans "Verify Your E-mail Address" %}{% endblock %}
+{% block head_title %}Verify Your E-mail Address{% endblock %}
 
-{% block content_header %}{% trans "Verify Your E-mail Address" %}{% endblock %}
+{% block header%}{% endblock %}
 
 {% block content %}
-    <p>{% blocktrans %}We have sent an e-mail to you for verification. Follow the link provided to finalize the process. Please contact us if you do not receive it within a few minutes.{% endblocktrans %}</p>
+<div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+    <h3>Email Verification</h3>
+    <img src="{% static 'img/verification_sent.png' %}">
+    <p class="my-4 text-xl font-common">We have sent an e-mail to you for verification 🚀</p>
+    <p class="text-center">Follow the link provided to finalize the signup process. If you do not see the verification email in your main inbox, check your spam folder.</p>
+    {% component 'contact_information_button' button_text="Didn't receive the email ?" description="If you didn't receive the verification email, please contact us at:" / %}
+</div>
 {% endblock %}
+{% block footer %}{% endblock %}