Make email non-editable in "Invite Member" when team limit reached

There is a specific limit of how many other users a given user
can invite in their projects (depends on the plan they are on).
When the limit is reached, the user cannot invite *new* users
in their projects, but they can still invite team members
from one project into another project. In other words, we count
the number of unique invited users, not the number of memberships.

There was an UI bug in the "Invite a Team Member" dialog. The
dialog has an editable "Email" text field. When an user has reached
the team limit, and they open the "Invite" dialog, they could
enter a new user's email address in the Email field and try to invite
them. The server would refuse to exceed the team limit and would
return a plain HTTP 403 page. This is of course confusing to the 
end user.

The fix is to show "Email" as a text field only if the user has
not yet exceeded their team size. If they have, then show "Email"
as non-editable text.

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
 ### Bug Fixes
 - Fix unwanted special character escaping in notification messages (#606)
 - Fix JS error after copying a code snippet
+- Make email non-editable in the "Invite Member" dialog when team limit reached
 
 ## v1.25.0 - 2022-01-07
 

hc/accounts/views.py

@@ -493,6 +493,7 @@ def project(request, code):
 
     q = project.member_set.select_related("user").order_by("user__email")
     ctx["memberships"] = list(q)
+    ctx["can_invite_new_users"] = project.can_invite_new_users()
     return render(request, "accounts/project.html", ctx)
 
 

static/js/project.js

@@ -18,6 +18,7 @@ $(function() {
 
     $(".add-to-team").click(function() {
         $("#itm-email").val(this.dataset.email);
+        $("#itm-email-display").text(this.dataset.email);
         $("#invite-team-member-modal").modal("show");
         return false;
     });

templates/accounts/project.html

@@ -257,7 +257,7 @@
                 <br />
 
                 {% if is_manager %}
-                {% if project.can_invite_new_users %}
+                {% if can_invite_new_users %}
                 <a
                     href="#"
                     class="btn btn-primary pull-right"
@@ -445,6 +445,7 @@
                     <div class="form-group">
                         <label for="itm-email" class="col-sm-3 control-label">Email</label>
                         <div class="col-sm-8">
+                            {% if can_invite_new_users %}
                             <input
                                 type="email"
                                 class="form-control"
@@ -452,6 +453,10 @@
                                 name="email"
                                 maxlength="254"
                                 placeholder="friend@example.org">
+                            {% else %}
+                            <p id="itm-email-display" class="form-control-static"></p>
+                            <input type="hidden" id="itm-email" name="email">
+                            {% endif %}
                         </div>
                     </div>