Skip to content

Refactor authentication pages: replaced Bootstrap with Tailwind CSS #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
farhannadim311 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Refactor authentication pages: replaced Bootstrap with Tailwind CSS #99

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e8c2a4
Refactor authentication pages: replaced Bootstrap with Tailwind CSS
Apr 6, 2025
178c1ce
Added base_auth for login and signup to pull from, shifted to tailwin…
Apr 6, 2025
37dd273
added light and dark mode
Apr 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions templates/account/base_auth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
{% load static %}
Copy link
Copy Markdown
Member

@Mariatta Mariatta Apr 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The load templatetag needs to be the first line of the html file.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block head_title %}{% endblock %} | PyLadiesCon</title>
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
Copy link
Copy Markdown
Member

@Mariatta Mariatta Apr 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great start. Is this something that can be stored in a separate css file?

theme: {
extend: {
colors: {
'pyladies-pink': '#e91e63',
'pyladies-pink-light': '#f06292',
'pyladies-purple': '#2D1B2D'
}
}
}
}
</script>
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
.retro-title {
font-family: 'Press Start 2P', cursive;
}
.tech-font {
font-family: 'Share Tech Mono', monospace;
}
body {
background-color: #2D1B2D;
}
</style>
{% block extra_head %}{% endblock %}
</head>
<body class="min-h-screen bg-pyladies-purple text-white">
{% if messages %}
<div class="fixed top-4 right-4 z-50">
{% for message in messages %}
<div class="bg-gray-800 bg-opacity-90 text-white px-6 py-4 rounded-lg shadow-lg mb-4 tech-font">
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}

<main class="container mx-auto px-4">
{% block content %}{% endblock %}
</main>

{% block extra_body %}{% endblock %}
</body>
</html>
134 changes: 88 additions & 46 deletions templates/account/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,100 @@
{% extends "account/base_entrance.html" %}
{% extends "account/base_auth.html" %}
{% load i18n %}
{% load allauth account %}

{% block head_title %}
{% trans "Sign In" %}
{% endblock head_title %}

{% block content %}
{% element h1 %}
{% trans "Sign In" %}
{% endelement %}
{% if not SOCIALACCOUNT_ONLY %}
{% setvar link %}
<a href="{{ signup_url }}">
{% endsetvar %}
{% setvar end_link %}
</a>
{% endsetvar %}
{% element p %}
{% blocktranslate %}If you have not created an account yet, then please {{ link }}sign up{{ end_link }} first.{% endblocktranslate %}
{% endelement %}
{% url 'account_login' as login_url %}
{% element form form=form method="post" action=login_url tags="entrance,login" %}
{% slot body %}
<div class="container mx-auto px-4 py-8">
<div class="max-w-md mx-auto bg-white bg-opacity-10 backdrop-blur-sm p-8 rounded-lg shadow-lg border border-gray-700">
<h1 class="text-3xl font-bold mb-6 text-pyladies-pink retro-title">{% trans "Sign In" %}</h1>

{% if not SOCIALACCOUNT_ONLY %}
<p class="mb-6 text-gray-300 tech-font">
{% blocktranslate %}If you have not created an account yet, then please <a href="{{ signup_url }}" class="text-pyladies-pink hover:text-pyladies-pink-light">sign up</a> first.{% endblocktranslate %}
</p>

{% url 'account_login' as login_url %}
<form class="space-y-4" method="post" action="{{ login_url }}">
{% csrf_token %}
{% element fields form=form unlabeled=True %}
{% endelement %}

<div class="space-y-4">
{% for field in form %}
<div class="form-group">
<label class="block text-gray-300 mb-2 tech-font" for="{{ field.id_for_label }}">
{{ field.label }}
</label>
<input type="{{ field.field.widget.input_type }}"
name="{{ field.html_name }}"
id="{{ field.id_for_label }}"
class="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-md text-white tech-font focus:border-pyladies-pink focus:ring focus:ring-pyladies-pink focus:ring-opacity-50"
{% if field.field.required %}required{% endif %}
{% if field.value %}value="{{ field.value }}"{% endif %}>
{% if field.help_text %}
<p class="mt-1 text-sm text-gray-400 tech-font">{{ field.help_text }}</p>
{% endif %}
{% if field.errors %}
<div class="mt-1 text-pyladies-pink text-sm tech-font">
{{ field.errors }}
</div>
{% endif %}
</div>
{% endfor %}
</div>

{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button type="submit" tags="prominent,login" %}

<button type="submit" class="w-full mt-6 px-6 py-3 bg-pyladies-pink hover:bg-pyladies-pink-light text-white font-medium rounded-md transition-colors shadow-md tech-font">
{% trans "Sign In" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endif %}
{% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
{% element hr %}
{% endelement %}
{% element button_group vertical=True %}
{% if PASSKEY_LOGIN_ENABLED %}
{% element button type="submit" form="mfa_login" id="passkey_login" tags="prominent,login,outline,primary" %}
{% trans "Sign in with a passkey" %}
{% endelement %}
{% endif %}
{% if LOGIN_BY_CODE_ENABLED %}
{% element button href=request_login_code_url tags="prominent,login,outline,primary" %}
{% trans "Send me a sign-in code" %}
{% endelement %}
{% endif %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
{% endblock content %}
</button>
</form>
{% endif %}

{% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
<div class="mt-6 pt-6 border-t border-gray-700 space-y-3">
{% if PASSKEY_LOGIN_ENABLED %}
<button type="submit" form="mfa_login" id="passkey_login" class="w-full px-6 py-3 border border-pyladies-pink text-pyladies-pink hover:bg-pyladies-pink hover:text-white font-medium rounded-md text-center transition-colors shadow-md tech-font">
{% trans "Sign in with a passkey" %}
</button>
{% endif %}
{% if LOGIN_BY_CODE_ENABLED %}
<a href="{{ request_login_code_url }}" class="block w-full px-6 py-3 border border-pyladies-pink text-pyladies-pink hover:bg-pyladies-pink hover:text-white font-medium rounded-md text-center transition-colors shadow-md tech-font">
{% trans "Send me a sign-in code" %}
</a>
{% endif %}
</div>
{% endif %}

{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
</div>
</div>

<style>
Copy link
Copy Markdown
Member

@Mariatta Mariatta Apr 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to refactor and move this out to its own custom css?

/* Override any conflicting styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: white;
-webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset;
transition: background-color 5000s ease-in-out 0s;
}

input::placeholder {
color: #6b7280;
}

.errorlist {
list-style-type: none;
padding: 0;
margin: 0;
}
</style>
{% endblock %}

{% block extra_body %}
{{ block.super }}
{% if PASSKEY_LOGIN_ENABLED %}
Expand Down
116 changes: 79 additions & 37 deletions templates/account/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,88 @@
{% extends "account/base_entrance.html" %}
{% extends "account/base_auth.html" %}
{% load allauth i18n %}
{% load django_bootstrap5 %}

{% block head_title %}
{% trans "Signup" %}
{% endblock head_title %}

{% block content %}
{% element h1 %}
{% trans "Sign Up" %}
{% endelement %}
{% setvar link %}
<a href="{{ login_url }}">
{% endsetvar %}
{% setvar end_link %}
</a>
{% endsetvar %}
{% element p %}
{% blocktranslate %}Already have an account? Then please {{ link }}sign in{{ end_link }}.{% endblocktranslate %}
{% endelement %}
{% if not SOCIALACCOUNT_ONLY %}
{% url 'account_signup' as action_url %}
{% element form form=form method="post" action=action_url tags="entrance,signup" %}
{% slot body %}
<div class="container mx-auto px-4 py-8">
<div class="max-w-md mx-auto bg-white bg-opacity-10 backdrop-blur-sm p-8 rounded-lg shadow-lg border border-gray-700">
<h1 class="text-3xl font-bold mb-6 text-pyladies-pink retro-title">{% trans "Sign Up" %}</h1>

<p class="mb-6 text-gray-300 tech-font">
{% blocktranslate %}Already have an account? Then please <a href="{{ login_url }}" class="text-pyladies-pink hover:text-pyladies-pink-light">sign in</a>.{% endblocktranslate %}
</p>

{% if not SOCIALACCOUNT_ONLY %}
{% url 'account_signup' as action_url %}
<form class="space-y-4" method="post" action="{{ action_url }}">
{% csrf_token %}
{% element fields form=form unlabeled=True %}
{% endelement %}

<div class="space-y-4">
{% for field in form %}
<div class="form-group">
<label class="block text-gray-300 mb-2 tech-font" for="{{ field.id_for_label }}">
{{ field.label }}
</label>
<input type="{{ field.field.widget.input_type }}"
name="{{ field.html_name }}"
id="{{ field.id_for_label }}"
class="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-md text-white tech-font focus:border-pyladies-pink focus:ring focus:ring-pyladies-pink focus:ring-opacity-50"
{% if field.field.required %}required{% endif %}
{% if field.value %}value="{{ field.value }}"{% endif %}>
{% if field.help_text %}
<p class="mt-1 text-sm text-gray-400 tech-font">{{ field.help_text }}</p>
{% endif %}
{% if field.errors %}
<div class="mt-1 text-pyladies-pink text-sm tech-font">
{{ field.errors }}
</div>
{% endif %}
</div>
{% endfor %}
</div>

{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button tags="prominent,signup" type="submit" %}

<button type="submit" class="w-full mt-6 px-6 py-3 bg-pyladies-pink hover:bg-pyladies-pink-light text-white font-medium rounded-md transition-colors shadow-md tech-font">
{% trans "Sign Up" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endif %}
{% if PASSKEY_SIGNUP_ENABLED %}
{% element hr %}
{% endelement %}
{% element button href=signup_by_passkey_url tags="prominent,signup,outline,primary" %}
{% trans "Sign up using a passkey" %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
</button>
</form>
{% endif %}

{% if PASSKEY_SIGNUP_ENABLED %}
<div class="mt-6 pt-6 border-t border-gray-700">
<a href="{{ signup_by_passkey_url }}" class="block w-full px-6 py-3 border border-pyladies-pink text-pyladies-pink hover:bg-pyladies-pink hover:text-white font-medium rounded-md text-center transition-colors shadow-md tech-font">
{% trans "Sign up using a passkey" %}
</a>
</div>
{% endif %}

{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
</div>
</div>

<style>
/* Override any conflicting styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: white;
-webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset;
transition: background-color 5000s ease-in-out 0s;
}

input::placeholder {
color: #6b7280;
}

.errorlist {
list-style-type: none;
padding: 0;
margin: 0;
}
</style>
{% endblock content %}
Loading