Fix API key request form UI

Signed-off-by: Tushar Goel <[email protected]>

Author: TG1999

vulnerabilities/forms.py

@@ -48,7 +48,22 @@ class Meta:
 
     def __init__(self, *args, **kwargs):
         super(ApiUserCreationForm, self).__init__(*args, **kwargs)
-        self.fields["email"].required = True
+        email_field = self.fields["email"]
+        first_name_field = self.fields["first_name"]
+        last_name_field = self.fields["last_name"]
+        email_field.required = True
+        email_field.label = "Email"
+        email_field.widget.attrs["class"] = "input"
+        email_field.widget.attrs["style"] = "width: 50%"
+        email_field.widget.attrs["placeholder"] = "e.g. [email protected]"
+        first_name_field.label = "First Name"
+        first_name_field.widget.attrs["class"] = "input"
+        first_name_field.widget.attrs["style"] = "width: 50%"
+        first_name_field.widget.attrs["placeholder"] = "e.g. Jon"
+        last_name_field.label = "Last Name"
+        last_name_field.widget.attrs["class"] = "input"
+        last_name_field.widget.attrs["style"] = "width: 50%"
+        last_name_field.widget.attrs["placeholder"] = "e.g. Doe"
 
     def save(self, commit=True):
         return ApiUser.objects.create_api_user(

vulnerabilities/templates/api_user_creation_form.html

@@ -11,15 +11,33 @@
           </div>
         </article>
       {% endfor %}
-    {% block title %}
-    VulnerableCode API key request
-    {% endblock %}
+      <div id="form-errors" class="message is-danger {% if not form.errors %}is-hidden{% endif %}">
+        {% for field_name, errors in form.errors.items %}
+        <div class="message-body">
+          {{ errors }}
+        </div>
+        {% endfor %}
+      </div>
+    <h2 class="subtitle mb-0 pt-2 mb-2">
+      <b>VulnerableCode API key request</b>
+    </h2>
+
+    <section class="ml-2 mt-3 pr-4 pt-4 pl-4 pb-4 has-background-light has-border-radius">
+      Please provide your <b>email address</b> and we will email you the <b>API token</b>.
+    </section>
+
     <br/>
         <form action = "" method = "post">
             {% csrf_token %}
-            {{form|crispy }}
-            <br/>
-            <input class="button is-link" type="submit" value="Submit">
+            {% for field in form %}
+                <div class="field mt-2">
+                    <label class="label" for="{{ form.name.id_for_label }}">{{ field.label }}</label>
+                    <div class="control">
+                        {{ field }}
+                    </div>
+                </div>
+            {% endfor %}
+            <input class="button is-link mt-5" type="submit" value="Request my API Key">
         </form>
     </section>
 {% endblock %}