diff --git a/static/css/auth.css b/static/css/auth.css new file mode 100644 index 00000000..62dba927 --- /dev/null +++ b/static/css/auth.css @@ -0,0 +1,285 @@ +/* Custom Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); + +:root { + --pyladies-purple: #2D1B2D; + --pyladies-pink: #FF3366; + --pyladies-pink-light: #FF6B93; + --dark-text: #1a0f1a; + --light-bg: #fff5f7; + --light-bg-gradient: linear-gradient(135deg, #fff5f7 0%, #ffe0e9 100%); +} + +/* Common Styles */ +.retro-title { + font-family: 'Press Start 2P', cursive !important; + text-align: center; + font-size: 2.5rem !important; + margin-bottom: 2rem; + color: var(--pyladies-pink) !important; + text-shadow: 0 0 15px rgba(255, 51, 102, 0.6) !important; + letter-spacing: 2px; + line-height: 1.4 !important; +} + +.tech-font { + font-family: 'Share Tech Mono', monospace !important; + font-size: 1rem !important; + letter-spacing: 0.5px; +} + +/* Auth Container */ +.auth-container { + max-width: 400px; + margin: 2rem auto; + padding: 2.5rem !important; + border-radius: 12px !important; + transition: all 0.3s ease; +} + +/* Dark mode styles */ +.dark-mode .auth-container { + background: rgba(0, 0, 0, 0.5) !important; + backdrop-filter: blur(15px) !important; + border: 2px solid rgba(255, 51, 102, 0.3) !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; +} + +.dark-mode .tech-font { + color: rgba(255, 255, 255, 0.8) !important; +} + +.dark-mode .form-label { + color: rgba(255, 255, 255, 0.9) !important; +} + +.dark-mode .form-input { + background: rgba(0, 0, 0, 0.4) !important; + border: 2px solid rgba(255, 51, 102, 0.3) !important; + color: white !important; +} + +.dark-mode .form-input::placeholder { + color: rgba(255, 255, 255, 0.4) !important; +} + +/* Light mode styles */ +.light-mode .auth-container { + background: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(15px) !important; + border: 2px solid rgba(255, 51, 102, 0.2) !important; + box-shadow: 0 8px 32px rgba(255, 51, 102, 0.15) !important; +} + +.light-mode .tech-font { + color: var(--dark-text) !important; +} + +.light-mode .form-label { + color: var(--dark-text) !important; +} + +.light-mode .form-input { + background: rgba(255, 255, 255, 0.95) !important; + border: 2px solid rgba(255, 51, 102, 0.3) !important; + color: var(--dark-text) !important; +} + +.light-mode .form-input::placeholder { + color: rgba(45, 27, 45, 0.5) !important; +} + +/* Form Styles */ +.form-group { + margin-bottom: 1.5rem !important; + text-align: left; +} + +.form-label { + display: block; + margin-bottom: 0.75rem !important; + font-family: 'Share Tech Mono', monospace !important; + font-size: 1rem !important; + letter-spacing: 0.5px; + font-weight: 500 !important; +} + +.form-input { + width: 100%; + padding: 1rem !important; + border-radius: 8px !important; + font-family: 'Share Tech Mono', monospace !important; + font-size: 1rem !important; + letter-spacing: 1px; + transition: all 0.3s ease; +} + +.form-input:focus { + outline: none !important; + border-color: var(--pyladies-pink) !important; + box-shadow: 0 0 15px rgba(255, 51, 102, 0.3) !important; +} + +/* Button Styles */ +.auth-button { + width: 100%; + padding: 1rem !important; + background: var(--pyladies-pink) !important; + color: white !important; + border: none; + border-radius: 8px !important; + font-family: 'Press Start 2P', cursive !important; + font-size: 1rem !important; + cursor: pointer; + margin-top: 1.5rem !important; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 2px !important; + box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3) !important; +} + +.auth-button:hover { + background: var(--pyladies-pink-light) !important; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 51, 102, 0.4) !important; +} + +/* Links */ +.auth-link { + color: var(--pyladies-pink) !important; + text-decoration: none !important; + font-family: 'Share Tech Mono', monospace !important; + transition: all 0.3s ease; + font-weight: 600 !important; +} + +.auth-link:hover { + color: var(--pyladies-pink-light) !important; + text-decoration: none !important; + text-shadow: 0 0 10px rgba(255, 51, 102, 0.5); +} + +/* Remember Checkbox */ +.remember-checkbox { + margin-right: 0.75rem !important; + transform: scale(1.2); +} + +/* Error List */ +.errorlist { + color: var(--pyladies-pink) !important; + margin: 0.5rem 0 !important; + padding: 0; + list-style: none; + font-size: 0.9rem !important; + font-family: 'Share Tech Mono', monospace !important; +} + +/* Password Requirements */ +.password-requirements { + font-family: 'Share Tech Mono', monospace !important; + font-size: 0.85rem !important; + margin-top: 0.5rem !important; + color: inherit !important; + opacity: 0.8; +} + +/* Text Utilities */ +.text-center { text-align: center !important; } +.mt-4 { margin-top: 1rem !important; } +.mt-2 { margin-top: 0.5rem !important; } +.mb-4 { margin-bottom: 1rem !important; } +.mb-8 { margin-bottom: 2rem !important; } +.space-y-2 > * + * { margin-top: 0.5rem !important; } +.space-y-6 > * + * { margin-top: 1.5rem !important; } + +/* Social account section */ +.socialaccount_ballot { + margin: 1.5rem 0; + padding: 1rem; + border: 1px solid var(--pyladies-pink); + border-radius: 6px; + background: rgba(255, 51, 102, 0.1); +} + +.socialaccount_providers { + list-style: none; + padding: 0; + margin: 0; +} + +.login-or { + text-align: center; + margin: 1rem 0; + color: rgba(255, 255, 255, 0.7); + position: relative; +} + +.login-or::before, +.login-or::after { + content: ''; + position: absolute; + top: 50%; + width: 45%; + height: 1px; + background: var(--pyladies-pink); +} + +.login-or::before { + left: 0; +} + +.login-or::after { + right: 0; +} + +/* Theme Toggle */ +.theme-toggle { + position: fixed; + top: 1rem; + right: 1rem; + padding: 0.7rem 1.2rem; + border-radius: 8px; + background-color: var(--pyladies-pink); + color: white; + border: none; + cursor: pointer; + font-family: 'Share Tech Mono', monospace; + z-index: 1000; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + transition: all 0.2s ease; + text-transform: uppercase; + font-weight: bold; + font-size: 0.85rem; + display: flex; + align-items: center; + gap: 8px; +} + +.theme-toggle:hover { + background-color: var(--pyladies-pink-light); + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); +} + +.theme-toggle i { + font-size: 1rem; +} + +/* Autofill styling */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus { + -webkit-text-fill-color: white !important; + -webkit-box-shadow: 0 0 0 30px rgba(26, 15, 26, 0.8) inset !important; + transition: background-color 5000s ease-in-out 0s; +} + +/* Development Notice */ +.dev-notice { + font-family: 'Share Tech Mono', monospace; + color: rgba(255, 255, 255, 0.7); + font-size: 0.9rem; + margin-bottom: 2rem; +} \ No newline at end of file diff --git a/templates/account/base_auth.html b/templates/account/base_auth.html new file mode 100644 index 00000000..1e05eac3 --- /dev/null +++ b/templates/account/base_auth.html @@ -0,0 +1,89 @@ + + + + + + {% block head_title %}{% endblock %} | PyLadiesCon + + + + + + {% block extra_head %}{% endblock %} + + +
+ +
+ + {% if messages %} +
+ {% for message in messages %} +
+ {{ message }} +
+ {% endfor %} +
+ {% endif %} + +
+ {% block content %}{% endblock %} +
+ + + + {% block extra_body %}{% endblock %} + + \ No newline at end of file diff --git a/templates/account/login.html b/templates/account/login.html index 616898b9..20b07808 100644 --- a/templates/account/login.html +++ b/templates/account/login.html @@ -1,61 +1,109 @@ -{% extends "account/base_entrance.html" %} +{% extends "portal/base.html" %} {% load i18n %} -{% load allauth account %} -{% block head_title %} - {% trans "Sign In" %} -{% endblock head_title %} +{% load static %} + +{% block head_title %}{% trans "Sign In" %}{% endblock %} + {% block content %} - {% element h1 %} - {% trans "Sign In" %} - {% endelement %} - {% if not SOCIALACCOUNT_ONLY %} - {% setvar link %} - - {% endsetvar %} - {% setvar end_link %} - - {% 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 %} - {% csrf_token %} - {% element fields form=form unlabeled=True %} - {% endelement %} - {{ redirect_field }} - {% endslot %} - {% slot actions %} - {% element button type="submit" tags="prominent,login" %} - {% 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 %} +
+
+

{% trans "Sign In" %}

+ + {% if not user.is_authenticated %} +

+ {% trans "If you have not created an account yet, then please" %} + {% trans "sign up" %} + {% trans "first." %} +

+ {% endif %} + +
+ {% csrf_token %} + + {% if form.errors %} +
+ {% for error in form.non_field_errors %} +

{{ error }}

+ {% endfor %} +
{% 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 %} -{% block extra_body %} - {{ block.super }} - {% if PASSKEY_LOGIN_ENABLED %} - {% include "mfa/webauthn/snippets/login_script.html" with button_id="passkey_login" %} - {% endif %} + +
+ + + {% if form.login.errors %} +
+ {% for error in form.login.errors %} +

{{ error }}

+ {% endfor %} +
+ {% endif %} +
+ +
+ +
+ + +
+ {% if form.password.errors %} +
+ {% for error in form.password.errors %} +

{{ error }}

+ {% endfor %} +
+ {% endif %} +
+ +
+ +
+ + + +
+

+ + {% trans "Forgot Password?" %} + +

+

+ {% trans "Don't have an account?" %} + {% trans "Sign up" %} +

+
+
+
+
+{% endblock %} + +{% block extra_head %} + {% endblock %} diff --git a/templates/account/signup.html b/templates/account/signup.html index 845b91f4..ceb83384 100644 --- a/templates/account/signup.html +++ b/templates/account/signup.html @@ -1,46 +1,131 @@ -{% extends "account/base_entrance.html" %} -{% load allauth i18n %} -{% load django_bootstrap5 %} -{% block head_title %} - {% trans "Signup" %} -{% endblock head_title %} +{% extends "portal/base.html" %} +{% load i18n %} +{% load static %} + +{% block head_title %}{% trans "Sign Up" %}{% endblock %} + {% block content %} - {% element h1 %} - {% trans "Sign Up" %} - {% endelement %} - {% setvar link %} - - {% endsetvar %} - {% setvar end_link %} - - {% 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 %} - {% csrf_token %} - {% element fields form=form unlabeled=True %} - {% endelement %} - {{ redirect_field }} - {% endslot %} - {% slot actions %} - {% element button tags="prominent,signup" type="submit" %} - {% 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 %} -{% endblock content %} +
+
+

{% trans "Sign Up" %}

+ +

+ {% trans "Already have an account?" %} + {% trans "Sign in" %} +

+ +
+ {% csrf_token %} + + {% if form.errors %} +
+ {% for error in form.non_field_errors %} +

{{ error }}

+ {% endfor %} +
+ {% endif %} + +
+ + + {% if form.username.errors %} +
+ {% for error in form.username.errors %} +

{{ error }}

+ {% endfor %} +
+ {% endif %} +
+ +
+ + + {% if form.email.errors %} +
+ {% for error in form.email.errors %} +

{{ error }}

+ {% endfor %} +
+ {% endif %} +
+ +
+ +
+ + +
+ {% if form.password1.errors %} +
+ {% for error in form.password1.errors %} +

{{ error }}

+ {% endfor %} +
+ {% endif %} + {% if form.password1.help_text %} +

{{ form.password1.help_text|linebreaksbr }}

+ {% endif %} +
+ +
+ +
+ + +
+ {% if form.password2.errors %} +
+ {% for error in form.password2.errors %} +

{{ error }}

+ {% endfor %} +
+ {% endif %} +
+ + + +
+

+ {% trans "By signing up, you agree to our" %} + {% trans "Terms" %} + {% trans "and" %} + {% trans "Privacy Policy" %} +

+
+
+
+
+{% endblock %} + +{% block extra_head %} + +{% endblock %} diff --git a/templates/portal/base.html b/templates/portal/base.html index bcc97f3c..17598e7f 100644 --- a/templates/portal/base.html +++ b/templates/portal/base.html @@ -1,5 +1,5 @@ {% load i18n %} -{% load django_bootstrap5 %} +{% load static %} @@ -10,87 +10,287 @@ {% block head_title %} {% endblock head_title %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% block extra_head %} - {% endblock extra_head %} - {% bootstrap_css %} - {% bootstrap_javascript %} - {# Display django.contrib.messages as Bootstrap alerts #} - {% bootstrap_messages %} + + + - + + {% block body %} {% endblock %} -