django - para - ¿Cómo mover las plantillas singup / signin al menú desplegable?

menu desplegable vertical html

Question

Tengo una navegación fija y quiero agregar un cuadro desplegable donde los usuarios pueden cantar (como Twitter usa).

Lo intenté:

# project/tempates/signup.html
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign Up" %}</h1>
<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>
<form class="signup" id="signup_form" method="post" action="{% url ''account_signup'' %}">
{% csrf_token %}
{{ signupform.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit">{% trans "Sign Up" %} &raquo;</button>
</form>
{% endblock %}
# project/tempates/base.html
# ... a lot of basic stuff
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
{% include ''./signup.html'' %}
# ... rest stuff

y en el cuadro desplegable veo solo el texto, el enlace para iniciar sesión y el botón para confirmar el registro.

No hay campos para ingresar correo electrónico y contraseñas. Según tengo entendido, esto se debe a que no hay acceso al formulario, lo que generalmente es un trabajo de vistas. ¿Cómo puedo obtener formularios desplegables viables?

Answer 1

Después de 2 días de búsqueda en Internet, quiero resumir lo que encontré.

Hay algunas maneras:

1. Use <form action=''some address here''> . La forma más fácil.

Para verificar los AllAuth defecto de AllAuth , necesitamos:

# ./manage.py shell
>>> import allauth.account.forms as forms
>>> f = forms.LoginForm()
>>> print(f)

A continuación se encuentra la versión editada de print(f) que se agrega directamente a base.html

<form action="{% url ''account_login'' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
<input id="id_login" name="login" placeholder="Username or e-mail" type="text" required />
<input id="id_password" name="password" placeholder="Password" type="password" required />
<label for="id_remember">Remember Me:</label>
<input id="id_remember" name="remember" type="checkbox" />
<button type="submit">Login</button>
<a href="{% url ''account_reset_password'' %}">Forgot Password?</a>
</form>

El método se basa en la solución de -> aquí <-

2. Procesador Contex

a) Cree la carpeta your_project/your_app/context_processor . Coloque allí 2 archivos: __init__.py y login_ctx.py

b) En login_ctx.py agrega:

from allauth.account.forms import LoginForm
def login_ctx_tag(request):
return {''loginctx'': LoginForm()}

c) En SETTINGS del proyecto, agregue your_app.context_processors.login_ctx.login_form_ctx'' in sección PLANTILLAS. Algo como:

TEMPLATES = [
{
''BACKEND'': ''django.template.backends.django.DjangoTemplates'',
''DIRS'': [os.path.join(BASE_DIR, ''templates''), os.path.join(BASE_DIR, ''templates'', ''allauth'')],
''APP_DIRS'': True,
''OPTIONS'': {
''debug'': DEBUG,
''context_processors'': [
''your_app.context_processors.login_ctx.login_form_ctx'', # <- put your processor here
''django.template.context_processors.debug'',
# [...other processors...]
],
},
},
]

d) En su *.html donde necesita agregar el siguiente:

{% if not user.is_authenticated %}
<form action="{% url ''account_login'' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
{{ loginctx }}
<button type="submit">Login</button>
</form>
{% else %}
{# display something else here... (username?) #}
{% endif %}

3. Etiqueta de plantilla

a) Cree la carpeta your_project/your_app/templatetags . Coloque allí 2 archivos: __init__.py y login_tag.py

b) En login_tag.py agrega:

from django import template
from allauth.account.forms import LoginForm
register = template.Library()
@register.inclusion_tag(''profiles/true_login.html'')
def login_form_tag(current_page=None):
return {''loginform'': LoginForm(),
''redirect_to'': current_page}

c) En your_project/your_app/templates/your_app/ make file login_form.html con contenido:

{% load account %}
{% if not user.is_authenticated %}
<form action="{% url ''account_login'' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ redirect_to }}" />
{{ loginform }}
<button type="submit">Login</button>
</form>
{% else %}
{# display something else here... (username?) #}
{% endif %}

d) En cualquier *.html que necesite, agregue en la parte superior {% load login_tag %} y en el lugar necesario agregue {% login_form_tag request.get_full_path %}

Los métodos 2º y 3º muestran la forma nativa de AllAuth . Si necesita editarlo de alguna manera usando {{form}} , -> aquí <- en el documento, puede encontrar algunos ejemplos de cómo hacerlo. Quiero mencionar que si en el documento se muestra algo como:

<div class="fieldWrapper">
{{ form.subject.errors }}
{{ form.subject.label_tag }}
{{ form.subject }}
</div>

para nuestro form caso debe ser cambiado a loginctx o loginform

También puede escribir su propio formulario o heredar AllAuth e importarlo al context processor o templatetag como se muestra arriba.

Ambos métodos se basan en -> esta solución <-

En los 3 métodos redirigir funciona según sea necesario (devolver un usuario a la página anterior, en caso de inicio de sesión exitoso, de lo contrario redirigir a la plantilla original de AllAuth en site.com/account/login ).

Todo lo escrito anteriormente puede implementarse en SignUP.

También le pregunté a algunas personas, cómo mostrar errores en caso de nombre de usuario / contraseña incorrectos en lugar de redireccionar a site.com/account/login , una proposición era usar AJAX , pero actualmente esto es algo que site.com/account/login . Se puede encontrar información básica sobre los formularios de inicio de sesión a las vistas predeterminadas de AllAuth -> aquí <-. Si alguien puede implementarlo o encontrar algún tutorial, publíquelo aquí.