Customizing password protected page (#13156)

* Customizing password protected page

network-api/networkapi/wagtailcustomization/templates/wagtailcore/password_required.html

@@ -0,0 +1,56 @@
+{% extends "pages/base.html" %}
+{% load i18n mofo_common static %}
+
+{% block page_title %}
+    {% environment_prefix %}
+    {% trans "Password required" %}
+{% endblock page_title %}
+
+{% block web_monetization %}{% endblock web_monetization %}
+
+{% block wagtail_metadata %}{% endblock wagtail_metadata %}
+
+{% block body_id %}password-protected{% endblock body_id %}
+
+{% block content %}
+    <div class="container tw-pt-[86px] tw-py-64">
+        <div class="tw-grid tw-grid-cols-12">
+            <div class="tw-col-start-1 tw-col-span-12 medium:tw-col-start-3 medium:tw-col-span-8 xlarge:tw-col-start-4 xlarge:tw-col-span-6">
+                <div class="tw-text-center">
+                    <img src="{% static "_images/mozilla-m.svg" %}" alt="" width="28" height="auto" class="tw-w-14 tw-h-auto tw-mx-auto tw-mb-8">
+                </div>
+                <h1 class="tw-text-center tw-h4-heading tw-mb-[34px]">{% trans "Password Protected Page" %}</h1>
+                <form action="{{ action_url }}" method="post">
+                    {% csrf_token %}
+
+                    {% comment %} form.non_field_errors comes localized {% endcomment %}
+                    {{ form.non_field_errors }}
+
+                    <div>
+                        {% for field in form.hidden_fields %}
+                            {{ field }}
+                        {% endfor %}
+                        <div class="tw-flex">
+                            <div class="tw-flex-grow">
+                                <label for="page_password" class="tw-body-small tw-mb-[5px]">{% trans "Password" %}</label>
+                                <input type="password" name="password" required="" id="page_password" placeholder="{% trans "Enter password" %}" class="tw-form-control tw-border-1 {% if form.password.errors %}tw-border-[#c01]{% else %}tw-border-black{% endif %}">
+                            </div>
+                            <div class="tw-flex-shrink-0 tw-self-end">
+                                <input type="submit" value="{% trans "Enter" %}" class="tw-btn tw-btn-primary tw-w-full" />
+                            </div>
+                        </div>
+                        <div>
+                            {% for error in form.password.errors %}
+                                <p class="error-message tw-body-small tw-text-[#c01] tw-mt-[5px]">{{ error }}</p>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock content %}
+
+{% block footer_block %}
+    {% include "fragments/footer.html" with exclude_language_switcher=False %}
+{% endblock footer_block %}