Add API token instructions to confirmation section (#6615)

Author: nlhkabu

warehouse/static/sass/blocks/_api-token.scss renamed to warehouse/static/sass/blocks/_code-block.scss

@@ -13,14 +13,18 @@
 */
 
 /*
-A custom styled code block for API tokens.
+A custom styled code block.
 
- <code class="api-token">
-   Token here
+ <code class="code-block">
+   Code here
  </code>
+
+ <pre class="code-block">
+   Code here
+ </pre>
 */
 
-.api-token {
+.code-block {
   display: block;
   padding: $spacing-unit / 2;
   margin-bottom: $spacing-unit / 2;

warehouse/static/sass/warehouse.scss

@@ -65,7 +65,6 @@
 // blocks LAYER: some warehouse specific, some generic/reusable
 @import "blocks/about-pypi";
 @import "blocks/accordion";
-@import "blocks/api-token";
 @import "blocks/applied-filters";
 @import "blocks/author-profile";
 @import "blocks/badge";
@@ -75,6 +74,7 @@
 @import "blocks/callout-block";
 @import "blocks/centered-heading";
 @import "blocks/checkbox-tree";
+@import "blocks/code-block";
 @import "blocks/copy-tooltip";
 @import "blocks/dark-overlay";
 @import "blocks/dropdown";

warehouse/templates/manage/token.html

@@ -37,8 +37,8 @@ <h2>{% trans macaroon_description=macaroon.description %}Token for "{{ macaroon_
       <strong>{% trans %}Scope:{% endtrans %}</strong> {% trans project=macaroon.caveats.permissions.projects[0] %}Project "{{ project }}"{% endtrans %}
       {% endif %}
     </p>
-    <p>{% trans href='/help#apitoken' %}For instructions on how to use this token, <a href="{{ href }}">visit the PyPI help page</a>.{% endtrans %}</p>
-    <code class="api-token">{{ serialized_macaroon }}</code>
+
+    <code class="code-block">{{ serialized_macaroon }}</code>
     <div class="margin-bottom--large">
       <div class="callout-block callout-block--danger no-top-margin">
         <p>{% trans %}For security reasons this token will only appear once. <strong>Copy it now.</strong>{% endtrans %}</p>
@@ -61,8 +61,51 @@ <h2>{% trans macaroon_description=macaroon.description %}Token for "{{ macaroon_
 
       {{ confirm_modal(title=title, confirm_name=gettext("Username"), confirm_string=user.username, confirm_button_label=confirm_button_label, slug=slug, extra_fields=extra_fields, custom_warning_text=token_warning_text, confirm_string_in_title=False) }}
     </div>
-    <hr>
+
+    <h2>{% trans %}Using this token{% endtrans %}</h2>
+
+    <p>{% trans %}To use this API token:{% endtrans %}</p>
+
+    <ul>
+      <li>{% trans token='__token__' %}Set your username to <code>{{ token }}</code>{% endtrans %}</li>
+      <li>{% trans prefix='pypi-' %}Set your password to the token value, including the <code>{{ prefix }}</code> prefix{% endtrans %}</li>
+    </ul>
+
+    {% if macaroon.caveats.permissions == "user" %}
+
+    <p>
+      {% trans trimmed href='https://pypi.org/project/virtualenv/', filename='$HOME/.pypirc' %}
+        For example, if you are using <a href="{{ href }}">Twine</a> to upload your projects to PyPI, set up your <code>{{ filename }}</code> file like this:
+      {% endtrans %}
+    </p>
+    <pre class="code-block">
+[pypi]
+  username = __token__
+  password = {{ serialized_macaroon }}</pre>
+    {% else %}
+    <p>
+      {% trans trimmed href='https://pypi.org/project/virtualenv/', filename='$HOME/.pypirc' %}
+        For example, if you are using <a href="{{ href }}">Twine</a> to upload multiple projects to PyPI, you can set up your <code>{{ filename }}</code> file like this:
+      {% endtrans %}
+    </p>
+    <pre class="code-block">
+[pypi]
+  username = __token__
+  password = # {% trans %}either a user-scoped token or a project-scoped token you want to set as the default{% endtrans %}
+
+[PROJECT_NAME]
+  username = __token__
+  password = # {% trans %}a project token{% endtrans %} </pre>
+    <p>
+      {% trans trimmed command='twine --repository PROJECT_NAME' %}
+        You can then use <code>{{ command }}</code> to switch to the correct token when uploading to PyPI.
+      {% endtrans %}
+    </p>
+    {% endif %}
+
+    <p>{% trans href='/help#apitoken' %}For further instructions on how to use this token, <a href="{{ href }}">visit the PyPI help page</a>.{% endtrans %}</p>
   </section>
+  <hr>
   {% endif %}
 
   {{ form_error_anchor(create_macaroon_form) }}
@@ -111,7 +154,7 @@ <h2>{% trans %}Add another token{% endtrans %}</h2>
       </div>
       <div id="api-token-scope-warning" class="callout-block callout-block--warning" hidden>
         <h3 class="callout-block__heading">{% trans %}Proceed with caution!{% endtrans %}</h3>
-        <p>{% trans %}An API token scoped to your entire account will have upload permissions for all of your projects.{% endtrans %}</p>
+        <p>{% trans %}An API token scoped to your entire account will have upload permissions for all of your current and future projects.{% endtrans %}</p>
       </div>
       <div>
         <input value="{% trans %}Add token{% endtrans %}" class="button button--primary" type="submit">