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

@@ -3,6 +3,7 @@
 
 import dj_database_url
 from django.contrib import messages
+from django.forms.renderers import TemplatesSetting
 from django.urls import reverse
 from dotenv import load_dotenv
 
@@ -58,6 +59,7 @@ def user_url(user):
     "django.contrib.sessions",
     "django.contrib.staticfiles",
     "django.contrib.sites",
+    "django.forms",
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
@@ -74,6 +76,7 @@ def user_url(user):
     "django_components",
     "rest_framework",
     "django_htmx",
+    "widget_tweaks",
 ]
 
 MIDDLEWARE = (
@@ -137,11 +140,14 @@ 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_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
@@ -215,3 +221,10 @@ def user_url(user):
 }
 
 DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
+
+
+class CustomFormRenderer(TemplatesSetting):
+    form_template_name = "forms/form.html"
+
+
+FORM_RENDERER = "djangosnippets.settings.base.CustomFormRenderer"

djangosnippets/settings/testing.py

@@ -25,6 +25,7 @@
     "django.contrib.sessions",
     "django.contrib.sites",
     "django.contrib.staticfiles",
+    "django.forms",
     "django_components",
     "allauth",
     "allauth.account",

djangosnippets/templates/account/email_confirm.html

@@ -1,28 +1,33 @@
 {% extends "account/base.html" %}
 
-{% load i18n %}
-{% load account %}
+{% load account static %}
 
-{% block head_title %}{% trans "Confirm E-mail Address" %}{% endblock %}
-
-{% block content_header %}{% trans "Confirm E-mail Address" %}{% endblock %}
+{% block head_title %}Confirm E-mail Address{% endblock %}
 
+{% block header %}{% endblock %}
 {% block content %}
-{% if confirmation %}
-{% user_display confirmation.email_address.user as user_display %}
-<p>{% blocktrans with confirmation.email_address.email as email %}Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an e-mail address for user {{ user_display }}.{% endblocktrans %}</p>
-
-<form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
-{% csrf_token %}
-    <button type="submit">{% trans 'Confirm' %}</button>
-</form>
-
-{% else %}
-
-{% url 'account_email' as email_url %}
-
-<p>{% blocktrans %}This e-mail confirmation link expired or is invalid. Please <a href="{{ email_url}}">issue a new e-mail confirmation request</a>.{% endblocktrans %}</p>
-
-{% endif %}
+<div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+    <h3>Confirm E-mail Address</h3>
+    {% if confirmation %}
+        {% with email=confirmation.email_address.email %}
+        {% if can_confirm %}
+        {% user_display confirmation.email_address.user as user_display %}
+        <p class="text-center my-2">Please confirm that <a class="underline" href="mailto:{{ email }}">{{ email }}</a> is an email address for user {{ user_display }}.</p>
+        <form class="my-2" method="post" action="{% url 'account_confirm_email' confirmation.key %}">
+        {% csrf_token %}
+            <button class="button" type="submit">Confirm</button>
+        </form>
+        {% else %}
+        <img class="w-42" src="{% static 'img/problem.png' %}">
+        <p class="my-2 text-center">Unable to confirm <a class="underline" href="mailto:{{ email }}">{{ email }}</a> because it is already confirmed by a different account.</p>
+        {% endif %}
+        {% endwith %}
+    {% else %}
+        <img src="{% static 'img/email_verification_expired.png' %}">
+        <p class="text-center">This email confirmation link expired or is invalid. Would you like to request a new email confirmation?</p>
+        <a href="{% url 'account_email' %}" class="button">New Email Confirmation</a>
+    {% endif %}
+</div>
 
 {% endblock %}
+{% block footer %}{% endblock %}

djangosnippets/templates/account/login.html

@@ -1,48 +1,28 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
-{% load i18n %}
-{% load account %}
-{% load socialaccount %}
+{% load static %}
 
-{% 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 %}
+        {{ form }}
+        <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 %}