permissions revamp (#567)

- added support for granular permissions - added Projects, Roles, and Groups areas to Administration - Administration sections are only visible if the User has the appropriate Permissions
cmu-sei · Jan 7, 2025 · 25e3ee7 · 25e3ee7
1 parent 21f299c
commit 25e3ee7
Show file tree

Hide file tree

Showing 169 changed files with 6,059 additions and 1,203 deletions.
diff --git a/angular.json b/angular.json
@@ -34,9 +34,12 @@
                 "output": "./assets/monaco-editor/"
               }
             ],
-            "styles": ["src/styles/styles.scss"],
+            "styles": [
+              "src/styles/styles.scss",
+              "./node_modules/bootstrap/scss/bootstrap-utilities.scss"
+            ],
             "stylePreprocessorOptions": {
-              "includePaths": ["src/styles"]
+              "includePaths": ["src/styles", "./node_modules/bootstrap/scss"]
             },
             "scripts": [],
             "vendorChunk": true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@ngneat/hotkeys": "^1.3.0",
     "angular-resizable-element": "^6.0.0",
     "autoprefixer": "^10.4.13",
-    "bootstrap-scss": "^5.2.2",
+    "bootstrap": "^5.3.3",
     "core-js": "^3.15.2",
     "depcheck": "^1.4.2",
     "domsanitizer": "^0.2.3",

diff --git a/src/app/admin-app/admin-app.module.ts b/src/app/admin-app/admin-app.module.ts
@@ -50,6 +50,17 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { PoolListItemComponent } from './component/admin-vlans/pool-list-item/pool-list-item.component';
 import { AdminAppRoutingModule } from './admin-app-routing.module';
 import { SharedModule } from '../shared/shared.module';
+import { AdminRolesComponent } from './component/admin-roles/admin-roles.component';
+import { AdminGroupsComponent } from './component/admin-groups/admin-groups.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatDialogModule } from '@angular/material/dialog';
+import { AdminGroupsDetailComponent } from './component/admin-groups/admin-groups-detail/admin-groups-detail.component';
+import { AdminGroupsMembershipListComponent } from './component/admin-groups/admin-groups-membership-list/admin-groups-membership-list.component';
+import { AdminGroupsMemberListComponent } from './component/admin-groups/admin-groups-member-list/admin-groups-member-list.component';
+import { AdminProjectsComponent } from './component/admin-projects/admin-projects.component';
+import { ProjectModule } from '../project';
+import { SystemRolesComponent } from './component/admin-roles/system-roles/system-roles.component';
+import { ProjectRolesComponent } from './component/admin-roles/project-roles/project-roles/project-roles.component';
 
 @NgModule({
   declarations: [
@@ -69,6 +80,14 @@ import { SharedModule } from '../shared/shared.module';
     PoolsComponent,
     ProjectVlansComponent,
     PoolListItemComponent,
+    AdminRolesComponent,
+    AdminGroupsComponent,
+    AdminGroupsDetailComponent,
+    AdminGroupsMembershipListComponent,
+    AdminGroupsMemberListComponent,
+    AdminProjectsComponent,
+    SystemRolesComponent,
+    ProjectRolesComponent,
   ],
   imports: [
     ClipboardModule,
@@ -103,6 +122,9 @@ import { SharedModule } from '../shared/shared.module';
     MatTabsModule,
     MatSliderModule,
     MatTableModule,
+    MatToolbarModule,
+    MatDialogModule,
+    ProjectModule,
   ],
   exports: [AdminContainerComponent, UsersComponent, UserListComponent],
 })

diff --git a/src/app/admin-app/component/admin-container/admin-container.component.html b/src/app/admin-app/component/admin-container/admin-container.component.html
@@ -10,7 +10,10 @@
     mode="side"
     [(opened)]="isSidebarOpen"
   >
-    <mat-list class="appitems-container">
+    <mat-list
+      *ngIf="permissions$ | async as permissions"
+      class="appitems-container"
+    >
       <mat-list-item class="appslist">
         <a class="nolink" [routerLink]="['/']">
           <div fxLayout="row" fxLayoutAlign="start center">
@@ -23,7 +26,24 @@ <h2 class="icon-text">Administration</h2>
         </a>
         <mat-divider></mat-divider>
       </mat-list-item>
-      <mat-list-item>
+      <mat-list-item
+        *ngIf="permissions.includes(SystemPermission.ViewProjects)"
+      >
+        <div class="showhand" id="wrapper" (click)="adminGotoProjects()">
+          <div id="lefticon">
+            <mat-icon class="mdi-24px" fontIcon="mdi-notebook"></mat-icon>
+          </div>
+
+          <div id="content">{{ projectsText }}</div>
+
+          <div class="pull-right" id="rightcontext">
+            <button mat-icon-button style="outline: none">
+              <mat-icon class="mdi-24px" fontIcon="mdi-menu-right"></mat-icon>
+            </button>
+          </div>
+        </div>
+      </mat-list-item>
+      <mat-list-item *ngIf="permissions.includes(SystemPermission.ViewUsers)">
         <div class="showhand" id="wrapper" (click)="adminGotoUsers()">
           <div id="lefticon">
             <mat-icon
@@ -41,7 +61,7 @@ <h2 class="icon-text">Administration</h2>
           </div>
         </div>
       </mat-list-item>
-      <mat-list-item>
+      <mat-list-item *ngIf="permissions.includes(SystemPermission.ViewModules)">
         <div class="showhand" id="wrapper" (click)="adminGotoModules()">
           <div id="lefticon">
             <mat-icon class="mdi-24px" fontIcon="mdi-view-module"></mat-icon>
@@ -56,7 +76,9 @@ <h2 class="icon-text">Administration</h2>
           </div>
         </div>
       </mat-list-item>
-      <mat-list-item>
+      <mat-list-item
+        *ngIf="permissions.includes(SystemPermission.ViewWorkspaces)"
+      >
         <div class="showhand" id="wrapper" (click)="adminGotoWorkspaces()">
           <div id="lefticon">
             <mat-icon class="mdi-24px" fontIcon="mdi-briefcase"></mat-icon>
@@ -71,14 +93,44 @@ <h2 class="icon-text">Administration</h2>
           </div>
         </div>
       </mat-list-item>
-      <mat-list-item>
+      <mat-list-item *ngIf="permissions.includes(SystemPermission.ViewVlans)">
         <div class="showhand" id="wrapper" (click)="adminGotoVlans()">
           <div id="lefticon">
             <mat-icon class="mdi-24px" fontIcon="mdi-lan"></mat-icon>
           </div>
 
           <div id="content">{{ vlansText }}</div>
 
+          <div class="pull-right" id="rightcontext">
+            <button mat-icon-button style="outline: none">
+              <mat-icon class="mdi-24px" fontIcon="mdi-menu-right"></mat-icon>
+            </button>
+          </div>
+        </div>
+      </mat-list-item>
+      <mat-list-item *ngIf="permissions.includes(SystemPermission.ViewRoles)">
+        <div class="showhand" id="wrapper" (click)="adminGotoRoles()">
+          <div id="lefticon">
+            <mat-icon class="mdi-24px" fontIcon="mdi-lock"></mat-icon>
+          </div>
+
+          <div id="content">{{ rolesText }}</div>
+
+          <div class="pull-right" id="rightcontext">
+            <button mat-icon-button style="outline: none">
+              <mat-icon class="mdi-24px" fontIcon="mdi-menu-right"></mat-icon>
+            </button>
+          </div>
+        </div>
+      </mat-list-item>
+      <mat-list-item *ngIf="permissions.includes(SystemPermission.ViewGroups)">
+        <div class="showhand" id="wrapper" (click)="adminGotoGroups()">
+          <div id="lefticon">
+            <mat-icon class="mdi-24px" fontIcon="mdi-account-group"></mat-icon>
+          </div>
+
+          <div id="content">{{ groupsText }}</div>
+
           <div class="pull-right" id="rightcontext">
             <button mat-icon-button style="outline: none">
               <mat-icon class="mdi-24px" fontIcon="mdi-menu-right"></mat-icon>
@@ -105,13 +157,49 @@ <h2 class="icon-text">Administration</h2>
       [sidenav]="sidenav"
       (sidenavToggle)="sidenav.toggle()"
     ></cas-topbar>
-    <span *ngIf="isSuperUser">
-      <cas-users *ngIf="showStatus === usersText"></cas-users>
-      <cas-admin-modules *ngIf="showStatus === modulesText"></cas-admin-modules>
+    <span *ngIf="permissions$ | async as permissions">
+      <cas-admin-projects
+        *ngIf="
+          showStatus === projectsText &&
+          permissions.includes(SystemPermission.ViewProjects)
+        "
+      ></cas-admin-projects>
+      <cas-users
+        *ngIf="
+          showStatus === usersText &&
+          permissions.includes(SystemPermission.ViewUsers)
+        "
+      ></cas-users>
+      <cas-admin-modules
+        *ngIf="
+          showStatus === modulesText &&
+          permissions.includes(SystemPermission.ViewModules)
+        "
+      ></cas-admin-modules>
       <cas-admin-workspaces
-        *ngIf="showStatus === workspacesText"
+        *ngIf="
+          showStatus === workspacesText &&
+          permissions.includes(SystemPermission.ViewWorkspaces)
+        "
       ></cas-admin-workspaces>
-      <cas-vlans *ngIf="showStatus === vlansText"></cas-vlans>
+      <cas-vlans
+        *ngIf="
+          showStatus === vlansText &&
+          permissions.includes(SystemPermission.ViewVlans)
+        "
+      ></cas-vlans>
+      <cas-admin-roles
+        *ngIf="
+          showStatus === rolesText &&
+          permissions.includes(SystemPermission.ViewRoles)
+        "
+      ></cas-admin-roles>
+      <cas-admin-groups
+        *ngIf="
+          showStatus === groupsText &&
+          permissions.includes(SystemPermission.ViewGroups)
+        "
+      ></cas-admin-groups>
     </span>
   </mat-sidenav-content>
 </mat-sidenav-container>