Refactor loging form

src/newsreader/accounts/templates/accounts/views/login.html

@@ -4,21 +4,6 @@
 
 {% block content %}
   <main id="login--page" class="main">
-    <form class="form login-form" method="POST" action="{% url 'accounts:login' %}">
-      {% csrf_token %}
-      <div class="form__header">
-        <h1 class="form__title">Login</h1>
-      </div>
-
-      <fieldset class="login-form__fieldset">
-        {{ form }}
-      </fieldset>
-      <fieldset class="login-form__fieldset">
-        <button class="button button--confirm" type="submit">Login</button>
-        <a class="link" href="{% url 'accounts:password-reset' %}">
-          <small class="small">I forgot my password</small>
-        </a>
-      </fieldset>
-    </form>
+    {% include "form/login-form.html" with form=form title="Login" confirm_text="Login" %}
   </main>
 {% endblock %}

src/newsreader/scss/components/form/_login-form.scss

@@ -1,33 +0,0 @@
-.login-form {
-  @extend .form;
-
-  width: 100%;
-
-  h4 {
-    margin: 0;
-    padding: 20px 24px 5px 24px;
-  }
-
-  &__fieldset {
-    @extend .form__fieldset;
-
-    & label {
-      @extend .label;
-    }
-
-    & input {
-      @extend .input;
-    }
-  }
-
-  &__fieldset:last-child {
-    flex-direction: row-reverse;
-    justify-content: space-between;
-  }
-
-  &__fieldset:last-child {
-    .button {
-      padding: 10px 50px;
-    }
-  }
-}

src/newsreader/scss/components/form/index.scss

@@ -5,7 +5,6 @@
 @import "rules-form";
 @import "import-form";
 
-@import "login-form";
 @import "activation-form";
 @import "register-form";
 

src/newsreader/scss/pages/login/index.scss

@@ -3,4 +3,29 @@
   width: 50%;
 
   border-radius: 4px;
+
+  & .form {
+    @extend .form;
+
+    width: 100%;
+
+    h4 {
+      margin: 0;
+      padding: 20px 24px 5px 24px;
+    }
+
+    &__section {
+      &--last {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+      }
+    }
+
+    &__fieldset {
+      @extend .form__fieldset;
+
+      &--last {
+      }
+    }
+  }
 }

src/newsreader/templates/form/form.html

@@ -11,31 +11,42 @@
     {% include "form/title.html" with title=title only %}
   {% endif %}
 
-  <section class="section form__section">
-    {% for field in form.hidden_fields %}
-      {{ field }}
-    {% endfor %}
-
-    {% for field in form.visible_fields %}
-      <fieldset class="fieldset form__fieldset">
-        <label class="label form__label" for="{{ field.name }}">
-          {{ field.label }}
-        </label>
-
-        {{ field.errors }}
+  {% block fields %}
+    <section class="section form__section">
+      {% for field in form.hidden_fields %}
         {{ field }}
-        <small class="small helptext">{{ field.help_text }}</small>
+      {% endfor %}
+
+      {% for field in form.visible_fields %}
+        <fieldset class="fieldset form__fieldset">
+          <label class="label form__label" for="{{ field.name }}">
+            {{ field.label }}
+          </label>
+
+          {{ field.errors }}
+          {{ field }}
+          <small class="small helptext">{{ field.help_text }}</small>
+        </fieldset>
+      {% endfor %}
+    </section>
+  {% endblock fields %}
+
+
+  {% block actions %}
+    <section class="section form__section--last">
+      <fieldset class="fieldset form__fieldset">
+        {% if cancel_url %}
+          <a class="link button button--cancel" href="{{ cancel_url }}">{% trans "Cancel" %}</a>
+        {% endif %}
+
+        <button class="button button--confirm">
+          {% if confirm_text %}
+            {{ confirm_text }}
+          {% else %}
+            {% trans "Save" %}
+          {% endif %}
+        </button>
       </fieldset>
-    {% endfor %}
-  </section>
-
-  <section class="section form__section--last">
-    <fieldset class="fieldset form__fieldset">
-      {% if cancel_url %}
-        <a class="link button button--cancel" href="{{ cancel_url }}">{% trans "Cancel" %}</a>
-      {% endif %}
-
-      <button class="button button--confirm">{% trans "Save" %}</button>
-    </fieldset>
-  </section>
+    </section>
+  {% endblock actions %}
 </form>

src/newsreader/templates/form/login-form.html

@@ -0,0 +1,27 @@
+{% extends "form/form.html" %}
+
+{% load i18n %}
+
+{% block actions %}
+  <section class="section form__section--last">
+    <fieldset class="fieldset form__fieldset">
+      {% if cancel_url %}
+        <a class="link button button--cancel" href="{{ cancel_url }}">{% trans "Cancel" %}</a>
+      {% endif %}
+
+      <button class="button button--confirm">
+        {% if confirm_text %}
+          {{ confirm_text }}
+        {% else %}
+          {% trans "Save" %}
+        {% endif %}
+      </button>
+    </fieldset>
+
+    <fieldset class="fieldset form__fieldset">
+      <a class="link" href="{% url 'accounts:password-reset' %}">
+        <small class="small">I forgot my password</small>
+      </a>
+    </fieldset>
+  </section>
+{% endblock actions %}