feat: redesign signup page

- Change field order in signup form (username, email)

Author: Antoliny0919

djangosnippets/settings/base.py

@@ -138,7 +138,7 @@ 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

djangosnippets/templates/account/signup.html

@@ -1,20 +1,35 @@
 {% 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 %}
+        {% for field in form %}
+            <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>
+            {{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2" }}
+        {% 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 %}