mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:31:09 -05:00
first commit
This commit is contained in:
pacnpal
133
templates/account/login.html
Normal file
133
templates/account/login.html
Normal file
@@ -0,0 +1,133 @@
|
||||
{% extends "base/base.html" %}
|
||||
{% load i18n %}
|
||||
{% load account socialaccount %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Login - ThrillWiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-md mx-auto">
|
||||
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
|
||||
<h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">{% trans "Sign In" %}</h1>
|
||||
|
||||
{% get_providers as socialaccount_providers %}
|
||||
|
||||
{% if socialaccount_providers %}
|
||||
<div class="space-y-3 mb-6">
|
||||
{% for provider in socialaccount_providers %}
|
||||
<a href="{% provider_login_url provider.id process='login' %}"
|
||||
class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
|
||||
{% if provider.id == 'google' %}
|
||||
<img src="{% static 'images/google-icon.svg' %}" alt="Google" class="h-5 w-5 mr-2">
|
||||
{% elif provider.id == 'discord' %}
|
||||
<img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="h-5 w-5 mr-2">
|
||||
{% endif %}
|
||||
Sign in with {{ provider.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="relative my-6">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form class="space-y-4" method="POST" action="{% url 'account_login' %}"
|
||||
onkeydown="if(event.key === 'Enter' && !event.shiftKey) {
|
||||
const activeElement = document.activeElement;
|
||||
if (activeElement.tagName === 'TEXTAREA') {
|
||||
if (!event.shiftKey) {
|
||||
event.preventDefault();
|
||||
this.submit();
|
||||
}
|
||||
} else {
|
||||
event.preventDefault();
|
||||
this.submit();
|
||||
}
|
||||
}">
|
||||
{% csrf_token %}
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="bg-red-50 dark:bg-red-900 border-l-4 border-red-400 p-4 mb-4">
|
||||
<div class="text-sm text-red-700 dark:text-red-200">
|
||||
{{ form.non_field_errors }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<label for="id_login" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{% trans "Username or Email" %}
|
||||
</label>
|
||||
<input type="text" name="login" id="id_login" required
|
||||
autocomplete="username email"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
{% if form.login.errors %}
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.login.errors }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="id_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{% trans "Password" %}
|
||||
</label>
|
||||
<input type="password" name="password" id="id_password" required
|
||||
autocomplete="current-password"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
{% if form.password.errors %}
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.password.errors }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="remember" id="id_remember"
|
||||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<label for="id_remember" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
|
||||
{% trans "Remember me" %}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="text-sm">
|
||||
<a href="{% url 'account_reset_password' %}"
|
||||
class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 focus:outline-none focus:underline"
|
||||
onkeydown="if(event.key === 'Enter') { this.click(); }">
|
||||
{% trans "Forgot Password?" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if redirect_field_value %}
|
||||
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<i class="fas fa-sign-in-alt mr-2"></i>
|
||||
{% trans "Sign In" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center text-sm">
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{% trans "Don't have an account?" %}
|
||||
<a href="{% url 'account_signup' %}"
|
||||
class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 focus:outline-none focus:underline"
|
||||
onkeydown="if(event.key === 'Enter') { this.click(); }">
|
||||
{% trans "Sign up" %}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
142
templates/account/signup.html
Normal file
142
templates/account/signup.html
Normal file
@@ -0,0 +1,142 @@
|
||||
{% extends "base/base.html" %}
|
||||
{% load i18n %}
|
||||
{% load account socialaccount %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Register - ThrillWiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-md mx-auto">
|
||||
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
|
||||
<h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">{% trans "Sign Up" %}</h1>
|
||||
|
||||
{% get_providers as socialaccount_providers %}
|
||||
|
||||
{% if socialaccount_providers %}
|
||||
<div class="space-y-3 mb-6">
|
||||
{% for provider in socialaccount_providers %}
|
||||
<a href="{% provider_login_url provider.id process='signup' %}"
|
||||
class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
|
||||
{% if provider.id == 'google' %}
|
||||
<img src="{% static 'images/google-icon.svg' %}" alt="Google" class="h-5 w-5 mr-2">
|
||||
{% elif provider.id == 'discord' %}
|
||||
<img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="h-5 w-5 mr-2">
|
||||
{% endif %}
|
||||
Sign up with {{ provider.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="relative my-6">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form class="space-y-4" method="POST" action="{% url 'account_signup' %}"
|
||||
onkeydown="if(event.key === 'Enter' && !event.shiftKey) {
|
||||
const activeElement = document.activeElement;
|
||||
if (activeElement.tagName === 'TEXTAREA') {
|
||||
if (!event.shiftKey) {
|
||||
event.preventDefault();
|
||||
this.submit();
|
||||
}
|
||||
} else {
|
||||
event.preventDefault();
|
||||
this.submit();
|
||||
}
|
||||
}">
|
||||
{% csrf_token %}
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="bg-red-50 dark:bg-red-900 border-l-4 border-red-400 p-4 mb-4">
|
||||
<div class="text-sm text-red-700 dark:text-red-200">
|
||||
{{ form.non_field_errors }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<label for="id_username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{% trans "Username" %}
|
||||
</label>
|
||||
<input type="text" name="username" id="id_username" required
|
||||
autocomplete="username"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
{% if form.username.errors %}
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.username.errors }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="id_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{% trans "Email" %}
|
||||
</label>
|
||||
<input type="email" name="email" id="id_email" required
|
||||
autocomplete="email"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
{% if form.email.errors %}
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.email.errors }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="id_password1" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{% trans "Password" %}
|
||||
</label>
|
||||
<input type="password" name="password1" id="id_password1" required
|
||||
autocomplete="new-password"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
{% if form.password1.errors %}
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.password1.errors }}</p>
|
||||
{% endif %}
|
||||
{% if form.password1.help_text %}
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ form.password1.help_text }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="id_password2" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{% trans "Confirm Password" %}
|
||||
</label>
|
||||
<input type="password" name="password2" id="id_password2" required
|
||||
autocomplete="new-password"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
{% if form.password2.errors %}
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.password2.errors }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if redirect_field_value %}
|
||||
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-6">
|
||||
<button type="submit"
|
||||
class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<i class="fas fa-user-plus mr-2"></i>
|
||||
{% trans "Create Account" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center text-sm">
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{% trans "Already have an account?" %}
|
||||
<a href="{% url 'account_login' %}"
|
||||
class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 focus:outline-none focus:underline"
|
||||
onkeydown="if(event.key === 'Enter') { this.click(); }">
|
||||
{% trans "Sign in" %}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user