add modal logic

src/registrar/assets/src/js/getgov/main.js

@@ -10,7 +10,7 @@ import { initDomainRequestsTable } from './table-domain-requests.js';
 import { initMembersTable } from './table-members.js';
 import { initMemberDomainsTable } from './table-member-domains.js';
 import { initEditMemberDomainsTable } from './table-edit-member-domains.js';
-import { initPortfolioNewMemberPageToggle, initAddNewMemberPageListeners, initPortfolioMemberPageRadio } from './portfolio-member-page.js';
+import { initPortfolioNewMemberPageToggle, initAddNewMemberPageListeners, initPortfolioMemberPage } from './portfolio-member-page.js';
 import { initDomainRequestForm } from './domain-request-form.js';
 import { initDomainManagersPage } from './domain-managers.js';
 import { initDomainDSData } from './domain-dsdata.js';
@@ -56,8 +56,10 @@ initDomainDNSSEC();
 
 initFormErrorHandling();
 
+// Init the portfolio member page
+initPortfolioMemberPage();
+
 // Init the portfolio new member page
-initPortfolioMemberPageRadio();
 initPortfolioNewMemberPageToggle();
 initAddNewMemberPageListeners();
 

src/registrar/assets/src/js/getgov/portfolio-member-page.js

@@ -193,10 +193,14 @@ export function initAddNewMemberPageListeners() {
 }
 
 // Initalize the radio for the member pages
-export function initPortfolioMemberPageRadio() {
+export function initPortfolioMemberPage() {
   document.addEventListener("DOMContentLoaded", () => {
       let memberForm = document.getElementById("member_form");
-      let newMemberForm = document.getElementById("add_member_form")
+      let newMemberForm = document.getElementById("add_member_form");
+      let editSelfWarningModal = document.getElementById("toggle-member-permissions-edit-self");
+      let editSelfWarningModalConfirm = document.getElementById("member-permissions-edit-self");
+
+      // Init the radio
       if (memberForm || newMemberForm) {
         hookupRadioTogglerListener(
           'role', 
@@ -206,5 +210,23 @@ export function initPortfolioMemberPageRadio() {
           }
         );
       }
+
+      // Init the "edit self" warning modal
+      if (memberForm && editSelfWarningModal) {
+        var canSubmit = false;
+        memberForm.addEventListener("submit", function(e) {
+          if (!canSubmit) {
+            e.preventDefault();
+          }
+          editSelfWarningModal.click();
+        });
+        
+        if (editSelfWarningModalConfirm) {
+          editSelfWarningModalConfirm.addEventListener("click", function() {
+            canSubmit = true;
+            memberForm.submit();
+          });
+        }
+      }
   });
 }

src/registrar/templates/portfolio_member_permissions.html

@@ -109,4 +109,26 @@
     </div>
   </form>
 </div>
+
+{% comment %} If an admin is trying to edit themselves, show a modal {% endcomment %}
+  {% if member and member.id == request.user.id %}
+  <a
+  id="toggle-member-permissions-edit-self"
+  href="#modal-member-permissions-edit-self"
+  class="display-none"
+  aria-controls="modal-member-permissions-edit-self"
+  data-open-modal
+  >Edit self</a>
+  <div
+    class="usa-modal"
+    id="modal-member-permissions-edit-self"
+    data-force-action
+  >
+    {% if is_only_admin %}
+      {% include 'includes/modal.html' with modal_heading="You cannot modify yourself at this time." modal_description="You are the only admin on this organization. Add another administrator to remove yourself from this organization." modal_button_id="member-permissions-edit-self" cancel_button_only=True %}
+    {% else %}
+      {% include 'includes/modal.html' with modal_heading="Are you sure you want to change your own permissions?" modal_description="This could permanently impact your access. <strong>This cannot be undone.</strong>" modal_button_id="member-permissions-edit-self" modal_button_text="Yes, I know what I'm doing!" %}
+    {% endif %}
+  </div>
+  {% endif %}
 {% endblock portfolio_content%}

src/registrar/views/portfolios.py

@@ -259,6 +259,12 @@ class PortfolioMemberEditView(DetailView, View):
         user = portfolio_permission.user
 
         form = self.form_class(instance=portfolio_permission)
+        admin_count = UserPortfolioPermission.objects.filter(
+            portfolio=request.session["portfolio"],
+            roles__overlap=[
+                UserPortfolioRoleChoices.ORGANIZATION_ADMIN
+            ]
+        ).count()
 
         return render(
             request,
@@ -267,6 +273,7 @@ class PortfolioMemberEditView(DetailView, View):
                 "form": form,
                 "member": user,
                 "portfolio_permission": portfolio_permission,
+                "is_only_admin": admin_count < 2
             },
         )