如何将 singupsignin 模板移动到下拉菜单中? [英] How to move singupsignin templates into dropdown menu?

问题描述

我有一个固定的导航，我想添加下拉框，用户可以在其中唱in(如 Twitter 使用的那样).

我试过了:

# project/tempates/signup.html{% 加载 i18n %}{% 加载帐户社交帐户 %}{% block head_title %}{% trans "Signup" %}{% endblock %}{% 块内容 %}<h1>{% trans "Sign Up" %}</h1><p>{% blocktrans %}已有账号?然后请<a href="{{ login_url }}">登录</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 }}"/>{％ 万一 ％}<button type="submit">{% trans "Sign Up" %} &raquo;</button></表单>{% 结束块 %}# 项目/模板/base.html# ... 很多基本的东西<li class="下拉菜单"><a class="dropdown-toggle" href="#" data-toggle="dropdown">登录<strong class="caret"></strong></a><div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">{% 包含 './signup.html' %}# ... 休息的东西

在下拉框中，我只看到文本、登录链接和确认注册的按钮.

没有用于输入电子邮件和密码的字段.据我了解，这是因为无法访问表单，通常是视图的工作.如何获得可行的下拉表单?

解决方案

经过 2 天的互联网挖掘，我想总结一下我的发现.

有几种方法:

1.使用

.最简单的方法.

要检查默认的 AllAuth 表单，我们需要:

# ./manage.py shell>>>导入 allauth.account.forms 作为表单>>>f = forms.LoginForm()>>>打印(f)

下面是print(f)的编辑版本，它直接添加到base.html

{% 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">记住我:</label><input id="id_remember" name="remember" type="checkbox"/><button type="submit">登录</button><a href="{% url 'account_reset_password' %}">忘记密码?</a></表单>

方法基于 ->这里的解决方案<-

2.Contex 处理器

a) 制作文件夹 your_project/your_app/context_processor.放 2 个文件 - __init__.py 和 login_ctx.py

b) 在 login_ctx.py 中添加:

from allauth.account.forms import LoginFormdef login_ctx_tag(请求):返回 {'loginctx': LoginForm()}

c) 在项目的 SETTINGS 中，在 TEMPLATES` 部分添加 your_app.context_processors.login_ctx.login_form_ctx'.类似的东西:

TEMPLATES = [{'后端':'django.template.backends.django.DjangoTemplates'，'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'templates', 'allauth')],'APP_DIRS':是的，'选项': {'调试':调试，上下文处理器":['your_app.context_processors.login_ctx.login_form_ctx', # <- 把你的处理器放在这里'django.template.context_processors.debug',# [...其他处理器...]],},},]

d) 在您需要添加下一个 *.html 的地方:

{% 如果不是 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">登录</button></表单>{％ 别的 ％}{# 在此处显示其他内容...(用户名?)#}{％ 万一 ％}

3.模板标签

a) 制作文件夹 your_project/your_app/templatetags.放 2 个文件 - __init__.py 和 login_tag.py

b) 在 login_tag.py 中添加:

from django 导入模板从 allauth.account.forms 导入 LoginForm注册 = 模板.图书馆()@register.inclusion_tag('profiles/true_login.html')def login_form_tag(current_page=None):return {'loginform': LoginForm(),'redirect_to': current_page}

c) 在 your_project/your_app/templates/your_app/ 制作文件 login_form.html 和内容:

{% 加载帐户 %}{% 如果不是 user.is_authenticated %}<form action="{% url 'account_login' %}" method="post">{% csrf_token %}<input type="hidden" name="next" value="{{ redirect_to }}"/>{{ 登录表单 }}<button type="submit">登录</button></表单>{％ 别的 ％}{# 在此处显示其他内容...(用户名?)#}{％ 万一 ％}

d) 在您需要的任何 *.html 中，在顶部添加 {% load login_tag %} 并在需要的地方添加{% login_form_tag request.get_full_path %}

<小时>

第 2 和第 3 种方法显示原生 AllAuth 形式.如果您需要使用 {{form}} 以某种方式对其进行编辑，->here<- 在文档中，您可以找到一些示例.想提一下，如果在文档中显示如下内容:

{{ form.subject.errors }}{{ form.subject.label_tag }}{{ form.subject }}

对于我们的情况，form 必须改为 loginctx 或 loginform

您也可以编写自己的表单或继承 AllAuth 并将其导入到 context processor 或 templatetag，如上所示.

这两种方法都基于 ->此解决方案<-

在所有 3 种方法中，重定向都根据需要工作(如果登录成功，将用户返回到上一页，否则重定向到 site.com/account/login 上的原始 AllAuth 模板).

上面写的都可以实现到SignUP.

我也问过一些人，如何在用户名密码错误的情况下显示错误而不是重定向到site.com/account/login，一个提议是使用AJAX，但目前这是我不知道的.可以找到有关默认 AllAuth 视图的连接登录up 表单的一些基本信息 ->这里<-.如果有人可以实现它，或找到任何教程，请在此处发布.

I have a fixed navigation and I want to add dropdown box where users can singupin (as Twitter uses).

I tried:

# 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

and in dropdown box I see just the text, link to signin, and the button for confirmation of the registration.

There are no fields to enter email and passwords. As I understand, this is because no access to the form, what usually is a views' jobs. How can I get workable dropdown forms?

解决方案

After 2 days of internet digging I want to summarize what I found.

There are few ways:

1. Use <form action='some address here'>. The easiest way.

To check default AllAuth forms we need to:

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

Below is edited version of print(f) which is added directly to 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>

Method is based on the solution from ->here<-

2. Contex processor

a) Make folder your_project/your_app/context_processor. Put there 2 files - __init__.py and login_ctx.py

b) In login_ctx.py add:

from allauth.account.forms import LoginForm

def login_ctx_tag(request):
    return {'loginctx': LoginForm()}

c) In project's SETTINGS add your_app.context_processors.login_ctx.login_form_ctx' inTEMPLATES` section. Something like:

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) In your *.html where you need add the next:

{% 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. Template tag

a) Make folder your_project/your_app/templatetags. Put there 2 files - __init__.py and login_tag.py

b) In login_tag.py add:

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) In your_project/your_app/templates/your_app/ make file login_form.html with content:

{% 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) In any *.html you need, add at the top {% load login_tag %} and in the needed place add {% login_form_tag request.get_full_path %}

---

The 2nd and 3rd methods show native AllAuth form. If you need to edit it somehow using {{form}}, ->here<- in the doc you can find some examples how to do that. Want to mention, that if in the doc is shown something like:

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

for our case form must be changed to loginctx or loginform

Also you can write your own form or inherit AllAuth and import it to context processor or templatetag as shown above.

Both methods are based on ->this solution<-

In all 3 methods redirect works as needed (return a user to the previous page, in case of success login, else redirect to original AllAuth template at site.com/account/login).

All written above can be implemented to SignUP.

Also I asked some people, how to show errors in case of wrong usernamepassword instead of redirect to site.com/account/login, a proposition was to use AJAX, but currently this is out of my knowledge. Some base info about connection signinup forms to default AllAuth views can be found ->here<-. If anyone could implement it, or find any tutorial, please post it here.

这篇关于如何将 singupsignin 模板移动到下拉菜单中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！