Chore/156 contributors UI

src/app/app.routes.ts

@@ -103,6 +103,18 @@ export const routes: Routes = [
                 (mod) => mod.RegistrationsComponent
               ),
           },
+          {
+            path: 'settings',
+            loadComponent: () =>
+              import('./features/project/settings/settings.component').then((mod) => mod.SettingsComponent),
+          },
+          {
+            path: 'contributors',
+            loadComponent: () =>
+              import('@osf/features/project/contributors/contributors.component').then(
+                (mod) => mod.ContributorsComponent
+              ),
+          },
           {
             path: 'analytics',
             loadComponent: () =>

src/app/core/constants/nav-items.constant.ts

@@ -90,6 +90,11 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
         label: 'navigation.project.registrations',
         routerLink: 'registrations',
       },
+      {
+        label: 'navigation.project.settings',
+        routerLink: 'settings',
+      },
+      { label: 'navigation.project.contributors', routerLink: 'contributors' },
       { label: 'navigation.project.analytics', routerLink: 'analytics' },
     ],
   },

src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.html

@@ -0,0 +1,25 @@
+<div class="flex flex-column gap-6">
+  <osf-search-input
+    [searchValue]="searchValue()"
+    (searchValueChange)="searchValue.set($event || '')"
+    [placeholder]="'project.contributors.addDialog.placeholder' | translate"
+  />
+
+  <div class="flex gap-2">
+    <p-button
+      class="w-full"
+      styleClass="w-full"
+      (click)="dialogRef.close()"
+      [text]="true"
+      severity="info"
+      [label]="'project.contributors.addDialog.cancel' | translate"
+    ></p-button>
+
+    <p-button
+      class="w-full"
+      styleClass="w-full"
+      (click)="addContributor()"
+      [label]="'project.contributors.addDialog.next' | translate"
+    ></p-button>
+  </div>
+</div>

src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.spec.ts

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

src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.ts

@@ -0,0 +1,24 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+
+import { SearchInputComponent } from '@osf/shared';
+
+@Component({
+  selector: 'osf-add-contributor-dialog',
+  imports: [Button, TranslatePipe, SearchInputComponent],
+  templateUrl: './add-contributor-dialog.component.html',
+  styleUrl: './add-contributor-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddContributorDialogComponent {
+  dialogRef = inject(DynamicDialogRef);
+  protected searchValue = signal('');
+
+  addContributor(): void {
+    this.dialogRef.close();
+  }
+}

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html

@@ -0,0 +1,59 @@
+<div class="flex flex-column gap-4">
+  <div>
+    <label for="linkName">Link name</label>
+    <input
+      id="linkName"
+      class="search-input"
+      type="text"
+      pInputText
+      placeholder="Type link name"
+      [ngModel]="linkName()"
+      (ngModelChange)="onLinkNameChange($event)"
+    />
+  </div>
+
+  <hr class="break-line"/>
+
+  <div class="flex column-gap-2">
+    <p-checkbox variant="filled" binary="true" [(ngModel)]="anonymous"></p-checkbox>
+    <p>Anonymize contributor list for this link (e.g., for blind peer review).
+      <span class="font-italic">Ensure the wiki pages, files, registration forms and add-ons do not contain identifying information.</span>
+    </p>
+  </div>
+
+  <hr class="break-line"/>
+
+  <p>Which components would you like to associate with this link?
+    <span class="font-italic">Anyone with the private link can view—but not edit—the components associated with the link.</span>
+  </p>
+
+  <div class="flex flex-column gap-2">
+    <div class="flex gap-1">
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample1"></p-checkbox><p>Component Name Example</p>
+    </div>
+    <div class="flex gap-1">
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample2"></p-checkbox><p>Component Name Example</p>
+    </div>
+    <div class="flex gap-1">
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample3"></p-checkbox><p>Component Name Example</p>
+    </div>
+  </div>
+
+  <div class="flex gap-2">
+    <p-button
+      class="w-full"
+      styleClass="w-full"
+      (click)="dialogRef.close()"
+      [text]="true"
+      severity="info"
+      [label]="'project.contributors.addDialog.cancel' | translate"
+    ></p-button>
+
+    <p-button
+      class="w-full"
+      styleClass="w-full"
+      (click)="addContributor()"
+      [label]="'project.contributors.addDialog.next' | translate"
+    ></p-button>
+  </div>
+</div>

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.scss

@@ -0,0 +1,7 @@
+@use "assets/styles/variables" as var;
+
+:host {
+  .break-line {
+    border: 1px solid var.$grey-3;
+  }
+}

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.spec.ts

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

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts

@@ -0,0 +1,40 @@
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
+import {Button} from "primeng/button";
+import {SearchInputComponent} from "@osf/shared";
+import {TranslatePipe} from "@ngx-translate/core";
+import {DynamicDialogRef} from 'primeng/dynamicdialog';
+import {InputText} from 'primeng/inputtext';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {Checkbox} from 'primeng/checkbox';
+
+@Component({
+  selector: 'osf-create-view-link-dialog',
+  imports: [
+    Button,
+    SearchInputComponent,
+    TranslatePipe,
+    InputText,
+    ReactiveFormsModule,
+    FormsModule,
+    Checkbox
+  ],
+  templateUrl: './create-view-link-dialog.component.html',
+  styleUrl: './create-view-link-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CreateViewLinkDialogComponent {
+  dialogRef = inject(DynamicDialogRef);
+  protected linkName = signal('');
+  anonymous = signal(true);
+  componentExample1 = signal(true);
+  componentExample2 = signal(false);
+  componentExample3 = signal(false);
+
+  addContributor(): void {
+    this.dialogRef.close();
+  }
+
+  onLinkNameChange(value: string): void {
+    this.linkName.set(value);
+  }
+}