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

问题描述

我有一个固定的导航，我想添加下拉框，用户可以在其中进行singup。（在Twitter中使用）。

我试过：

 ＃project / tempates / signup.html 
 {％load i18n％} 
 {％load account socialaccount％} 
 
 {％block head_title％} {％trans注册％} {％endblock％} 
 
 {％block content％} 
 
< h1> {％trans注册％}< / h1> 
 
< p> {％blocktrans％}已经有帐户？然后请< a href ={{login_url}}登录< / a>。{％endblocktrans％}< / p> 
 
< form class =signupid =signup_formmethod =postaction ={％url'account_signup'％}> 
 {％csrf_token％} 
 {{signupform.as_p}} 
 {％如果redirect_field_value％} 
< input type =hiddenname ={{redirect_field_name}} value ={{redirect_field_value}}/> 
 {％endif％} 
< button type =submit> {％trans注册％}& raquo;< / button> 
< / form> 
 
 {％endblock％} 
 
＃project / tempates / base.html 
＃...很多基本东西
< li class = 下拉菜单 > 
< a class =dropdown-togglehref =＃data-toggle =dropdown>登录< strong class =caret>< / strong>< / a> 
< div class =dropdown-menustyle =padding：15px; padding-bottom：0px;> 
 {％include'./signup.html'％} 
＃...休息东西
  

在下拉框中，我只看到文本，链接到登录，以及确认注册的按钮。

没有字段输入电子邮件和密码。据了解，这是因为无法访问表单，通常是一个观点的工作。如何获得可行的下拉式表单？

解决方案

互联网挖掘2天后，我想总结一下我发现的内容。 >

有几种方法：

1。使用< form action ='some address here'> 。最简单的方法。

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

 ＃./manage.py shell 
>>>将allauth.account.forms导入为form 
>>> f = forms.LoginForm（）
>>> print（f）
  

以下是 print（f）直接添加到base.html

 < form action ={％url'account_login'％ }method =post> 
 {％csrf_token％} 
< input type =hiddenname =nextvalue ={{request.get_full_path}}/> 
 
< input id =id_loginname =loginplaceholder =username或e-mailtype =textrequired /> 
< input id =id_passwordname =passwordplaceholder =Passwordtype =passwordrequired /> 
 
< label for =id_remember>记得我：< / label> 
< input id =id_remembername =remembertype =checkbox/> 
 
< button type =submit>登录< / button> 
< a href ={％url'account_reset_password'％}>忘记密码？< / a> 
< / form> 
  

方法是基于 - > 这里< -

2。 Contex处理器

a）使文件夹 your_project / your_app / context_processor 。放置2个文件 - __ init __。py 和 login_ctx.py

b）在 login_ctx.py 添加：

 code> from allauth.account.forms import LoginForm 
 
 def login_ctx_tag（request）：
 return {'loginctx'：LoginForm（）} 
  

c）在项目的 SETTINGS 中添加 your_app.context_processors.login_ctx.login_form_ctx'在 TEMPLATES`部分。如下所示：

  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'，＃< - 把你的处理器放在
'django.template.context_processors.debug'，
＃[...其他处理器...] 
]，
}，
 }，
] 
  

d）在你的 *。html 你需要添加下一个：

  {％if not user。 is_authenticated％} 
< form action ={％url'account_login'％}method =post> 
 {％csrf_token％} 
< input type =hiddenname =nextvalue ={{request.get_full_path}}/> 
 {{loginctx}} 
< button type =submit>登录< / button> 
< / form> 
 {％else％} 
 {＃在这里显示其他内容...（username？）＃} 
 {％endif％} 
  pre> 
 
 
  3。模板标签 
 
 
 
  a）使文件夹 your_project / your_app / templatetags  。放置2个文件 -   __ init __。py 和 login_tag.py  
 
 
 
  b）在 login_tag.py  add：
 code> from django import template 
 from allauth.account.forms import LoginForm 
 
 register = template.Library（）
 
 @ register.inclusion_tag（'个人资料/ 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 /  make file  login_form.html 包含内容：
  {％加载帐户％} 
 
 {％if not user.is_authenticated％} 
< form action ={％url'account_login'％}method =post> 
 {％csrf_token％} 
< input type =hiddenname =nextvalue ={{redirect_to}}/> 
 {{loginform}} 
< button type =submit>登录< / button> 
< / form> 
 {％else％} 
 {＃在这里显示其他内容...（username？）＃} 
 {％endif％} 
  pre> 
 
 
  d）在任何 *。html 中，您需要添加 {％load login_tag％} 并在需要的地方添加 {％login_form_tag request.get_full_path％}  
 
 
 
 
 
 
第二和第三种方法显示原生的 AllAuth 表单。如果您需要使用 {{form}} ， - > 这里<  - 在文档中，您可以找到一些示例。想要提到的是，如果在文档中显示如下：
 < div class =fieldWrapper> 
 {{form.subject.errors}} 
 {{form.subject.label_tag}} 
 {{form.subject}} 
< / div> 
  
对于我们的案例表单必须更改为 loginctx 或 loginform  
 
 
 
还可以自己写形式或继承 AllAuth 并将其导入上下文处理器或 templatetag 如上所示。
 
 
 
这两种方法都是基于 - > <  -  
 
 
 
在所有3种方法中，重定向根据需要进行工作（将用户返回到上一页，成功登录，否则重定向到 AllAuth 模板，位于 site.com/account/ 
 
 
 
上面写的所有内容都可以实现为SignUP。
 
 
 
另外我问一些人，如果出现错误的用户名\\密码而不是重定向到 site.com/account/login ，则会显示错误，一个命题是使用 AJAX ，但目前这是我的知识。关于连接登录表单的一些基本信息可以找到默认的AllAuth视图 - > 此处<  - 。如果有人可以实现它，或者找到任何教程，请在这里发贴。
 
I have a fixed navigation and I want to add dropdown box where users can singup\in (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 username\password 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 signin\up forms to default AllAuth views can be found ->here<-. If anyone could implement it, or find any tutorial, please post it here.

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