I am new django. I'm practicing it after finishing youtube videos. I'm facing the following error
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 42: 'static', expected 'endblock'. Did you forget to register or load this tag?
The problem that it tells me that it can't find the endblock tag but I've put it at the end of the code. I don't know what causes this problem or how to solve it I need help please
my html
{% extends "Books/base.html" %}
{% block content %}
<div class="page" id="page">
<div class="main">
<div class="main-content">
{% for book in books %}
<div class="container">
<div class="img">
<img
src="{{ book.image.url }}"
width="250px"
height="300px"
/>
</div>
<div class="title">
{{ book.title }}
</div>
<p class="description">{{ book.mini_description }}</p>
<p class="category">
{% for categ in book.category.all %}
{% if categ == book.category.all.last %}
{{ categ }}
{% else %}
{{categ}}-
{% endif %}
{% endfor %}
</p>
<h2 class="price">{{ book.price }} EGP.</h2>
<h3 class="rate">{{ book.rate }}</h3>
<a href="{% url 'buy' %}" target="_blank"
><button class="buy_now nav buy_now_position">Buy Now</button></a
>
</div>
{% endfor %}
</div>
</div>
<div class="nav-bar">
<header class="nav">
<a class="nav logo">
<img
src="{% static 'images/Main Logo.png' %}"
class="logo"
alt="logo"
/>
</a>
<a class="nav">All</a>
<a class="nav">Horror</a>
<a class="nav">Classics</a>
<a class="nav">Graphic Novel</a>
<a class="nav">Fantasy</a>
<div class="drop_down nav">
<a
class="drop_down_btn nav"
type="button"
data-toggle="dropdown"
aria-haspopup
>
more
</a>
<i class="fa fa-caret-down menu"></i>
<div class="drop_down-content nav">
<a class="nav">Action and Adventure</a>
<a class="nav">Detective and Mystery</a>
<a class="nav">Fiction</a>
<a class="nav">Romance</a>
<a class="nav">Short Stories</a>
<a class="nav">Educational</a>
</div>
</div>
<div class="control">
<button class="filter nav" type="button">
<i
class="fa-solid fa-arrow-down-wide-short"
id="toggle-filter"
></i>
</button>
<label>
<input type="search" placeholder="search..." class="search" />
</label>
</div>
</header>
</div>
<div class="panel nav">
<h2>Filter:</h2>
<p>Enter the range of the prices you want</p>
<br />
<label>
From:
<input type="number" min="0" />
</label>
<br /><br />
<label>
To:
<input type="number" min="0" />
</label>
<br /><br />
<button type="button">Apply</button>
</div>
</div>
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
{% endblock content %}
The error is raised at the line
src="{% static 'images/Main Logo.png' %}"
Edit: My Base file is as follows I Forgot to Include it in the question
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Mohammad Ayman" />
<title>{{ title }}</title>
<link rel="stylesheet" href="{% static 'styles/style.css' %}" />
<link rel="stylesheet" href="{% static 'styles/details_style.css' %}" />
<link rel="icon" href="{% static 'images/Title Bar Logo.png' %}" />
<script src="{% static 'js-files/jquery-3.6.0.js' %}"></script>
<script src="{% static 'js-files/home.js' %}"></script>
<script
src="https://kit.fontawesome.com/2a5c8c2bca.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="{% static 'styles/buy_style.css' %}" />
<script src="{% static 'js-files/buy.js' %}"></script>
</head>
<body>
{% block content %} {% endblock content %}
</body>
</html>
I've search for an answer but didn't find any thing
{% extends "Books/base.html" %}
{% load static %} <!--You need to load static here -->
{% block content %}
<div class="page" id="page">
<div class="main">
<div class="main-content">
{% for book in books %}
<div class="container">
<div class="img">
<img
src="{{ book.image.url }}"
width="250px"
height="300px"
/>
</div>
<div class="title">
{{ book.title }}
</div>
<p class="description">{{ book.mini_description }}</p>
<p class="category">
{% for categ in book.category.all %}
{% if categ == book.category.all.last %}
{{ categ }}
{% else %}
{{categ}}-
{% endif %}
{% endfor %}
</p>
<h2 class="price">{{ book.price }} EGP.</h2>
<h3 class="rate">{{ book.rate }}</h3>
<a href="{% url 'buy' %}" target="_blank"
><button class="buy_now nav buy_now_position">Buy Now</button></a
>
</div>
{% endfor %}
</div>
</div>
<div class="nav-bar">
<header class="nav">
<a class="nav logo">
<img
src="{% static 'images/Main Logo.png' %}"
class="logo"
alt="logo"
/>
</a>
<a class="nav">All</a>
<a class="nav">Horror</a>
<a class="nav">Classics</a>
<a class="nav">Graphic Novel</a>
<a class="nav">Fantasy</a>
<div class="drop_down nav">
<a
class="drop_down_btn nav"
type="button"
data-toggle="dropdown"
aria-haspopup
>
more
</a>
<i class="fa fa-caret-down menu"></i>
<div class="drop_down-content nav">
<a class="nav">Action and Adventure</a>
<a class="nav">Detective and Mystery</a>
<a class="nav">Fiction</a>
<a class="nav">Romance</a>
<a class="nav">Short Stories</a>
<a class="nav">Educational</a>
</div>
</div>
<div class="control">
<button class="filter nav" type="button">
<i
class="fa-solid fa-arrow-down-wide-short"
id="toggle-filter"
></i>
</button>
<label>
<input type="search" placeholder="search..." class="search" />
</label>
</div>
</header>
</div>
<div class="panel nav">
<h2>Filter:</h2>
<p>Enter the range of the prices you want</p>
<br />
<label>
From:
<input type="number" min="0" />
</label>
<br /><br />
<label>
To:
<input type="number" min="0" />
</label>
<br /><br />
<button type="button">Apply</button>
</div>
</div>
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
{% endblock content %}
Related
so I want to run my site with my images displayed as quickly as possible and the images are added either by giving the {% static "path/to/image.jpg" %} or by rendering the image tag for wagtail image uploads {% image image_name original as img %}. Currently, the site has considerably slowed down with lots of images, especially loading time for the images. Any possible options to optimise those images through Wagtail? It would be of great help. Thanks
An example with images loading by static tag as well as image tag in wagtail.
{% extends "base.html" %} {% load static wagtailcore_tags wagtailimages_tags %} {% block extra_css %}
<link rel="stylesheet" href="{% static 'css/technologies.css' %}"> {% endblock %} {% block nav_projects %} class="active" {% endblock %}{% block content %}
<div class="inner-page project-page">
<div class="inner-hero" style="background-image: url(/static/images/banner_a/project_bg.png);background-attachment: fixed;">
<div class="container-fluid inner-top-section mt-0 px-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5 p-4">
<div class="col-10 col-sm-8 col-lg-6">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3">{{self.header_title}}</h1>
<p class="lead">{{self.meta_content}}</p>
<!-- <div class="d-grid gap-2 d-md-flex justify-content-md-start">
<span class="txt">Know more</span>
</div> -->
</div>
</div>
</div>
</div>
{% if page.dblock_content %}
<div class="d-block sub-hero position-relative" style="background-color: #4A4A4A">
<div class="bg-set-wrp">
<div class="left-bg-set">
<img class="zoom-fade" src="{% static 'images/project-elm/elm-1.png' %}" alt="">
</div>
<div class="bottom-bg-set">
<img class="zoom-fade" src="{% static 'images/project-elm/elm-4.png' %}" alt="">
</div>
<div class="right-bg-set">
<img class="zoom-fade" src="{% static 'images/project-elm/elm-3.png' %}" alt="">
</div>
<div class="center-bg-set">
<img class="zoom-fade" src="{% static 'images/project-elm/elm-3.png' %}" alt="">
</div>
<div class="top-bg-set">
<img class="zoom-fade" src="{% static 'images/project-elm/elm-3.png' %}" alt="">
</div>
<div class="right-top-bg-set">
<img class="zoom-fade" src="{% static 'images/project-elm/elm-2.png' %}" alt="">
</div>
</div>
<div class="container px-4 py-5 position-relative" style="z-index: 11">
<div class="row align-items-center" style="padding: 6rem 0;">
<div class="col-lg-12 text-white">
<p class="lead1">
<span class="qte1">"</span> {% for block in page.dblock_content %} {% include_block block %} {% endfor %}
<span class="qte2">"</span>
</p>
</div>
</div>
</div>
</div>
{% endif %}
<div class="project-display px-5 project-box">
{% if posts.paginator.num_pages > 1 %}
<div class="d-flex justify-content-end blog-item">
<nav aria-label="...">
<ul class="pagination">
{% if posts.has_previous %}
<li class="page-item">
<a class="page-link" style="color: #000;" href="?page={{ posts.previous_page_number }}" tabindex="-1" aria-disabled="true">Previous</a>
</li>
{% endif %} {% for page_num in posts.paginator.page_range %}
<li class="page-item {% if page_num == posts.number %} active{% endif %}"><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a></li>
{% endfor %} {% if posts.has_next %}
<li class="page-item">
<a href="?page={{ posts.next_page_number }}" class="page-link">
Next
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
<div class="container-fluid">
{% endif %} {% for post in posts %}
<div class="align-items-center pt-5 row {% if forloop.counter|divisibleby:2 %} flex-lg-row-reverse {% endif %}">
<div class="col-10 col-lg-5 col-sm-8 m-0 popannime">
{% image post.project_image original as pr_img %}
<img src="{{pr_img.url}}" class="d-block mx-lg-auto img-fluid" alt="" width="700" height="500" loading="lazy" style="width: 290px;">
</div>
<div class="col-lg-7 m-0">
<h1 class="lh-2 mb-3">{{ post.project_list_title }} </h1>
<p class="lead">{{post.project_list_subtitle}} </p>
<div class="d-grid d-md-flex gap-2">
<span class="txt">Know more</span><span class="arrow"></span>
</div>
</div>
</div>
{% endfor %}
</div>
{% if posts.paginator.num_pages > 1 %}
<div class="d-flex justify-content-end blog-item">
<nav aria-label="...">
<ul class="pagination">
{% if posts.has_previous %}
<li class="page-item">
<a class="page-link" style="color: #000;" href="?page={{ posts.previous_page_number }}" tabindex="-1" aria-disabled="true">Previous</a>
</li>
{% endif %} {% for page_num in posts.paginator.page_range %}
<li class="page-item {% if page_num == posts.number %} active{% endif %}"><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a></li>
{% endfor %} {% if posts.has_next %}
<li class="page-item">
<a href="?page={{ posts.next_page_number }}" class="page-link">
Next
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
{% endif %}
</div>
</div>
{% endblock %}
When I attempt to log in to my django website, I always get a 403 Forbidden CSRF cookie not set error. When viewed via developer tools, the CSRF token was in the form response, but there were no cookies. I have django.middleware.csrf.CsrfViewMiddleware in my middleware, and I am using the standard django.contrib.auth.views.LoginView.
Here is my template:
{% extends 'base/formbase.html' %}
{% block title %}Login{% endblock title %}
{% block menuid %}menu-login{% endblock menuid %}
{% block submitname %}Login{% endblock submitname %}
{% block extra %}
<div class="alert alert-danger">
Forgot Your Password?
</div>
<div class="alert alert-secondary">
Don't have an account? Sign Up!
</div>
{% endblock extra %}
base/formbase.html:
{% extends 'base/base.html' %}
{% load crispy_forms_tags %}
{% block body %}
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
<div class="card-body">
{% block form %}
<h2>{% block title %}{% endblock title %}</h2>
<form method="post" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-primary">{% block submitname %}{% endblock submitname %}
</button>
</form>
{% endblock form %}
</div>
{% block extra %}{% endblock extra %}
</div>
</div>
</div>
{% endblock body %}
base/base.html:
<!DOCTYPE html>
{% load base_extra %}
<html lang="en">
<head>
{% settings gamename "GAME_NAME" %}
<meta charset="UTF-8">
<title>{{ gamename }} - {% block title %}{% endblock title %}</title>
{% block head %}{% endblock head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% settings debug "DEBUG" %}
{% if debug %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://unpkg.com/#popperjs/core/dist/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
{% else %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://unpkg.com/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
{% endif %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="{% url 'index' %}">{{ gamename }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="menu-home">
<a class="nav-link" href="{% url 'index' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="menu-gamelist">
<a class="nav-link" href="{% url 'game:game_list' %}">Game List</a>
</li>
<li class="nav-item" id="menu-leaderboard">
<a class="nav-link" href="{% url 'user_list' %}">Leaderboard</a>
</li>
{% if request.user.is_staff %}
<li class="nav-item" id="menu-admin">
<a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
</li>
{% endif %}
</ul>
<!--
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
-->
<ul class="navbar-nav ml-auto">
{% if request.user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ request.user }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'user' user.pk %}">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
</div>
</li>
<li class="nav-item">
<div class="nav-link">${{ request.user.gameinfo.money }}</div>
</li>
{% else %}
<li class="nav-item" id="menu-signup">
<a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
</li>
<li class="nav-item" id="menu-login">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="mx-3 mt-2">
<script>
try {
document.getElementById("{% block menuid %} {% endblock menuid %}").classList.add("active");
}
catch {}
</script>
{% block body %}
{% endblock body %}
</div>
</body>
</html>
Adding the #csrf_protect decorator does not solve the problem.
This may occur if you have CSRF_COOKIE_SECURE = True explanation in the docs Or if you have CSRF_COOKIE_HTTPONLY = True explanation or if you wish to just disable the csrf token you can add the #csrf_exempt decorator to the view
I have an error in my template. I have tried to see where I've gone wrong, but couldn't identify the bug.
This is index.1.html:
{% extends 'clinic/clinicbase.html' %}
{% load static %}
{% block content %}
{% if username %}
<div class="jumbotron">
<div class="container">
<h3>Welcome, Dr {{ name }}</h3>
<p>You can manage your clinics here:</p>
<p><a class="btn btn-primary btn-sm" href="#" role="button">Learn more »</a></p>
</div>
</div>
{% if nodoc}
{% if clinics %}
{% for clinic in clinics %}
<div class="col-sm-8 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="card-body">
<div id="id" style="display: none;">{{ clinic.clinicid }} </div>
<h2 class="card-title">
{{ clinic.name}}
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Label: {{ clinic.label }}</h6>
<p class="card-text">Phone: {{ clinic.mobile }}</p>
<p class="card-text">About Clinic: {{ clinic.about }}</p>
<p class="card-text">Website: {{ clinic.website }}</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/doctor/edit/{{ doc.docid }}" class="btn btn-primary mr-1 mybtndocedit" data-id="{{ doc.docid }}">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/doctor/appointments/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnviewapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/doctor/appointment/add/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnaddapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/doctor/remove/{{ doc.docid }}" class="btn btn-danger mr-1 mybtndel" data-id="{{ doc.docid }}">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not a member of any clinic. If you are an administrator, you can add yourself to a clinic here.
</div>
{% endif %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not registered as a doctor in the system. Please contact Support..
</div>
{% endif %}
{% else %}
<div class="container bg-light">
<p>You are not authorized. Please login.</p>
{% endif %}
</div>
{% endblock %}
This is clinic/clinicbase.html:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% include "clinic/common_css.html" %}
{% block cssblock %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id="navbar">
{% block navbar %}
{% include "clinic/topbar.html" with screen="newappointment" %}
{% endblock %}
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
{% block breadcrumb %}{% endblock %}
</ol>
</nav>
{% block content %}
{% endblock %}
{% include "clinic/common_js.html" %}
{% block jsblock %}
{% endblock %}
</body>
</html>
clinic/topbar.html:
<header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="/"><i class="fas fa-plus"></i> Mysite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user-md"></i> Clinic
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/"><i class="fas fa-car"></i> Waiting Patients</a>
<a class="dropdown-item" href="/clinic/seen" id="BtnPatientsSeen"><i class="fas fa-check-square"></i>
Seen Patients</a>
<a class="dropdown-item" href="/clinic/newclinic" id="AddNewClinic"><i class="fas fa-check-square"></i>
Add new clinic</a>
<a class="dropdown-item" href="/clinic/clinics" id="ListClinics"><i class="fas fa-check-square"></i>
Show Clinics</a>
<a class="dropdown-item" href="/clinic/permissions" id="SetPermissions"><i class="fas fa-check-square"></i>
Set mapping and permissions</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-address-book"></i> Registration
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/register" id="registration"><i class="fas fa-clipboard"></i>
Register Patient</a>
<a class="dropdown-item" href="/clinic/checkin"><i class="fas fa-clipboard-check"></i> Checkin Patient</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" id="listRegistered" href="#"><i class="fas fa-list"></i> List Registered
Patients</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment" id="appointment"><i class="fas fa-calendar-plus"></i> Appointments
</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Welcome, {{ user.get_username }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'logout'%}?next={{request.path}}"><i class="fas fa-sign-out-alt"></i>
Logout</a>
<a class="dropdown-item" href="/clinic/myprofile"><i class="fas fa-user-alt"></i> My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments"><i class="fas fa-calendar"></i> My Appointments</a>
</div>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="{% url 'login'%}?next={{request.path}}"><i class="fas fa-key"></i> Login
</a>
</li>
{% endif %}
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
clinic/common_css.html:
{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'clinic/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/datepicker.0.6.5.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fontawesome.5.2.0.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.structure.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.theme.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fullcalendar.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/calcustomcolors.css' %}?dev={{ rnd_num }}">
<link rel="stylesheet" href="{% static 'appointments/propellor/typography.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/materialicons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/floating-action-button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/google-icons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/mytheme.css' %}">
clinic/common_js.html:
{% load static %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'appointments/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'appointments/js/jquery-ui/jquery-ui.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/popper.min.js' %}"></script>
<script src="{% static 'appointments/js/bootstrap.min.js' %}"></script>
<script src="{% static 'appointments/js/notify.0.4.2.js' %}"></script>
<script src="{% static 'appointments/js/datepicker.0.6.5.js' %}"></script>
<script src="{% static 'appointments/lib/moment.min.js' %}"></script>
<script src="{% static 'appointments/js/fullcalendar.js' %}"></script>
<script src="{% static 'appointments/js/search.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/appointment.js' %}?dev={{ rnd_num }}"></script>
The error I get is:
In template /home/joel/myappointments/appointments/templates/clinic/index.1.html, error at line 60
Invalid block tag on line 60: 'else', expected 'endblock'. Did you forget to register or load this tag?
Is there an obvious bug in the template?
{% if nodoc} on line 12 - you're missing a %, this line should be {% if nodoc %}.
I have installed Django-allauth on my site,
I made a modal with both login and signup in it,
the login and signup works ok (doh I have a problem that if the login isn't good it just freezes at a white page)
the problem is that under login, I have a forgot your password button,
but once clicked it redirect to http://127.0.0.1:8000/accounts/password/reset/,
but online show a white page, like the allauth templates, were not loaded
URLs
path('users/', include('users.urls')), #for allauth
url(r'^accounts/', include('allauth.urls')), #custom user
SETTINGS:
INSTALLED_APPS = [
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
AUTH_USER_MODEL = 'users.CustomUser'
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
"allauth.account.auth_backends.AuthenticationBackend",
)
TEMPLATES ... # `allauth` needs this from django
'django.template.context_processors.request',
LOGIN_REDIRECT_URL = 'home'
LOGOUT_REDIRECT_URL = 'home'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_LOGOUT_ON_GET = True
ACCOUNT_LOGIN_ATTEMPTS_LIMIT =5
ACCOUNT_LOGIN_ATTEMPTS_TIMEOUT =1800
ACCOUNT_USERNAME_BLACKLIST =[]
ACCOUNT_UNIQUE_EMAIL =True
this is the button for forgotten password
<div>
<a class="forgotpass" href="{% url 'account_reset_password' %}">
{% trans "Forgot Password?" %}</a>
</div>
What did I do wrong ??
UPON REQUEST HERE IS THE WEBSITE BASE TEMPLATE:
<!DOCTYPE html>
<html lang="zxx" class="no-js">
{% load static from static %} {% load socialaccount %}{% load i18n %}
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href='{% static "/home/img/favicon.ico" %}'>
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Title -->
<title>Dr.Landivar</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!-- CSS -->
{% block css %}
{% endblock %}
<style>
.footer-social {
font-size: 1rem !important;
}
.comment {
margin: 20px 0px 20px 20px;
}
.banner-area {
background: url('{% static "/home/img/banner-bg.jpg" %}') no-repeat center;
}
.home-about-area:after {
background: url('{% static "/home/img/about-img.jpg" %}') no-repeat center center/cover;
}
.appoinment-area:after {
background: url('{% static "/home/img/appoinment-img.jpg" %}') no-repeat center center/cover;
}
.about-banner {
background: url('{% static "/home/img/top-banner.jpg" %}') center
}
.blog-home-banner {
background: url('{% static "/home/img/-blog/blog-home-banner.jpg" %}') bottom;
}
</style>
<script src="https://use.fontawesome.com/d2f653f275.js"></script>
</head>
<body>
<!-- Start header Area -->
<header id="header" id="home">
<div class="header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-sm-6 col-4 header-top-left no-padding">
<a href="/">
<img src='{% static "/home/img/logo.png" %}' alt="" title="" />
</a>
</div>
<div class="col-lg-6 col-sm-6 col-8 header-top-right no-padding specialwidthphone">
<a class="btns" href="tel:+010101010">+1 050505050</a>
<a class="icons" href="tel:+953 012 3654 896">
<span class="lnr lnr-phone-handset"></span>
</a>
</div>
</div>
</div>
</div>
<div class="container main-menu">
<div class="row align-items-center justify-content-between d-flex">
<nav id="nav-menu-container">
<ul class="nav-menu">
<li>
Blog
</li>
<li>
{% trans "Videos" %}
</li>
<li>
{% trans "Online Appointments" %}
</li>
<li>
{% trans "Contact Us" %}
</li>
<li>
{% trans "Shop Online" %}
</li>
<li>
<a href="/cart">
<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
</a>
</li>
<li id="sign-in">
{% if user.is_authenticated %}
<p id="welcome">{% trans "Welcome" %} {{ user.username }}</p>
<a id="dash" href="/dash">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</a>
<a id="log" href="{% url 'account_logout' %}">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</a>
<p>
{% else %}
<!-- Button to Open the Modal -->
<div class="loginbtn">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
{% trans "Login" %}
</button>
</div>
<div class="modal-login">
<!-- The Modal For LOGIN -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- LOGIN Modal Header -->
<div class="modal-header">
<h3 class="modal-title">{% trans "Login" %}</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- LOGIN Modal body -->
<div class="modal-body">
<form action="{% url 'account_login' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
<label class="login" for="id_login">{% trans "Username or email:" %} </label>
<input id="id_login" name="login" placeholder="Username or e-mail" type="text" required />
<div>
<label class="password" for="id_password">{% trans "Password:" %} </label>
<input id="id_password" name="password" placeholder="Password" type="password" required />
</div>
<label class="remember" for="id_remember">{% trans "Remember Me:" %}</label>
<input id="id_remember" name="remember" type="checkbox" />
<div>
<button class="submit-btn btn btn-success btn-sm" type="submit">{% trans "Login" %}</button>
</div>
<div>
<a class="forgotpass" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
</form>
<hr id="line">
<form action="{% url 'account_signup' %}" method="post">
{% csrf_token %}
<h4 class="signinhere">{% trans "You are not signed in yet ? Sign in here" %}</h4>
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
<label class="user" for="id_username">{% trans "Username:" %} </label>
<input id="id_username" name="username" placeholder="Username" type="text" required />
<div>
<label class="email" for="id_email">{% trans "E-mail:" %}</label>
<input type="email" name="email" placeholder="E-mail address" required id="id_email">
</div>
<label class="pass1" for="id_password1">{% trans "Password:" %}</label>
<input type="password" name="password1" placeholder="Password" required id="id_password1">
<div>
<label class="pass2" for="id_password2">{% trans "Password (again):" %}</label>
<input type="password" name="password2" placeholder="Password (again)" required id="id_password2">
</div>
<div>
<button class="submit-btn btn btn-success btn-sm" type="submit">{% trans "Submit" %}</button>
</div>
</form>
</div>
<!-- LOGIN Modal footer -->
<div class="modal-footer">
<div>
<p class="specialgmail">
<i class="fab fa-google"></i>
<a id="gmail" href="{% provider_login_url 'google' %}">{% trans "Log In with Gmail" %}</a>
</p>
</div>
<button type="button" class="icon-right btn btn-danger" data-dismiss="modal">{% trans "Close" %}</button>
</div>
</div>
</div>
</div>
</div>
</p>
{% endif %}
</p>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- End header Area -->
{% block content %}
{% endblock%}
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6">
<div class="single-footer-widget">
<h6>{% trans "Navigate" %}</h6>
<ul class="footer-nav">
<li>
{% trans "Log In or Register" %}
</li>
<li>
{% trans "Help Center" %}
</li>
<li>
{% trans "Shipping Policy" %}
</li>
<li>
{% trans "Terms of Service" %}
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-footer-widget mail-chimp">
<h6 class="mb-20">{% trans "Contact Us" %}</h6>
<p>
{% trans "2060 Biscayne Blvd, Miami, FL 33137, EE. UU." %}
</p>
<h3>012-6532-568-9746</h3>
<h3>012-6532-568-97468</h3>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="single-footer-widget newsletter">
<h6>{% trans "Newsletter" %}</h6>
<p>{% trans "You can trust us. we only send promo offers, not a single spam." %}</p>
<div id="mc_embed_signup">
<form action="https://drlandivar.us19.list-manage.com/subscribe/post?u=a988793f3acfebb954fa9a95e&id=da7c864704"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
novalidate>
<div class="form-group row" style="width: 100%">
<div class="col-lg-8 col-md-12">
<input name="EMAIL" placeholder="Your Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email Address '"
required="" type="email">
<div style="position: absolute; left: -5000px;">
<input name="b_a988793f3acfebb954fa9a95e_da7c864704" tabindex="-1" value="" type="text">
</div>
</div>
<div class="col-lg-4 col-md-12">
<button class="nw-btn primary-btn">{% trans "Subscribe" %}
<span class="lnr lnr-arrow-right"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row footer-bottom d-flex justify-content-between">
<p class="col-lg-8 col-sm-12 footer-text m-0">
</p>
<div class="col-lg-4 col-sm-12 footer-social">
<a href="https://www.facebook.com/Dr.Gus.Landivar/" target="_blank">
<i class="fa fa-facebook-square"></i>
</a>
<a href="https://plus.google.com/u/1/112018602499732214904?tab=mX" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a href="https://www.youtube.com/channel/UCl8nmbvMhlc5-os-2n7uSQg" target="_blank">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->
{% block scripts %}
{% endblock%}
</body>
</html>
You should extend your base.html instead of allauth's base.html
I am extending a template , and the two divs before the content block of container doesn't show in any of the ways, the only solution i found is to put this 2 divs in the child , but of course it will lose the sense using extend then.
Someone can tell me what I am missing?
Thanks in advance.
I have the following base template :
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- THIS 2 HERE DOESN'T APPEAR -->
<div class="page-header header-filter" style="background-image: url({% static "material/img/pic.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% block content %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
The template that extends is the following :
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% endblock %}
Your block tags are nested, so when you override body in child you lose all the code inside body from base template, including that two divs. Override only content block in your child and place other code in block extra_body. If you need that code before content, add another block inside body in base template named like before_content and override it in child to place that load into it.
P. S. You have also lost your if messages code after overriding body in child template.
I leave here the code in case someone wants to see the solution with code in front of its eyes
Following approach of Alexandr
Solution 1 :
base.html
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content%}
{% endblock %}
</div>
</div>
{% block extra_body %}
{% endblock %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
Solution 2 :
Base.html
Taking into account the comment of #DisneylandSC , I try this and even though is kind of strange way to solve it , it does the job.
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content_top %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% endblock %}
{% block content_botton %}
</div>
</div>
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content_top %}
{{ block.super }}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block content_botton %}
{{ block.super }}
{% endblock %}
{% endblock %}