Rename submit_form component to page_footer

Submit form was
- a confusing name in itself
- not descriptive, because it also has an optional ‘back’ link

This commit also puts this component in as many pages as possible, stripping
out any hard-coded buttons and links.

It replaces any usage of buttons for ‘back’, because these are links, not
buttons (ie they don’t change any data).

app/assets/stylesheets/components/page-footer.scss

@@ -1,12 +1,10 @@
-.submit-form {
+.page-footer {
 
   margin-bottom: 50px;
 
   &-back-link {
-    @include button($grey-1);
+    display: block;
-    padding: 0.52632em 0.78947em 0.26316em 0.78947em;
+    margin-top: $gutter;
-    @include inline-block;
-    margin-left: 5px;
   }
 
   .button {}

app/assets/stylesheets/main.scss

@@ -33,7 +33,7 @@
 @import 'components/template-picker';
 @import 'components/placeholder';
 @import 'components/sms-message';
-@import 'components/submit-form';
+@import 'components/page-footer';
 @import 'components/table';
 @import 'components/navigation';
 @import 'components/big-number';

app/templates/admin_template.html

@@ -20,11 +20,9 @@
   GOV.UK Notify admin
 {% endblock %}
 
-
 {% block cookie_message %}
 {% endblock %}
 
-
 {% block inside_header %}
 {% endblock %}
 {% block header_class %}with-proposition{% endblock %}

app/templates/components/page-footer.html

@@ -0,0 +1,11 @@
+{% macro page_footer(button_text=None, back_link=False, back_link_text="Back", destructive=False) %}
+  <div class="page-footer">
+    {% if button_text %}
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+      <input type="submit" class="button{% if destructive %}-destructive{% endif %}" value="{{ button_text }}" />
+    {% endif %}
+    {% if back_link %}
+      <a class="page-footer-back-link" role="button" href="{{ back_link }}">{{ back_link_text }}</a>
+    {% endif %}
+  </div>
+{% endmacro %}

app/templates/components/submit-form.html

@@ -1,9 +0,0 @@
-{% macro submit_form(button_text, back_link=False, back_link_text="Back", destructive=False) %}
-  <div class="submit-form">
-    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-    <input type="submit" class="button{% if destructive %}-destructive{% endif %}" value="{{ button_text }}" />
-    {% if back_link %}
-      <a class="submit-form-back-link" role="button" href="{{ back_link }}">{{ back_link_text }}</a>
-    {% endif %}
-  </div>
-{% endmacro %}

app/templates/views/api-keys.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | API keys and documentation
@@ -10,8 +11,9 @@ GOV.UK Notify | API keys and documentation
 
 		<p>Here's where developers can access information about the API and access keys</p>
 
-  	<p><a href="dashboard">Back to dashboard</a></p>
+		{{ page_footer(
-
+			back_link=url_for('.dashboard'),
-
+			back_link_text='Back to dashboard'
+		) }}
 
 {% endblock %}

app/templates/views/check-sms.html

@@ -2,7 +2,7 @@
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import table, field %}
 {% from "components/placeholder.html" import placeholder %}
-{% from "components/submit-form.html" import submit_form %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 	GOV.UK Notify | Send text messages
@@ -17,9 +17,8 @@
 
 			<form method="POST" enctype="multipart/form-data">
 
-				{{ submit_form(
+				{{ page_footer(
-					"Send {} text messages".format(number_of_recipients),
+					"Send {} text messages".format(number_of_recipients)
-					url_for(".sendsms")
 				) }}
 
 				<h3 class="heading-small">First 3 messages</h2>
@@ -57,13 +56,11 @@
 					<a href="#">See all</a>
 				</p>
 
-				{{ submit_form(
+				{{ page_footer(
-					"Send {} text messages".format(number_of_recipients),
+					button_text = "Send {} text messages".format(number_of_recipients),
-					url_for(".sendsms")
+					back_link = url_for(".sendsms")
 				) }}
 
 			</form>
 
-
-
 {% endblock %}

app/templates/views/edit-template.html

@@ -1,6 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
-{% from "components/submit-form.html" import submit_form %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Edit template
@@ -13,9 +13,12 @@ GOV.UK Notify | Edit template
 		<form method="post">
 			{{ textbox(name='template_name', label='Template name', value=template_name) }}
 			{{ textbox(name='template_body', label='Message', small=False, value=template_body, highlight_tags=True) }}
-			{{ submit_form('Save and continue') }}
+			{{ page_footer(
+				'Save and continue',
+				back_link=url_for('.dashboard'),
+				back_link_text='Back to manage templates'
+			) }}
 		</form>
 
-  	<p><a href="manage-templates">Back to manage templates</a></p>
 
 {% endblock %}

app/templates/views/email-not-received.html

@@ -1,4 +1,5 @@
 {% extends "admin_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify
@@ -18,8 +19,8 @@ GOV.UK Notify
           {{ render_field(form.email_address, class='form-control-2-3') }}
           <span class="font-xsmall">Your email address must end in .gov.uk</span>
           <p>
-          <button class="button" role="button">Resend confirmation code</button>
           </p>
+          {{ page_footer('Resend confirmation code') }}
       </form>
   </div>
 </div>

app/templates/views/manage-users.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Manage users
@@ -10,8 +11,9 @@ GOV.UK Notify | Manage users
 
 		<p>Here's where you can add or remove users of a service.</p>
 
-  	<p><a href="dashboard">Back to dashboard</a></p>
+		{{ page_footer(
-
+			back_link = url_for('.dashboard'),
-
+			back_link_text = 'Back to dashboard'
+		) }}
 
 {% endblock %}

app/templates/views/notification.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message, message_status %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -21,9 +22,9 @@ GOV.UK Notify | Notifications activity
 			</div>
 		</div>
 
-  	<p>
+		{{ page_footer(
-	  	<a href="{{ url_for('.showjob') }}">View other notifications in this job</a>
+			back_link = url_for('.showjob'),
-  	</p>
+			back_link_text = 'View other messages in this job'
-
+		) }}
 
 {% endblock %}

app/templates/views/register.html

@@ -1,4 +1,5 @@
 {% extends "admin_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Create an account
@@ -21,9 +22,7 @@ GOV.UK Notify | Create an account
 			{{ render_field(form.mobile_number, class='form-control-2-3') }}
 			{{ render_field(form.password, class='form-control-2-3') }}
 			<span class="font-xsmall">Your password must have at least 10 characters</span></label>
-			<p>
+			{{ page_footer("Continue") }}
-			<button class="button" role="button">Continue</button>
-			</p>
 		</form>
 	</div>
 </div>

app/templates/views/send-email.html

@@ -6,7 +6,6 @@ GOV.UK Notify | Send email
 
 {% block maincolumn_content %}
 
-
 		<h1 class="heading-xlarge">Send email</h1>
 
 		<p>This page will be where we construct email messages</p>
@@ -15,5 +14,4 @@ GOV.UK Notify | Send email
   	<a class="button" href="check-email" role="button">Continue</a>
   	</p>
 
-
 {% endblock %}

app/templates/views/send-sms.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 	GOV.UK Notify | Send text messages
@@ -39,11 +40,7 @@
 					<input type="file" />
 				</p>
 
-
+				{{ page_footer("Continue") }}
-		  	<p>
-					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-					<input type="submit" class="button" value="Continue" />
-		  	</p>
 
 	</form>
 

app/templates/views/service-settings/confirm.html

@@ -1,6 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
-{% from "components/submit-form.html" import submit_form %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Service settings
@@ -15,7 +15,7 @@ GOV.UK Notify | Service settings
 
     <form method="post">
       {{ textbox('new_name', 'Enter your password', password=True) }}
-      {{ submit_form(
+      {{ page_footer(
         submit_button_text,
         destructive=destructive,
         back_link=url_for('.service_settings')

app/templates/views/service-settings/delete.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/submit-form.html" import submit_form %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
   GOV.UK Notify | Service settings
@@ -31,7 +31,7 @@
       </ul>
 
       <form method="post">
-        {{ submit_form(
+        {{ page_footer(
           'Yes, delete ‘{}’'.format(service.name),
           destructive=True,
           back_link=url_for('.service_settings')

app/templates/views/service-settings/name.html

@@ -1,6 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
-{% from "components/submit-form.html" import submit_form %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Service settings
@@ -19,7 +19,7 @@ GOV.UK Notify | Service settings
 
       <form method="post">
         {{ textbox('new_name', 'New name', value=service.name) }}
-        {{ submit_form(
+        {{ page_footer(
           'Save',
           back_link=url_for('.service_settings')
         ) }}

app/templates/views/service-settings/request-to-go-live.html

@@ -1,8 +1,8 @@
 {% extends "withnav_template.html" %}
-{% from "components/submit-form.html" import submit_form %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
-GOV.UK Notify | Service settings
+  GOV.UK Notify | Service settings
 {% endblock %}
 
 {% block maincolumn_content %}
@@ -37,7 +37,7 @@ GOV.UK Notify | Service settings
       </p>
 
       <form method="post">
-        {{ submit_form(
+        {{ page_footer(
           'Request to make service live',
           back_link=url_for('.service_settings')
         ) }}

app/templates/views/service-settings/status.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/submit-form.html" import submit_form %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Service settings
@@ -22,7 +22,7 @@ GOV.UK Notify | Service settings
       </p>
 
       <form method="post">
-        {{ submit_form(
+        {{ page_footer(
           'Turn off outgoing messages',
           destructive=True,
           back_link=url_for('.service_settings')

app/templates/views/signin.html

@@ -1,4 +1,5 @@
 {% extends "admin_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 Sign in
@@ -19,9 +20,7 @@ Sign in
 			<p>
 			<span class="font-xsmall"><a href="">Forgotten password?</a></span>
 			</p>
-			<p>
+			{{ page_footer("Continue") }}
-			<button class="button" role="button">Continue</button>
-			</p>
 		</form>
 	</div>
 </div>

app/templates/views/text-not-received.html

@@ -1,4 +1,5 @@
 {% extends "admin_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify
@@ -15,9 +16,7 @@ GOV.UK Notify
       <form autocomplete="off" action="" method="post">
         {{ form.hidden_tag() }}
         {{ render_field(form.mobile_number, class='form-control-2-3') }}
-        <p>
+        {{ page_footer("Resend confirmation code") }}
-        <button class="button" role="button">Resend confirmation code</button>
-        </p>
       </form>
   </div>
 </div>

app/templates/views/two-factor.html

@@ -1,4 +1,5 @@
 {% extends "admin_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Text verification
@@ -16,10 +17,8 @@ GOV.UK Notify | Text verification
 		<form autocomplete="off" action="" method="post">
 			{{ form.hidden_tag() }}
 			{{ render_field(form.sms_code, class='form-control-1-4') }}
-  			<span class="font-xsmall"><a href="{{ url_for('.verification_code_not_received') }}">I haven't received a text</a></span>
+			<span class="font-xsmall"><a href="{{ url_for('.verification_code_not_received') }}">I haven't received a text</a></span>
-  			<p>
+			{{ page_footer("Continue") }}
-  			<button class="button" role="button">Continue</button>
-  			</p>
 		</form>
 	</div>
 </div>

app/templates/views/user-profile.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | User settings
@@ -10,7 +11,9 @@ GOV.UK Notify | User settings
 
 		<p>Here's where users can update their profile, password etc.</p>
 
-  	<p><a href="dashboard">Back to dashboard</a></p>
+		{{ page_footer(
-
+			back_link = url_for('.dashboard'),
+			back_link_text = 'Back to dashboard'
+		) }}
 
 {% endblock %}

app/templates/views/verify.html

@@ -1,4 +1,5 @@
 {% extends "admin_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
 GOV.UK Notify | Confirm email address and mobile number
@@ -18,9 +19,7 @@ GOV.UK Notify | Confirm email address and mobile number
 			<span class="font-xsmall"><a href="{{ url_for('.check_and_resend_email_code')}}">I haven't received an email</a></span>
 			{{ render_field(form.sms_code, class='form-control-1-4') }}
 			<span class="font-xsmall"><a href="{{ url_for('.check_and_resend_text_code') }}">I haven't received a text</a></span>
-			<p>
+			{{ page_footer("Continue") }}
-			<button class="button" role="button">Continue</button>
-			</p>
 		</form>
 	</div>
 </div>