Force user to explicitly select token scope, show warning if user scopes to account (#6274)

* Show warning when user scopes API key to account

* warehouse: Toggle token scope warning

* warehouse: Handle unspecified scopes

* tests: Cover unspecified scope in form

* Update API token errors/warning copy

* Update warehouse/templates/manage/token.html

Co-Authored-By: Dustin Ingram <[email protected]>

Author: woodruffw

tests/unit/manage/test_forms.py

@@ -347,7 +347,7 @@ def test_validate_description_missing(self):
         )
 
         assert not form.validate()
-        assert form.description.errors.pop() == "Specify a description"
+        assert form.description.errors.pop() == "Specify a token name"
 
     def test_validate_description_in_use(self):
         form = forms.CreateMacaroonForm(
@@ -371,7 +371,18 @@ def test_validate_token_scope_missing(self):
         )
 
         assert not form.validate()
-        assert form.token_scope.errors.pop() == "Specify a token scope"
+        assert form.token_scope.errors.pop() == "Specify the token scope"
+
+    def test_validate_token_scope_unspecified(self):
+        form = forms.CreateMacaroonForm(
+            data={"description": "dummy", "token_scope": "scope:unspecified"},
+            user_id=pretend.stub(),
+            macaroon_service=pretend.stub(get_macaroon_by_description=lambda *a: None),
+            project_names=pretend.stub(),
+        )
+
+        assert not form.validate()
+        assert form.token_scope.errors.pop() == "Specify the token scope"
 
     @pytest.mark.parametrize(
         ("scope"), ["not a real scope", "scope:project", "scope:foo:bar"]

warehouse/manage/forms.py

@@ -196,15 +196,15 @@ def __init__(self, *args, user_id, macaroon_service, project_names, **kwargs):
 
     description = wtforms.StringField(
         validators=[
-            wtforms.validators.DataRequired(message="Specify a description"),
+            wtforms.validators.DataRequired(message="Specify a token name"),
             wtforms.validators.Length(
                 max=100, message="Description must be 100 characters or less"
             ),
         ]
     )
 
     token_scope = wtforms.StringField(
-        validators=[wtforms.validators.DataRequired(message="Specify a token scope")]
+        validators=[wtforms.validators.DataRequired(message="Specify the token scope")]
     )
 
     def validate_description(self, field):
@@ -224,6 +224,9 @@ def validate_token_scope(self, field):
         except ValueError:
             raise wtforms.ValidationError(f"Unknown token scope: {scope}")
 
+        if scope_kind == "unspecified":
+            raise wtforms.ValidationError(f"Specify the token scope")
+
         if scope_kind == "user":
             self.validated_scope = scope_kind
             return

warehouse/static/js/warehouse/index.js

@@ -226,6 +226,24 @@ docReady(ProvisionWebAuthn);
 // Get WebAuthn authentication ready
 docReady(AuthenticateWebAuthn);
 
+docReady(() => {
+  const tokenSelect = document.getElementById("token_scope");
+
+  if (tokenSelect === null) {
+    return;
+  }
+
+  tokenSelect.addEventListener("change", () => {
+    const tokenScopeWarning = document.getElementById("api-token-scope-warning");
+    if (tokenScopeWarning === null) {
+      return;
+    }
+
+    const tokenScope = tokenSelect.options[tokenSelect.selectedIndex].value;
+    tokenScopeWarning.hidden = (tokenScope !== "scope:user");
+  });
+});
+
 // Bind again when client-side includes have been loaded (for the logged-in
 // user dropdown)
 document.addEventListener("CSILoaded", bindDropdowns);

warehouse/static/sass/blocks/_callout-block.scss

@@ -24,6 +24,7 @@
 
   Modifiers:
     - danger: Makes border red
+    - warning: Makes border brown
     - success: Makes border green
     - bottom-margin: Adds extra margin below the callout
 */
@@ -68,6 +69,14 @@
     }
   }
 
+  &--warning {
+    border-color: $warn-text;
+
+    &:before {
+      background-color: $warn-text;
+    }
+  }
+
   &--success {
     border-color: $success-color;
 

warehouse/templates/manage/token.html

@@ -70,15 +70,20 @@ <h2>Token for "{{ macaroon.description }}"</h2>
         <p id="description-help-text" class="form-group__help-text">What is this token for?</p>
       </div>
       <div class="form-group">
-        <label for="scope" class="form-group__label">Scope</label>
-        <select name="token_scope" id="scope" class="form-group__input">
+        <label for="token_scope" class="form-group__label">Scope</label>
+        <select name="token_scope" id="token_scope" class="form-group__input" aria-describedby="token_scope-errors">
+          <option disabled selected value="scope:unspecified">Select scope...</option>
           <option value="scope:user">Entire account (all projects)</option>
         {% for project in project_names %}
           <option value="scope:project:{{ project }}">Project: {{ project }}</option>
         {% endfor %}
         </select>
         {{ field_errors(create_macaroon_form.token_scope) }}
       </div>
+      <div id="api-token-scope-warning" class="callout-block callout-block--warning" hidden>
+        <h3 class="callout-block__heading">Proceed with caution!</h3>
+        <p>An API token scoped to your entire account will have upload permissions for all of your projects.</p>
+      </div>
       <div>
         <input value="Add token" class="button button--primary" type="submit">
       </div>