前提

認証周りにdjango-allauthを使用してるのだが、サインアップ(Signup)の際にemail入力のinputが出てくるのを消したい

ビフォーアフター

Before

After

結論

django-allauth側ではそのような設定はできなかった。
かなり時間をかけて、その設定を探したが、Emailのフィールドは消せない。
結局、django-allauthが用意しているテンプレートであるsignup.htmlにJavascriptを書きそのDOMをremoveすることで解決した。

方法

templates/base.htmlに自作のJavascriptが書けるようにする

base.html

<body>
    {% include 'navbar.html' %}
    <div class="container-fluid">
        {% include 'messages.html' %}

        {% block content %}
        {% endblock content %}
    </div>

    <!-- Bootstrap JS -->
    {% include 'js.html' %}
    # ↓以下の2行を追加
    {% block myJs %} 
    {% endblock myJs %}
</body>

2.templatesフォルダにdjango-allauthが提供しているテンプレートをプロジェクトのフォルダに持ってくる。account/signup.htmlでjavascriptを設定

templates/account/signup.html

{% load i18n %}
{% load bootstrap4 %}

{% 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" class="" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}
  {% bootstrap_form form layout='horizontal' %}
  {% 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 %}

######## この部分を追加 ############
{% block myJs %}
<script>
  forms = document.getElementsByClassName('form-group row')
  forms[1].remove()
</script>

{% endblock myJs %}
######################################

こうすることによってform-groupとrowクラスが付いたものの中からemailのフォームだけを取り除くことができる。

cssでdisplay: none;をするよりクールだと思う笑

django-allauthでsignupするときにemailフィールドを表示しない方法

前提

ビフォーアフター

Before

After

結論

方法