StudyDjango and Web server

django-allauth template 수정하기

  • allauth template 파일 수정하기

    • django-allauth를 사용했을때, 이미 만들어진 template 파일을 사용하게 된다.
    • template 파일을 커스텀하려면 다음과 같이 진행하도록 한다.

    1. 회원을 관리하는 앱에서 template 폴더를 생성한다.

      • 회원을 관리하는 앱 이름은 account로 하지 않는 것이 좋다.

      • 만약 account로 했을 경우, 다음의 경우를 보자.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        INSTALLED_APPS = [
            'django.contrib.admin',
            'django.contrib.auth',
            'django.contrib.contenttypes',
            'django.contrib.sessions',
            'django.contrib.messages',
            'django.contrib.staticfiles',
            'django.contrib.humanize',
            # account라는 이름으로 앱을 생성한다면
            'account',
            'django.contrib.sites',
            'allauth',
            'allauth.account',
            'allauth.socialaccount',
            'allauth.socialaccount.providers.naver',
        ]

        # 위에서 보는 것처럼 account라는 이름으로 앱을 생성했을 때,
        # allauth.account라는 이름과 충돌이 생겨 문제가 발생할 수 있다.
        # 따라서 다른 이름으로 하는 것이 좋다.(ex] accounts)

      • template 폴더를 생성할 경우, templates라는 폴더를 만든다.

      • 그리고 하위에 앱 이름과 같은 폴더를 한번 더 만든 뒤 그 하단에 html 파일을 생성했다.
      • 하지만 이번에는 allauth의 template 파일을 커스텀하는 것이기 때문에 account라고 생성한다.
      • account라고 생성하지 않는다면 이미 만들어진 template 파일을 수정할 수 없게 된다.
      • 가상 환경 폴더인 venv/lib에는 설치한 패키지들이 들어있다.
      • 패키지 안에 allauth/templates 폴더를 보면 이미 생성된 html 파일들을 볼 수 있다.
      • 생성된 html 파일들과 이름을 같게 하여 html 파일을 account 폴더 하단에 생성한다.
      • 이미 생성된 html 파일의 내용을 그대로 가져와서 내가 바꾸고 싶은 부분만 커스텀하면 된다.

      • 로그인과 로그아웃 관련 template 파일을 가져와서 커스텀해보자.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        <!--// 기존에 생성되있는 login.html //-->
        {% extends "account/base.html" %}

        {% load i18n %}
        {% load account socialaccount %}

        {% block head_title %}{% trans "Sign In" %}{% endblock %}

        {% block content %}

        <h1>{% trans "Sign In" %}</h1>

        {% get_providers as socialaccount_providers %}

        {% if socialaccount_providers %}
        <p>{% blocktrans with site.name as site_name %}Please sign in with one
        of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
        for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>

        <div class="socialaccount_ballot">

        <ul class="socialaccount_providers">
            {% include "socialaccount/snippets/provider_list.html" with process="login" %}
        </ul>

        <div class="login-or">{% trans 'or' %}</div>

        </div>

        {% include "socialaccount/snippets/login_extra.html" %}

        {% else %}
        <p>{% blocktrans %}If you have not created an account yet, then please
        <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
        {% endif %}

        <form class="login" method="POST" action="{% url 'account_login' %}">
        {% csrf_token %}
        {{ form.as_p }}
        {% if redirect_field_value %}
        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
        {% endif %}
        <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
        <button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
        </form>

        {% endblock %}

      • widget_tweaks를 사용하면 만들어진 폼을 별도로 처리하고싶을 때 편하게 처리할 수 있다.

      • 다음과 같이 django-widget-tweaks를 설치한다.

        1
        $ pip install django-widget-tweaks

      • settings.py의 INSTALLED_APPS에 추가한다.

        1
        2
        3
        4
        INSTALLED_APPS = [
            #...
            'widget_tweaks',
        ]

      • 가져온 login.html에서 원하는 부분만 수정한다.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        57
        58
        59
        60
        61
        <!--// 원하는 부분만 커스텀한 login.html 화면 //-->
        {% extends 'base.html' %}

        {% load i18n %}
        {% load account socialaccount %}

        {% block head_title %}{% trans "Sign In" %}{% endblock %}

        {% block content %}

        {% get_providers as socialaccount_providers %}

        <div class="alert alert-info mt-3" role="alert">
            <h4 class="alert-heading">{% trans "Sign In" %}</h4>

            {% if socialaccount_providers %}
            <p>{% blocktrans with site.name as site_name %}Please sign in with one
                of your existing third party accounts. Or, <a href="{{signup_url}}">sign up</a>
                for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>

            <div class="socialaccount_ballot">

                <ul class="socialaccount_providers">
                    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
                </ul>
            </div>

            {% include "socialaccount/snippets/login_extra.html" %}

            {% else %}
            <p>{% blocktrans %}If you have not created an account yet, then please
                <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
            {% endif %}
        </div>
        <hr>
        {% load widget_tweaks %}
        <form class="login" method="POST" action="{% url 'account_login' %}">
            {% csrf_token %}
            <div class="form-group">
                <label>{{form.login.label}}</label>
                {% render_field form.login class="form-control" placeholder='Email Or Username' %}
                {% for error in form.login.errors %}
                <span class="help-block">{{ error }}</span>
                {% endfor %}
                <small class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label>{{form.password.label}}</label>
                {% render_field form.password class="form-control" placeholder='User password' %}
                {% for error in form.password.errors %}
                <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>

            {% if redirect_field_value %}
            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
            {% endif %}
            <a class="btn btn-info btn-sm" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
            <button class="btn btn-primary btn-sm" type="submit">{% trans "Sign In" %}</button>
        </form>
        {% endblock %}

      • 로그인할 때 추가한 소셜 로그인 목록에 대한 template 파일은 다음과 같다.

        • socialaccount/snippets/provider_list.html

      • 위와 같은 폴더 이름으로 폴더와 파일을 생성하고 이미 만들어진 내용을 가져와서 수정해보자.

Share