\n
\n {% extends "base.html" %}\n{% load bootstrap5 i18n static groplay %}\n\n{% block body_attrs %}data-analytics-on-load="loadLoginPage"{% endblock body_attrs %}\n\n{% block content %}\n<div class="login-section">\n <div class="row">\n <div class="col-12 col-lg-4 mb-3">\n <a href="{% url 'remote_backends:skolon:auth' %}" class="card p-2 body-color fw-bold align-items-center flex-row show-preloader">\n <img src="{% static 'remote_backends/skolon-logo-compact.png' %}" alt="Skolon" class="remote-backend-icon" />\n <div>{% translate "Log in with Skolon" %}</div>\n </a>\n </div>\n <div class="col-12 col-lg-4 mb-3">\n <a href="{% if static_strings.DJANGO_ENVIRONMENT == 'local' %}http://localhost:8000{% endif %}{% url 'remote_backends:azure:auth' %}"\n class="card p-2 body-color fw-bold align-items-center flex-row show-preloader">\n <img src="{% static 'remote_backends/microsoft-64px.png' %}" alt="Microsoft" class="remote-backend-icon" />\n <div>{% translate "Log in with Microsoft" %}</div>\n </a>\n </div>\n <div class="col-12 col-lg-4 mb-3">\n <a href="{% url 'remote_backends:google:auth' %}" class="card p-2 body-color fw-bold align-items-center flex-row show-preloader">\n <img src="{% static 'remote_backends/google-64px.png' %}" alt="Google" class="remote-backend-icon" />\n <div>{% translate "Log in with Google" %}</div>\n </a>\n </div>\n </div>\n\n <form method="post" id="login-form" class="show-preloader" data-dirrty-disabled action="{% url "users:login" %}"\n data-analytics-on-submit="submitLoginForm">\n {% csrf_token %}\n <div class="row">\n <div class="col-12">\n {% bootstrap_field form.username bound_css_class="" %}\n </div>\n <div class="col-12">\n {% bootstrap_field form.password bound_css_class="" %}\n </div>\n </div>\n <input type="hidden" name="next" value="{{ next }}" />\n <div class="d-flex gap-2 mt-2 flex-wrap">\n <button tabindex="3" type="submit" class="btn btn-primary col-12 col-sm-auto">{% translate "Log In" %}</button>\n <button type="button" class="btn btn-secondary col-12 col-sm-auto" data-bs-toggle="modal" data-bs-target="#password-reset-modal">\n {% translate "I have forgotten my password" %}\n </button>\n </div>\n </form>\n</div>\n<div class="mt-2">\n {% translate "Don't have an account?" %}\n <a href="{% url "users:register" %}" data-analytics-extra-name="register">\n {% translate "Sign up as a teacher here." %}\n </a>\n {% translate "If you are a pupil, your teacher needs to register you before you can use Grow Planet." %}\n</div>\n\n<!-- Badges -->\n<div class="row justify-content-around text-center badge-row mt-4">\n <div class="col my-4">\n <div class="d-flex flex-column h-100">\n <div class="badge-image">\n <a href="https://impactedtech.eu/impact-edtech/" target="_blank">\n <img src="{% static 'edulms/images/logos/impact-edtech-stage2-120px.png' %}" alt="Impact Edtech" />\n </a>\n </div>\n <div>\n <a href="https://impactedtech.eu/impact-edtech/" target="_blank">\n {% translate "Grow Planet is part of the Impact Edtech program" %}\n </a>\n </div>\n </div>\n </div>\n <div class="col my-4">\n <div class="d-flex flex-column h-100">\n <div class="badge-image">\n <a href="https://edtest.se/" target="_blank">\n <img src="{% static 'edulms/images/logos/swedish-edtest.png' %}" alt="Swedish Edtest" />\n </a>\n </div>\n <div>\n <a href="https://edtest.se/" target="_blank">\n {% translate "Grow Planet is tested in Swedish schools with Swedish Edtest" %}\n </a>\n </div>\n </div>\n </div>\n <div class="col my-4">\n <div class="d-flex flex-column h-100">\n <div class="badge-image">\n <a href="https://www.xedu.co/" target="_blank">\n <img src="{% static 'edulms/images/logos/xedu-120px.png' %}" alt="Xedu" />\n </a>\n </div>\n <div>\n <a href="https://www.xedu.co/" target="_blank">\n {% translate "Grow Planet is accelerated by Xedu" %}\n </a>\n </div>\n </div>\n </div>\n</div>\n{% endblock content %}\n\n{% block modals %}\n{% modal "users/modals/password_reset.html" form=password_reset_form password_reset_fail=password_reset_fail %}\n{% endblock modals %}\n\n
\n