Improve API key request documentation

Reword the message in API key request form.
Reference: #1002

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

Author: TG1999

vulnerabilities/forms.py

@@ -55,15 +55,15 @@ def __init__(self, *args, **kwargs):
         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]"
+        email_field.widget.attrs["placeholder"] = "[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"
+        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"] = "e.g. Doe"
+        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">
@@ -23,7 +25,13 @@ <h2 class="subtitle mb-0 pt-2 mb-2">
     </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>.
+      <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/>

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">