Add radio buttons for choosing the API key type

Best-guess wording for what the labels and question should be.

Adds a macro for rendering radio buttons from a WTForms field.

app/main/forms.py

@@ -12,7 +12,8 @@ from wtforms import (
     FileField,
     BooleanField,
     HiddenField,
-    IntegerField
+    IntegerField,
+    RadioField
 )
 from wtforms.fields.html5 import EmailField, TelField
 from wtforms.validators import (DataRequired, Email, Length, Regexp)
@@ -291,6 +292,18 @@ class CreateKeyForm(Form):
         self.existing_key_names = [x.lower() for x in existing_key_names]
         super(CreateKeyForm, self).__init__(*args, **kwargs)
 
+    key_type = RadioField(
+        'What should Notify do when you use this key?',
+        choices=[
+            ('normal', 'Send messages to anyone'),
+            ('test', 'Simulate sending messages to anyone'),
+            ('team', 'Only send messages to members of your team')
+        ],
+        validators=[
+            DataRequired()
+        ]
+    )
+
     key_name = StringField(u'Description of key', validators=[
         DataRequired(message='You need to give the key a name')
     ])

app/main/views/api_keys.py

@@ -30,7 +30,7 @@ def create_api_key(service_id):
                                key_name=form.key_name.data)
     return render_template(
         'views/api-keys/create.html',
-        key_name=form.key_name
+        form=form
     )
 
 

app/templates/components/radios.html

@@ -0,0 +1,23 @@
+{% macro radios(
+  field,
+  hint=None
+) %}
+  <div class="form-group {% if field.errors %} error{% endif %}">
+    <fieldset>
+      <legend class="form-label">
+        {{ field.label }}
+        {% if field.errors %}
+          <span class="error-message">
+            {{ field.errors[0] }}
+          </span>
+        {% endif %}
+      </legend>
+      {% for option in field %}
+        <label class="block-label" for="{{ option.id }}">
+          {{ option }}
+          {{ option.label.text }}
+        </label>
+      {% endfor %}
+    </fieldset>
+  </div>
+{% endmacro %}

app/templates/views/api-keys/create.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/radios.html" import radios %}
 
 {% block page_title %}
   Add a new API key – GOV.UK Notify
@@ -13,7 +14,8 @@
   </h1>
 
   <form method="post">
-    {{ textbox(key_name, hint='eg CRM application') }}
+    {{ radios(form.key_type) }}
+    {{ textbox(form.key_name, label='Name for this key') }}
     {{ page_footer('Continue') }}
   </form>