Fix/519 token bugs

src/app/features/preprints/components/stepper/review-step/review-step.component.html

@@ -28,7 +28,13 @@ <h3>
         }}
       </h3>
       <div class="flex flex-row gap-2 align-items-center">
-        <img [src]="provider()?.squareColorNoTransparentImageUrl" alt="Provider logo" height="36" width="36" />
+        <img
+          class="fit-contain"
+          [src]="provider()?.squareColorNoTransparentImageUrl"
+          alt="Provider logo"
+          height="36"
+          width="36"
+        />
         <p>{{ provider()?.name }}</p>
       </div>
     </section>

src/app/features/project/project.routes.ts

@@ -15,7 +15,6 @@ import {
 import { ActivityLogsState } from '@osf/shared/stores/activity-logs';
 
 import { CollectionsModerationState } from '../moderation/store/collections-moderation';
-import { NotificationSubscriptionState } from '../settings/notifications/store';
 
 import { AnalyticsState } from './analytics/store';
 import { SettingsState } from './settings/store';
@@ -63,7 +62,7 @@ export const projectRoutes: Routes = [
       {
         path: 'settings',
         loadComponent: () => import('../project/settings/settings.component').then((mod) => mod.SettingsComponent),
-        providers: [provideStates([SettingsState, ViewOnlyLinkState, NotificationSubscriptionState])],
+        providers: [provideStates([SettingsState, ViewOnlyLinkState])],
       },
       {
         path: 'contributors',

src/app/features/project/settings/components/index.ts

@@ -1,7 +1,7 @@
 export { ProjectDetailSettingAccordionComponent } from './project-detail-setting-accordion/project-detail-setting-accordion.component';
 export { ProjectSettingNotificationsComponent } from './project-setting-notifications/project-setting-notifications.component';
 export { SettingsAccessRequestsCardComponent } from './settings-access-requests-card/settings-access-requests-card.component';
-export { SettingsCommentingCardComponent } from './settings-commenting-card/settings-commenting-card.component';
+export { SettingsProjectAffiliationComponent } from './settings-project-affiliation/settings-project-affiliation.component';
 export { SettingsProjectFormCardComponent } from './settings-project-form-card/settings-project-form-card.component';
 export { SettingsRedirectLinkComponent } from './settings-redirect-link/settings-redirect-link.component';
 export { SettingsStorageLocationCardComponent } from './settings-storage-location-card/settings-storage-location-card.component';

src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html

@@ -1,12 +1,12 @@
 <div
-  class="flex justify-between align-items-center mb-2 w-full border-bottom-1 border-gray-300 gap-2 flex-column sm:flex-row sm:gap-4"
+  class="flex justify-content-between align-items-center mb-2 w-full border-bottom-1 border-gray-300 gap-2 flex-column sm:flex-row sm:gap-4"
 >
   <div class="flex align-items-center gap-2 cursor-pointer w-full sm:w-5">
     <p-button
       [icon]="expanded() ? 'fas fa-minus' : 'fas fa-plus'"
       variant="text"
       severity="contrast"
-      (click)="toggle()"
+      (onClick)="toggle()"
     ></p-button>
 
     <span class="font-medium text-color">{{ title() }}</span>
@@ -22,32 +22,21 @@
             </span>
           }
 
-          <p-select
-            class="accordion-dropdown"
+          <osf-select
+            [noBorder]="true"
             [options]="control.options"
-            [(ngModel)]="control.value"
-            (ngModelChange)="emitValueChange.emit({ index: index, value: control.value })"
-          >
-            <ng-template let-item pTemplate="item">
-              <span>{{ item.label | translate }}</span>
-            </ng-template>
-
-            <ng-template let-item pTemplate="selectedItem">
-              {{ item.label | translate }}
-            </ng-template>
-          </p-select>
+            [(selectedValue)]="control.value"
+            [disabled]="disabledRightControls()"
+            (changeValue)="emitValueChange.emit({ index: index, value: control.value })"
+          ></osf-select>
         </div>
       }
     </div>
   }
 </div>
 
 @if (expanded()) {
-  <div
-    class="mt-2 pl-5 border-bottom-1 border-gray-300"
-    [attr.id]="'accordion-content-' + title()"
-    [attr.aria-labelledby]="'accordion-label-' + title()"
-  >
+  <div class="mt-2 pl-5 border-bottom-1 border-gray-300">
     <ng-content></ng-content>
   </div>
 }

src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts

@@ -1,23 +1,26 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { SelectModule } from 'primeng/select';
 
 import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { SelectComponent } from '@osf/shared/components';
+
 import { RightControl } from '../../models';
 
 @Component({
   selector: 'osf-project-detail-setting-accordion',
-  imports: [SelectModule, FormsModule, Button, TranslatePipe],
+  imports: [FormsModule, Button, SelectComponent, TranslatePipe],
   templateUrl: './project-detail-setting-accordion.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectDetailSettingAccordionComponent {
   emitValueChange = output<{ index: number; value: boolean | string }>();
   title = input<string>();
   rightControls = input.required<RightControl[] | undefined>();
+  disabledRightControls = input(false);
+
   expanded = signal(false);
 
   toggle() {

src/app/features/project/settings/components/project-setting-notifications/project-setting-notifications.component.html

@@ -3,23 +3,18 @@ <h2 class="pb-4">{{ 'myProjects.settings.emailNotifications' | translate }}</h2>
 
   <p class="pb-4">{{ 'myProjects.settings.emailNotificationsText' | translate }}</p>
 
-  <osf-project-detail-setting-accordion
-    (emitValueChange)="changeEmittedValue($event)"
-    [rightControls]="allAccordionData"
-    [title]="title()"
-  >
-    <div class="flex align-items-baseline gap-2">
-      <i class="fas fa-minus text-sm icon-space"></i>
-      <span>
-        {{ subscriptionEvent.Comments | notificationDescription: notifications()?.[0]?.frequency | translate }}
-      </span>
-    </div>
-
-    <div class="flex align-items-baseline gap-2 mt-2">
-      <i class="fas fa-minus text-sm icon-space"></i>
-      <span>
-        {{ subscriptionEvent.FileUpdated | notificationDescription: notifications()?.[1]?.frequency | translate }}
-      </span>
-    </div>
-  </osf-project-detail-setting-accordion>
+  @if (notifications().length) {
+    <osf-project-detail-setting-accordion
+      (emitValueChange)="changeEmittedValue($event)"
+      [rightControls]="allAccordionData"
+      [title]="title()"
+    >
+      <div class="flex align-items-baseline gap-2 mt-2">
+        <i class="fas fa-minus text-sm icon-space"></i>
+        <span>
+          {{ subscriptionEvent.FileUpdated | notificationDescription: notifications()[0].frequency | translate }}
+        </span>
+      </div>
+    </osf-project-detail-setting-accordion>
+  }
 </p-card>

src/app/features/project/settings/components/project-setting-notifications/project-setting-notifications.component.ts

@@ -4,8 +4,8 @@ import { Card } from 'primeng/card';
 
 import { ChangeDetectionStrategy, Component, effect, input, output } from '@angular/core';
 
-import { NotificationSubscription } from '@osf/features/settings/notifications/models';
 import { SubscriptionEvent, SubscriptionFrequency } from '@osf/shared/enums';
+import { NotificationSubscription } from '@osf/shared/models';
 
 import { RightControl } from '../../models';
 import { NotificationDescriptionPipe } from '../../pipes';
@@ -19,9 +19,9 @@ import { ProjectDetailSettingAccordionComponent } from '../project-detail-settin
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectSettingNotificationsComponent {
-  notificationEmitValue = output<{ event: SubscriptionEvent; frequency: SubscriptionFrequency }>();
+  notifications = input.required<NotificationSubscription[]>();
   title = input<string>();
-  notifications = input<NotificationSubscription[]>();
+  notificationEmitValue = output<NotificationSubscription>();
 
   allAccordionData: RightControl[] | undefined = [];
 
@@ -33,31 +33,22 @@ export class ProjectSettingNotificationsComponent {
 
   constructor() {
     effect(() => {
-      this.allAccordionData = this.notifications()?.map((notification) => {
-        if (notification.event === SubscriptionEvent.Comments) {
-          return {
-            label: 'settings.notifications.notificationPreferences.items.comments',
-            value: notification.frequency as string,
-            type: 'dropdown',
-            options: this.subscriptionFrequencyOptions,
-            event: notification.event,
-          } as RightControl;
-        } else {
-          return {
-            label: 'settings.notifications.notificationPreferences.items.files',
-            value: notification.frequency as string,
-            type: 'dropdown',
-            options: this.subscriptionFrequencyOptions,
-            event: notification.event,
-          } as RightControl;
-        }
+      this.allAccordionData = this.notifications().map((notification) => {
+        return {
+          label: 'settings.notifications.notificationPreferences.items.files',
+          value: notification.frequency as string,
+          type: 'dropdown',
+          options: this.subscriptionFrequencyOptions,
+          event: notification.event,
+        } as RightControl;
       });
     });
   }
 
   changeEmittedValue(emittedValue: { index: number; value: boolean | string }): void {
     if (this.allAccordionData) {
       this.notificationEmitValue.emit({
+        id: this.notifications()[0].id,
         event: this.allAccordionData[emittedValue.index].event as SubscriptionEvent,
         frequency: emittedValue.value as SubscriptionFrequency,
       });

src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.html

@@ -9,6 +9,7 @@ <h2 class="pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h2>
       id="accessRequest"
       name="ongoing"
     ></p-checkbox>
+
     <label class="input-label ml-2" for="accessRequest">
       {{ 'myProjects.settings.accessRequestsText' | translate }}
     </label>

src/app/features/project/settings/components/settings-project-affiliation/settings-project-affiliation.component.html

@@ -0,0 +1,40 @@
+<p-card>
+  <h3 class="text-xl pb-4">{{ 'myProjects.settings.projectAffiliation' | translate }}</h3>
+
+  <p>{{ 'myProjects.settings.projectsCanBeAffiliated' | translate }}</p>
+
+  <ol class="list-disc ml-5" role="list">
+    <li class="list-disc">{{ 'myProjects.settings.institutionalLogos' | translate }}</li>
+    <li class="list-disc">{{ 'myProjects.settings.publicProjectsToBeDiscoverable' | translate }}</li>
+    <li class="list-disc">{{ 'myProjects.settings.singleSignInToTHeOSF' | translate }}</li>
+    <li class="list-disc">
+      <a class="font-bold" href="https://help.osf.io/article/406-faqs-home-page" target="_blank">
+        {{ 'myProjects.settings.faq' | translate }}
+      </a>
+    </li>
+  </ol>
+
+  @if (affiliations().length > 0) {
+    <div class="flex flex-column gap-3 w-full mt-5">
+      @for (affiliation of affiliations(); track $index) {
+        <div
+          class="flex justify-content-between align-items-center w-full border-bottom-1 border-gray-300 pb-2 pr-2 sm:pr-4"
+        >
+          <div class="flex align-items-center gap-3">
+            <img class="fit-contain" [ngSrc]="affiliation.assets.logo" alt="Affiliation logo" width="44" height="44" />
+
+            <p>{{ affiliation.name }}</p>
+          </div>
+
+          <p-button
+            class="danger-icon-btn"
+            icon="fas fa-trash"
+            severity="danger"
+            text
+            (onClick)="removeAffiliation(affiliation)"
+          ></p-button>
+        </div>
+      }
+    </div>
+  }
+</p-card>

src/app/features/project/settings/components/settings-project-affiliation/settings-project-affiliation.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsProjectAffiliationComponent } from './settings-project-affiliation.component';
+
+describe('SettingsProjectAffiliationComponent', () => {
+  let component: SettingsProjectAffiliationComponent;
+  let fixture: ComponentFixture<SettingsProjectAffiliationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsProjectAffiliationComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsProjectAffiliationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/project/settings/components/settings-project-affiliation/settings-project-affiliation.component.ts

@@ -0,0 +1,25 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+import { Institution } from '@osf/shared/models';
+
+@Component({
+  selector: 'osf-settings-project-affiliation',
+  imports: [Card, Button, NgOptimizedImage, TranslatePipe],
+  templateUrl: './settings-project-affiliation.component.html',
+  styleUrl: './settings-project-affiliation.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsProjectAffiliationComponent {
+  affiliations = input<Institution[]>([]);
+  removed = output<Institution>();
+
+  removeAffiliation(affiliation: Institution) {
+    this.removed.emit(affiliation);
+  }
+}