feat: redesign sign in page

Author: Antoliny0919

djangosnippets/templates/account/login.html

@@ -1,48 +1,37 @@
-{% 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 rounded-lg">
+    <h3>Sign In</h3>
+    <p>Don't have an account? <a class="text-base-green-600 underline">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 %}
+        {% for field in form %}
+        {% if field.name == 'remember' %}
+        {% else %}
+            <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" }}
+        {% endif %}
+        {% 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">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/socialaccount/snippets/provider_list.html

@@ -3,7 +3,7 @@
 {% get_providers as socialaccount_providers %}
 
 {% for provider in socialaccount_providers %}
-<li>
-  <a title="{{ provider.name }}" class="button small" href="{% provider_login_url provider.id process=process %}"><i class="fa fa-{{ provider.id }}"></i> {{ provider.name }}</a>
+<li class="w-full">
+  <a title="{{ provider.name }}" class="button small text-base-white-400 p-2 w-full text-lg my-0 bg-base-green-600/60 border-2 rounded-lg border-base-green-600/20 hover:bg-base-green-600" href="{% provider_login_url provider.id process=process %}"><i class="fa fa-{{ provider.id }} text-2xl mr-1"></i> Continue with {{ provider.name }}</a>
 </li>
 {% endfor %}

theme/static_src/src/styles.css

@@ -6,7 +6,9 @@
     --color-base-black: #0a0a0a;
     --color-base-gray-400: #7a7a7a;
     --color-base-green-400: #256918;
+    --color-base-green-600: #1E4F15;
     --color-base-green-800: #12330c;
+    --shadow-sign: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     --font-header: "Libertinus Sans", sans-serif;
     --font-title: "Playfair Display", sans-serif;
     --font-text: "Nunito", sans-serif;