Jak dodać bootstrap w formularzu logowania?

0

Co powinienem poprawić w poniższym kodzie? Kiedy stosuję formularz z bootstrapem funkcjonalnosć logowania nie działa.
Przy zastosowaniu {{ form.as_p }} wszystko jest ok. Problem występuje z django-allauth, przy logowaniu korzystając z contrib.auth wszystko działa.

<div class="form-group mt-5">
    <form method="POST">
        {% csrf_token %}

        <h1 class="h3 mb-3 fw-normal">Please Login</h1>

        <div class="mb-3">
            <input type="email" name="Email"
                class="form-control form-control-dark text-bg-dark custom-placeholder form-control-lg" name="name"
                placeholder="email">
        </div>

        <div class="mb-3">
            <input type="password" name="Password"
                class="form-control form-control-dark text-bg-dark custom-placeholder form-control-lg" name="name"
                placeholder="password">
        </div>

        <div class="form-check my-3">
            <input class="form-check-input" type="checkbox" name="remember_me" value="remember-me"
                id="flexCheckDefault">
            <div>
                <label class="form-check-label text-light" for="flexCheckDefault">Remember me</label>
                <a href="#" class="float-end"><small class="text-light">
                        Forgot password</small></a>
            </div>
        </div>

        <button class="btn btn-primary w-100 py-2" type="submit">Submit</button>
        <p class="mt-3 text-center">
            <small class="text-light">Don't have account?
                <a href="#" class="text-light">Register here</a>
            </small>
        </p>
        <hr>
    </form>
    <!-- <form action="" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button class="btn btn-primary w-100 py-2" type="submit">Submit</button>
    </form> -->
</div>
0

Pole password masz jako "name"="name"

<input type="password" name="Password"
    class="form-control form-control-dark text-bg-dark custom-placeholder form-control-lg" name="name" (!tutaj!)
    placeholder="password">
0
szok napisał(a):

Usnuąłem zdublowany atrybut name, niestety dalej nie działa

<form method="POST" action="{% url 'account_login' %}">
    {% csrf_token %}

    <h1 class="h3 mb-3 fw-normal">Please Login</h1>

    <div class="mb-3">
        <input type="email" name="email"
            class="form-control form-control-dark text-bg-dark custom-placeholder form-control-lg"
            placeholder="email">
    </div>

    <div class="mb-3">
        <input type="password" name="password"
            class="form-control form-control-dark text-bg-dark custom-placeholder form-control-lg"
            placeholder="password">
    </div>

    <div class="form-check my-3">
        <input class="form-check-input" type="checkbox" name="remember_me" value="remember-me"
            id="flexCheckDefault">
        <div>
            <label class="form-check-label text-light" for="flexCheckDefault">Remember me</label>
            <a href="#" class="float-end"><small class="text-light">
                    Forgot password</small></a>
        </div>
    </div>

    <button class="btn btn-primary w-100 py-2" type="submit">Submit</button>
    <p class="mt-3 text-center">
        <small class="text-light">Don't have account?
            <a href="#" class="text-light">Register here</a>
        </small>
    </p>
    <hr>
</form>
0

Porównaj sobie co generuje form.as_p z tym co wkleiłeś wyżej, jakie są różnice?

0
szok napisał(a):

Porównaj sobie co generuje form.as_p z tym co wkleiłeś wyżej, jakie są różnice?

form.as_p działa tak jak powinno. Kiedy korzystam z klas bootstrapa wszystko się wyświetla tak jak chcę, ale nie działa funkcjonalność logowania.
W przypadku próby wyświetlenia pojedynczych pól formularza {{ form.email }} i {{ form.password }} wyświetla się tlko pole na hasło

0

@Jan Osienjed: Chodzi mi o to abyś sobie porównał html'e jakie są zwracane przez form.as_p wtedy sobie porównasz czego może Ci brakować.
Ogólnie nie zalecam pracy z formularzami Django w ten sposób, albo z nich korzystasz, albo nie, bo potem są same problemy.
A Django jest tak elastycznym frameworkiem że możesz sobie jak chcesz podmieniać widgety odpowiedzialne za generowanie htmla dla kontrolek formularza.

0
szok napisał(a):

@Jan Osienjed: Chodzi mi o to abyś sobie porównał html'e jakie są zwracane przez form.as_p wtedy sobie porównasz czego może Ci brakować.
Ogólnie nie zalecam pracy z formularzami Django w ten sposób, albo z nich korzystasz, albo nie, bo potem są same problemy.
A Django jest tak elastycznym frameworkiem że możesz sobie jak chcesz podmieniać widgety odpowiedzialne za generowanie htmla dla kontrolek formularza.

Jakbyś miał czas możesz podrzucić jakieś info jak najlepiej podejść do formularzy. W tym konkretnym przypadku chciałem posklejać stronę z examples bootstrapa https://getbootstrap.com/docs/5.3/examples/

Gdyby ktoś potrzebował rozwiązanie pole email powinno mieć atrybut name="login"
https://github.com/pennersr/django-allauth/blob/main/allauth/account/forms.py

1 użytkowników online, w tym zalogowanych: 0, gości: 1