Fix(ang-925): Fixed addons security issues

src/app/features/project/project-addons/components/configure-addon/configure-addon.component.html

@@ -24,12 +24,14 @@ <h2 class="align-self-center inline-block">
  </p>
 
  <div class="flex gap-2">
- <p-button
- icon="fas fa-pencil"
- text
- (click)="toggleEditMode()"
- (keydown.enter)="toggleEditMode()"
- ></p-button>
+ @if (canRename()) {
+ <p-button
+ icon="fas fa-pencil"
+ text
+ (click)="toggleEditMode()"
+ (keydown.enter)="toggleEditMode()"
+ ></p-button>
+ }
  <p-button
  icon="fas fa-trash"
  severity="danger"

src/app/features/project/project-addons/components/configure-addon/configure-addon.component.ts

@@ -72,6 +72,7 @@ export class ConfigureAddonComponent implements OnInit {
  addon = signal<ConfiguredAddonModel | null>(null);
 
  readonly isGoogleDrive = computed(() => this.storageAddon()?.wbKey === 'googledrive');
+ readonly canRename = computed(() => this.addon()?.currentUserIsOwner ?? false);
 
  isEditMode = signal<boolean>(false);
  selectedStorageItemId = signal('');

src/app/features/project/project-addons/project-addons.component.html

@@ -40,7 +40,11 @@
  </div>
  </section>
  @if (!isAllAddonsTabLoading()) {
- <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
+ <osf-addon-card-list
+ [cards]="filteredAddonCards()"
+ [isConnected]="false"
+ [hasAdminAccess]="hasAdminAccess()"
+ />
  } @else {
  <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
  <osf-loading-spinner />
@@ -58,7 +62,11 @@
  />
 
  @if (!isConfiguredAddonsLoading()) {
- <osf-addon-card-list [cards]="allConfiguredAddons()" />
+ <osf-addon-card-list
+ [cards]="allConfiguredAddons()"
+ [isConnected]="false"
+ [hasAdminAccess]="hasAdminAccess()"
+ />
  } @else {
  <div class="flex-1 mt-6 md:mt-8 lg:pt-7">
  <osf-loading-spinner />

src/app/features/project/project-addons/project-addons.component.ts

@@ -41,6 +41,7 @@ import {
  GetLinkAddons,
  GetStorageAddons,
 } from '@shared/stores/addons';
+import { CurrentResourceSelectors } from '@shared/stores/current-resource';
 
 @Component({
  selector: 'osf-project-addons',
@@ -75,6 +76,7 @@ export class ProjectAddonsComponent implements OnInit {
  selectedTab = signal<number>(this.defaultTabValue);
 
  currentUser = select(UserSelectors.getCurrentUser);
+ hasAdminAccess = select(CurrentResourceSelectors.hasAdminAccess);
  addonsResourceReference = select(AddonsSelectors.getAddonsResourceReference);
  addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
  storageAddons = select(AddonsSelectors.getStorageAddons);

src/app/features/settings/settings-addons/settings-addons.component.html

@@ -43,7 +43,7 @@
  </section>
 
  @if (!isAddonsLoading()) {
- <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
+ <osf-addon-card-list [cards]="filteredAddonCards()" [isConnected]="false" [hasAdminAccess]="true" />
  } @else {
  <div class="mt-8">
  <osf-loading-spinner />
@@ -62,7 +62,7 @@
  />
 
  @if (!isAuthorizedAddonsLoading()) {
- <osf-addon-card-list [cards]="allAuthorizedAddons()" [showDangerButton]="true" />
+ <osf-addon-card-list [cards]="allAuthorizedAddons()" [isConnected]="true" [hasAdminAccess]="true" />
  } @else {
  <div class="mt-8">
  <osf-loading-spinner />

src/app/shared/components/addons/addon-card-list/addon-card-list.component.html

@@ -2,7 +2,7 @@
  @if (cards().length) {
  @for (card of cards(); track $index) {
  <div class="col-12 sm:col-6 md:col-6 lg:col-4">
- <osf-addon-card [card]="card" [showDangerButton]="showDangerButton()" />
+ <osf-addon-card [card]="card" [isConnected]="isConnected()" [hasAdminAccess]="hasAdminAccess()" />
  </div>
  }
  } @else {

src/app/shared/components/addons/addon-card-list/addon-card-list.component.spec.ts

@@ -28,6 +28,6 @@ describe('AddonCardListComponent', () => {
  });
 
  it('should have default false value', () => {
- expect(component.showDangerButton()).toBe(false);
+ expect(component.isConnected()).toBe(false);
  });
 });

src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts

@@ -14,5 +14,6 @@ import { AddonCardComponent } from '../addon-card/addon-card.component';
 })
 export class AddonCardListComponent {
  cards = input<(AddonModel | AuthorizedAccountModel | ConfiguredAddonModel | AddonCardModel)[]>([]);
- showDangerButton = input<boolean>(false);
+ isConnected = input<boolean>(false);
+ hasAdminAccess = input<boolean>(false);
 }

src/app/shared/components/addons/addon-card/addon-card.component.html

@@ -14,7 +14,7 @@
  <h3 class="text-center" data-test-addon-card-title>{{ actualAddon()?.displayName }}</h3>
 
  <div class="flex justify-content-center align-items-center md:gap-5 md:mt-3 btn-container">
- @if (showDangerButton()) {
+ @if (isConnected()) {
  <p-button
  [label]="'settings.addons.form.buttons.disable' | translate"
  severity="danger"
@@ -26,6 +26,8 @@ <h3 class="text-center" data-test-addon-card-title>{{ actualAddon()?.displayName
  <p-button
  [label]="buttonLabel() | translate"
  severity="secondary"
+ [disabled]="!canConfigure()"
+ [class.opacity-0]="!canConfigure()"
  (onClick)="!isConfiguredAddon() ? onConnectAddon() : onConfigureAddon()"
  ></p-button>
  </div>

src/app/shared/components/addons/addon-card/addon-card.component.ts

@@ -25,7 +25,8 @@ export class AddonCardComponent {
  private readonly actions = createDispatchMap({ deleteAuthorizedAddon: DeleteAuthorizedAddon });
 
  readonly card = input<AddonModel | AuthorizedAccountModel | ConfiguredAddonModel | AddonCardModel | null>(null);
- readonly showDangerButton = input<boolean>(false);
+ readonly isConnected = input<boolean>(false);
+ readonly hasAdminAccess = input<boolean>(false);
 
  readonly actualAddon = computed(() => {
  const actualCard = this.card();
@@ -50,8 +51,24 @@ export class AddonCardComponent {
  return isConfiguredAddon(actualCard);
  });
 
+ readonly canConfigure = computed(() => {
+ const isConfigured = this.isConfiguredAddon();
+ const hasAdmin = this.hasAdminAccess();
+
+ if (!isConfigured) return true;
+
+ return hasAdmin;
+ });
+
  readonly buttonLabel = computed(() => {
- return this.isConfiguredAddon() ? 'settings.addons.form.buttons.configure' : 'settings.addons.form.buttons.connect';
+ const isConfigured = this.isConfiguredAddon();
+ const isConnected = this.isConnected();
+
+ if (isConfigured) {
+ return 'settings.addons.form.buttons.configure';
+ }
+
+ return isConnected ? 'settings.addons.form.buttons.reconnect' : 'settings.addons.form.buttons.connect';
  });
 
  onConnectAddon(): void {