Fix the API key request form UI and make it consistent with rest of UI

CHANGELOG.rst

@@ -7,6 +7,7 @@ Version v30.3.2
 ----------------
 
 - We re-enabled support for the PostgreSQL securities advisories importer.
+- We fixed the API key request form UI and made it consistent with rest of UI.
 
 
 Version v30.3.1

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"] = "foo@bar.com"
+        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"] = "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"] = "Doe"
 
     def save(self, commit=True):
         return ApiUser.objects.create_api_user(

vulnerabilities/templates/api_user_creation_form.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {%load crispy_forms_tags %} 
-
+{% block title %}
+VulnerableCode API key request
+{% endblock %}
 
 {% block content %}
     <section class="section pt-0">
@@ -11,15 +13,39 @@
           </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">
+      <p class="pb-2">You need an <b>API key</b> to access the 
+      <a href="{% url 'api-root' %}">VulnerableCode JSON REST API</a>.
+      Please check the live <a href="{% url 'api_docs' %}"> OpenAPI documentation </a> 
+      to learn how to use <a href="{% url 'api-root' %}">the API</a>.
+      By using this API, you agree to the VulnerableCode.io <a href="/tos">Terms of Service</a>.
+      This <b>API key</b> gives you a throttled access to the API and helps to prevent abuse of the API.
+      </p>
+    </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 %}

vulnerabilities/templates/navbar.html

@@ -18,29 +18,12 @@
         </div>
     </div>
     <div class="navbar-end mr-3">
+        <a class="navbar-item" href="{% url 'api_user_request' %}" target="_blank">
+            API
+        </a>
         <div class="navbar-item navbar-item is-cursor-help">
             <div class="dropdown is-right is-hoverable ">
-                <div class="dropdown-trigger has-text-grey-light">
-                    API
-                </div>
-                    <div class="dropdown-menu navbar-hover-div" role="menu">
-                    <div class="dropdown-content">
-                        <div class="dropdown-item about-hover-div">
-                            If you want to try the JSON REST API for VulnerableCode.io,
-                            first <a href="{% url 'api_user_request' %}">request an API key</a>,
-                            then <a href="{% url 'api_docs' %}">visit the live OpenAPI documentation</a>,
-                            and <a href="{% url 'api_docs' %}">the API endpoint</a>.
-                            Note that API access may be throttled.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="navbar-item navbar-item is-cursor-help">
-            <div class="dropdown is-right is-hoverable ">
-                <div class="dropdown-trigger has-text-grey-light">
-                    About
-                </div>
+                <div class="dropdown-trigger has-text-grey-light">About</div>
                     <div class="dropdown-menu navbar-hover-div" role="menu">
                     <div class="dropdown-content">
                         <div class="dropdown-item about-hover-div">