From 8dfcb80aec9f4a2d2e05ec224f8939e0e1e661dc Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Sat, 21 Jun 2025 11:25:02 +0300
Subject: [PATCH 01/15] feat(registries): start work on registries

---
 src/app/app.routes.ts                         | 14 +++++++++++
 .../new-registration.component.html           |  8 ++++++
 .../new-registration.component.scss           |  5 ++++
 .../new-registration.component.spec.ts        | 22 ++++++++++++++++
 .../new-registration.component.ts             | 20 +++++++++++++++
 src/app/features/registries/models/index.ts   |  0
 .../models/provider-json-api.model.ts         | 14 +++++++++++
 .../registries/models/provider.model.ts       |  0
 .../registries/registries.component.html      |  3 +++
 .../registries/registries.component.scss      |  5 ++++
 .../registries/registries.component.spec.ts   | 22 ++++++++++++++++
 .../registries/registries.component.ts        | 11 ++++++++
 src/app/features/registries/services/index.ts |  3 +++
 .../registries/services/projects.service.ts   |  6 +++++
 .../registries/services/providers.service.ts  |  6 +++++
 .../registries/services/registries.service.ts |  6 +++++
 src/app/features/registries/store/index.ts    |  4 +++
 .../registries/store/registries.actions.ts    |  3 +++
 .../registries/store/registries.model.ts      | 11 ++++++++
 .../registries/store/registries.selectors.ts  | 11 ++++++++
 .../registries/store/registries.state.ts      | 25 +++++++++++++++++++
 src/assets/i18n/en.json                       | 16 ++++++++++++
 22 files changed, 215 insertions(+)
 create mode 100644 src/app/features/registries/components/new-registration/new-registration.component.html
 create mode 100644 src/app/features/registries/components/new-registration/new-registration.component.scss
 create mode 100644 src/app/features/registries/components/new-registration/new-registration.component.spec.ts
 create mode 100644 src/app/features/registries/components/new-registration/new-registration.component.ts
 create mode 100644 src/app/features/registries/models/index.ts
 create mode 100644 src/app/features/registries/models/provider-json-api.model.ts
 create mode 100644 src/app/features/registries/models/provider.model.ts
 create mode 100644 src/app/features/registries/registries.component.html
 create mode 100644 src/app/features/registries/registries.component.scss
 create mode 100644 src/app/features/registries/registries.component.spec.ts
 create mode 100644 src/app/features/registries/registries.component.ts
 create mode 100644 src/app/features/registries/services/index.ts
 create mode 100644 src/app/features/registries/services/projects.service.ts
 create mode 100644 src/app/features/registries/services/providers.service.ts
 create mode 100644 src/app/features/registries/services/registries.service.ts
 create mode 100644 src/app/features/registries/store/index.ts
 create mode 100644 src/app/features/registries/store/registries.actions.ts
 create mode 100644 src/app/features/registries/store/registries.model.ts
 create mode 100644 src/app/features/registries/store/registries.selectors.ts
 create mode 100644 src/app/features/registries/store/registries.state.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 683d06f2c..f678c0695 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -169,6 +169,20 @@ export const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'registries',
+        loadComponent: () =>
+          import('./features/registries/registries.component').then((mod) => mod.RegistriesComponent),
+        children: [
+          {
+            path: 'new',
+            loadComponent: () =>
+              import('./features/registries/components/new-registration/new-registration.component').then(
+                (mod) => mod.NewRegistrationComponent
+              ),
+          },
+        ],
+      },
       {
         path: 'settings',
         loadChildren: () => import('./features/settings/settings.routes').then((mod) => mod.settingsRoutes),
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.html b/src/app/features/registries/components/new-registration/new-registration.component.html
new file mode 100644
index 000000000..f454762fd
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.html
@@ -0,0 +1,8 @@
+<osf-sub-header [title]="'registries.new.addNewRegistry' | translate" />
+<section class="flex flex-column lg:flex-row bg-white flex-1 h-full p-5 gap-4 w-full">
+  <p>
+    {{ 'registries.new.infoText1' | translate }}
+    <a href="https://help.osf.io/"> {{ 'common.links.clickHere' | translate }}</a>
+    {{ 'registries.new.infoText2' | translate }}
+  </p>
+</section>
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.scss b/src/app/features/registries/components/new-registration/new-registration.component.scss
new file mode 100644
index 000000000..da0c027b5
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.spec.ts b/src/app/features/registries/components/new-registration/new-registration.component.spec.ts
new file mode 100644
index 000000000..b6c711a95
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewRegistrationComponent } from './new-registration.component';
+
+describe('NewRegistrationComponent', () => {
+  let component: NewRegistrationComponent;
+  let fixture: ComponentFixture<NewRegistrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewRegistrationComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewRegistrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
new file mode 100644
index 000000000..8aae7fbff
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -0,0 +1,20 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+
+import { SubHeaderComponent } from '@osf/shared/components';
+
+@Component({
+  selector: 'osf-new-registration',
+  imports: [SubHeaderComponent, TranslatePipe],
+  templateUrl: './new-registration.component.html',
+  styleUrl: './new-registration.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NewRegistrationComponent {
+  private readonly fb = inject(FormBuilder);
+  draftForm = this.fb.group({
+    provider: [''],
+  });
+}
diff --git a/src/app/features/registries/models/index.ts b/src/app/features/registries/models/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/models/provider-json-api.model.ts b/src/app/features/registries/models/provider-json-api.model.ts
new file mode 100644
index 000000000..07f8bca6e
--- /dev/null
+++ b/src/app/features/registries/models/provider-json-api.model.ts
@@ -0,0 +1,14 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface ProvidersResponseJsonApi {
+  data: ProviderDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type ProviderDataJsonApi = ApiData<ProviderAttributesJsonApi, null, null, null>;
+
+interface ProviderAttributesJsonApi {
+  full_name: string;
+  permission_group: 'moderator' | 'admin';
+}
diff --git a/src/app/features/registries/models/provider.model.ts b/src/app/features/registries/models/provider.model.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/registries.component.html b/src/app/features/registries/registries.component.html
new file mode 100644
index 000000000..7efab5d8a
--- /dev/null
+++ b/src/app/features/registries/registries.component.html
@@ -0,0 +1,3 @@
+<div class="flex flex-column flex-1 xl:mt-6">
+  <router-outlet />
+</div>
diff --git a/src/app/features/registries/registries.component.scss b/src/app/features/registries/registries.component.scss
new file mode 100644
index 000000000..da0c027b5
--- /dev/null
+++ b/src/app/features/registries/registries.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
diff --git a/src/app/features/registries/registries.component.spec.ts b/src/app/features/registries/registries.component.spec.ts
new file mode 100644
index 000000000..01003ff5e
--- /dev/null
+++ b/src/app/features/registries/registries.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistriesComponent } from './registries.component';
+
+describe('RegistriesComponent', () => {
+  let component: RegistriesComponent;
+  let fixture: ComponentFixture<RegistriesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistriesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistriesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/registries.component.ts b/src/app/features/registries/registries.component.ts
new file mode 100644
index 000000000..a3009cbcc
--- /dev/null
+++ b/src/app/features/registries/registries.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'osf-registries',
+  imports: [RouterModule],
+  templateUrl: './registries.component.html',
+  styleUrl: './registries.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistriesComponent {}
diff --git a/src/app/features/registries/services/index.ts b/src/app/features/registries/services/index.ts
new file mode 100644
index 000000000..04f640163
--- /dev/null
+++ b/src/app/features/registries/services/index.ts
@@ -0,0 +1,3 @@
+export * from './projects.service';
+export * from './providers.service';
+export * from './registries.service';
diff --git a/src/app/features/registries/services/projects.service.ts b/src/app/features/registries/services/projects.service.ts
new file mode 100644
index 000000000..1756bf9a5
--- /dev/null
+++ b/src/app/features/registries/services/projects.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProjectsService {}
diff --git a/src/app/features/registries/services/providers.service.ts b/src/app/features/registries/services/providers.service.ts
new file mode 100644
index 000000000..f7c20ae97
--- /dev/null
+++ b/src/app/features/registries/services/providers.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProvidersService {}
diff --git a/src/app/features/registries/services/registries.service.ts b/src/app/features/registries/services/registries.service.ts
new file mode 100644
index 000000000..6ba6815b3
--- /dev/null
+++ b/src/app/features/registries/services/registries.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RegistriesService {}
diff --git a/src/app/features/registries/store/index.ts b/src/app/features/registries/store/index.ts
new file mode 100644
index 000000000..92a9455c1
--- /dev/null
+++ b/src/app/features/registries/store/index.ts
@@ -0,0 +1,4 @@
+export * from './registries.actions';
+export * from './registries.model';
+export * from './registries.selectors';
+export * from './registries.state';
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
new file mode 100644
index 000000000..6d8c241cf
--- /dev/null
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -0,0 +1,3 @@
+export class GetProviders {
+  static readonly type = '[Registries]  Get Providers';
+}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
new file mode 100644
index 000000000..a498212de
--- /dev/null
+++ b/src/app/features/registries/store/registries.model.ts
@@ -0,0 +1,11 @@
+import { AsyncStateModel } from '@osf/shared/models';
+
+export interface Provider {
+  id: string;
+  title: string;
+}
+
+export interface RegistriesStateModel {
+  providers: AsyncStateModel<Provider[]>;
+  currentProviderId: string | null;
+}
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
new file mode 100644
index 000000000..01b9a6aee
--- /dev/null
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -0,0 +1,11 @@
+import { Selector } from '@ngxs/store';
+
+import { Provider, RegistriesStateModel } from './registries.model';
+import { RegistriesState } from './registries.state';
+
+export class RegistriesSelectors {
+  @Selector([RegistriesState])
+  static getProviders(state: RegistriesStateModel): Provider[] {
+    return state.providers.data || [];
+  }
+}
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
new file mode 100644
index 000000000..4ec5e4bb5
--- /dev/null
+++ b/src/app/features/registries/store/registries.state.ts
@@ -0,0 +1,25 @@
+import { State } from '@ngxs/store';
+
+import { Injectable } from '@angular/core';
+
+import { ProvidersService } from '../services';
+
+import { RegistriesStateModel } from './registries.model';
+
+const DefaultState: RegistriesStateModel = {
+  providers: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  currentProviderId: null,
+};
+
+@State<RegistriesStateModel>({
+  name: 'registries',
+  defaults: { ...DefaultState },
+})
+@Injectable()
+export class RegistriesState {
+  constructor(private providersService: ProvidersService) {}
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index c693d5445..11def31d2 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -38,6 +38,9 @@
     "deleteConfirmation": {
       "header": "Delete",
       "message": "Are you sure you want to proceed?"
+    },
+    "links": {
+      "clickHere": "Click here"
     }
   },
   "navigation": {
@@ -331,6 +334,19 @@
       "updateProjectSettingsMessage": "Successfully updated project settings."
     }
   },
+  "registries": {
+    "new": {
+      "addNewRegistry": "Add New Registry",
+      "infoText1": "You are submitting to OSF Registries.",
+      "infoText2": "to learn more about other hosted registries",
+      "steps": {
+        "step1": "Do you have content for registration in an existing OSF project?",
+        "step2": "Which project do you want to register?",
+        "step3": "Which type of registration would you like to create?",
+        "stepTwoInfo": "If your project includes components, you can select which components to include or exclude at the end of the registration."
+      }
+    }
+  },
   "myProfile": {
     "editProfile": "Edit Profile"
   },

From 80325c08616a22998edc908a0a65d20ac91adc93 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Sun, 22 Jun 2025 12:56:51 +0300
Subject: [PATCH 02/15] feat(registries): work on new registrations

---
 .../core/constants/ngxs-states.constant.ts    |  2 +
 .../institutions/moderation.service.ts        | 51 ++++++++++++
 .../new-registration.component.html           | 43 ++++++++++
 .../new-registration.component.ts             | 27 ++++++-
 src/app/features/registries/mappers/index.ts  |  0
 .../registries/mappers/projects.mapper.ts     | 11 +++
 .../registries/mappers/providers.mapper.ts    | 11 +++
 src/app/features/registries/models/index.ts   |  2 +
 src/app/features/registries/models/project.ts |  4 +
 .../models/projects-json-api.model.ts         | 13 +++
 .../registries/models/provider.model.ts       |  4 +
 ...i.model.ts => providers-json-api.model.ts} |  3 +-
 .../registries/services/projects.service.ts   | 26 +++++-
 .../registries/services/providers.service.ts  | 26 +++++-
 .../registries/services/registries.service.ts | 20 ++++-
 .../registries/store/registries.actions.ts    |  4 +
 .../registries/store/registries.model.ts      |  6 +-
 .../registries/store/registries.selectors.ts  | 11 ++-
 .../registries/store/registries.state.ts      | 80 ++++++++++++++++++-
 src/assets/i18n/en.json                       |  7 +-
 20 files changed, 331 insertions(+), 20 deletions(-)
 create mode 100644 src/app/features/institutions/moderation.service.ts
 create mode 100644 src/app/features/registries/mappers/index.ts
 create mode 100644 src/app/features/registries/mappers/projects.mapper.ts
 create mode 100644 src/app/features/registries/mappers/providers.mapper.ts
 create mode 100644 src/app/features/registries/models/project.ts
 create mode 100644 src/app/features/registries/models/projects-json-api.model.ts
 rename src/app/features/registries/models/{provider-json-api.model.ts => providers-json-api.model.ts} (84%)

diff --git a/src/app/core/constants/ngxs-states.constant.ts b/src/app/core/constants/ngxs-states.constant.ts
index 7f622dcdd..b54e6fd70 100644
--- a/src/app/core/constants/ngxs-states.constant.ts
+++ b/src/app/core/constants/ngxs-states.constant.ts
@@ -9,6 +9,7 @@ import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
 import { SettingsState } from '@osf/features/project/settings/store';
 import { WikiState } from '@osf/features/project/wiki/store/wiki.state';
+import { RegistriesState } from '@osf/features/registries/store';
 import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
 import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
@@ -34,4 +35,5 @@ export const STATES = [
   WikiState,
   MeetingsState,
   RegistrationsState,
+  RegistriesState,
 ];
diff --git a/src/app/features/institutions/moderation.service.ts b/src/app/features/institutions/moderation.service.ts
new file mode 100644
index 000000000..1ba57fd09
--- /dev/null
+++ b/src/app/features/institutions/moderation.service.ts
@@ -0,0 +1,51 @@
+import { map, Observable, of } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiResponseWithPaging, UserGetResponse } from '@osf/core/models';
+import { JsonApiService } from '@osf/core/services';
+import { PaginatedData } from '@osf/shared/models';
+
+import { ModerationMapper } from '../mappers';
+import { ModeratorAddModel, ModeratorModel, ModeratorResponseJsonApi } from '../models';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModerationService {
+  private readonly tesModeratorsUrl = 'assets/collection-moderators.json';
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getCollectionModerators(providerId: string): Observable<ModeratorModel[]> {
+    return (
+      this.jsonApiService
+        // .get<ModeratorResponseJsonApi>(`${this.baseUrl}/providers/collections/${providerId}/moderators/`)
+        .get<ModeratorResponseJsonApi>(this.tesModeratorsUrl)
+        .pipe(map((response) => response.data.map((moderator) => ModerationMapper.fromModeratorResponse(moderator))))
+    );
+  }
+
+  addCollectionModerator(providerId: string, data: ModeratorAddModel): Observable<ModeratorModel> {
+    return of({} as ModeratorModel);
+  }
+
+  updateCollectionModerator(providerId: string, data: ModeratorAddModel): Observable<ModeratorModel> {
+    return of({} as ModeratorModel);
+  }
+
+  deleteCollectionModerator(providerId: string, userId: string): Observable<void> {
+    const baseUrl = ``;
+
+    return this.jsonApiService.delete(baseUrl);
+  }
+
+  searchUsers(value: string, page = 1): Observable<PaginatedData<ModeratorAddModel[]>> {
+    const baseUrl = `${environment.apiUrl}/users/?filter[full_name]=${value}&page=${page}`;
+
+    return this.jsonApiService
+      .get<JsonApiResponseWithPaging<UserGetResponse[], null>>(baseUrl)
+      .pipe(map((response) => ModerationMapper.fromUsersWithPaginationGetResponse(response)));
+  }
+}
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.html b/src/app/features/registries/components/new-registration/new-registration.component.html
index f454762fd..52a6d56c9 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.html
+++ b/src/app/features/registries/components/new-registration/new-registration.component.html
@@ -6,3 +6,46 @@
     {{ 'registries.new.infoText2' | translate }}
   </p>
 </section>
+<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
+  <p-card class="w-full">
+    <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '1' }}</h2>
+    <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step1' | translate }}</p>
+    <div class="flex gap-2">
+      <p-button
+        class="btn-full-width w-2 font-bold"
+        severity="info"
+        [label]="'common.buttons.yes' | translate"
+        [raised]="isProjectRegistration"
+        (click)="isProjectRegistration = true"
+      />
+      <p-button
+        class="btn-full-width w-2"
+        severity="info"
+        [label]="'common.buttons.no' | translate"
+        [raised]="!isProjectRegistration"
+        (click)="isProjectRegistration = false"
+      />
+    </div>
+  </p-card>
+  <p-card class="w-full">
+    <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
+    <p class="mb-3 text-lg font-bold">{{ 'registries.new.steps.step2' | translate }}</p>
+    <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
+    <div class="flex">
+      <p-select
+        [options]="projects()"
+        (onChange)="onSelectProject($event.value)"
+        placeholder="Version"
+        class="w-full"
+        styleClass="select-version"
+      />
+    </div>
+  </p-card>
+  <p-card class="w-full">
+    <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (isProjectRegistration ? '3' : '2') }}</h2>
+    <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step3' | translate }}</p>
+    <div class="flex">
+      <p-button> </p-button>
+    </div>
+  </p-card>
+</section>
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
index 8aae7fbff..71401113c 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.ts
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -1,20 +1,45 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { Select } from 'primeng/select';
+
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 
 import { SubHeaderComponent } from '@osf/shared/components';
 
+import { Project } from '../../models';
+import { GetProjects, GetProviders, RegistriesSelectors } from '../../store';
+
 @Component({
   selector: 'osf-new-registration',
-  imports: [SubHeaderComponent, TranslatePipe],
+  imports: [SubHeaderComponent, TranslatePipe, Card, Button, Select],
   templateUrl: './new-registration.component.html',
   styleUrl: './new-registration.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NewRegistrationComponent {
   private readonly fb = inject(FormBuilder);
+  protected readonly projects = select(RegistriesSelectors.getProjects);
+  protected readonly providers = select(RegistriesSelectors.getProviders);
+  protected actions = createDispatchMap({
+    getProjects: GetProjects,
+    getProviders: GetProviders,
+  });
+  isProjectRegistration = true;
   draftForm = this.fb.group({
     provider: [''],
   });
+
+  constructor() {
+    this.actions.getProjects();
+    this.actions.getProviders();
+  }
+
+  onSelectProject(project: Project) {
+    console.log('Project selected', project);
+  }
 }
diff --git a/src/app/features/registries/mappers/index.ts b/src/app/features/registries/mappers/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/mappers/projects.mapper.ts b/src/app/features/registries/mappers/projects.mapper.ts
new file mode 100644
index 000000000..4583e4583
--- /dev/null
+++ b/src/app/features/registries/mappers/projects.mapper.ts
@@ -0,0 +1,11 @@
+import { Project } from '../models';
+import { ProjectsResponseJsonApi } from '../models/projects-json-api.model';
+
+export class ProjectsMapper {
+  static fromProjectsResponse(response: ProjectsResponseJsonApi): Project[] {
+    return response.data.map((item) => ({
+      id: item.id,
+      title: item.attributes.title,
+    }));
+  }
+}
diff --git a/src/app/features/registries/mappers/providers.mapper.ts b/src/app/features/registries/mappers/providers.mapper.ts
new file mode 100644
index 000000000..445769db9
--- /dev/null
+++ b/src/app/features/registries/mappers/providers.mapper.ts
@@ -0,0 +1,11 @@
+import { Provider } from '../models';
+import { ProvidersResponseJsonApi } from '../models/providers-json-api.model';
+
+export class ProvidersMapper {
+  static fromProvidersResponse(response: ProvidersResponseJsonApi): Provider[] {
+    return response.data.map((item) => ({
+      id: item.id,
+      name: item.attributes.name,
+    }));
+  }
+}
diff --git a/src/app/features/registries/models/index.ts b/src/app/features/registries/models/index.ts
index e69de29bb..e5d1d4825 100644
--- a/src/app/features/registries/models/index.ts
+++ b/src/app/features/registries/models/index.ts
@@ -0,0 +1,2 @@
+export * from './project';
+export * from './provider.model';
diff --git a/src/app/features/registries/models/project.ts b/src/app/features/registries/models/project.ts
new file mode 100644
index 000000000..870a40589
--- /dev/null
+++ b/src/app/features/registries/models/project.ts
@@ -0,0 +1,4 @@
+export interface Project {
+  id: string;
+  title: string;
+}
diff --git a/src/app/features/registries/models/projects-json-api.model.ts b/src/app/features/registries/models/projects-json-api.model.ts
new file mode 100644
index 000000000..0ce2e620a
--- /dev/null
+++ b/src/app/features/registries/models/projects-json-api.model.ts
@@ -0,0 +1,13 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface ProjectsResponseJsonApi {
+  data: ProjectsDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type ProjectsDataJsonApi = ApiData<ProjectsAttributesJsonApi, null, null, null>;
+
+interface ProjectsAttributesJsonApi {
+  title: string;
+}
diff --git a/src/app/features/registries/models/provider.model.ts b/src/app/features/registries/models/provider.model.ts
index e69de29bb..aa49d5327 100644
--- a/src/app/features/registries/models/provider.model.ts
+++ b/src/app/features/registries/models/provider.model.ts
@@ -0,0 +1,4 @@
+export interface Provider {
+  id: string;
+  name: string;
+}
diff --git a/src/app/features/registries/models/provider-json-api.model.ts b/src/app/features/registries/models/providers-json-api.model.ts
similarity index 84%
rename from src/app/features/registries/models/provider-json-api.model.ts
rename to src/app/features/registries/models/providers-json-api.model.ts
index 07f8bca6e..1b69240ff 100644
--- a/src/app/features/registries/models/provider-json-api.model.ts
+++ b/src/app/features/registries/models/providers-json-api.model.ts
@@ -9,6 +9,5 @@ export interface ProvidersResponseJsonApi {
 export type ProviderDataJsonApi = ApiData<ProviderAttributesJsonApi, null, null, null>;
 
 interface ProviderAttributesJsonApi {
-  full_name: string;
-  permission_group: 'moderator' | 'admin';
+  name: string;
 }
diff --git a/src/app/features/registries/services/projects.service.ts b/src/app/features/registries/services/projects.service.ts
index 1756bf9a5..6d051a176 100644
--- a/src/app/features/registries/services/projects.service.ts
+++ b/src/app/features/registries/services/projects.service.ts
@@ -1,6 +1,28 @@
-import { Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+
+import { ProjectsMapper } from '../mappers/projects.mapper';
+import { Project } from '../models';
+import { ProjectsResponseJsonApi } from '../models/projects-json-api.model';
+
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
-export class ProjectsService {}
+export class ProjectsService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getProjects(): Observable<Project[]> {
+    const params: Record<string, unknown> = {
+      'filter[current_user_permissions]': 'admin',
+    };
+    return this.jsonApiService
+      .get<ProjectsResponseJsonApi>(`${this.apiUrl}/nodes/`, params)
+      .pipe(map((response) => ProjectsMapper.fromProjectsResponse(response)));
+  }
+}
diff --git a/src/app/features/registries/services/providers.service.ts b/src/app/features/registries/services/providers.service.ts
index f7c20ae97..371016e65 100644
--- a/src/app/features/registries/services/providers.service.ts
+++ b/src/app/features/registries/services/providers.service.ts
@@ -1,6 +1,28 @@
-import { Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+
+import { ProvidersMapper } from '../mappers/providers.mapper';
+import { Provider } from '../models';
+import { ProvidersResponseJsonApi } from '../models/providers-json-api.model';
+
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
-export class ProvidersService {}
+export class ProvidersService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getProviders(): Observable<Provider[]> {
+    const params: Record<string, unknown> = {
+      'filter[current_user_permissions]': 'admin',
+    };
+    return this.jsonApiService
+      .get<ProvidersResponseJsonApi>(`${this.apiUrl}/nodes/`, params)
+      .pipe(map((response) => ProvidersMapper.fromProvidersResponse(response)));
+  }
+}
diff --git a/src/app/features/registries/services/registries.service.ts b/src/app/features/registries/services/registries.service.ts
index 6ba6815b3..65f7e9691 100644
--- a/src/app/features/registries/services/registries.service.ts
+++ b/src/app/features/registries/services/registries.service.ts
@@ -1,6 +1,22 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
-export class RegistriesService {}
+export class RegistriesService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  // getProjects(): Observable<Project[]> {
+  //   const params: Record<string, unknown> = {
+  //     'filter[current_user_permissions]': 'admin',
+  //   };
+  //   return this.jsonApiService
+  //     .get<ProjectsResponseJsonApi>(`${this.apiUrl}/nodes/`, params)
+  //     .pipe(map((response) => ProjectsMapper.fromProjectsResponse(response)));
+  // }
+}
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index 6d8c241cf..0d5dadd4a 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -1,3 +1,7 @@
 export class GetProviders {
   static readonly type = '[Registries]  Get Providers';
 }
+
+export class GetProjects {
+  static readonly type = '[Registries] Get Projects';
+}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index a498212de..cf237eade 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -1,11 +1,9 @@
 import { AsyncStateModel } from '@osf/shared/models';
 
-export interface Provider {
-  id: string;
-  title: string;
-}
+import { Project, Provider } from '../models';
 
 export interface RegistriesStateModel {
   providers: AsyncStateModel<Provider[]>;
   currentProviderId: string | null;
+  projects: AsyncStateModel<Project[]>;
 }
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 01b9a6aee..32cee3732 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -1,11 +1,18 @@
 import { Selector } from '@ngxs/store';
 
-import { Provider, RegistriesStateModel } from './registries.model';
+import { Project, Provider } from '../models';
+
+import { RegistriesStateModel } from './registries.model';
 import { RegistriesState } from './registries.state';
 
 export class RegistriesSelectors {
   @Selector([RegistriesState])
   static getProviders(state: RegistriesStateModel): Provider[] {
-    return state.providers.data || [];
+    return state.providers.data;
+  }
+
+  @Selector([RegistriesState])
+  static getProjects(state: RegistriesStateModel): Project[] {
+    return state.projects.data;
   }
 }
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index 4ec5e4bb5..a5e509280 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -1,9 +1,13 @@
-import { State } from '@ngxs/store';
+import { Action, State, StateContext } from '@ngxs/store';
+
+import { throwError } from 'rxjs';
 
 import { Injectable } from '@angular/core';
 
-import { ProvidersService } from '../services';
+import { Project } from '../models';
+import { ProjectsService, ProvidersService } from '../services';
 
+import { GetProjects, GetProviders } from './registries.actions';
 import { RegistriesStateModel } from './registries.model';
 
 const DefaultState: RegistriesStateModel = {
@@ -13,6 +17,11 @@ const DefaultState: RegistriesStateModel = {
     error: null,
   },
   currentProviderId: null,
+  projects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
 };
 
 @State<RegistriesStateModel>({
@@ -21,5 +30,70 @@ const DefaultState: RegistriesStateModel = {
 })
 @Injectable()
 export class RegistriesState {
-  constructor(private providersService: ProvidersService) {}
+  constructor(
+    private providersService: ProvidersService,
+    private projectsService: ProjectsService
+  ) {}
+
+  @Action(GetProjects)
+  getProjects({ patchState }: StateContext<RegistriesStateModel>) {
+    patchState({
+      projects: {
+        ...DefaultState.projects,
+        isLoading: true,
+      },
+    });
+    return this.projectsService.getProjects().subscribe({
+      next: (projects: Project[]) => {
+        patchState({
+          projects: {
+            data: projects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      },
+      error: (error) => {
+        patchState({
+          projects: { ...DefaultState.projects, isLoading: false, error },
+        });
+      },
+    });
+  }
+
+  @Action(GetProviders)
+  getProviders({ patchState }: StateContext<RegistriesStateModel>) {
+    patchState({
+      providers: {
+        ...DefaultState.providers,
+        isLoading: true,
+      },
+    });
+
+    return this.providersService.getProviders().subscribe({
+      next: (providers) => {
+        patchState({
+          providers: {
+            data: providers,
+            isLoading: false,
+            error: null,
+          },
+        });
+      },
+      error: (error) => {
+        patchState({
+          providers: {
+            ...DefaultState.providers,
+            isLoading: false,
+            error,
+          },
+        });
+      },
+    });
+  }
+
+  private handleError(ctx: StateContext<RegistriesStateModel>, error: Error) {
+    ctx.patchState({});
+    return throwError(() => error);
+  }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 11def31d2..787e54439 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -18,7 +18,9 @@
       "skip": "Skip",
       "done": "Done",
       "select": "Select",
-      "deselect": "Deselect"
+      "deselect": "Deselect",
+      "yes": "Yes",
+      "no": "No"
     },
     "search": {
       "title": "Search",
@@ -340,10 +342,11 @@
       "infoText1": "You are submitting to OSF Registries.",
       "infoText2": "to learn more about other hosted registries",
       "steps": {
+        "title": "Step",
         "step1": "Do you have content for registration in an existing OSF project?",
         "step2": "Which project do you want to register?",
         "step3": "Which type of registration would you like to create?",
-        "stepTwoInfo": "If your project includes components, you can select which components to include or exclude at the end of the registration."
+        "step2InfoText": "If your project includes components, you can select which components to include or exclude at the end of the registration."
       }
     }
   },

From 782ed307c1f5bea9468991413dfcac47c816f3a5 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Mon, 23 Jun 2025 14:59:06 +0300
Subject: [PATCH 03/15] feat(registries): add first registries page

---
 .../new-registration.component.html           | 66 ++++++++++++-------
 .../new-registration.component.ts             | 50 +++++++++++---
 .../models/registries-json-api.model.ts       | 23 +++++++
 .../registries/models/registries.model.ts     |  3 +
 .../registries/services/projects.service.ts   |  2 +-
 .../registries/services/providers.service.ts  |  5 +-
 .../registries/services/registries.service.ts | 36 +++++++---
 .../registries/store/registries.actions.ts    |  5 ++
 .../registries/store/registries.model.ts      |  3 +-
 .../registries/store/registries.selectors.ts  |  5 ++
 .../registries/store/registries.state.ts      | 57 ++++++++++++++--
 src/assets/i18n/en.json                       |  3 +-
 12 files changed, 206 insertions(+), 52 deletions(-)
 create mode 100644 src/app/features/registries/models/registries-json-api.model.ts
 create mode 100644 src/app/features/registries/models/registries.model.ts

diff --git a/src/app/features/registries/components/new-registration/new-registration.component.html b/src/app/features/registries/components/new-registration/new-registration.component.html
index 52a6d56c9..6116c6feb 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.html
+++ b/src/app/features/registries/components/new-registration/new-registration.component.html
@@ -15,37 +15,57 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '1' }}</h2>
         class="btn-full-width w-2 font-bold"
         severity="info"
         [label]="'common.buttons.yes' | translate"
-        [raised]="isProjectRegistration"
-        (click)="isProjectRegistration = true"
+        [raised]="fromProject"
+        (click)="toggleFromProject()"
       />
       <p-button
         class="btn-full-width w-2"
         severity="info"
         [label]="'common.buttons.no' | translate"
-        [raised]="!isProjectRegistration"
-        (click)="isProjectRegistration = false"
+        [raised]="!fromProject"
+        (click)="toggleFromProject()"
       />
     </div>
   </p-card>
-  <p-card class="w-full">
-    <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
-    <p class="mb-3 text-lg font-bold">{{ 'registries.new.steps.step2' | translate }}</p>
-    <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
-    <div class="flex">
-      <p-select
-        [options]="projects()"
-        (onChange)="onSelectProject($event.value)"
-        placeholder="Version"
-        class="w-full"
-        styleClass="select-version"
+  <form [formGroup]="draftForm" (ngSubmit)="createDraft()" class="flex flex-column gap-4">
+    @if (fromProject) {
+      <p-card class="w-full">
+        <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
+        <p class="mb-3 text-lg font-bold">{{ 'registries.new.steps.step2' | translate }}</p>
+        <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
+        <div class="flex">
+          <p-select
+            formControlName="provider"
+            [options]="projects()"
+            optionLabel="title"
+            optionValue="id"
+            (onChange)="onSelectProject($event.value)"
+            class="w-6"
+          />
+        </div>
+      </p-card>
+    }
+    <p-card class="w-full">
+      <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (fromProject ? '3' : '2') }}</h2>
+      <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step3' | translate }}</p>
+      <div class="flex">
+        <p-select
+          formControlName="provider"
+          [options]="providers()"
+          optionLabel="name"
+          optionValue="id"
+          (onChange)="onSelectProvider($event.value)"
+          class="w-6"
+        />
+      </div>
+    </p-card>
+    <div class="flex justify-content-end">
+      <p-button
+        [label]="'registries.new.createDraft' | translate"
+        [disabled]="draftForm.invalid"
+        type="submit"
+        [loading]="isDraftSubmitting()"
       />
     </div>
-  </p-card>
-  <p-card class="w-full">
-    <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (isProjectRegistration ? '3' : '2') }}</h2>
-    <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step3' | translate }}</p>
-    <div class="flex">
-      <p-button> </p-button>
-    </div>
-  </p-card>
+  </form>
 </section>
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
index 71401113c..217511821 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.ts
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -7,31 +7,36 @@ import { Card } from 'primeng/card';
 import { Select } from 'primeng/select';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { SubHeaderComponent } from '@osf/shared/components';
+import { ToastService } from '@osf/shared/services';
 
-import { Project } from '../../models';
-import { GetProjects, GetProviders, RegistriesSelectors } from '../../store';
+import { CreateDraft, GetProjects, GetProviders, RegistriesSelectors } from '../../store';
 
 @Component({
   selector: 'osf-new-registration',
-  imports: [SubHeaderComponent, TranslatePipe, Card, Button, Select],
+  imports: [SubHeaderComponent, TranslatePipe, Card, Button, ReactiveFormsModule, Select],
   templateUrl: './new-registration.component.html',
   styleUrl: './new-registration.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NewRegistrationComponent {
   private readonly fb = inject(FormBuilder);
+  private readonly toastService = inject(ToastService);
   protected readonly projects = select(RegistriesSelectors.getProjects);
   protected readonly providers = select(RegistriesSelectors.getProviders);
+  protected readonly isDraftSubmitting = select(RegistriesSelectors.isDraftSubmitting);
   protected actions = createDispatchMap({
     getProjects: GetProjects,
     getProviders: GetProviders,
+    createDraft: CreateDraft,
   });
-  isProjectRegistration = true;
+  fromProject = false;
+
   draftForm = this.fb.group({
-    provider: [''],
+    provider: ['', Validators.required],
+    project: [''],
   });
 
   constructor() {
@@ -39,7 +44,36 @@ export class NewRegistrationComponent {
     this.actions.getProviders();
   }
 
-  onSelectProject(project: Project) {
-    console.log('Project selected', project);
+  onSelectProject(projectId: string) {
+    this.draftForm.patchValue({
+      project: projectId,
+    });
+  }
+
+  onSelectProvider(providerId: string) {
+    this.draftForm.patchValue({
+      provider: providerId,
+    });
+  }
+
+  toggleFromProject() {
+    this.fromProject = !this.fromProject;
+    this.draftForm.get('project')?.setValidators(this.fromProject ? Validators.required : null);
+    this.draftForm.get('project')?.updateValueAndValidity();
+  }
+
+  createDraft() {
+    const { provider, project } = this.draftForm.value;
+
+    if (this.draftForm.valid) {
+      this.actions
+        .createDraft({
+          registrationSchemaId: provider!,
+          projectId: this.fromProject ? (project ?? undefined) : undefined,
+        })
+        .subscribe(() => {
+          this.toastService.showSuccess('Draft created successfully');
+        });
+    }
   }
 }
diff --git a/src/app/features/registries/models/registries-json-api.model.ts b/src/app/features/registries/models/registries-json-api.model.ts
new file mode 100644
index 000000000..b9535ab03
--- /dev/null
+++ b/src/app/features/registries/models/registries-json-api.model.ts
@@ -0,0 +1,23 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface RegistrationResponseJsonApi {
+  data: RegistrationDataJsonApi;
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type RegistrationDataJsonApi = ApiData<RegistrationAttributesJsonApi, null, null, null>;
+
+interface RegistrationAttributesJsonApi {
+  category: string;
+  current_user_permissions: string[];
+  date_created: string;
+  datetime_updated: string;
+  description: string;
+  has_project: boolean;
+  node_license: string | null;
+  registration_metadata: Record<string, unknown>;
+  registration_responses: Record<string, unknown>;
+  tags: string[];
+  title: string;
+}
diff --git a/src/app/features/registries/models/registries.model.ts b/src/app/features/registries/models/registries.model.ts
new file mode 100644
index 000000000..e39086194
--- /dev/null
+++ b/src/app/features/registries/models/registries.model.ts
@@ -0,0 +1,3 @@
+export interface Registration {
+  id: string;
+}
diff --git a/src/app/features/registries/services/projects.service.ts b/src/app/features/registries/services/projects.service.ts
index 6d051a176..414e5e497 100644
--- a/src/app/features/registries/services/projects.service.ts
+++ b/src/app/features/registries/services/projects.service.ts
@@ -22,7 +22,7 @@ export class ProjectsService {
       'filter[current_user_permissions]': 'admin',
     };
     return this.jsonApiService
-      .get<ProjectsResponseJsonApi>(`${this.apiUrl}/nodes/`, params)
+      .get<ProjectsResponseJsonApi>(`${this.apiUrl}/users/me/nodes/`, params)
       .pipe(map((response) => ProjectsMapper.fromProjectsResponse(response)));
   }
 }
diff --git a/src/app/features/registries/services/providers.service.ts b/src/app/features/registries/services/providers.service.ts
index 371016e65..721234bd8 100644
--- a/src/app/features/registries/services/providers.service.ts
+++ b/src/app/features/registries/services/providers.service.ts
@@ -18,11 +18,8 @@ export class ProvidersService {
   private readonly jsonApiService = inject(JsonApiService);
 
   getProviders(): Observable<Provider[]> {
-    const params: Record<string, unknown> = {
-      'filter[current_user_permissions]': 'admin',
-    };
     return this.jsonApiService
-      .get<ProvidersResponseJsonApi>(`${this.apiUrl}/nodes/`, params)
+      .get<ProvidersResponseJsonApi>(`${this.apiUrl}/providers/registrations/osf/schemas/`)
       .pipe(map((response) => ProvidersMapper.fromProvidersResponse(response)));
   }
 }
diff --git a/src/app/features/registries/services/registries.service.ts b/src/app/features/registries/services/registries.service.ts
index 65f7e9691..cd92686fd 100644
--- a/src/app/features/registries/services/registries.service.ts
+++ b/src/app/features/registries/services/registries.service.ts
@@ -1,7 +1,11 @@
+import { Observable } from 'rxjs';
+
 import { inject, Injectable } from '@angular/core';
 
 import { JsonApiService } from '@osf/core/services';
 
+import { RegistrationDataJsonApi } from '../models/registries-json-api.model';
+
 import { environment } from 'src/environments/environment';
 
 @Injectable({
@@ -11,12 +15,28 @@ export class RegistriesService {
   private apiUrl = environment.apiUrl;
   private readonly jsonApiService = inject(JsonApiService);
 
-  // getProjects(): Observable<Project[]> {
-  //   const params: Record<string, unknown> = {
-  //     'filter[current_user_permissions]': 'admin',
-  //   };
-  //   return this.jsonApiService
-  //     .get<ProjectsResponseJsonApi>(`${this.apiUrl}/nodes/`, params)
-  //     .pipe(map((response) => ProjectsMapper.fromProjectsResponse(response)));
-  // }
+  createDraft(registrationSchemaId: string, projectId?: string | undefined): Observable<RegistrationDataJsonApi> {
+    const payload = {
+      data: {
+        type: 'draft_registrations',
+        relationships: {
+          branched_from: projectId
+            ? {
+                data: {
+                  type: 'nodes',
+                  id: projectId,
+                },
+              }
+            : undefined,
+          registration_schema: {
+            data: {
+              type: 'registration-schemas',
+              id: registrationSchemaId,
+            },
+          },
+        },
+      },
+    };
+    return this.jsonApiService.post(`${this.apiUrl}/draft_registrations/`, payload);
+  }
 }
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index 0d5dadd4a..6afb4f009 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -5,3 +5,8 @@ export class GetProviders {
 export class GetProjects {
   static readonly type = '[Registries] Get Projects';
 }
+
+export class CreateDraft {
+  static readonly type = '[Registries]  Create Draft';
+  constructor(public payload: { registrationSchemaId: string; projectId?: string }) {}
+}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index cf237eade..cf8d51dfe 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -1,9 +1,10 @@
 import { AsyncStateModel } from '@osf/shared/models';
 
 import { Project, Provider } from '../models';
+import { Registration } from '../models/registries.model';
 
 export interface RegistriesStateModel {
   providers: AsyncStateModel<Provider[]>;
-  currentProviderId: string | null;
   projects: AsyncStateModel<Project[]>;
+  registrations: AsyncStateModel<Registration | null>;
 }
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 32cee3732..f63694d63 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -15,4 +15,9 @@ export class RegistriesSelectors {
   static getProjects(state: RegistriesStateModel): Project[] {
     return state.projects.data;
   }
+
+  @Selector([RegistriesState])
+  static isDraftSubmitting(state: RegistriesStateModel): boolean {
+    return state.registrations.isSubmitting ?? false;
+  }
 }
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index a5e509280..08f9a352f 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -1,13 +1,14 @@
 import { Action, State, StateContext } from '@ngxs/store';
 
 import { throwError } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
 
 import { Injectable } from '@angular/core';
 
 import { Project } from '../models';
-import { ProjectsService, ProvidersService } from '../services';
+import { ProjectsService, ProvidersService, RegistriesService } from '../services';
 
-import { GetProjects, GetProviders } from './registries.actions';
+import { CreateDraft, GetProjects, GetProviders } from './registries.actions';
 import { RegistriesStateModel } from './registries.model';
 
 const DefaultState: RegistriesStateModel = {
@@ -16,12 +17,17 @@ const DefaultState: RegistriesStateModel = {
     isLoading: false,
     error: null,
   },
-  currentProviderId: null,
   projects: {
     data: [],
     isLoading: false,
     error: null,
   },
+  registrations: {
+    isLoading: false,
+    data: null,
+    isSubmitting: false,
+    error: null,
+  },
 };
 
 @State<RegistriesStateModel>({
@@ -32,7 +38,8 @@ const DefaultState: RegistriesStateModel = {
 export class RegistriesState {
   constructor(
     private providersService: ProvidersService,
-    private projectsService: ProjectsService
+    private projectsService: ProjectsService,
+    private registriesService: RegistriesService
   ) {}
 
   @Action(GetProjects)
@@ -92,8 +99,46 @@ export class RegistriesState {
     });
   }
 
-  private handleError(ctx: StateContext<RegistriesStateModel>, error: Error) {
-    ctx.patchState({});
+  @Action(CreateDraft)
+  createDraft(ctx: StateContext<RegistriesStateModel>, { payload }: CreateDraft) {
+    ctx.patchState({
+      registrations: {
+        ...ctx.getState().registrations,
+        isSubmitting: true,
+      },
+    });
+
+    return this.registriesService.createDraft(payload.registrationSchemaId, payload.projectId).pipe(
+      tap(() => {
+        ctx.patchState({
+          registrations: {
+            ...ctx.getState().registrations,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => {
+        ctx.patchState({
+          registrations: {
+            ...ctx.getState().registrations,
+            isSubmitting: false,
+            error: error.message,
+          },
+        });
+        return this.handleError(ctx, 'registrations', error);
+      })
+    );
+  }
+
+  private handleError(ctx: StateContext<RegistriesStateModel>, section: keyof RegistriesStateModel, error: Error) {
+    ctx.patchState({
+      [section]: {
+        ...ctx.getState()[section],
+        isLoading: false,
+        error: error.message,
+      },
+    });
     return throwError(() => error);
   }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 787e54439..8097ab69a 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -347,7 +347,8 @@
         "step2": "Which project do you want to register?",
         "step3": "Which type of registration would you like to create?",
         "step2InfoText": "If your project includes components, you can select which components to include or exclude at the end of the registration."
-      }
+      },
+      "createDraft": "Create draft"
     }
   },
   "myProfile": {

From ff1149b04462a2a4703867c66785478952e4e721 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Mon, 23 Jun 2025 17:36:43 +0300
Subject: [PATCH 04/15] feat(registries): fix comments

---
 src/app/app.routes.ts                         |  2 +
 .../core/constants/ngxs-states.constant.ts    |  2 -
 .../institutions/moderation.service.ts        | 51 -------------------
 .../new-registration.component.ts             |  9 +++-
 src/app/features/registries/mappers/index.ts  |  2 +
 .../registries/mappers/projects.mapper.ts     |  3 +-
 .../registries/mappers/providers.mapper.ts    |  3 +-
 src/app/features/registries/models/index.ts   |  4 ++
 .../registries/registries.component.ts        |  4 +-
 9 files changed, 20 insertions(+), 60 deletions(-)
 delete mode 100644 src/app/features/institutions/moderation.service.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index f49f18beb..48df2606d 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -8,6 +8,7 @@ import { MyProfileResourceFiltersOptionsState } from './features/my-profile/comp
 import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
 import { MyProfileState } from './features/my-profile/store';
 import { ContributorsState } from './features/project/contributors/store';
+import { RegistriesState } from './features/registries/store';
 import { ResourceFiltersOptionsState } from './features/search/components/filters/store';
 import { ResourceFiltersState } from './features/search/components/resource-filters/store';
 import { SearchState } from './features/search/store';
@@ -166,6 +167,7 @@ export const routes: Routes = [
         path: 'registries',
         loadComponent: () =>
           import('./features/registries/registries.component').then((mod) => mod.RegistriesComponent),
+        providers: [provideStates([RegistriesState])],
         children: [
           {
             path: 'new',
diff --git a/src/app/core/constants/ngxs-states.constant.ts b/src/app/core/constants/ngxs-states.constant.ts
index b54e6fd70..7f622dcdd 100644
--- a/src/app/core/constants/ngxs-states.constant.ts
+++ b/src/app/core/constants/ngxs-states.constant.ts
@@ -9,7 +9,6 @@ import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
 import { SettingsState } from '@osf/features/project/settings/store';
 import { WikiState } from '@osf/features/project/wiki/store/wiki.state';
-import { RegistriesState } from '@osf/features/registries/store';
 import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
 import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
@@ -35,5 +34,4 @@ export const STATES = [
   WikiState,
   MeetingsState,
   RegistrationsState,
-  RegistriesState,
 ];
diff --git a/src/app/features/institutions/moderation.service.ts b/src/app/features/institutions/moderation.service.ts
deleted file mode 100644
index 1ba57fd09..000000000
--- a/src/app/features/institutions/moderation.service.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { map, Observable, of } from 'rxjs';
-
-import { inject, Injectable } from '@angular/core';
-
-import { JsonApiResponseWithPaging, UserGetResponse } from '@osf/core/models';
-import { JsonApiService } from '@osf/core/services';
-import { PaginatedData } from '@osf/shared/models';
-
-import { ModerationMapper } from '../mappers';
-import { ModeratorAddModel, ModeratorModel, ModeratorResponseJsonApi } from '../models';
-
-import { environment } from 'src/environments/environment';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ModerationService {
-  private readonly tesModeratorsUrl = 'assets/collection-moderators.json';
-  private readonly jsonApiService = inject(JsonApiService);
-
-  getCollectionModerators(providerId: string): Observable<ModeratorModel[]> {
-    return (
-      this.jsonApiService
-        // .get<ModeratorResponseJsonApi>(`${this.baseUrl}/providers/collections/${providerId}/moderators/`)
-        .get<ModeratorResponseJsonApi>(this.tesModeratorsUrl)
-        .pipe(map((response) => response.data.map((moderator) => ModerationMapper.fromModeratorResponse(moderator))))
-    );
-  }
-
-  addCollectionModerator(providerId: string, data: ModeratorAddModel): Observable<ModeratorModel> {
-    return of({} as ModeratorModel);
-  }
-
-  updateCollectionModerator(providerId: string, data: ModeratorAddModel): Observable<ModeratorModel> {
-    return of({} as ModeratorModel);
-  }
-
-  deleteCollectionModerator(providerId: string, userId: string): Observable<void> {
-    const baseUrl = ``;
-
-    return this.jsonApiService.delete(baseUrl);
-  }
-
-  searchUsers(value: string, page = 1): Observable<PaginatedData<ModeratorAddModel[]>> {
-    const baseUrl = `${environment.apiUrl}/users/?filter[full_name]=${value}&page=${page}`;
-
-    return this.jsonApiService
-      .get<JsonApiResponseWithPaging<UserGetResponse[], null>>(baseUrl)
-      .pipe(map((response) => ModerationMapper.fromUsersWithPaginationGetResponse(response)));
-  }
-}
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
index 217511821..0bbab2b19 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.ts
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -6,7 +6,7 @@ import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Select } from 'primeng/select';
 
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { SubHeaderComponent } from '@osf/shared/components';
@@ -42,6 +42,13 @@ export class NewRegistrationComponent {
   constructor() {
     this.actions.getProjects();
     this.actions.getProviders();
+    effect(() => {
+      //set the provider value when the providers are loaded
+      const provider = this.draftForm.get('provider')?.value;
+      if (!provider) {
+        this.draftForm.get('provider')?.setValue(this.providers()[0]?.id);
+      }
+    });
   }
 
   onSelectProject(projectId: string) {
diff --git a/src/app/features/registries/mappers/index.ts b/src/app/features/registries/mappers/index.ts
index e69de29bb..43fcc678e 100644
--- a/src/app/features/registries/mappers/index.ts
+++ b/src/app/features/registries/mappers/index.ts
@@ -0,0 +1,2 @@
+export * from './projects.mapper';
+export * from './providers.mapper';
diff --git a/src/app/features/registries/mappers/projects.mapper.ts b/src/app/features/registries/mappers/projects.mapper.ts
index 4583e4583..df0729851 100644
--- a/src/app/features/registries/mappers/projects.mapper.ts
+++ b/src/app/features/registries/mappers/projects.mapper.ts
@@ -1,5 +1,4 @@
-import { Project } from '../models';
-import { ProjectsResponseJsonApi } from '../models/projects-json-api.model';
+import { Project, ProjectsResponseJsonApi } from '../models';
 
 export class ProjectsMapper {
   static fromProjectsResponse(response: ProjectsResponseJsonApi): Project[] {
diff --git a/src/app/features/registries/mappers/providers.mapper.ts b/src/app/features/registries/mappers/providers.mapper.ts
index 445769db9..9442ade0a 100644
--- a/src/app/features/registries/mappers/providers.mapper.ts
+++ b/src/app/features/registries/mappers/providers.mapper.ts
@@ -1,5 +1,4 @@
-import { Provider } from '../models';
-import { ProvidersResponseJsonApi } from '../models/providers-json-api.model';
+import { Provider, ProvidersResponseJsonApi } from '../models';
 
 export class ProvidersMapper {
   static fromProvidersResponse(response: ProvidersResponseJsonApi): Provider[] {
diff --git a/src/app/features/registries/models/index.ts b/src/app/features/registries/models/index.ts
index e5d1d4825..f18645392 100644
--- a/src/app/features/registries/models/index.ts
+++ b/src/app/features/registries/models/index.ts
@@ -1,2 +1,6 @@
 export * from './project';
+export * from './projects-json-api.model';
 export * from './provider.model';
+export * from './providers-json-api.model';
+export * from './registries.model';
+export * from './registries-json-api.model';
diff --git a/src/app/features/registries/registries.component.ts b/src/app/features/registries/registries.component.ts
index a3009cbcc..78716bee1 100644
--- a/src/app/features/registries/registries.component.ts
+++ b/src/app/features/registries/registries.component.ts
@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'osf-registries',
-  imports: [RouterModule],
+  imports: [RouterOutlet],
   templateUrl: './registries.component.html',
   styleUrl: './registries.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

From f3a589ac3babe97ad18eda22cab3266ed81c6caf Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Tue, 24 Jun 2025 10:42:14 +0300
Subject: [PATCH 05/15] feat(registries): setup routes

---
 .../custom-step/custom-step.component.html    |  1 +
 .../custom-step/custom-step.component.scss    |  0
 .../custom-step/custom-step.component.spec.ts | 22 +++++++++++
 .../custom-step/custom-step.component.ts      | 10 +++++
 .../components/drafts/drafts.component.html   |  2 +
 .../components/drafts/drafts.component.scss   |  0
 .../drafts/drafts.component.spec.ts           | 22 +++++++++++
 .../components/drafts/drafts.component.ts     | 11 ++++++
 .../contributors/contributors.component.html  |  1 +
 .../contributors/contributors.component.scss  |  0
 .../contributors.component.spec.ts            | 22 +++++++++++
 .../contributors/contributors.component.ts    | 10 +++++
 .../metadata/license/license.component.html   |  1 +
 .../metadata/license/license.component.scss   |  0
 .../license/license.component.spec.ts         | 22 +++++++++++
 .../metadata/license/license.component.ts     | 10 +++++
 .../metadata/metadata.component.html          | 18 +++++++++
 .../metadata/metadata.component.scss          |  0
 .../metadata/metadata.component.spec.ts       | 22 +++++++++++
 .../components/metadata/metadata.component.ts | 37 +++++++++++++++++++
 .../metadata/subjects/subjects.component.html |  1 +
 .../metadata/subjects/subjects.component.scss |  0
 .../subjects/subjects.component.spec.ts       | 22 +++++++++++
 .../metadata/subjects/subjects.component.ts   | 10 +++++
 .../metadata/tags/tags.component.html         |  1 +
 .../metadata/tags/tags.component.scss         |  0
 .../metadata/tags/tags.component.spec.ts      | 22 +++++++++++
 .../metadata/tags/tags.component.ts           | 10 +++++
 .../components/review/review.component.html   |  1 +
 .../components/review/review.component.scss   |  0
 .../review/review.component.spec.ts           | 22 +++++++++++
 .../components/review/review.component.ts     | 10 +++++
 32 files changed, 310 insertions(+)
 create mode 100644 src/app/features/registries/components/custom-step/custom-step.component.html
 create mode 100644 src/app/features/registries/components/custom-step/custom-step.component.scss
 create mode 100644 src/app/features/registries/components/custom-step/custom-step.component.spec.ts
 create mode 100644 src/app/features/registries/components/custom-step/custom-step.component.ts
 create mode 100644 src/app/features/registries/components/drafts/drafts.component.html
 create mode 100644 src/app/features/registries/components/drafts/drafts.component.scss
 create mode 100644 src/app/features/registries/components/drafts/drafts.component.spec.ts
 create mode 100644 src/app/features/registries/components/drafts/drafts.component.ts
 create mode 100644 src/app/features/registries/components/metadata/contributors/contributors.component.html
 create mode 100644 src/app/features/registries/components/metadata/contributors/contributors.component.scss
 create mode 100644 src/app/features/registries/components/metadata/contributors/contributors.component.spec.ts
 create mode 100644 src/app/features/registries/components/metadata/contributors/contributors.component.ts
 create mode 100644 src/app/features/registries/components/metadata/license/license.component.html
 create mode 100644 src/app/features/registries/components/metadata/license/license.component.scss
 create mode 100644 src/app/features/registries/components/metadata/license/license.component.spec.ts
 create mode 100644 src/app/features/registries/components/metadata/license/license.component.ts
 create mode 100644 src/app/features/registries/components/metadata/metadata.component.html
 create mode 100644 src/app/features/registries/components/metadata/metadata.component.scss
 create mode 100644 src/app/features/registries/components/metadata/metadata.component.spec.ts
 create mode 100644 src/app/features/registries/components/metadata/metadata.component.ts
 create mode 100644 src/app/features/registries/components/metadata/subjects/subjects.component.html
 create mode 100644 src/app/features/registries/components/metadata/subjects/subjects.component.scss
 create mode 100644 src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts
 create mode 100644 src/app/features/registries/components/metadata/subjects/subjects.component.ts
 create mode 100644 src/app/features/registries/components/metadata/tags/tags.component.html
 create mode 100644 src/app/features/registries/components/metadata/tags/tags.component.scss
 create mode 100644 src/app/features/registries/components/metadata/tags/tags.component.spec.ts
 create mode 100644 src/app/features/registries/components/metadata/tags/tags.component.ts
 create mode 100644 src/app/features/registries/components/review/review.component.html
 create mode 100644 src/app/features/registries/components/review/review.component.scss
 create mode 100644 src/app/features/registries/components/review/review.component.spec.ts
 create mode 100644 src/app/features/registries/components/review/review.component.ts

diff --git a/src/app/features/registries/components/custom-step/custom-step.component.html b/src/app/features/registries/components/custom-step/custom-step.component.html
new file mode 100644
index 000000000..68a42463d
--- /dev/null
+++ b/src/app/features/registries/components/custom-step/custom-step.component.html
@@ -0,0 +1 @@
+<p>custom-step works!</p>
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.scss b/src/app/features/registries/components/custom-step/custom-step.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.spec.ts b/src/app/features/registries/components/custom-step/custom-step.component.spec.ts
new file mode 100644
index 000000000..6c65cc772
--- /dev/null
+++ b/src/app/features/registries/components/custom-step/custom-step.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomStepComponent } from './custom-step.component';
+
+describe('CustomStepComponent', () => {
+  let component: CustomStepComponent;
+  let fixture: ComponentFixture<CustomStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomStepComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CustomStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.ts b/src/app/features/registries/components/custom-step/custom-step.component.ts
new file mode 100644
index 000000000..d6541af2c
--- /dev/null
+++ b/src/app/features/registries/components/custom-step/custom-step.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-custom-step',
+  imports: [],
+  templateUrl: './custom-step.component.html',
+  styleUrl: './custom-step.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomStepComponent {}
diff --git a/src/app/features/registries/components/drafts/drafts.component.html b/src/app/features/registries/components/drafts/drafts.component.html
new file mode 100644
index 000000000..ae6bfb804
--- /dev/null
+++ b/src/app/features/registries/components/drafts/drafts.component.html
@@ -0,0 +1,2 @@
+<p>drafts works!</p>
+<router-outlet></router-outlet>
diff --git a/src/app/features/registries/components/drafts/drafts.component.scss b/src/app/features/registries/components/drafts/drafts.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/drafts/drafts.component.spec.ts b/src/app/features/registries/components/drafts/drafts.component.spec.ts
new file mode 100644
index 000000000..43a3cc2bb
--- /dev/null
+++ b/src/app/features/registries/components/drafts/drafts.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DraftsComponent } from './drafts.component';
+
+describe('DraftsComponent', () => {
+  let component: DraftsComponent;
+  let fixture: ComponentFixture<DraftsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DraftsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DraftsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/drafts/drafts.component.ts b/src/app/features/registries/components/drafts/drafts.component.ts
new file mode 100644
index 000000000..d563a2aac
--- /dev/null
+++ b/src/app/features/registries/components/drafts/drafts.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'osf-drafts',
+  imports: [RouterOutlet],
+  templateUrl: './drafts.component.html',
+  styleUrl: './drafts.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DraftsComponent {}
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.html b/src/app/features/registries/components/metadata/contributors/contributors.component.html
new file mode 100644
index 000000000..2ce2ae917
--- /dev/null
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.html
@@ -0,0 +1 @@
+<p>contributors works!</p>
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.scss b/src/app/features/registries/components/metadata/contributors/contributors.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.spec.ts b/src/app/features/registries/components/metadata/contributors/contributors.component.spec.ts
new file mode 100644
index 000000000..fb45f2cde
--- /dev/null
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContributorsComponent } from './contributors.component';
+
+describe('ContributorsComponent', () => {
+  let component: ContributorsComponent;
+  let fixture: ComponentFixture<ContributorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContributorsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContributorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.ts b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
new file mode 100644
index 000000000..cbb11455f
--- /dev/null
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-contributors',
+  imports: [],
+  templateUrl: './contributors.component.html',
+  styleUrl: './contributors.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContributorsComponent {}
diff --git a/src/app/features/registries/components/metadata/license/license.component.html b/src/app/features/registries/components/metadata/license/license.component.html
new file mode 100644
index 000000000..c2800e0d3
--- /dev/null
+++ b/src/app/features/registries/components/metadata/license/license.component.html
@@ -0,0 +1 @@
+<p>license works!</p>
diff --git a/src/app/features/registries/components/metadata/license/license.component.scss b/src/app/features/registries/components/metadata/license/license.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/license/license.component.spec.ts b/src/app/features/registries/components/metadata/license/license.component.spec.ts
new file mode 100644
index 000000000..4cd128657
--- /dev/null
+++ b/src/app/features/registries/components/metadata/license/license.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LicenseComponent } from './license.component';
+
+describe('LicenseComponent', () => {
+  let component: LicenseComponent;
+  let fixture: ComponentFixture<LicenseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LicenseComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LicenseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/license/license.component.ts b/src/app/features/registries/components/metadata/license/license.component.ts
new file mode 100644
index 000000000..19d291552
--- /dev/null
+++ b/src/app/features/registries/components/metadata/license/license.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-license',
+  imports: [],
+  templateUrl: './license.component.html',
+  styleUrl: './license.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LicenseComponent {}
diff --git a/src/app/features/registries/components/metadata/metadata.component.html b/src/app/features/registries/components/metadata/metadata.component.html
new file mode 100644
index 000000000..62645a643
--- /dev/null
+++ b/src/app/features/registries/components/metadata/metadata.component.html
@@ -0,0 +1,18 @@
+<h2>{{ " 'registries.new.metadata.title' | translate" }}</h2>
+<p>{{ "'registries.new.metadata.description' | translate" }}</p>
+<section class="flex flex-column gap-4">
+  <p-card class="w-full">
+    <form [formGroup]="metadataForm" (ngSubmit)="submitMetadata()" class="flex flex-column gap-4">
+      <osf-text-input [control]="metadataForm.controls['title']" [maxLength]="inputLimits.fullName.maxLength">
+      </osf-text-input>
+
+      <p-textarea formControlName="description" class="w-full" [required]="true"></p-textarea>
+
+      <div class="flex justify-content-end"></div>
+    </form>
+  </p-card>
+  <div class="flex justify-content-end">
+    <p-button [label]="'common.buttons.back' | translate" (click)="back()" class="mr-2"> </p-button>
+    <p-button [label]="'common.buttons.next' | translate" type="submit" [disabled]="metadataForm.invalid"></p-button>
+  </div>
+</section>
diff --git a/src/app/features/registries/components/metadata/metadata.component.scss b/src/app/features/registries/components/metadata/metadata.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/metadata.component.spec.ts b/src/app/features/registries/components/metadata/metadata.component.spec.ts
new file mode 100644
index 000000000..311ac4e9f
--- /dev/null
+++ b/src/app/features/registries/components/metadata/metadata.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataComponent } from './metadata.component';
+
+describe('MetadataComponent', () => {
+  let component: MetadataComponent;
+  let fixture: ComponentFixture<MetadataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MetadataComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MetadataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
new file mode 100644
index 000000000..d9feda205
--- /dev/null
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -0,0 +1,37 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { TextInputComponent } from '@osf/shared/components';
+import { InputLimits } from '@osf/shared/constants';
+
+@Component({
+  selector: 'osf-metadata',
+  imports: [Card, TextInputComponent, ReactiveFormsModule, Button, TranslatePipe],
+  templateUrl: './metadata.component.html',
+  styleUrl: './metadata.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataComponent {
+  private readonly fb = inject(FormBuilder);
+  protected inputLimits = InputLimits;
+
+  metadataForm = this.fb.group({
+    title: ['', Validators.required],
+    description: [''],
+  });
+
+  submitMetadata(): void {
+    // Logic to submit metadata
+    console.log('Metadata submitted');
+  }
+
+  back(): void {
+    // Logic to navigate back
+    console.log('Navigating back');
+  }
+}
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.html b/src/app/features/registries/components/metadata/subjects/subjects.component.html
new file mode 100644
index 000000000..290fbd8b7
--- /dev/null
+++ b/src/app/features/registries/components/metadata/subjects/subjects.component.html
@@ -0,0 +1 @@
+<p>subjects works!</p>
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.scss b/src/app/features/registries/components/metadata/subjects/subjects.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts b/src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts
new file mode 100644
index 000000000..ba5495891
--- /dev/null
+++ b/src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubjectsComponent } from './subjects.component';
+
+describe('SubjectsComponent', () => {
+  let component: SubjectsComponent;
+  let fixture: ComponentFixture<SubjectsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubjectsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SubjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.ts b/src/app/features/registries/components/metadata/subjects/subjects.component.ts
new file mode 100644
index 000000000..ddbd541ab
--- /dev/null
+++ b/src/app/features/registries/components/metadata/subjects/subjects.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-subjects',
+  imports: [],
+  templateUrl: './subjects.component.html',
+  styleUrl: './subjects.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SubjectsComponent {}
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.html b/src/app/features/registries/components/metadata/tags/tags.component.html
new file mode 100644
index 000000000..1951e16ee
--- /dev/null
+++ b/src/app/features/registries/components/metadata/tags/tags.component.html
@@ -0,0 +1 @@
+<p>tags works!</p>
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.scss b/src/app/features/registries/components/metadata/tags/tags.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.spec.ts b/src/app/features/registries/components/metadata/tags/tags.component.spec.ts
new file mode 100644
index 000000000..235314eac
--- /dev/null
+++ b/src/app/features/registries/components/metadata/tags/tags.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TagsComponent } from './tags.component';
+
+describe('TagsComponent', () => {
+  let component: TagsComponent;
+  let fixture: ComponentFixture<TagsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TagsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.ts b/src/app/features/registries/components/metadata/tags/tags.component.ts
new file mode 100644
index 000000000..6105502df
--- /dev/null
+++ b/src/app/features/registries/components/metadata/tags/tags.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-tags',
+  imports: [],
+  templateUrl: './tags.component.html',
+  styleUrl: './tags.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TagsComponent {}
diff --git a/src/app/features/registries/components/review/review.component.html b/src/app/features/registries/components/review/review.component.html
new file mode 100644
index 000000000..27a7cd2a1
--- /dev/null
+++ b/src/app/features/registries/components/review/review.component.html
@@ -0,0 +1 @@
+<p>review works!</p>
diff --git a/src/app/features/registries/components/review/review.component.scss b/src/app/features/registries/components/review/review.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/review/review.component.spec.ts b/src/app/features/registries/components/review/review.component.spec.ts
new file mode 100644
index 000000000..f555378f7
--- /dev/null
+++ b/src/app/features/registries/components/review/review.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReviewComponent } from './review.component';
+
+describe('ReviewComponent', () => {
+  let component: ReviewComponent;
+  let fixture: ComponentFixture<ReviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReviewComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ReviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/review/review.component.ts b/src/app/features/registries/components/review/review.component.ts
new file mode 100644
index 000000000..e38cb2e4e
--- /dev/null
+++ b/src/app/features/registries/components/review/review.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-review',
+  imports: [],
+  templateUrl: './review.component.html',
+  styleUrl: './review.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReviewComponent {}

From fd429e49fbceaf699e3d8a60a05e46e315194541 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Tue, 24 Jun 2025 10:44:19 +0300
Subject: [PATCH 06/15] feat(registries): setup routes

---
 src/app/app.routes.ts   | 26 ++++++++++++++++++++++++++
 src/assets/i18n/en.json |  9 ++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 3bc7ed669..60057b2c6 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -176,6 +176,32 @@ export const routes: Routes = [
                 (mod) => mod.NewRegistrationComponent
               ),
           },
+          {
+            path: 'drafts',
+            loadComponent: () =>
+              import('./features/registries/components/drafts/drafts.component').then((mod) => mod.DraftsComponent),
+            children: [
+              {
+                path: ':id/metadata',
+                loadComponent: () =>
+                  import('./features/registries/components/metadata/metadata.component').then(
+                    (mod) => mod.MetadataComponent
+                  ),
+              },
+              {
+                path: ':id/review',
+                loadComponent: () =>
+                  import('./features/registries/components/review/review.component').then((mod) => mod.ReviewComponent),
+              },
+              {
+                path: ':id/:step',
+                loadComponent: () =>
+                  import('./features/registries/components/custom-step/custom-step.component').then(
+                    (mod) => mod.CustomStepComponent
+                  ),
+              },
+            ],
+          },
         ],
       },
       {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 400f2ba75..0e4646f54 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -17,6 +17,7 @@
       "disconnect": "Disconnect",
       "revert": "Revert",
       "next": "Next",
+      "back": "Back",
       "skip": "Skip",
       "done": "Done",
       "select": "Select",
@@ -38,7 +39,9 @@
       }
     },
     "labels": {
-      "downloads": "Downloads"
+      "downloads": "Downloads",
+      "title": "Title",
+      "description": "Description"
     },
     "deleteConfirmation": {
       "header": "Delete",
@@ -352,6 +355,10 @@
         "step3": "Which type of registration would you like to create?",
         "step2InfoText": "If your project includes components, you can select which components to include or exclude at the end of the registration."
       },
+      "metadata": {
+        "title": "Registration  Metadata",
+        "description": "This metadata applies only to the registration you are creating, and will not be applied to your project."
+      },
       "createDraft": "Create draft"
     }
   },

From fe74ebf52cf7d93f5d1da15d01d70adf8a19cbd8 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Tue, 24 Jun 2025 17:44:42 +0300
Subject: [PATCH 07/15] feat(registries): add contributors section to metadata
 step

---
 src/app/app.routes.ts                         |   2 +-
 .../components/drafts/drafts.component.html   |   1 -
 .../components/drafts/drafts.component.scss   |   3 +
 .../contributors/contributors.component.html  |  26 ++-
 .../contributors/contributors.component.ts    | 208 +++++++++++++++++-
 .../metadata/metadata.component.html          |  44 ++--
 .../components/metadata/metadata.component.ts |  42 +++-
 .../registries/models/registries.model.ts     |   2 +
 .../registries/services/registries.service.ts |  76 ++++++-
 .../registries/store/registries.actions.ts    |  40 ++++
 .../registries/store/registries.model.ts      |   4 +-
 .../registries/store/registries.selectors.ts  |   7 +-
 .../registries/store/registries.state.ts      | 150 ++++++++++++-
 src/assets/i18n/en.json                       |  14 +-
 14 files changed, 575 insertions(+), 44 deletions(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index fc2ea8b29..9068db62e 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -167,7 +167,7 @@ export const routes: Routes = [
         path: 'registries',
         loadComponent: () =>
           import('./features/registries/registries.component').then((mod) => mod.RegistriesComponent),
-        providers: [provideStates([RegistriesState])],
+        providers: [provideStates([RegistriesState, ContributorsState])],
         children: [
           {
             path: 'new',
diff --git a/src/app/features/registries/components/drafts/drafts.component.html b/src/app/features/registries/components/drafts/drafts.component.html
index ae6bfb804..0680b43f9 100644
--- a/src/app/features/registries/components/drafts/drafts.component.html
+++ b/src/app/features/registries/components/drafts/drafts.component.html
@@ -1,2 +1 @@
-<p>drafts works!</p>
 <router-outlet></router-outlet>
diff --git a/src/app/features/registries/components/drafts/drafts.component.scss b/src/app/features/registries/components/drafts/drafts.component.scss
index e69de29bb..683ae23fa 100644
--- a/src/app/features/registries/components/drafts/drafts.component.scss
+++ b/src/app/features/registries/components/drafts/drafts.component.scss
@@ -0,0 +1,3 @@
+:host {
+  height: 100%;
+}
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.html b/src/app/features/registries/components/metadata/contributors/contributors.component.html
index 2ce2ae917..256af9e13 100644
--- a/src/app/features/registries/components/metadata/contributors/contributors.component.html
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.html
@@ -1 +1,25 @@
-<p>contributors works!</p>
+<p-card class="w-full">
+  <h2 class="mb-2">{{ 'project.overview.metadata.contributors' | translate }}</h2>
+  <osf-contributors-list
+    (focusout)="onFocusOut()"
+    class="w-full"
+    [contributors]="contributors()"
+    [isLoading]="isContributorsLoading()"
+    (remove)="removeContributor($event)"
+    (showEducationHistory)="openEducationHistory($event)"
+    (showEmploymentHistory)="openEmploymentHistory($event)"
+  ></osf-contributors-list>
+  <div class="flex justify-content-end mt-3">
+    @if (hasChanges) {
+      <div class="flex gap-2 mr-4">
+        <p-button (click)="cancel()" text severity="info" [label]="'common.buttons.cancel' | translate"> </p-button>
+        <p-button (click)="save()" [label]="'common.buttons.save' | translate"> </p-button>
+      </div>
+    }
+    <p-button
+      [label]="'registries.metadata.addContributors' | translate"
+      type="submit"
+      (click)="openAddContributorDialog()"
+    ></p-button>
+  </div>
+</p-card>
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.ts b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
index cbb11455f..34d98c634 100644
--- a/src/app/features/registries/components/metadata/contributors/contributors.component.ts
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
@@ -1,10 +1,212 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { DialogService } from 'primeng/dynamicdialog';
+import { TableModule } from 'primeng/table';
+
+import { filter, forkJoin, map, of } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit, signal } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import {
+  AddContributor,
+  DeleteContributor,
+  FetchContributors,
+  RegistriesSelectors,
+  UpdateContributor,
+} from '@osf/features/registries/store';
+import { EducationHistoryDialogComponent, EmploymentHistoryDialogComponent } from '@osf/shared/components';
+import {
+  AddContributorDialogComponent,
+  AddUnregisteredContributorDialogComponent,
+  ContributorsListComponent,
+} from '@osf/shared/components/contributors';
+import { BIBLIOGRAPHY_OPTIONS, PERMISSION_OPTIONS } from '@osf/shared/components/contributors/constants';
+import { AddContributorType, ContributorPermission } from '@osf/shared/components/contributors/enums';
+import { ContributorDialogAddModel, ContributorModel } from '@osf/shared/components/contributors/models';
+import { ContributorsSelectors } from '@osf/shared/components/contributors/store';
+import { SelectOption } from '@osf/shared/models';
+import { CustomConfirmationService, ToastService } from '@osf/shared/services';
+import { findChangedItems } from '@osf/shared/utils';
 
 @Component({
   selector: 'osf-contributors',
-  imports: [],
+  imports: [FormsModule, TableModule, ContributorsListComponent, TranslatePipe, Card, Button],
   templateUrl: './contributors.component.html',
   styleUrl: './contributors.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [DialogService],
 })
-export class ContributorsComponent {}
+export class ContributorsComponent implements OnInit {
+  readonly destroyRef = inject(DestroyRef);
+  readonly translateService = inject(TranslateService);
+  readonly dialogService = inject(DialogService);
+  readonly toastService = inject(ToastService);
+  readonly customConfirmationService = inject(CustomConfirmationService);
+
+  private readonly route = inject(ActivatedRoute);
+  private readonly draftId = toSignal(this.route.params.pipe(map((params) => params['id'])) ?? of(undefined));
+
+  protected readonly selectedPermission = signal<ContributorPermission | null>(null);
+  protected readonly selectedBibliography = signal<boolean | null>(null);
+  protected readonly permissionsOptions: SelectOption[] = PERMISSION_OPTIONS;
+  protected readonly bibliographyOptions: SelectOption[] = BIBLIOGRAPHY_OPTIONS;
+
+  protected initialContributors = select(RegistriesSelectors.getContributors);
+  protected contributors = signal([]);
+
+  protected readonly isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
+
+  protected actions = createDispatchMap({
+    getContributors: FetchContributors,
+    deleteContributor: DeleteContributor,
+    updateContributor: UpdateContributor,
+    addContributor: AddContributor,
+  });
+
+  get hasChanges(): boolean {
+    return JSON.stringify(this.initialContributors()) !== JSON.stringify(this.contributors());
+  }
+
+  constructor() {
+    effect(() => {
+      this.contributors.set(JSON.parse(JSON.stringify(this.initialContributors())));
+    });
+  }
+
+  ngOnInit(): void {
+    const draftId = this.draftId();
+    if (draftId) {
+      this.actions.getContributors(draftId);
+    }
+  }
+
+  onFocusOut() {
+    // TODO: make request to update contributor if changed
+    console.log('Focus out event:', 'Changed:', this.hasChanges);
+  }
+
+  cancel() {
+    this.contributors.set(JSON.parse(JSON.stringify(this.initialContributors())));
+  }
+
+  save() {
+    const updatedContributors = findChangedItems(this.initialContributors(), this.contributors(), 'id');
+
+    const updateRequests = updatedContributors.map((payload) =>
+      this.actions.updateContributor(this.draftId(), payload)
+    );
+
+    forkJoin(updateRequests).subscribe(() => {
+      this.toastService.showSuccess('project.contributors.toastMessages.multipleUpdateSuccessMessage');
+    });
+  }
+
+  openEmploymentHistory(contributor: ContributorModel) {
+    this.dialogService.open(EmploymentHistoryDialogComponent, {
+      width: '552px',
+      data: contributor.employment,
+      focusOnShow: false,
+      header: this.translateService.instant('project.contributors.table.headers.employment'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+  }
+
+  openEducationHistory(contributor: ContributorModel) {
+    this.dialogService.open(EducationHistoryDialogComponent, {
+      width: '552px',
+      data: contributor.education,
+      focusOnShow: false,
+      header: this.translateService.instant('project.contributors.table.headers.education'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+  }
+
+  openAddContributorDialog() {
+    const addedContributorIds = this.initialContributors().map((x) => x.userId);
+
+    this.dialogService
+      .open(AddContributorDialogComponent, {
+        width: '448px',
+        data: addedContributorIds,
+        focusOnShow: false,
+        header: this.translateService.instant('project.contributors.addDialog.addRegisteredContributor'),
+        closeOnEscape: true,
+        modal: true,
+        closable: true,
+      })
+      .onClose.pipe(
+        filter((res: ContributorDialogAddModel) => !!res),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe((res: ContributorDialogAddModel) => {
+        if (res.type === AddContributorType.Unregistered) {
+          this.openAddUnregisteredContributorDialog();
+        } else {
+          const addRequests = res.data.map((payload) => this.actions.addContributor(this.draftId(), payload));
+
+          forkJoin(addRequests).subscribe(() => {
+            this.toastService.showSuccess('project.contributors.toastMessages.multipleAddSuccessMessage');
+          });
+        }
+      });
+  }
+
+  openAddUnregisteredContributorDialog() {
+    this.dialogService
+      .open(AddUnregisteredContributorDialogComponent, {
+        width: '448px',
+        focusOnShow: false,
+        header: this.translateService.instant('project.contributors.addDialog.addUnregisteredContributor'),
+        closeOnEscape: true,
+        modal: true,
+        closable: true,
+      })
+      .onClose.pipe(
+        filter((res: ContributorDialogAddModel) => !!res),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe((res: ContributorDialogAddModel) => {
+        if (res.type === AddContributorType.Registered) {
+          this.openAddContributorDialog();
+        } else {
+          const successMessage = this.translateService.instant('project.contributors.toastMessages.addSuccessMessage');
+          const params = { name: res.data[0].fullName };
+
+          this.actions.addContributor(this.draftId(), res.data[0]).subscribe({
+            next: () => this.toastService.showSuccess(successMessage, params),
+          });
+        }
+      });
+  }
+
+  removeContributor(contributor: ContributorModel) {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'project.contributors.removeDialog.title',
+      messageKey: 'project.contributors.removeDialog.message',
+      messageParams: { name: contributor.fullName },
+      acceptLabelKey: 'common.buttons.remove',
+      onConfirm: () => {
+        this.actions
+          .deleteContributor(this.draftId(), contributor.userId)
+          .pipe(takeUntilDestroyed(this.destroyRef))
+          .subscribe({
+            next: () =>
+              this.toastService.showSuccess('project.contributors.removeDialog.successMessage', {
+                name: contributor.fullName,
+              }),
+          });
+      },
+    });
+  }
+}
diff --git a/src/app/features/registries/components/metadata/metadata.component.html b/src/app/features/registries/components/metadata/metadata.component.html
index 62645a643..de1b7dec8 100644
--- a/src/app/features/registries/components/metadata/metadata.component.html
+++ b/src/app/features/registries/components/metadata/metadata.component.html
@@ -1,18 +1,34 @@
-<h2>{{ " 'registries.new.metadata.title' | translate" }}</h2>
-<p>{{ "'registries.new.metadata.description' | translate" }}</p>
-<section class="flex flex-column gap-4">
-  <p-card class="w-full">
-    <form [formGroup]="metadataForm" (ngSubmit)="submitMetadata()" class="flex flex-column gap-4">
-      <osf-text-input [control]="metadataForm.controls['title']" [maxLength]="inputLimits.fullName.maxLength">
-      </osf-text-input>
-
-      <p-textarea formControlName="description" class="w-full" [required]="true"></p-textarea>
-
-      <div class="flex justify-content-end"></div>
-    </form>
-  </p-card>
+<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
+  <section>
+    <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
+    <p class="mb-4">{{ 'registries.metadata.description' | translate }}</p>
+    <p-card class="w-full">
+      <form [formGroup]="metadataForm" (ngSubmit)="submitMetadata()" class="flex flex-column gap-4">
+        <osf-text-input
+          label="common.labels.title"
+          [control]="metadataForm.controls['title']"
+          [maxLength]="inputLimits.fullName.maxLength"
+        >
+        </osf-text-input>
+        <div>
+          <label for="project-description-id">{{ 'common.labels.description' | translate }}</label>
+          <textarea
+            id="project-description-id"
+            formControlName="description"
+            class="w-full"
+            rows="5"
+            cols="30"
+            pTextarea
+          ></textarea>
+        </div>
+        <div class="flex justify-content-end"></div>
+      </form>
+    </p-card>
+  </section>
+  <osf-contributors></osf-contributors>
   <div class="flex justify-content-end">
-    <p-button [label]="'common.buttons.back' | translate" (click)="back()" class="mr-2"> </p-button>
+    <p-button [label]="'registries.deleteDraft' | translate" severity="danger" (click)="deleteDraft()" class="mr-2">
+    </p-button>
     <p-button [label]="'common.buttons.next' | translate" type="submit" [disabled]="metadataForm.invalid"></p-button>
   </div>
 </section>
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
index d9feda205..a2e083046 100644
--- a/src/app/features/registries/components/metadata/metadata.component.ts
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -1,17 +1,34 @@
+import { createDispatchMap } from '@ngxs/store';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
+import { TextareaModule } from 'primeng/textarea';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { TextInputComponent } from '@osf/shared/components';
 import { InputLimits } from '@osf/shared/constants';
+import { CustomValidators } from '@osf/shared/utils';
+
+import { DeleteDraft } from '../../store';
+
+import { ContributorsComponent } from './contributors/contributors.component';
 
 @Component({
   selector: 'osf-metadata',
-  imports: [Card, TextInputComponent, ReactiveFormsModule, Button, TranslatePipe],
+  imports: [
+    Card,
+    TextInputComponent,
+    ReactiveFormsModule,
+    Button,
+    TranslatePipe,
+    TextareaModule,
+    ContributorsComponent,
+  ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -19,19 +36,28 @@ import { InputLimits } from '@osf/shared/constants';
 export class MetadataComponent {
   private readonly fb = inject(FormBuilder);
   protected inputLimits = InputLimits;
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly draftId = this.route.snapshot.params['id'];
+
+  protected actions = createDispatchMap({
+    deleteDraft: DeleteDraft,
+  });
 
   metadataForm = this.fb.group({
-    title: ['', Validators.required],
-    description: [''],
+    title: ['', CustomValidators.requiredTrimmed()],
+    description: ['', CustomValidators.requiredTrimmed()],
   });
 
   submitMetadata(): void {
-    // Logic to submit metadata
     console.log('Metadata submitted');
   }
 
-  back(): void {
-    // Logic to navigate back
-    console.log('Navigating back');
+  deleteDraft(): void {
+    this.actions.deleteDraft(this.draftId).subscribe({
+      next: () => {
+        this.router.navigateByUrl('/registries/new');
+      },
+    });
   }
 }
diff --git a/src/app/features/registries/models/registries.model.ts b/src/app/features/registries/models/registries.model.ts
index e39086194..f5dbab474 100644
--- a/src/app/features/registries/models/registries.model.ts
+++ b/src/app/features/registries/models/registries.model.ts
@@ -1,3 +1,5 @@
 export interface Registration {
   id: string;
+  title: string;
+  description: string;
 }
diff --git a/src/app/features/registries/services/registries.service.ts b/src/app/features/registries/services/registries.service.ts
index cd92686fd..9d5dc6f72 100644
--- a/src/app/features/registries/services/registries.service.ts
+++ b/src/app/features/registries/services/registries.service.ts
@@ -1,9 +1,14 @@
-import { Observable } from 'rxjs';
+import { map, Observable } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
+import { JsonApiResponse } from '@osf/core/models';
 import { JsonApiService } from '@osf/core/services';
+import { AddContributorType } from '@osf/shared/components/contributors/enums';
+import { ContributorsMapper } from '@osf/shared/components/contributors/mappers';
+import { ContributorAddModel, ContributorModel, ContributorResponse } from '@osf/shared/components/contributors/models';
 
+import { Registration } from '../models';
 import { RegistrationDataJsonApi } from '../models/registries-json-api.model';
 
 import { environment } from 'src/environments/environment';
@@ -39,4 +44,73 @@ export class RegistriesService {
     };
     return this.jsonApiService.post(`${this.apiUrl}/draft_registrations/`, payload);
   }
+
+  updateDraft(draftId: string, data: Registration): Observable<RegistrationDataJsonApi> {
+    const payload = {
+      data: {
+        id: draftId,
+        type: 'draft_registrations',
+        attributes: { ...data },
+        relationships: {},
+      },
+    };
+    return this.jsonApiService.patch(`${this.apiUrl}/draft_registrations/${draftId}/`, payload);
+  }
+
+  // addContributor(draftId: string, userId: string, permission: string): Observable<RegistrationDataJsonApi> {
+  //   const payload = {
+  //     data: {
+  //       type: 'contributors',
+  //       attributes: {
+  //         permission,
+  //       },
+  //       relationships: {
+  //         users: {
+  //           data: [
+  //             {
+  //               type: 'users',
+  //               id: userId,
+  //             },
+  //           ],
+  //         },
+  //       },
+  //     },
+  //   };
+  //   return this.jsonApiService.post(`${this.apiUrl}/draft_registrations/${draftId}/contributors/`, payload);
+  // }
+
+  deleteDraft(draftId: string): Observable<void> {
+    return this.jsonApiService.delete(`${this.apiUrl}/draft_registrations/${draftId}/`);
+  }
+
+  getContributors(draftId: string): Observable<ContributorModel[]> {
+    return this.jsonApiService
+      .get<JsonApiResponse<ContributorResponse[], null>>(`${this.apiUrl}/draft_registrations/${draftId}/contributors/`)
+      .pipe(map((contributors) => ContributorsMapper.fromResponse(contributors.data)));
+  }
+
+  addContributor(draftId: string, data: ContributorAddModel): Observable<ContributorModel> {
+    const baseUrl = `${this.apiUrl}/draft_registrations/${draftId}/contributors/`;
+    const type = data.id ? AddContributorType.Registered : AddContributorType.Unregistered;
+
+    const contributorData = { data: ContributorsMapper.toContributorAddRequest(data, type) };
+
+    return this.jsonApiService
+      .post<ContributorResponse>(baseUrl, contributorData)
+      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor)));
+  }
+
+  updateContributor(draftId: string, data: ContributorModel): Observable<ContributorModel> {
+    const baseUrl = `${environment.apiUrl}/draft_registrations/${draftId}/contributors/${data.userId}`;
+
+    const contributorData = { data: ContributorsMapper.toContributorAddRequest(data) };
+
+    return this.jsonApiService
+      .patch<ContributorResponse>(baseUrl, contributorData)
+      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor)));
+  }
+
+  deleteContributor(draftId: string, contributorId: string): Observable<void> {
+    return this.jsonApiService.delete(`${this.apiUrl}/draft_registrations/${draftId}/contributors/${contributorId}`);
+  }
 }
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index 6afb4f009..be20dd67a 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -1,3 +1,5 @@
+import { ContributorAddModel, ContributorModel } from '@osf/shared/components/contributors/models';
+
 export class GetProviders {
   static readonly type = '[Registries]  Get Providers';
 }
@@ -10,3 +12,41 @@ export class CreateDraft {
   static readonly type = '[Registries]  Create Draft';
   constructor(public payload: { registrationSchemaId: string; projectId?: string }) {}
 }
+
+export class DeleteDraft {
+  static readonly type = '[Registries]  Delete Draft';
+  constructor(public draftId: string) {}
+}
+
+export class FetchContributors {
+  static readonly type = '[Registries] Fetch Contributors';
+
+  constructor(public draftId: string) {}
+}
+
+export class AddContributor {
+  static readonly type = '[Registries] Add Contributor';
+
+  constructor(
+    public draftId: string,
+    public contributor: ContributorAddModel
+  ) {}
+}
+
+export class UpdateContributor {
+  static readonly type = '[Registries] Update Contributor';
+
+  constructor(
+    public draftId: string,
+    public contributor: ContributorModel
+  ) {}
+}
+
+export class DeleteContributor {
+  static readonly type = '[Registries] Delete Contributor';
+
+  constructor(
+    public draftId: string,
+    public contributorId: string
+  ) {}
+}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index cf8d51dfe..d2e42cf47 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -1,3 +1,4 @@
+import { ContributorModel } from '@osf/shared/components/contributors/models';
 import { AsyncStateModel } from '@osf/shared/models';
 
 import { Project, Provider } from '../models';
@@ -6,5 +7,6 @@ import { Registration } from '../models/registries.model';
 export interface RegistriesStateModel {
   providers: AsyncStateModel<Provider[]>;
   projects: AsyncStateModel<Project[]>;
-  registrations: AsyncStateModel<Registration | null>;
+  draftRegistration: AsyncStateModel<Registration | null>;
+  contributorsList: AsyncStateModel<ContributorModel[]>;
 }
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index f63694d63..1349e30af 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -18,6 +18,11 @@ export class RegistriesSelectors {
 
   @Selector([RegistriesState])
   static isDraftSubmitting(state: RegistriesStateModel): boolean {
-    return state.registrations.isSubmitting ?? false;
+    return state.draftRegistration.isSubmitting ?? false;
+  }
+
+  @Selector([RegistriesState])
+  static getContributors(state: RegistriesStateModel) {
+    return state.contributorsList.data;
   }
 }
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index 08f9a352f..55cdd339c 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -8,7 +8,16 @@ import { Injectable } from '@angular/core';
 import { Project } from '../models';
 import { ProjectsService, ProvidersService, RegistriesService } from '../services';
 
-import { CreateDraft, GetProjects, GetProviders } from './registries.actions';
+import {
+  AddContributor,
+  CreateDraft,
+  DeleteContributor,
+  DeleteDraft,
+  FetchContributors,
+  GetProjects,
+  GetProviders,
+  UpdateContributor,
+} from './registries.actions';
 import { RegistriesStateModel } from './registries.model';
 
 const DefaultState: RegistriesStateModel = {
@@ -22,12 +31,17 @@ const DefaultState: RegistriesStateModel = {
     isLoading: false,
     error: null,
   },
-  registrations: {
+  draftRegistration: {
     isLoading: false,
     data: null,
     isSubmitting: false,
     error: null,
   },
+  contributorsList: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
 };
 
 @State<RegistriesStateModel>({
@@ -102,8 +116,8 @@ export class RegistriesState {
   @Action(CreateDraft)
   createDraft(ctx: StateContext<RegistriesStateModel>, { payload }: CreateDraft) {
     ctx.patchState({
-      registrations: {
-        ...ctx.getState().registrations,
+      draftRegistration: {
+        ...ctx.getState().draftRegistration,
         isSubmitting: true,
       },
     });
@@ -111,8 +125,8 @@ export class RegistriesState {
     return this.registriesService.createDraft(payload.registrationSchemaId, payload.projectId).pipe(
       tap(() => {
         ctx.patchState({
-          registrations: {
-            ...ctx.getState().registrations,
+          draftRegistration: {
+            ...ctx.getState().draftRegistration,
             isSubmitting: false,
             error: null,
           },
@@ -120,17 +134,135 @@ export class RegistriesState {
       }),
       catchError((error) => {
         ctx.patchState({
-          registrations: {
-            ...ctx.getState().registrations,
+          draftRegistration: {
+            ...ctx.getState().draftRegistration,
             isSubmitting: false,
             error: error.message,
           },
         });
-        return this.handleError(ctx, 'registrations', error);
+        return this.handleError(ctx, 'draftRegistration', error);
       })
     );
   }
 
+  @Action(DeleteDraft)
+  deleteDraft(ctx: StateContext<RegistriesStateModel>, { draftId }: DeleteDraft) {
+    ctx.patchState({
+      draftRegistration: {
+        ...ctx.getState().draftRegistration,
+        isSubmitting: true,
+      },
+    });
+
+    return this.registriesService.deleteDraft(draftId).pipe(
+      tap(() => {
+        ctx.patchState({
+          draftRegistration: {
+            ...ctx.getState().draftRegistration,
+            isSubmitting: false,
+            data: null,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'draftRegistration', error))
+    );
+  }
+
+  @Action(FetchContributors)
+  fetchContributors(ctx: StateContext<RegistriesStateModel>, action: FetchContributors) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.getContributors(action.draftId).pipe(
+      tap((contributors) => {
+        ctx.patchState({
+          contributorsList: {
+            ...state.contributorsList,
+            data: contributors,
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
+  @Action(AddContributor)
+  addContributor(ctx: StateContext<RegistriesStateModel>, action: AddContributor) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.addContributor(action.draftId, action.contributor).pipe(
+      tap((contributor) => {
+        const currentState = ctx.getState();
+
+        ctx.patchState({
+          contributorsList: {
+            ...currentState.contributorsList,
+            data: [...currentState.contributorsList.data, contributor],
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
+  @Action(UpdateContributor)
+  updateContributor(ctx: StateContext<RegistriesStateModel>, action: UpdateContributor) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.updateContributor(action.draftId, action.contributor).pipe(
+      tap((updatedContributor) => {
+        const currentState = ctx.getState();
+
+        ctx.patchState({
+          contributorsList: {
+            ...currentState.contributorsList,
+            data: currentState.contributorsList.data.map((contributor) =>
+              contributor.id === updatedContributor.id ? updatedContributor : contributor
+            ),
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
+  @Action(DeleteContributor)
+  deleteContributor(ctx: StateContext<RegistriesStateModel>, action: DeleteContributor) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.deleteContributor(action.draftId, action.contributorId).pipe(
+      tap(() => {
+        ctx.patchState({
+          contributorsList: {
+            ...state.contributorsList,
+            data: state.contributorsList.data.filter((contributor) => contributor.userId !== action.contributorId),
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
   private handleError(ctx: StateContext<RegistriesStateModel>, section: keyof RegistriesStateModel, error: Error) {
     ctx.patchState({
       [section]: {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 0e4646f54..344a1c565 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -355,11 +355,17 @@
         "step3": "Which type of registration would you like to create?",
         "step2InfoText": "If your project includes components, you can select which components to include or exclude at the end of the registration."
       },
-      "metadata": {
-        "title": "Registration  Metadata",
-        "description": "This metadata applies only to the registration you are creating, and will not be applied to your project."
-      },
+
       "createDraft": "Create draft"
+    },
+    "deleteDraft": "Delete Draft",
+    "metadata": {
+      "title": "Registration  Metadata",
+      "description": "This metadata applies only to the registration you are creating, and will not be applied to your project.",
+      "addContributors": "Add Contributor By Search"
+    },
+    "review": {
+      "title": "Review Registration"
     }
   },
   "myProfile": {

From aa43a92ea410b4109b042d8e9e9dd6e829210934 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Wed, 25 Jun 2025 14:06:57 +0300
Subject: [PATCH 08/15] feat(registries): add licenses section

---
 .../metadata/license/license.component.html   | 48 ++++++++++++++-
 .../metadata/license/license.component.scss   |  4 ++
 .../metadata/license/license.component.ts     | 59 ++++++++++++++++++-
 .../metadata/metadata.component.html          |  1 +
 .../components/metadata/metadata.component.ts |  2 +
 src/app/features/registries/mappers/index.ts  |  1 +
 .../registries/mappers/licenses.mapper.ts     | 14 +++++
 src/app/features/registries/models/index.ts   |  2 +
 .../registries/models/license.model.ts        |  7 +++
 .../models/licenses-json-api.model.ts         | 16 +++++
 src/app/features/registries/services/index.ts |  1 +
 .../registries/services/licenses.service.ts   | 52 ++++++++++++++++
 .../registries/store/registries.actions.ts    |  4 ++
 .../registries/store/registries.model.ts      |  3 +-
 .../registries/store/registries.selectors.ts  |  7 ++-
 .../registries/store/registries.state.ts      | 33 ++++++++++-
 src/app/shared/pipes/index.ts                 |  1 +
 src/app/shared/pipes/interpolate.pipe.ts      | 10 ++++
 src/assets/i18n/en.json                       | 13 +++-
 19 files changed, 269 insertions(+), 9 deletions(-)
 create mode 100644 src/app/features/registries/mappers/licenses.mapper.ts
 create mode 100644 src/app/features/registries/models/license.model.ts
 create mode 100644 src/app/features/registries/models/licenses-json-api.model.ts
 create mode 100644 src/app/features/registries/services/licenses.service.ts
 create mode 100644 src/app/shared/pipes/interpolate.pipe.ts

diff --git a/src/app/features/registries/components/metadata/license/license.component.html b/src/app/features/registries/components/metadata/license/license.component.html
index c2800e0d3..cc5f9c25a 100644
--- a/src/app/features/registries/components/metadata/license/license.component.html
+++ b/src/app/features/registries/components/metadata/license/license.component.html
@@ -1 +1,47 @@
-<p>license works!</p>
+<p-card class="w-full">
+  <h2 class="mb-2">{{ 'shared.license.title' | translate }}</h2>
+  <p class="mb-1">
+    {{ 'shared.license.description' | translate }}
+  </p>
+  <p>
+    {{ 'shared.license.helpText' | translate }}
+    <a href="https://help.osf.io/article/148-licensing">{{ 'common.links.helpGuide' | translate }}</a
+    >.
+  </p>
+  <p-select
+    [options]="licenses()"
+    [(ngModel)]="selectedLicense"
+    optionLabel="name"
+    (onChange)="onSelectLicense($event.value)"
+    class="w-6 mt-4"
+  />
+  @if (selectedLicense) {
+    <p-divider styleClass="mt-3 mb-3" />
+    @if (selectedLicense.requiredFields.length) {
+      <form [formGroup]="licenseForm" class="flex gap-3 mb-3 w-full">
+        <div class="w-6">
+          <label for="licenseYear"> {{ 'common.labels.year' | translate }} </label>
+          <p-datepicker
+            id="licenseYear"
+            formControlName="year"
+            [maxDate]="currentYear"
+            dataType="string"
+            view="year"
+            dateFormat="yy"
+          />
+        </div>
+        <osf-text-input
+          class="w-6"
+          label="shared.license.copyrightHolders"
+          [control]="licenseForm.controls['copyrightHolders']"
+          [maxLength]="inputLimits.fullName.maxLength"
+        >
+        </osf-text-input>
+      </form>
+    }
+
+    <p class="highlight-block">
+      <osf-truncated-text [text]="selectedLicense.text | interpolate: licenseForm.value" />
+    </p>
+  }
+</p-card>
diff --git a/src/app/features/registries/components/metadata/license/license.component.scss b/src/app/features/registries/components/metadata/license/license.component.scss
index e69de29bb..7f863186d 100644
--- a/src/app/features/registries/components/metadata/license/license.component.scss
+++ b/src/app/features/registries/components/metadata/license/license.component.scss
@@ -0,0 +1,4 @@
+.highlight-block {
+  padding: 0.5rem;
+  background-color: var(--bg-blue-2);
+}
diff --git a/src/app/features/registries/components/metadata/license/license.component.ts b/src/app/features/registries/components/metadata/license/license.component.ts
index 19d291552..ab302faf4 100644
--- a/src/app/features/registries/components/metadata/license/license.component.ts
+++ b/src/app/features/registries/components/metadata/license/license.component.ts
@@ -1,10 +1,63 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+import { DatePicker } from 'primeng/datepicker';
+import { Divider } from 'primeng/divider';
+import { Select } from 'primeng/select';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { License } from '@osf/features/registries/models';
+import { FetchLicenses, RegistriesSelectors } from '@osf/features/registries/store';
+import { TextInputComponent, TruncatedTextComponent } from '@osf/shared/components';
+import { InputLimits } from '@osf/shared/constants';
+import { InterpolatePipe } from '@osf/shared/pipes';
+import { CustomValidators } from '@osf/shared/utils';
 
 @Component({
   selector: 'osf-license',
-  imports: [],
+  imports: [
+    Card,
+    TranslatePipe,
+    Select,
+    FormsModule,
+    Divider,
+    TruncatedTextComponent,
+    DatePicker,
+    TextInputComponent,
+    InterpolatePipe,
+    ReactiveFormsModule,
+  ],
   templateUrl: './license.component.html',
   styleUrl: './license.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LicenseComponent {}
+export class LicenseComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly draftId = this.route.snapshot.params['id'];
+  private readonly fb = inject(FormBuilder);
+
+  protected actions = createDispatchMap({ fetchLicenses: FetchLicenses });
+  protected licenses = select(RegistriesSelectors.getLicenses);
+  protected inputLimits = InputLimits;
+
+  selectedLicense: License | null = null;
+  currentYear = new Date();
+  licenseYear = this.currentYear;
+  licenseForm = this.fb.group({
+    year: [this.currentYear.getFullYear().toString(), CustomValidators.requiredTrimmed()],
+    copyrightHolders: ['', CustomValidators.requiredTrimmed()],
+  });
+
+  constructor() {
+    this.actions.fetchLicenses();
+  }
+
+  onSelectLicense(license: License): void {
+    console.log('Selected License:', license);
+  }
+}
diff --git a/src/app/features/registries/components/metadata/metadata.component.html b/src/app/features/registries/components/metadata/metadata.component.html
index de1b7dec8..574934bb7 100644
--- a/src/app/features/registries/components/metadata/metadata.component.html
+++ b/src/app/features/registries/components/metadata/metadata.component.html
@@ -26,6 +26,7 @@ <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
     </p-card>
   </section>
   <osf-contributors></osf-contributors>
+  <osf-license></osf-license>
   <div class="flex justify-content-end">
     <p-button [label]="'registries.deleteDraft' | translate" severity="danger" (click)="deleteDraft()" class="mr-2">
     </p-button>
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
index a2e083046..5d7d036eb 100644
--- a/src/app/features/registries/components/metadata/metadata.component.ts
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -17,6 +17,7 @@ import { CustomValidators } from '@osf/shared/utils';
 import { DeleteDraft } from '../../store';
 
 import { ContributorsComponent } from './contributors/contributors.component';
+import { LicenseComponent } from './license/license.component';
 
 @Component({
   selector: 'osf-metadata',
@@ -28,6 +29,7 @@ import { ContributorsComponent } from './contributors/contributors.component';
     TranslatePipe,
     TextareaModule,
     ContributorsComponent,
+    LicenseComponent,
   ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
diff --git a/src/app/features/registries/mappers/index.ts b/src/app/features/registries/mappers/index.ts
index 43fcc678e..91c916d86 100644
--- a/src/app/features/registries/mappers/index.ts
+++ b/src/app/features/registries/mappers/index.ts
@@ -1,2 +1,3 @@
+export * from './licenses.mapper';
 export * from './projects.mapper';
 export * from './providers.mapper';
diff --git a/src/app/features/registries/mappers/licenses.mapper.ts b/src/app/features/registries/mappers/licenses.mapper.ts
new file mode 100644
index 000000000..47cc364ad
--- /dev/null
+++ b/src/app/features/registries/mappers/licenses.mapper.ts
@@ -0,0 +1,14 @@
+import { License, LicensesResponseJsonApi } from '../models';
+
+export class LicensesMapper {
+  static fromLicensesResponse(response: LicensesResponseJsonApi): License[] {
+    console.log('LicensesMapper.fromLicensesResponse', response);
+    return response.data.map((item) => ({
+      id: item.id,
+      name: item.attributes.name,
+      requiredFields: item.attributes.required_fields,
+      url: item.attributes.url,
+      text: item.attributes.text,
+    }));
+  }
+}
diff --git a/src/app/features/registries/models/index.ts b/src/app/features/registries/models/index.ts
index f18645392..fb6440554 100644
--- a/src/app/features/registries/models/index.ts
+++ b/src/app/features/registries/models/index.ts
@@ -1,3 +1,5 @@
+export * from './license.model';
+export * from './licenses-json-api.model';
 export * from './project';
 export * from './projects-json-api.model';
 export * from './provider.model';
diff --git a/src/app/features/registries/models/license.model.ts b/src/app/features/registries/models/license.model.ts
new file mode 100644
index 000000000..c4a243a7f
--- /dev/null
+++ b/src/app/features/registries/models/license.model.ts
@@ -0,0 +1,7 @@
+export interface License {
+  id: string;
+  name: string;
+  requiredFields: string[];
+  url: string;
+  text: string;
+}
diff --git a/src/app/features/registries/models/licenses-json-api.model.ts b/src/app/features/registries/models/licenses-json-api.model.ts
new file mode 100644
index 000000000..32e8fc049
--- /dev/null
+++ b/src/app/features/registries/models/licenses-json-api.model.ts
@@ -0,0 +1,16 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface LicensesResponseJsonApi {
+  data: LicenseDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type LicenseDataJsonApi = ApiData<LicenseAttributesJsonApi, null, null, null>;
+
+interface LicenseAttributesJsonApi {
+  name: string;
+  required_fields: string[];
+  url: string;
+  text: string;
+}
diff --git a/src/app/features/registries/services/index.ts b/src/app/features/registries/services/index.ts
index 04f640163..b6471bbb9 100644
--- a/src/app/features/registries/services/index.ts
+++ b/src/app/features/registries/services/index.ts
@@ -1,3 +1,4 @@
+export * from './licenses.service';
 export * from './projects.service';
 export * from './providers.service';
 export * from './registries.service';
diff --git a/src/app/features/registries/services/licenses.service.ts b/src/app/features/registries/services/licenses.service.ts
new file mode 100644
index 000000000..8879ed1c7
--- /dev/null
+++ b/src/app/features/registries/services/licenses.service.ts
@@ -0,0 +1,52 @@
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+
+import { LicensesMapper } from '../mappers';
+import { License, LicensesResponseJsonApi } from '../models';
+
+import { environment } from 'src/environments/environment';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const data: any = {
+  data: [
+    {
+      id: '58fd62fdda3e2400012ca5d9',
+      type: 'licenses',
+      attributes: {
+        name: 'MIT License',
+        text: 'The MIT License (MIT)\n\nCopyright (c) {{year}} {{copyrightHolders}}\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n',
+        url: 'http://opensource.org/licenses/MIT',
+        required_fields: ['year', 'copyrightHolders'],
+      },
+      links: {
+        self: 'https://api.test.osf.io/v2/licenses/58fd62fdda3e2400012ca5d9/',
+      },
+    },
+  ],
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LicensesService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getLicenses(): Observable<License[]> {
+    return this.jsonApiService
+      .get<LicensesResponseJsonApi>(`${this.apiUrl}/providers/registrations/osf/licenses/`, {
+        params: {
+          'page[size]': 100,
+        },
+      })
+      .pipe(
+        map((licenses) => {
+          licenses.data.unshift(data.data[0]); // For testing purposes, remove in production
+          return LicensesMapper.fromLicensesResponse(licenses);
+        })
+      );
+  }
+}
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index 67f29a371..364ee2b4e 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -54,3 +54,7 @@ export class DeleteContributor {
     public contributorId: string
   ) {}
 }
+
+export class FetchLicenses {
+  static readonly type = '[Registries] Fetch Licenses';
+}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index 00653e404..b518e664b 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -1,7 +1,7 @@
 import { ContributorModel } from '@osf/shared/components/contributors/models';
 import { AsyncStateModel, Resource } from '@shared/models';
 
-import { Project, Provider } from '../models';
+import { License, Project, Provider } from '../models';
 import { Registration } from '../models/registries.model';
 
 export interface RegistriesStateModel {
@@ -10,4 +10,5 @@ export interface RegistriesStateModel {
   draftRegistration: AsyncStateModel<Registration | null>;
   contributorsList: AsyncStateModel<ContributorModel[]>;
   registries: AsyncStateModel<Resource[]>;
+  licenses: AsyncStateModel<License[]>;
 }
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 2e23b6fa4..3e379e530 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -2,7 +2,7 @@ import { Selector } from '@ngxs/store';
 
 import { Resource } from '@shared/models';
 
-import { Project, Provider } from '../models';
+import { License, Project, Provider } from '../models';
 
 import { RegistriesStateModel } from './registries.model';
 import { RegistriesState } from './registries.state';
@@ -37,4 +37,9 @@ export class RegistriesSelectors {
   static isRegistriesLoading(state: RegistriesStateModel): boolean {
     return state.registries.isLoading;
   }
+
+  @Selector([RegistriesState])
+  static getLicenses(state: RegistriesStateModel): License[] {
+    return state.licenses.data;
+  }
 }
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index 15f325edf..a47e2193a 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -10,7 +10,7 @@ import { SearchService } from '@osf/shared/services';
 import { getResourceTypes } from '@osf/shared/utils';
 
 import { Project } from '../models';
-import { ProjectsService, ProvidersService, RegistriesService } from '../services';
+import { LicensesService, ProjectsService, ProvidersService, RegistriesService } from '../services';
 
 import {
   AddContributor,
@@ -18,6 +18,7 @@ import {
   DeleteContributor,
   DeleteDraft,
   FetchContributors,
+  FetchLicenses,
   GetProjects,
   GetProviders,
   GetRegistries,
@@ -52,6 +53,11 @@ const DefaultState: RegistriesStateModel = {
     isLoading: false,
     error: null,
   },
+  licenses: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
 };
 
 @State<RegistriesStateModel>({
@@ -64,6 +70,8 @@ export class RegistriesState {
   providersService = inject(ProvidersService);
   projectsService = inject(ProjectsService);
   registriesService = inject(RegistriesService);
+  licensesService = inject(LicensesService);
+
   @Action(GetRegistries)
   getRegistries(ctx: StateContext<RegistriesStateModel>) {
     const state = ctx.getState();
@@ -297,6 +305,29 @@ export class RegistriesState {
     );
   }
 
+  @Action(FetchLicenses)
+  fetchLicenses(ctx: StateContext<RegistriesStateModel>) {
+    ctx.patchState({
+      licenses: {
+        ...ctx.getState().licenses,
+        isLoading: true,
+      },
+    });
+
+    return this.licensesService.getLicenses().pipe(
+      tap((licenses) => {
+        ctx.patchState({
+          licenses: {
+            data: licenses,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'licenses', error))
+    );
+  }
+
   private handleError(ctx: StateContext<RegistriesStateModel>, section: keyof RegistriesStateModel, error: Error) {
     ctx.patchState({
       [section]: {
diff --git a/src/app/shared/pipes/index.ts b/src/app/shared/pipes/index.ts
index 05dc24e77..6e3ada82f 100644
--- a/src/app/shared/pipes/index.ts
+++ b/src/app/shared/pipes/index.ts
@@ -1,4 +1,5 @@
 export { DecodeHtmlPipe } from './decode-html.pipe';
 export { FileSizePipe } from './file-size.pipe';
+export { InterpolatePipe } from './interpolate.pipe';
 export { MonthYearPipe } from './month-year.pipe';
 export { WrapFnPipe } from './wrap-fn.pipe';
diff --git a/src/app/shared/pipes/interpolate.pipe.ts b/src/app/shared/pipes/interpolate.pipe.ts
new file mode 100644
index 000000000..9a42f81ec
--- /dev/null
+++ b/src/app/shared/pipes/interpolate.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'interpolate',
+})
+export class InterpolatePipe implements PipeTransform {
+  transform(template: string, variables: Record<string, string | null>): string {
+    return template.replace(/{{\s*(\w+)\s*}}/g, (_, key) => (variables[key] != null ? variables[key] : ''));
+  }
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 4561aef31..e488feb43 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -41,14 +41,16 @@
     "labels": {
       "downloads": "Downloads",
       "title": "Title",
-      "description": "Description"
+      "description": "Description",
+      "year": "Year"
     },
     "deleteConfirmation": {
       "header": "Delete",
       "message": "Are you sure you want to proceed?"
     },
     "links": {
-      "clickHere": "Click here"
+      "clickHere": "Click here",
+      "helpGuide": "Help Guide"
     }
   },
   "navigation": {
@@ -1463,6 +1465,13 @@
       "materials": "Materials",
       "papers": "Papers",
       "supplements": "Supplements"
+    },
+    "license": {
+      "title": "License",
+      "selectLicense": "Select license",
+      "description": "A license tells others how they can use your work in the future and only applies to the information and files submitted with the registration.",
+      "helpText": "For more information, see this ",
+      "copyrightHolders": "Copyright Holders"
     }
   },
   "pageNotFound": {

From 874526318dc0093958a3ba6ca19af77513cc036e Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Wed, 25 Jun 2025 21:18:24 +0300
Subject: [PATCH 09/15] feat(registries): get schema-blocks for custom pages

---
 .../components/drafts/drafts.component.html   |  1 +
 .../components/drafts/drafts.component.ts     | 44 ++++++++++++++--
 .../registries/constants/defaultSteps.ts      | 10 ++++
 .../features/registries/constants/index.ts    |  1 +
 .../registries/enums/block-type.enum.ts       |  8 +++
 src/app/features/registries/enums/index.ts    |  1 +
 src/app/features/registries/mappers/index.ts  |  1 +
 .../registries/mappers/page-schema.mapper.ts  | 50 +++++++++++++++++++
 src/app/features/registries/models/index.ts   |  1 +
 .../registries/models/page-schema.model.ts    | 29 +++++++++++
 .../models/schema-blocks-json-api.model.ts    | 22 ++++++++
 .../registries/services/registries.service.ts | 32 ++++--------
 .../registries/store/registries.actions.ts    |  5 ++
 .../registries/store/registries.model.ts      |  3 +-
 .../registries/store/registries.selectors.ts  |  7 ++-
 .../registries/store/registries.state.ts      | 28 ++++++++++-
 16 files changed, 214 insertions(+), 29 deletions(-)
 create mode 100644 src/app/features/registries/constants/defaultSteps.ts
 create mode 100644 src/app/features/registries/constants/index.ts
 create mode 100644 src/app/features/registries/enums/block-type.enum.ts
 create mode 100644 src/app/features/registries/enums/index.ts
 create mode 100644 src/app/features/registries/mappers/page-schema.mapper.ts
 create mode 100644 src/app/features/registries/models/page-schema.model.ts
 create mode 100644 src/app/features/registries/models/schema-blocks-json-api.model.ts

diff --git a/src/app/features/registries/components/drafts/drafts.component.html b/src/app/features/registries/components/drafts/drafts.component.html
index 0680b43f9..2f28bf7b3 100644
--- a/src/app/features/registries/components/drafts/drafts.component.html
+++ b/src/app/features/registries/components/drafts/drafts.component.html
@@ -1 +1,2 @@
+<osf-stepper class="m-t-48" [steps]="steps()" [currentStep]="currentStep()" (currentStepChange)="stepChange($event)" />
 <router-outlet></router-outlet>
diff --git a/src/app/features/registries/components/drafts/drafts.component.ts b/src/app/features/registries/components/drafts/drafts.component.ts
index d563a2aac..5a4f11413 100644
--- a/src/app/features/registries/components/drafts/drafts.component.ts
+++ b/src/app/features/registries/components/drafts/drafts.component.ts
@@ -1,11 +1,49 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
+import { StepperComponent } from '@osf/shared/components';
+
+import { defaultSteps } from '../../constants';
+import { FetchSchemaBlocks, RegistriesSelectors } from '../../store';
+
 @Component({
   selector: 'osf-drafts',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, StepperComponent],
   templateUrl: './drafts.component.html',
   styleUrl: './drafts.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DraftsComponent {}
+export class DraftsComponent {
+  protected readonly pages = select(RegistriesSelectors.getPagesSchema);
+
+  private readonly actions = createDispatchMap({
+    getSchemaBlocks: FetchSchemaBlocks,
+  });
+
+  // TODO: get current  registrationSchemaId from store
+  registrationSchemaId = '6797c0dedee44d144a2943fd';
+
+  currentStep = signal<number>(0);
+
+  steps = computed(() => {
+    const customSteps = this.pages().map((page) => ({
+      label: page.title,
+      value: page.id,
+    }));
+    return [defaultSteps[0], ...customSteps, defaultSteps[1]];
+  });
+
+  constructor() {
+    this.actions.getSchemaBlocks(this.registrationSchemaId);
+    setTimeout(() => {
+      console.log('DraftsComponent initialized with registrationSchemaId:', this.pages());
+    }, 2000);
+  }
+
+  stepChange(step: number): void {
+    this.currentStep.set(step);
+    console.log('Current step changed to:', step);
+  }
+}
diff --git a/src/app/features/registries/constants/defaultSteps.ts b/src/app/features/registries/constants/defaultSteps.ts
new file mode 100644
index 000000000..fa338f1f6
--- /dev/null
+++ b/src/app/features/registries/constants/defaultSteps.ts
@@ -0,0 +1,10 @@
+export const defaultSteps = [
+  {
+    label: 'Metadata',
+    value: 3,
+  },
+  {
+    label: 'Review',
+    value: 6,
+  },
+];
diff --git a/src/app/features/registries/constants/index.ts b/src/app/features/registries/constants/index.ts
new file mode 100644
index 000000000..92e572c61
--- /dev/null
+++ b/src/app/features/registries/constants/index.ts
@@ -0,0 +1 @@
+export * from './defaultSteps';
diff --git a/src/app/features/registries/enums/block-type.enum.ts b/src/app/features/registries/enums/block-type.enum.ts
new file mode 100644
index 000000000..d97c2b9be
--- /dev/null
+++ b/src/app/features/registries/enums/block-type.enum.ts
@@ -0,0 +1,8 @@
+export enum BlockType {
+  PageHeading = 'page-heading',
+  QuestionLabel = 'question-label',
+  LongTextInput = 'long-text-input',
+  Paragraph = 'paragraph',
+  SingleSelectInput = 'single-select-input',
+  SelectInputOption = 'select-input-option',
+}
diff --git a/src/app/features/registries/enums/index.ts b/src/app/features/registries/enums/index.ts
new file mode 100644
index 000000000..83bdad606
--- /dev/null
+++ b/src/app/features/registries/enums/index.ts
@@ -0,0 +1 @@
+export * from './block-type.enum';
diff --git a/src/app/features/registries/mappers/index.ts b/src/app/features/registries/mappers/index.ts
index 91c916d86..013703b21 100644
--- a/src/app/features/registries/mappers/index.ts
+++ b/src/app/features/registries/mappers/index.ts
@@ -1,3 +1,4 @@
 export * from './licenses.mapper';
+export * from './page-schema.mapper';
 export * from './projects.mapper';
 export * from './providers.mapper';
diff --git a/src/app/features/registries/mappers/page-schema.mapper.ts b/src/app/features/registries/mappers/page-schema.mapper.ts
new file mode 100644
index 000000000..79980d15c
--- /dev/null
+++ b/src/app/features/registries/mappers/page-schema.mapper.ts
@@ -0,0 +1,50 @@
+import { BlockType } from '../enums';
+import { PageSchema, Question } from '../models';
+import { SchemaBlocksResponseJsonApi } from '../models/schema-blocks-json-api.model';
+
+export class PageSchemaMapper {
+  static fromSchemaBlocksResponse(response: SchemaBlocksResponseJsonApi): PageSchema[] {
+    console.log('PageSchemaMapper.fromSchemaBlocksResponse', response);
+    const pages: PageSchema[] = [];
+    let currentPage!: PageSchema;
+    let currentQuestion!: Question;
+    response.data.map((item) => {
+      console.log('Processing item:', item);
+      switch (item.attributes.block_type) {
+        case BlockType.PageHeading:
+          currentPage = {
+            id: item.id,
+            title: item.attributes.display_text,
+            questions: [],
+          };
+          pages.push(currentPage);
+          break;
+
+        case BlockType.QuestionLabel:
+          console.log('QuestionLabel:');
+          currentQuestion = {
+            id: item.id,
+            title: item.attributes.display_text,
+            description: item.attributes.help_text,
+            type: item.attributes.registration_response_key as Question['type'],
+            required: item.attributes.required,
+            groupKey: item.attributes.schema_block_group_key,
+            responseKey: item.attributes.registration_response_key || undefined,
+          };
+          currentPage.questions?.push(currentQuestion);
+          break;
+        case BlockType.SelectInputOption:
+          console.log('SelectInputOption:', item);
+          currentQuestion.options = currentQuestion.options || [];
+          currentQuestion.options.push(item.attributes.display_text);
+
+          break;
+        default:
+          console.warn(`Unexpected block type: ${item.attributes.block_type}`);
+          return;
+      }
+    });
+
+    return pages;
+  }
+}
diff --git a/src/app/features/registries/models/index.ts b/src/app/features/registries/models/index.ts
index fb6440554..1aed02f16 100644
--- a/src/app/features/registries/models/index.ts
+++ b/src/app/features/registries/models/index.ts
@@ -1,5 +1,6 @@
 export * from './license.model';
 export * from './licenses-json-api.model';
+export * from './page-schema.model';
 export * from './project';
 export * from './projects-json-api.model';
 export * from './provider.model';
diff --git a/src/app/features/registries/models/page-schema.model.ts b/src/app/features/registries/models/page-schema.model.ts
new file mode 100644
index 000000000..2d9bb31e8
--- /dev/null
+++ b/src/app/features/registries/models/page-schema.model.ts
@@ -0,0 +1,29 @@
+export interface PageSchema {
+  id: string;
+  title: string;
+  questions?: Question[];
+}
+
+export interface Question {
+  id: string;
+  title: string;
+  description?: string;
+  type: QuestionType;
+  options?: string[];
+  required: boolean;
+  groupKey?: string;
+  responseKey?: string;
+}
+
+export enum QuestionType {
+  Text = 'text',
+  TextArea = 'textarea',
+  Select = 'select',
+  MultiSelect = 'multi-select',
+  Checkbox = 'checkbox',
+  Radio = 'radio',
+  Date = 'date',
+  Number = 'number',
+  Email = 'email',
+  Url = 'url',
+}
diff --git a/src/app/features/registries/models/schema-blocks-json-api.model.ts b/src/app/features/registries/models/schema-blocks-json-api.model.ts
new file mode 100644
index 000000000..796eab5d1
--- /dev/null
+++ b/src/app/features/registries/models/schema-blocks-json-api.model.ts
@@ -0,0 +1,22 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+import { BlockType } from '../enums';
+
+export interface SchemaBlocksResponseJsonApi {
+  data: SchemaBlockJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type SchemaBlockJsonApi = ApiData<SchemaBlockAttributesJsonApi, null, null, null>;
+
+interface SchemaBlockAttributesJsonApi {
+  block_type: BlockType;
+  display_text: string;
+  example_text: string;
+  help_text: string;
+  index: number;
+  registration_response_key: string | null;
+  required: boolean;
+  schema_block_group_key: string;
+}
diff --git a/src/app/features/registries/services/registries.service.ts b/src/app/features/registries/services/registries.service.ts
index 9d5dc6f72..aa11c9ad6 100644
--- a/src/app/features/registries/services/registries.service.ts
+++ b/src/app/features/registries/services/registries.service.ts
@@ -8,8 +8,10 @@ import { AddContributorType } from '@osf/shared/components/contributors/enums';
 import { ContributorsMapper } from '@osf/shared/components/contributors/mappers';
 import { ContributorAddModel, ContributorModel, ContributorResponse } from '@osf/shared/components/contributors/models';
 
-import { Registration } from '../models';
+import { PageSchemaMapper } from '../mappers';
+import { PageSchema, Registration } from '../models';
 import { RegistrationDataJsonApi } from '../models/registries-json-api.model';
+import { SchemaBlocksResponseJsonApi } from '../models/schema-blocks-json-api.model';
 
 import { environment } from 'src/environments/environment';
 
@@ -57,32 +59,16 @@ export class RegistriesService {
     return this.jsonApiService.patch(`${this.apiUrl}/draft_registrations/${draftId}/`, payload);
   }
 
-  // addContributor(draftId: string, userId: string, permission: string): Observable<RegistrationDataJsonApi> {
-  //   const payload = {
-  //     data: {
-  //       type: 'contributors',
-  //       attributes: {
-  //         permission,
-  //       },
-  //       relationships: {
-  //         users: {
-  //           data: [
-  //             {
-  //               type: 'users',
-  //               id: userId,
-  //             },
-  //           ],
-  //         },
-  //       },
-  //     },
-  //   };
-  //   return this.jsonApiService.post(`${this.apiUrl}/draft_registrations/${draftId}/contributors/`, payload);
-  // }
-
   deleteDraft(draftId: string): Observable<void> {
     return this.jsonApiService.delete(`${this.apiUrl}/draft_registrations/${draftId}/`);
   }
 
+  getSchemaBlocks(registrationSchemaId: string): Observable<PageSchema[]> {
+    return this.jsonApiService
+      .get<SchemaBlocksResponseJsonApi>(`${this.apiUrl}/schemas/registrations/${registrationSchemaId}/schema_blocks/`)
+      .pipe(map((response) => PageSchemaMapper.fromSchemaBlocksResponse(response)));
+  }
+
   getContributors(draftId: string): Observable<ContributorModel[]> {
     return this.jsonApiService
       .get<JsonApiResponse<ContributorResponse[], null>>(`${this.apiUrl}/draft_registrations/${draftId}/contributors/`)
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index 364ee2b4e..f409ad91b 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -22,6 +22,11 @@ export class DeleteDraft {
   constructor(public draftId: string) {}
 }
 
+export class FetchSchemaBlocks {
+  static readonly type = '[Registries] Fetch Schema Blocks';
+  constructor(public registrationSchemaId: string) {}
+}
+
 export class FetchContributors {
   static readonly type = '[Registries] Fetch Contributors';
 
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index b518e664b..7700a4945 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -1,7 +1,7 @@
 import { ContributorModel } from '@osf/shared/components/contributors/models';
 import { AsyncStateModel, Resource } from '@shared/models';
 
-import { License, Project, Provider } from '../models';
+import { License, PageSchema, Project, Provider } from '../models';
 import { Registration } from '../models/registries.model';
 
 export interface RegistriesStateModel {
@@ -11,4 +11,5 @@ export interface RegistriesStateModel {
   contributorsList: AsyncStateModel<ContributorModel[]>;
   registries: AsyncStateModel<Resource[]>;
   licenses: AsyncStateModel<License[]>;
+  pagesSchema: AsyncStateModel<PageSchema[]>;
 }
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 3e379e530..272527046 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -2,7 +2,7 @@ import { Selector } from '@ngxs/store';
 
 import { Resource } from '@shared/models';
 
-import { License, Project, Provider } from '../models';
+import { License, PageSchema, Project, Provider } from '../models';
 
 import { RegistriesStateModel } from './registries.model';
 import { RegistriesState } from './registries.state';
@@ -42,4 +42,9 @@ export class RegistriesSelectors {
   static getLicenses(state: RegistriesStateModel): License[] {
     return state.licenses.data;
   }
+
+  @Selector([RegistriesState])
+  static getPagesSchema(state: RegistriesStateModel): PageSchema[] {
+    return state.pagesSchema.data;
+  }
 }
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index a47e2193a..b622b962d 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -19,6 +19,7 @@ import {
   DeleteDraft,
   FetchContributors,
   FetchLicenses,
+  FetchSchemaBlocks,
   GetProjects,
   GetProviders,
   GetRegistries,
@@ -58,6 +59,11 @@ const DefaultState: RegistriesStateModel = {
     isLoading: false,
     error: null,
   },
+  pagesSchema: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
 };
 
 @State<RegistriesStateModel>({
@@ -165,7 +171,7 @@ export class RegistriesState {
     });
 
     return this.registriesService.createDraft(payload.registrationSchemaId, payload.projectId).pipe(
-      tap(() => {
+      tap((registration) => {
         ctx.patchState({
           draftRegistration: {
             ...ctx.getState().draftRegistration,
@@ -211,6 +217,26 @@ export class RegistriesState {
     );
   }
 
+  @Action(FetchSchemaBlocks)
+  fetchSchemaBlocks(ctx: StateContext<RegistriesStateModel>, action: FetchSchemaBlocks) {
+    const state = ctx.getState();
+    ctx.patchState({
+      pagesSchema: { ...state.pagesSchema, isLoading: true, error: null },
+    });
+    return this.registriesService.getSchemaBlocks(action.registrationSchemaId).pipe(
+      tap((schemaBlocks) => {
+        ctx.patchState({
+          pagesSchema: {
+            data: schemaBlocks,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'pagesSchema', error))
+    );
+  }
+
   @Action(FetchContributors)
   fetchContributors(ctx: StateContext<RegistriesStateModel>, action: FetchContributors) {
     const state = ctx.getState();

From f1e9da04bddc28af748b3cbe053ae05d3802220a Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Thu, 26 Jun 2025 15:28:09 +0300
Subject: [PATCH 10/15] feat(registries): implement api for custom steps,
 refactor steper

---
 .../submit-preprint-stepper.component.ts      |  1 +
 .../custom-step/custom-step.component.html    | 45 ++++++++++++++++-
 .../custom-step/custom-step.component.ts      | 34 +++++++++++--
 .../components/drafts/drafts.component.html   |  9 +++-
 .../components/drafts/drafts.component.ts     | 30 +++++++++---
 .../registries/constants/defaultSteps.ts      | 11 +++--
 .../registries/enums/block-type.enum.ts       |  3 ++
 .../registries/enums/field-type.enum.ts       | 12 +++++
 src/app/features/registries/enums/index.ts    |  1 +
 .../registries/mappers/page-schema.mapper.ts  | 49 +++++++++++++++----
 .../registries/models/page-schema.model.ts    | 24 +++------
 .../components/stepper/stepper.component.html | 14 +++++-
 .../components/stepper/stepper.component.scss |  6 +++
 .../components/stepper/stepper.component.ts   |  5 +-
 src/app/shared/models/index.ts                |  1 +
 src/app/shared/models/step-option.model.ts    |  6 +++
 src/assets/i18n/en.json                       |  2 +-
 src/assets/styles/_variables.scss             |  3 ++
 18 files changed, 210 insertions(+), 46 deletions(-)
 create mode 100644 src/app/features/registries/enums/field-type.enum.ts
 create mode 100644 src/app/shared/models/step-option.model.ts

diff --git a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
index 9ee1edfb4..57bb6089d 100644
--- a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
+++ b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
@@ -90,6 +90,7 @@ export class SubmitPreprintStepperComponent implements OnInit, OnDestroy {
   }
 
   stepChange(step: number) {
+    console.log('Current step changed to:', step);
     if (step >= this.currentStep()) {
       return;
     }
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.html b/src/app/features/registries/components/custom-step/custom-step.component.html
index 68a42463d..c099ba14a 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.html
+++ b/src/app/features/registries/components/custom-step/custom-step.component.html
@@ -1 +1,44 @@
-<p>custom-step works!</p>
+<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
+  @if (currentPage()) {
+    <h2>{{ currentPage().title }}</h2>
+  }
+
+  @for (question of currentPage().questions; track question.id) {
+    <p-card>
+      <label [for]="question.groupKey">
+        <h3 class="mb-2">
+          {{ question.displayText }}
+          @if (question.required) {
+            <span class="text-red-500">*</span>
+          }
+        </h3>
+        @if (question.helpText) {
+          <p class="mb-3">{{ question.helpText }}</p>
+        }
+        @if (question.paragraphText) {
+          <p class="mb-3">{{ question.paragraphText }}</p>
+        }
+      </label>
+      @switch (question.fieldType) {
+        @case (FieldType.TextArea) {
+          <textarea id="{{ question.groupKey }}" class="w-full" rows="5" cols="30" pTextarea></textarea>
+        }
+        @case (FieldType.Radio) {
+          <div class="flex flex-column gap-2">
+            @for (option of question.options; track option) {
+              <div class="flex align -items-center gap-2">
+                <p-radioButton
+                  [inputId]="option"
+                  [(ngModel)]="radio"
+                  [name]="question.groupKey || ''"
+                  [value]="option"
+                ></p-radioButton>
+                <label [for]="option" class="ml-2">{{ option }}</label>
+              </div>
+            }
+          </div>
+        }
+      }
+    </p-card>
+  }
+</section>
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.ts b/src/app/features/registries/components/custom-step/custom-step.component.ts
index d6541af2c..56b328285 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.ts
+++ b/src/app/features/registries/components/custom-step/custom-step.component.ts
@@ -1,10 +1,38 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { select } from '@ngxs/store';
+
+import { Card } from 'primeng/card';
+import { RadioButton } from 'primeng/radiobutton';
+import { Textarea } from 'primeng/textarea';
+
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { RegistriesSelectors } from '../../store';
+
+import { FieldType } from './../../enums/field-type.enum';
 
 @Component({
   selector: 'osf-custom-step',
-  imports: [],
+  imports: [Card, Textarea, RadioButton, FormsModule],
   templateUrl: './custom-step.component.html',
   styleUrl: './custom-step.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CustomStepComponent {}
+export class CustomStepComponent {
+  private readonly route = inject(ActivatedRoute);
+  step = signal(this.route.snapshot.params['step'].split('-')[0]);
+  protected readonly pages = select(RegistriesSelectors.getPagesSchema);
+  currentPage = computed(() => this.pages()[this.step() - 1]);
+  protected readonly FieldType = FieldType;
+
+  radio = null;
+
+  constructor() {
+    console.log('CustomStepComponent initialized with step:', this.step);
+    console.log('Current page:', this.currentPage);
+    this.route.params.subscribe((params) => {
+      this.step.set(+params['step'].split('-')[0]);
+    });
+  }
+}
diff --git a/src/app/features/registries/components/drafts/drafts.component.html b/src/app/features/registries/components/drafts/drafts.component.html
index 2f28bf7b3..ca310305a 100644
--- a/src/app/features/registries/components/drafts/drafts.component.html
+++ b/src/app/features/registries/components/drafts/drafts.component.html
@@ -1,2 +1,9 @@
-<osf-stepper class="m-t-48" [steps]="steps()" [currentStep]="currentStep()" (currentStepChange)="stepChange($event)" />
+<osf-sub-header [title]="'registries.new.addNewRegistry' | translate" />
+<osf-stepper
+  class="block ml-4 mb-4"
+  [steps]="steps()"
+  [linear]="false"
+  [currentStep]="currentStep()"
+  (currentStepChange)="stepChange($event)"
+/>
 <router-outlet></router-outlet>
diff --git a/src/app/features/registries/components/drafts/drafts.component.ts b/src/app/features/registries/components/drafts/drafts.component.ts
index 5a4f11413..2ed757c65 100644
--- a/src/app/features/registries/components/drafts/drafts.component.ts
+++ b/src/app/features/registries/components/drafts/drafts.component.ts
@@ -1,16 +1,19 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
 
-import { StepperComponent } from '@osf/shared/components';
+import { ChangeDetectionStrategy, Component, computed, inject, Signal, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+
+import { StepperComponent, SubHeaderComponent } from '@osf/shared/components';
+import { StepOption } from '@osf/shared/models';
 
 import { defaultSteps } from '../../constants';
 import { FetchSchemaBlocks, RegistriesSelectors } from '../../store';
 
 @Component({
   selector: 'osf-drafts',
-  imports: [RouterOutlet, StepperComponent],
+  imports: [RouterOutlet, StepperComponent, SubHeaderComponent, TranslatePipe],
   templateUrl: './drafts.component.html',
   styleUrl: './drafts.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,6 +21,9 @@ import { FetchSchemaBlocks, RegistriesSelectors } from '../../store';
 export class DraftsComponent {
   protected readonly pages = select(RegistriesSelectors.getPagesSchema);
 
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+
   private readonly actions = createDispatchMap({
     getSchemaBlocks: FetchSchemaBlocks,
   });
@@ -25,9 +31,10 @@ export class DraftsComponent {
   // TODO: get current  registrationSchemaId from store
   registrationSchemaId = '6797c0dedee44d144a2943fd';
 
-  currentStep = signal<number>(0);
+  // TODO: get current  step from route
+  currentStep = signal(this.route.snapshot.params['step'] ? +this.route.snapshot.params['step'].split('-')[0] : 1);
 
-  steps = computed(() => {
+  steps: Signal<StepOption[]> = computed(() => {
     const customSteps = this.pages().map((page) => ({
       label: page.title,
       value: page.id,
@@ -44,6 +51,15 @@ export class DraftsComponent {
 
   stepChange(step: number): void {
     this.currentStep.set(step);
-    console.log('Current step changed to:', step);
+    const pageStep = this.steps()[step];
+
+    console.log('Navigating to step:', pageStep, 'with label:', pageStep.label);
+    let pageLink = '';
+    if (!pageStep.value) {
+      pageLink = `${pageStep.routeLink}`;
+    } else {
+      pageLink = `${step}-${pageStep.value}`;
+    }
+    this.router.navigate([`/registries/drafts/${this.registrationSchemaId}/`, pageLink]);
   }
 }
diff --git a/src/app/features/registries/constants/defaultSteps.ts b/src/app/features/registries/constants/defaultSteps.ts
index fa338f1f6..65030b71b 100644
--- a/src/app/features/registries/constants/defaultSteps.ts
+++ b/src/app/features/registries/constants/defaultSteps.ts
@@ -1,10 +1,15 @@
-export const defaultSteps = [
+import { StepOption } from '@osf/shared/models';
+
+export const defaultSteps: StepOption[] = [
   {
     label: 'Metadata',
-    value: 3,
+    value: '',
+    routeLink: 'metadata',
+    invalid: true, // Initially set to true, will be updated based on validation
   },
   {
     label: 'Review',
-    value: 6,
+    value: '',
+    routeLink: 'review',
   },
 ];
diff --git a/src/app/features/registries/enums/block-type.enum.ts b/src/app/features/registries/enums/block-type.enum.ts
index d97c2b9be..51d2e40a2 100644
--- a/src/app/features/registries/enums/block-type.enum.ts
+++ b/src/app/features/registries/enums/block-type.enum.ts
@@ -1,8 +1,11 @@
 export enum BlockType {
   PageHeading = 'page-heading',
+  SubsectionHeading = 'subsection-heading',
   QuestionLabel = 'question-label',
   LongTextInput = 'long-text-input',
   Paragraph = 'paragraph',
   SingleSelectInput = 'single-select-input',
   SelectInputOption = 'select-input-option',
+  FileInput = 'file-input',
+  MultiSelectInput = 'multi-select-input',
 }
diff --git a/src/app/features/registries/enums/field-type.enum.ts b/src/app/features/registries/enums/field-type.enum.ts
new file mode 100644
index 000000000..125656579
--- /dev/null
+++ b/src/app/features/registries/enums/field-type.enum.ts
@@ -0,0 +1,12 @@
+export enum FieldType {
+  Text = 'text',
+  TextArea = 'textarea',
+  Select = 'select',
+  MultiSelect = 'multi-select',
+  Checkbox = 'checkbox',
+  Radio = 'radio',
+  Date = 'date',
+  Number = 'number',
+  Email = 'email',
+  Url = 'url',
+}
diff --git a/src/app/features/registries/enums/index.ts b/src/app/features/registries/enums/index.ts
index 83bdad606..609b32864 100644
--- a/src/app/features/registries/enums/index.ts
+++ b/src/app/features/registries/enums/index.ts
@@ -1 +1,2 @@
 export * from './block-type.enum';
+export * from './field-type.enum';
diff --git a/src/app/features/registries/mappers/page-schema.mapper.ts b/src/app/features/registries/mappers/page-schema.mapper.ts
index 79980d15c..b4ae8dbba 100644
--- a/src/app/features/registries/mappers/page-schema.mapper.ts
+++ b/src/app/features/registries/mappers/page-schema.mapper.ts
@@ -1,4 +1,4 @@
-import { BlockType } from '../enums';
+import { BlockType, FieldType } from '../enums';
 import { PageSchema, Question } from '../models';
 import { SchemaBlocksResponseJsonApi } from '../models/schema-blocks-json-api.model';
 
@@ -7,7 +7,7 @@ export class PageSchemaMapper {
     console.log('PageSchemaMapper.fromSchemaBlocksResponse', response);
     const pages: PageSchema[] = [];
     let currentPage!: PageSchema;
-    let currentQuestion!: Question;
+    let currentQuestion: Question | null = null;
     response.data.map((item) => {
       console.log('Processing item:', item);
       switch (item.attributes.block_type) {
@@ -17,27 +17,58 @@ export class PageSchemaMapper {
             title: item.attributes.display_text,
             questions: [],
           };
+          currentQuestion = null;
           pages.push(currentPage);
           break;
 
+        case BlockType.Paragraph:
+          if (!currentQuestion) {
+            currentPage.description = item.attributes.display_text;
+          } else {
+            currentQuestion.paragraphText = item.attributes.display_text;
+          }
+          break;
+
+        case BlockType.SubsectionHeading:
+          currentQuestion = {
+            id: item.id,
+            displayText: item.attributes.display_text,
+            helpText: item.attributes.help_text,
+            exampleText: item.attributes.example_text,
+            required: item.attributes.required,
+            groupKey: item.attributes.schema_block_group_key,
+            responseKey: item.attributes.registration_response_key || undefined,
+          };
+          currentPage.questions?.push(currentQuestion);
+          break;
+
         case BlockType.QuestionLabel:
           console.log('QuestionLabel:');
           currentQuestion = {
             id: item.id,
-            title: item.attributes.display_text,
-            description: item.attributes.help_text,
-            type: item.attributes.registration_response_key as Question['type'],
+            displayText: item.attributes.display_text,
+            helpText: item.attributes.help_text,
+            exampleText: item.attributes.example_text,
             required: item.attributes.required,
             groupKey: item.attributes.schema_block_group_key,
             responseKey: item.attributes.registration_response_key || undefined,
           };
           currentPage.questions?.push(currentQuestion);
           break;
-        case BlockType.SelectInputOption:
-          console.log('SelectInputOption:', item);
-          currentQuestion.options = currentQuestion.options || [];
-          currentQuestion.options.push(item.attributes.display_text);
 
+        case BlockType.SelectInputOption:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.Radio;
+            currentQuestion.options = currentQuestion?.options || [];
+            currentQuestion?.options.push(item.attributes.display_text);
+          }
+          break;
+        case BlockType.LongTextInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.TextArea;
+            currentQuestion.exampleText = item.attributes.example_text;
+            currentQuestion.helpText = item.attributes.help_text;
+          }
           break;
         default:
           console.warn(`Unexpected block type: ${item.attributes.block_type}`);
diff --git a/src/app/features/registries/models/page-schema.model.ts b/src/app/features/registries/models/page-schema.model.ts
index 2d9bb31e8..d3d7de989 100644
--- a/src/app/features/registries/models/page-schema.model.ts
+++ b/src/app/features/registries/models/page-schema.model.ts
@@ -1,29 +1,21 @@
+import { FieldType } from '../enums';
+
 export interface PageSchema {
   id: string;
   title: string;
+  description?: string;
   questions?: Question[];
 }
 
 export interface Question {
   id: string;
-  title: string;
-  description?: string;
-  type: QuestionType;
+  displayText: string;
+  exampleText?: string;
+  helpText?: string;
+  paragraphText?: string;
+  fieldType?: FieldType;
   options?: string[];
   required: boolean;
   groupKey?: string;
   responseKey?: string;
 }
-
-export enum QuestionType {
-  Text = 'text',
-  TextArea = 'textarea',
-  Select = 'select',
-  MultiSelect = 'multi-select',
-  Checkbox = 'checkbox',
-  Radio = 'radio',
-  Date = 'date',
-  Number = 'number',
-  Email = 'email',
-  Url = 'url',
-}
diff --git a/src/app/shared/components/stepper/stepper.component.html b/src/app/shared/components/stepper/stepper.component.html
index b647786b1..39c6c28c5 100644
--- a/src/app/shared/components/stepper/stepper.component.html
+++ b/src/app/shared/components/stepper/stepper.component.html
@@ -1,9 +1,19 @@
 <div class="stepper-container">
   <div class="stepper-circles-lines-row">
     @for (step of steps(); track step.value; let i = $index) {
-      <button class="step-circle" [class.active]="i <= this.currentStep()" (click)="onStepClick(i)">
+      <button
+        class="step-circle"
+        [class.active]="i <= this.currentStep()"
+        [class.invalid]="step.invalid"
+        [class.current]="i === this.currentStep()"
+        (click)="onStepClick(i)"
+      >
         @if (i < this.currentStep()) {
-          <osf-icon iconClass="fas fa-check" />
+          @if (step.invalid) {
+            <osf-icon iconClass="fas fa-exclamation" />
+          } @else {
+            <osf-icon iconClass="fas fa-check" />
+          }
         } @else {
           <span>{{ i + 1 }}</span>
         }
diff --git a/src/app/shared/components/stepper/stepper.component.scss b/src/app/shared/components/stepper/stepper.component.scss
index da4dd05f8..0b15c5149 100644
--- a/src/app/shared/components/stepper/stepper.component.scss
+++ b/src/app/shared/components/stepper/stepper.component.scss
@@ -29,6 +29,12 @@
         color: var(--stepper-active-step-color);
         border: 1px solid var(--stepper-active-step-border-color);
       }
+
+      &.invalid:not(.current) {
+        background: var(--stepper-invalid-step-background);
+        color: var(--stepper-invalid-step-color);
+        border: 1px solid var(--stepper-invalid-step-border-color);
+      }
     }
 
     .step-line {
diff --git a/src/app/shared/components/stepper/stepper.component.ts b/src/app/shared/components/stepper/stepper.component.ts
index 3f31b0923..4844d1243 100644
--- a/src/app/shared/components/stepper/stepper.component.ts
+++ b/src/app/shared/components/stepper/stepper.component.ts
@@ -2,9 +2,8 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
 
-import { Primitive } from '@core/helpers';
 import { IconComponent } from '@shared/components';
-import { CustomOption } from '@shared/models';
+import { StepOption } from '@shared/models';
 
 @Component({
   selector: 'osf-stepper',
@@ -14,7 +13,7 @@ import { CustomOption } from '@shared/models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StepperComponent {
-  steps = input.required<CustomOption<Primitive>[]>();
+  steps = input.required<StepOption[]>();
   currentStep = model.required<number>();
   linear = input<boolean>(true);
 
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index c25c4edec..2f40f8dac 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -20,6 +20,7 @@ export * from './resource-card';
 export * from './select-option.model';
 export * from './severity.type';
 export * from './social-icon.model';
+export * from './step-option.model';
 export * from './store';
 export * from './tab-option.model';
 export * from './table-parameters.model';
diff --git a/src/app/shared/models/step-option.model.ts b/src/app/shared/models/step-option.model.ts
new file mode 100644
index 000000000..90c18cae2
--- /dev/null
+++ b/src/app/shared/models/step-option.model.ts
@@ -0,0 +1,6 @@
+export interface StepOption {
+  label: string;
+  value: number | string;
+  invalid?: boolean;
+  routeLink?: string;
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index e488feb43..57b7332a7 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -362,7 +362,7 @@
     "browse": "Browse Registrations",
     "seeMore": "See more",
     "new": {
-      "addNewRegistry": "Add New Registry",
+      "addNewRegistry": "Add New Registration",
       "infoText1": "You are submitting to OSF Registries.",
       "infoText2": "to learn more about other hosted registries",
       "steps": {
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 0a452f422..88956b7fc 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -153,6 +153,9 @@ $white-60: var(--white-60);
   --stepper-active-space-line-color: var(--pr-blue-1);
   --stepper-step-border-color: var(--white);
   --stepper-active-step-border-color: var(--pr-blue-1);
+  --stepper-invalid-step-background: var(--white);
+  --stepper-invalid-step-color: var(--red-1);
+  --stepper-invalid-step-border-color: var(--red-1);
 
   // White labeling
   --header-color: none;

From 6963bcb97cb56ccfe471b62b1c22ba99c68bae45 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Fri, 27 Jun 2025 17:56:26 +0300
Subject: [PATCH 11/15] feat(registries): update page-schema mapper

---
 .../custom-step/custom-step.component.html    | 150 ++++++++++++++----
 .../custom-step/custom-step.component.ts      |  25 ++-
 .../components/drafts/drafts.component.ts     |  45 ++++--
 .../components/metadata/metadata.component.ts |  18 ++-
 .../new-registration.component.ts             |   4 +
 .../registries/constants/defaultSteps.ts      |   1 -
 .../registries/enums/block-type.enum.ts       |   2 +
 .../registries/enums/field-type.enum.ts       |   6 +-
 .../registries/mappers/page-schema.mapper.ts  |  83 ++++++++--
 .../registries/mappers/registration.mapper.ts |  14 ++
 src/app/features/registries/models/index.ts   |   5 +-
 .../registries/models/page-schema.model.ts    |  16 +-
 ...odel.ts => registration-json-api.model.ts} |  16 +-
 ...istries.model.ts => registration.model.ts} |   1 +
 .../registries/services/registries.service.ts |  23 ++-
 .../registries/store/registries.actions.ts    |   5 +
 .../registries/store/registries.model.ts      |   2 +-
 .../registries/store/registries.selectors.ts  |   7 +-
 .../registries/store/registries.state.ts      |  29 +++-
 src/assets/i18n/en.json                       |   5 +-
 20 files changed, 369 insertions(+), 88 deletions(-)
 create mode 100644 src/app/features/registries/mappers/registration.mapper.ts
 rename src/app/features/registries/models/{registries-json-api.model.ts => registration-json-api.model.ts} (65%)
 rename src/app/features/registries/models/{registries.model.ts => registration.model.ts} (73%)

diff --git a/src/app/features/registries/components/custom-step/custom-step.component.html b/src/app/features/registries/components/custom-step/custom-step.component.html
index c099ba14a..ec9267ac7 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.html
+++ b/src/app/features/registries/components/custom-step/custom-step.component.html
@@ -1,44 +1,126 @@
 <section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
   @if (currentPage()) {
     <h2>{{ currentPage().title }}</h2>
-  }
 
-  @for (question of currentPage().questions; track question.id) {
-    <p-card>
-      <label [for]="question.groupKey">
-        <h3 class="mb-2">
-          {{ question.displayText }}
-          @if (question.required) {
-            <span class="text-red-500">*</span>
+    @let questions = currentPage().questions || [];
+
+    @if (currentPage().sections?.length) {
+      @for (section of currentPage().sections; track section.id) {
+        questions = section.questions;
+        <p-card>
+          <h3 class="mb-2">{{ section.title }}</h3>
+          @if (section.description) {
+            <p class="mb-3">{{ section.description }}</p>
+          }
+          <ng-container *ngTemplateOutlet="questionList"></ng-container>
+        </p-card>
+      }
+    } @else {
+      <ng-container *ngTemplateOutlet="questionList"></ng-container>
+    }
+
+    <ng-template #questionList>
+      @for (question of questions; track question.id) {
+        <p-card>
+          <label [for]="question.groupKey">
+            <h3 class="mb-2">
+              {{ question.displayText }}
+              @if (question.required) {
+                <span class="text-red-500">*</span>
+              }
+            </h3>
+            @if (question.helpText) {
+              <p class="mb-3">{{ question.helpText }}</p>
+            }
+            @if (question.paragraphText) {
+              <p class="mb-3">{{ question.paragraphText }}</p>
+            }
+          </label>
+          @if (question.exampleText) {
+            <p-inplace #inplaceRef styleClass="mb-4">
+              <ng-template #display>
+                <span class="text-primary">{{ 'common.links.showExample' | translate }} </span>
+              </ng-template>
+              <ng-template #content>
+                <div class="p-inplace-display">
+                  <span
+                    class="text-primary"
+                    tabindex="0"
+                    role="button"
+                    (click)="inplaceRef.deactivate()"
+                    (keyup.enter)="inplaceRef.deactivate()"
+                    (keyup.space)="inplaceRef.deactivate()"
+                    >{{ 'common.links.hideExample' | translate }}</span
+                  >
+                </div>
+                <p class="m-0">{{ question.exampleText }}</p>
+              </ng-template>
+            </p-inplace>
           }
-        </h3>
-        @if (question.helpText) {
-          <p class="mb-3">{{ question.helpText }}</p>
-        }
-        @if (question.paragraphText) {
-          <p class="mb-3">{{ question.paragraphText }}</p>
-        }
-      </label>
-      @switch (question.fieldType) {
-        @case (FieldType.TextArea) {
-          <textarea id="{{ question.groupKey }}" class="w-full" rows="5" cols="30" pTextarea></textarea>
-        }
-        @case (FieldType.Radio) {
-          <div class="flex flex-column gap-2">
-            @for (option of question.options; track option) {
-              <div class="flex align -items-center gap-2">
-                <p-radioButton
-                  [inputId]="option"
-                  [(ngModel)]="radio"
-                  [name]="question.groupKey || ''"
-                  [value]="option"
-                ></p-radioButton>
-                <label [for]="option" class="ml-2">{{ option }}</label>
+
+          @switch (question.fieldType) {
+            @case (FieldType.TextArea) {
+              <textarea id="{{ question.groupKey }}" class="w-full" rows="5" cols="30" pTextarea></textarea>
+            }
+            @case (FieldType.Radio) {
+              <div class="flex flex-column gap-2">
+                @for (option of question.options; track option) {
+                  <div class="flex align -items-center gap-2">
+                    <p-radioButton
+                      [inputId]="option.value"
+                      [(ngModel)]="radio"
+                      [name]="question.groupKey || ''"
+                      [value]="option.value"
+                    ></p-radioButton>
+                    <label [for]="option.value" class="ml-2">{{ option.label }}</label>
+                    @if (option.helpText) {
+                      <i
+                        class="flex mb-1 fas fa-circle-info ml-1 blue-icon cursor-pointer"
+                        [pTooltip]="option.helpText"
+                        tooltipPosition="right"
+                      ></i>
+                    }
+                  </div>
+                }
+              </div>
+            }
+            @case (FieldType.Checkbox) {
+              <div class="flex flex-column gap-2">
+                @for (option of question.options; track option) {
+                  <div class="flex align-items-center gap-2">
+                    <p-checkbox
+                      [inputId]="option.value"
+                      [name]="question.groupKey || ''"
+                      [value]="option.value"
+                    ></p-checkbox>
+                    <label [for]="option.value" class="ml-2">{{ option.label }}</label>
+                  </div>
+                }
               </div>
             }
-          </div>
-        }
+
+            @case (FieldType.Text) {
+              <input
+                id="{{ question.groupKey }}"
+                type="text"
+                class="w-full"
+                [placeholder]="question.exampleText"
+                pInputText
+              />
+            }
+            @case (FieldType.File) {
+              <h3 class="mb-2">Upload File</h3>
+              <p class="mb-1">You may attach up to 5 file(s) to this question. Files cannot total over 5GB in size.</p>
+              <p>
+                Uploaded files will automatically be archived in this registration. They will also be added to a related
+                project that will be created for this registration.
+              </p>
+
+              <p>File input is not implemented yet.</p>
+            }
+          }
+        </p-card>
       }
-    </p-card>
+    </ng-template>
   }
 </section>
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.ts b/src/app/features/registries/components/custom-step/custom-step.component.ts
index 56b328285..249dcea83 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.ts
+++ b/src/app/features/registries/components/custom-step/custom-step.component.ts
@@ -1,20 +1,37 @@
 import { select } from '@ngxs/store';
 
+import { TranslatePipe } from '@ngx-translate/core';
+
 import { Card } from 'primeng/card';
+import { Checkbox } from 'primeng/checkbox';
+import { Inplace } from 'primeng/inplace';
+import { InputText } from 'primeng/inputtext';
 import { RadioButton } from 'primeng/radiobutton';
 import { Textarea } from 'primeng/textarea';
+import { Tooltip } from 'primeng/tooltip';
 
+import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
+import { FieldType } from '../../enums';
 import { RegistriesSelectors } from '../../store';
 
-import { FieldType } from './../../enums/field-type.enum';
-
 @Component({
   selector: 'osf-custom-step',
-  imports: [Card, Textarea, RadioButton, FormsModule],
+  imports: [
+    Card,
+    Textarea,
+    RadioButton,
+    FormsModule,
+    Checkbox,
+    Tooltip,
+    InputText,
+    NgTemplateOutlet,
+    Inplace,
+    TranslatePipe,
+  ],
   templateUrl: './custom-step.component.html',
   styleUrl: './custom-step.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,8 +46,6 @@ export class CustomStepComponent {
   radio = null;
 
   constructor() {
-    console.log('CustomStepComponent initialized with step:', this.step);
-    console.log('Current page:', this.currentPage);
     this.route.params.subscribe((params) => {
       this.step.set(+params['step'].split('-')[0]);
     });
diff --git a/src/app/features/registries/components/drafts/drafts.component.ts b/src/app/features/registries/components/drafts/drafts.component.ts
index 2ed757c65..090bf1f57 100644
--- a/src/app/features/registries/components/drafts/drafts.component.ts
+++ b/src/app/features/registries/components/drafts/drafts.component.ts
@@ -2,14 +2,14 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { ChangeDetectionStrategy, Component, computed, inject, Signal, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, Signal, signal } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 
 import { StepperComponent, SubHeaderComponent } from '@osf/shared/components';
 import { StepOption } from '@osf/shared/models';
 
 import { defaultSteps } from '../../constants';
-import { FetchSchemaBlocks, RegistriesSelectors } from '../../store';
+import { FetchDraft, FetchSchemaBlocks, RegistriesSelectors } from '../../store';
 
 @Component({
   selector: 'osf-drafts',
@@ -20,19 +20,18 @@ import { FetchSchemaBlocks, RegistriesSelectors } from '../../store';
 })
 export class DraftsComponent {
   protected readonly pages = select(RegistriesSelectors.getPagesSchema);
+  protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
 
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
-
   private readonly actions = createDispatchMap({
     getSchemaBlocks: FetchSchemaBlocks,
+    getDraftRegistration: FetchDraft,
   });
 
-  // TODO: get current  registrationSchemaId from store
-  registrationSchemaId = '6797c0dedee44d144a2943fd';
-
-  // TODO: get current  step from route
-  currentStep = signal(this.route.snapshot.params['step'] ? +this.route.snapshot.params['step'].split('-')[0] : 1);
+  get isReviewPage(): boolean {
+    return this.router.url.includes('/review');
+  }
 
   steps: Signal<StepOption[]> = computed(() => {
     const customSteps = this.pages().map((page) => ({
@@ -42,24 +41,42 @@ export class DraftsComponent {
     return [defaultSteps[0], ...customSteps, defaultSteps[1]];
   });
 
+  currentStep = signal(
+    this.route.snapshot.children[0]?.params['step'] ? +this.route.snapshot.children[0]?.params['step'].split('-')[0] : 0
+  );
+
+  registrationId = this.route.snapshot.children[0]?.params['id'] || '';
+
   constructor() {
-    this.actions.getSchemaBlocks(this.registrationSchemaId);
-    setTimeout(() => {
-      console.log('DraftsComponent initialized with registrationSchemaId:', this.pages());
-    }, 2000);
+    if (!this.draftRegistration()) {
+      this.actions.getDraftRegistration(this.registrationId);
+    }
+    effect(() => {
+      const registrationSchemaId = this.draftRegistration()?.registrationSchemaId;
+      if (registrationSchemaId) {
+        this.actions.getSchemaBlocks(registrationSchemaId || '');
+      }
+    });
+
+    effect(() => {
+      const reviewStepNumber = this.pages().length + 1;
+      if (this.isReviewPage) {
+        this.currentStep.set(reviewStepNumber);
+      }
+    });
   }
 
   stepChange(step: number): void {
+    // TODO: before navigating, validate the current step
     this.currentStep.set(step);
     const pageStep = this.steps()[step];
 
-    console.log('Navigating to step:', pageStep, 'with label:', pageStep.label);
     let pageLink = '';
     if (!pageStep.value) {
       pageLink = `${pageStep.routeLink}`;
     } else {
       pageLink = `${step}-${pageStep.value}`;
     }
-    this.router.navigate([`/registries/drafts/${this.registrationSchemaId}/`, pageLink]);
+    this.router.navigate([`/registries/drafts/${this.registrationId}/`, pageLink]);
   }
 }
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
index 5d7d036eb..87e1e456c 100644
--- a/src/app/features/registries/components/metadata/metadata.component.ts
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -12,6 +12,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { TextInputComponent } from '@osf/shared/components';
 import { InputLimits } from '@osf/shared/constants';
+import { CustomConfirmationService, ToastService } from '@osf/shared/services';
 import { CustomValidators } from '@osf/shared/utils';
 
 import { DeleteDraft } from '../../store';
@@ -37,14 +38,17 @@ import { LicenseComponent } from './license/license.component';
 })
 export class MetadataComponent {
   private readonly fb = inject(FormBuilder);
-  protected inputLimits = InputLimits;
+  private readonly toastService = inject(ToastService);
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
+  private readonly customConfirmationService = inject(CustomConfirmationService);
+
   private readonly draftId = this.route.snapshot.params['id'];
 
   protected actions = createDispatchMap({
     deleteDraft: DeleteDraft,
   });
+  protected inputLimits = InputLimits;
 
   metadataForm = this.fb.group({
     title: ['', CustomValidators.requiredTrimmed()],
@@ -56,9 +60,15 @@ export class MetadataComponent {
   }
 
   deleteDraft(): void {
-    this.actions.deleteDraft(this.draftId).subscribe({
-      next: () => {
-        this.router.navigateByUrl('/registries/new');
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'registries.deleteDraft',
+      messageKey: 'registries.confirmDeleteDraft',
+      onConfirm: () => {
+        this.actions.deleteDraft(this.draftId).subscribe({
+          next: () => {
+            this.router.navigateByUrl('/registries/new');
+          },
+        });
       },
     });
   }
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
index 0bbab2b19..60ad373a7 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.ts
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -8,6 +8,7 @@ import { Select } from 'primeng/select';
 
 import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
 import { ToastService } from '@osf/shared/services';
@@ -24,9 +25,11 @@ import { CreateDraft, GetProjects, GetProviders, RegistriesSelectors } from '../
 export class NewRegistrationComponent {
   private readonly fb = inject(FormBuilder);
   private readonly toastService = inject(ToastService);
+  private readonly router = inject(Router);
   protected readonly projects = select(RegistriesSelectors.getProjects);
   protected readonly providers = select(RegistriesSelectors.getProviders);
   protected readonly isDraftSubmitting = select(RegistriesSelectors.isDraftSubmitting);
+  protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
   protected actions = createDispatchMap({
     getProjects: GetProjects,
     getProviders: GetProviders,
@@ -80,6 +83,7 @@ export class NewRegistrationComponent {
         })
         .subscribe(() => {
           this.toastService.showSuccess('Draft created successfully');
+          this.router.navigate(['/registries/drafts/', this.draftRegistration()?.id, 'metadata']);
         });
     }
   }
diff --git a/src/app/features/registries/constants/defaultSteps.ts b/src/app/features/registries/constants/defaultSteps.ts
index 65030b71b..643a1b36a 100644
--- a/src/app/features/registries/constants/defaultSteps.ts
+++ b/src/app/features/registries/constants/defaultSteps.ts
@@ -5,7 +5,6 @@ export const defaultSteps: StepOption[] = [
     label: 'Metadata',
     value: '',
     routeLink: 'metadata',
-    invalid: true, // Initially set to true, will be updated based on validation
   },
   {
     label: 'Review',
diff --git a/src/app/features/registries/enums/block-type.enum.ts b/src/app/features/registries/enums/block-type.enum.ts
index 51d2e40a2..4240e5321 100644
--- a/src/app/features/registries/enums/block-type.enum.ts
+++ b/src/app/features/registries/enums/block-type.enum.ts
@@ -8,4 +8,6 @@ export enum BlockType {
   SelectInputOption = 'select-input-option',
   FileInput = 'file-input',
   MultiSelectInput = 'multi-select-input',
+  ShortTextInput = 'short-text-input',
+  SectionHeading = 'section-heading',
 }
diff --git a/src/app/features/registries/enums/field-type.enum.ts b/src/app/features/registries/enums/field-type.enum.ts
index 125656579..114128096 100644
--- a/src/app/features/registries/enums/field-type.enum.ts
+++ b/src/app/features/registries/enums/field-type.enum.ts
@@ -2,11 +2,7 @@ export enum FieldType {
   Text = 'text',
   TextArea = 'textarea',
   Select = 'select',
-  MultiSelect = 'multi-select',
   Checkbox = 'checkbox',
   Radio = 'radio',
-  Date = 'date',
-  Number = 'number',
-  Email = 'email',
-  Url = 'url',
+  File = 'file',
 }
diff --git a/src/app/features/registries/mappers/page-schema.mapper.ts b/src/app/features/registries/mappers/page-schema.mapper.ts
index b4ae8dbba..85b94aaf6 100644
--- a/src/app/features/registries/mappers/page-schema.mapper.ts
+++ b/src/app/features/registries/mappers/page-schema.mapper.ts
@@ -1,5 +1,5 @@
 import { BlockType, FieldType } from '../enums';
-import { PageSchema, Question } from '../models';
+import { PageSchema, Question, Section } from '../models';
 import { SchemaBlocksResponseJsonApi } from '../models/schema-blocks-json-api.model';
 
 export class PageSchemaMapper {
@@ -8,8 +8,8 @@ export class PageSchemaMapper {
     const pages: PageSchema[] = [];
     let currentPage!: PageSchema;
     let currentQuestion: Question | null = null;
+    let currentSection: Section | null = null;
     response.data.map((item) => {
-      console.log('Processing item:', item);
       switch (item.attributes.block_type) {
         case BlockType.PageHeading:
           currentPage = {
@@ -18,14 +18,29 @@ export class PageSchemaMapper {
             questions: [],
           };
           currentQuestion = null;
+          currentSection = null;
           pages.push(currentPage);
           break;
+        case BlockType.SectionHeading:
+          if (currentPage) {
+            currentSection = {
+              id: item.id,
+              title: item.attributes.display_text,
+              questions: [],
+            };
+            currentPage.sections = currentPage.sections || [];
+            currentPage.sections.push(currentSection);
+            currentQuestion = null;
+          }
+          break;
 
         case BlockType.Paragraph:
-          if (!currentQuestion) {
-            currentPage.description = item.attributes.display_text;
-          } else {
+          if (currentQuestion) {
             currentQuestion.paragraphText = item.attributes.display_text;
+          } else if (currentSection) {
+            currentSection.description = item.attributes.display_text;
+          } else {
+            currentPage.description = item.attributes.display_text;
           }
           break;
 
@@ -39,11 +54,16 @@ export class PageSchemaMapper {
             groupKey: item.attributes.schema_block_group_key,
             responseKey: item.attributes.registration_response_key || undefined,
           };
-          currentPage.questions?.push(currentQuestion);
+          if (currentSection) {
+            currentSection.questions = currentSection.questions || [];
+            currentSection.questions.push(currentQuestion);
+          } else if (currentPage) {
+            currentPage.questions = currentPage.questions || [];
+            currentPage.questions.push(currentQuestion);
+          }
           break;
 
         case BlockType.QuestionLabel:
-          console.log('QuestionLabel:');
           currentQuestion = {
             id: item.id,
             displayText: item.attributes.display_text,
@@ -53,21 +73,60 @@ export class PageSchemaMapper {
             groupKey: item.attributes.schema_block_group_key,
             responseKey: item.attributes.registration_response_key || undefined,
           };
-          currentPage.questions?.push(currentQuestion);
+          if (currentSection) {
+            currentSection.questions = currentSection.questions || [];
+            currentSection.questions.push(currentQuestion);
+          } else if (currentPage) {
+            currentPage.questions = currentPage.questions || [];
+            currentPage.questions.push(currentQuestion);
+          }
           break;
 
-        case BlockType.SelectInputOption:
+        case BlockType.SingleSelectInput:
           if (currentQuestion) {
             currentQuestion.fieldType = FieldType.Radio;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+
+        case BlockType.MultiSelectInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.Checkbox;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+
+        case BlockType.SelectInputOption:
+          if (currentQuestion) {
             currentQuestion.options = currentQuestion?.options || [];
-            currentQuestion?.options.push(item.attributes.display_text);
+            currentQuestion?.options.push({
+              label: item.attributes.display_text,
+              value: item.attributes.display_text,
+              helpText: item.attributes.help_text,
+            });
           }
           break;
+
         case BlockType.LongTextInput:
           if (currentQuestion) {
             currentQuestion.fieldType = FieldType.TextArea;
-            currentQuestion.exampleText = item.attributes.example_text;
-            currentQuestion.helpText = item.attributes.help_text;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+        case BlockType.ShortTextInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.Text;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+
+        case BlockType.FileInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.File;
           }
           break;
         default:
diff --git a/src/app/features/registries/mappers/registration.mapper.ts b/src/app/features/registries/mappers/registration.mapper.ts
new file mode 100644
index 000000000..77cc75235
--- /dev/null
+++ b/src/app/features/registries/mappers/registration.mapper.ts
@@ -0,0 +1,14 @@
+import { RegistrationDataJsonApi } from '../models';
+import { Registration } from '../models/registration.model';
+
+export class RegistrationMapper {
+  static fromRegistrationResponse(response: RegistrationDataJsonApi): Registration {
+    console.log('RegistrationMapper.fromRegistrationResponse', response);
+    return {
+      id: response.id,
+      title: response.attributes.title,
+      description: response.attributes.description,
+      registrationSchemaId: response.relationships.registration_schema?.data?.id || '',
+    };
+  }
+}
diff --git a/src/app/features/registries/models/index.ts b/src/app/features/registries/models/index.ts
index 1aed02f16..69c4c8b7c 100644
--- a/src/app/features/registries/models/index.ts
+++ b/src/app/features/registries/models/index.ts
@@ -5,5 +5,6 @@ export * from './project';
 export * from './projects-json-api.model';
 export * from './provider.model';
 export * from './providers-json-api.model';
-export * from './registries.model';
-export * from './registries-json-api.model';
+export * from './registration.model';
+export * from './registration-json-api.model';
+export * from './schema-blocks-json-api.model';
diff --git a/src/app/features/registries/models/page-schema.model.ts b/src/app/features/registries/models/page-schema.model.ts
index d3d7de989..84ad1f13d 100644
--- a/src/app/features/registries/models/page-schema.model.ts
+++ b/src/app/features/registries/models/page-schema.model.ts
@@ -5,6 +5,14 @@ export interface PageSchema {
   title: string;
   description?: string;
   questions?: Question[];
+  sections?: Section[];
+}
+
+export interface Section {
+  id: string;
+  title: string;
+  description?: string;
+  questions?: Question[];
 }
 
 export interface Question {
@@ -14,8 +22,14 @@ export interface Question {
   helpText?: string;
   paragraphText?: string;
   fieldType?: FieldType;
-  options?: string[];
+  options?: QuestionOption[];
   required: boolean;
   groupKey?: string;
   responseKey?: string;
 }
+
+export interface QuestionOption {
+  label: string;
+  value: string;
+  helpText?: string;
+}
diff --git a/src/app/features/registries/models/registries-json-api.model.ts b/src/app/features/registries/models/registration-json-api.model.ts
similarity index 65%
rename from src/app/features/registries/models/registries-json-api.model.ts
rename to src/app/features/registries/models/registration-json-api.model.ts
index b9535ab03..f581282e6 100644
--- a/src/app/features/registries/models/registries-json-api.model.ts
+++ b/src/app/features/registries/models/registration-json-api.model.ts
@@ -6,7 +6,12 @@ export interface RegistrationResponseJsonApi {
   links: PaginationLinksJsonApi;
 }
 
-export type RegistrationDataJsonApi = ApiData<RegistrationAttributesJsonApi, null, null, null>;
+export type RegistrationDataJsonApi = ApiData<
+  RegistrationAttributesJsonApi,
+  null,
+  RegistrationRelationshipsJsonApi,
+  null
+>;
 
 interface RegistrationAttributesJsonApi {
   category: string;
@@ -21,3 +26,12 @@ interface RegistrationAttributesJsonApi {
   tags: string[];
   title: string;
 }
+
+interface RegistrationRelationshipsJsonApi {
+  registration_schema: {
+    data: {
+      id: '58fd62fcda3e2400012ca5c1';
+      type: 'registration-schemas';
+    };
+  };
+}
diff --git a/src/app/features/registries/models/registries.model.ts b/src/app/features/registries/models/registration.model.ts
similarity index 73%
rename from src/app/features/registries/models/registries.model.ts
rename to src/app/features/registries/models/registration.model.ts
index f5dbab474..6a717fc94 100644
--- a/src/app/features/registries/models/registries.model.ts
+++ b/src/app/features/registries/models/registration.model.ts
@@ -2,4 +2,5 @@ export interface Registration {
   id: string;
   title: string;
   description: string;
+  registrationSchemaId: string;
 }
diff --git a/src/app/features/registries/services/registries.service.ts b/src/app/features/registries/services/registries.service.ts
index aa11c9ad6..5a89f9e4c 100644
--- a/src/app/features/registries/services/registries.service.ts
+++ b/src/app/features/registries/services/registries.service.ts
@@ -9,9 +9,14 @@ import { ContributorsMapper } from '@osf/shared/components/contributors/mappers'
 import { ContributorAddModel, ContributorModel, ContributorResponse } from '@osf/shared/components/contributors/models';
 
 import { PageSchemaMapper } from '../mappers';
-import { PageSchema, Registration } from '../models';
-import { RegistrationDataJsonApi } from '../models/registries-json-api.model';
-import { SchemaBlocksResponseJsonApi } from '../models/schema-blocks-json-api.model';
+import { RegistrationMapper } from '../mappers/registration.mapper';
+import {
+  PageSchema,
+  Registration,
+  RegistrationDataJsonApi,
+  RegistrationResponseJsonApi,
+  SchemaBlocksResponseJsonApi,
+} from '../models';
 
 import { environment } from 'src/environments/environment';
 
@@ -22,7 +27,7 @@ export class RegistriesService {
   private apiUrl = environment.apiUrl;
   private readonly jsonApiService = inject(JsonApiService);
 
-  createDraft(registrationSchemaId: string, projectId?: string | undefined): Observable<RegistrationDataJsonApi> {
+  createDraft(registrationSchemaId: string, projectId?: string | undefined): Observable<Registration> {
     const payload = {
       data: {
         type: 'draft_registrations',
@@ -44,7 +49,15 @@ export class RegistriesService {
         },
       },
     };
-    return this.jsonApiService.post(`${this.apiUrl}/draft_registrations/`, payload);
+    return this.jsonApiService
+      .post<RegistrationDataJsonApi>(`${this.apiUrl}/draft_registrations/`, payload)
+      .pipe(map((response) => RegistrationMapper.fromRegistrationResponse(response)));
+  }
+
+  getDraft(draftId: string): Observable<Registration> {
+    return this.jsonApiService
+      .get<RegistrationResponseJsonApi>(`${this.apiUrl}/draft_registrations/${draftId}/`)
+      .pipe(map((response) => RegistrationMapper.fromRegistrationResponse(response.data)));
   }
 
   updateDraft(draftId: string, data: Registration): Observable<RegistrationDataJsonApi> {
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index f409ad91b..f0d28123f 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -17,6 +17,11 @@ export class CreateDraft {
   constructor(public payload: { registrationSchemaId: string; projectId?: string }) {}
 }
 
+export class FetchDraft {
+  static readonly type = '[Registries]  Fetch Draft';
+  constructor(public draftId: string) {}
+}
+
 export class DeleteDraft {
   static readonly type = '[Registries]  Delete Draft';
   constructor(public draftId: string) {}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index 7700a4945..9ffd22657 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -2,7 +2,7 @@ import { ContributorModel } from '@osf/shared/components/contributors/models';
 import { AsyncStateModel, Resource } from '@shared/models';
 
 import { License, PageSchema, Project, Provider } from '../models';
-import { Registration } from '../models/registries.model';
+import { Registration } from '../models/registration.model';
 
 export interface RegistriesStateModel {
   providers: AsyncStateModel<Provider[]>;
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 272527046..044e44efd 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -2,7 +2,7 @@ import { Selector } from '@ngxs/store';
 
 import { Resource } from '@shared/models';
 
-import { License, PageSchema, Project, Provider } from '../models';
+import { License, PageSchema, Project, Provider, Registration } from '../models';
 
 import { RegistriesStateModel } from './registries.model';
 import { RegistriesState } from './registries.state';
@@ -23,6 +23,11 @@ export class RegistriesSelectors {
     return state.draftRegistration.isSubmitting ?? false;
   }
 
+  @Selector([RegistriesState])
+  static getDraftRegistration(state: RegistriesStateModel): Registration | null {
+    return state.draftRegistration.data;
+  }
+
   @Selector([RegistriesState])
   static getContributors(state: RegistriesStateModel) {
     return state.contributorsList.data;
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index b622b962d..b385c2570 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -18,6 +18,7 @@ import {
   DeleteContributor,
   DeleteDraft,
   FetchContributors,
+  FetchDraft,
   FetchLicenses,
   FetchSchemaBlocks,
   GetProjects,
@@ -174,7 +175,8 @@ export class RegistriesState {
       tap((registration) => {
         ctx.patchState({
           draftRegistration: {
-            ...ctx.getState().draftRegistration,
+            data: { ...registration },
+            isLoading: false,
             isSubmitting: false,
             error: null,
           },
@@ -193,6 +195,31 @@ export class RegistriesState {
     );
   }
 
+  @Action(FetchDraft)
+  fetchDraft(ctx: StateContext<RegistriesStateModel>, { draftId }: FetchDraft) {
+    ctx.patchState({
+      draftRegistration: {
+        ...ctx.getState().draftRegistration,
+        isLoading: true,
+        error: null,
+      },
+    });
+
+    return this.registriesService.getDraft(draftId).pipe(
+      tap((draft) => {
+        ctx.patchState({
+          draftRegistration: {
+            data: { ...draft },
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'draftRegistration', error))
+    );
+  }
+
   @Action(DeleteDraft)
   deleteDraft(ctx: StateContext<RegistriesStateModel>, { draftId }: DeleteDraft) {
     ctx.patchState({
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 783996d91..c687a0445 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -52,7 +52,9 @@
     },
     "links": {
       "clickHere": "Click here",
-      "helpGuide": "Help Guide"
+      "helpGuide": "Help Guide",
+      "showExample": "Show Example",
+      "hideExample": "Hide Example"
     }
   },
   "navigation": {
@@ -378,6 +380,7 @@
       "createDraft": "Create draft"
     },
     "deleteDraft": "Delete Draft",
+    "confirmDeleteDraft": "Are you sure you want to delete this draft registration?",
     "metadata": {
       "title": "Registration  Metadata",
       "description": "This metadata applies only to the registration you are creating, and will not be applied to your project.",

From 85e2ddda9183e4adb2b582e8be77d31489641147 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Tue, 1 Jul 2025 11:10:27 +0300
Subject: [PATCH 12/15] feat(registries): add subjects section

---
 .../core/constants/ngxs-states.constant.ts    |   2 -
 .../metadata/metadata.component.html          |   1 +
 .../components/metadata/metadata.component.ts |   2 +
 .../metadata/subjects/subjects.component.html |  11 +-
 .../metadata/subjects/subjects.component.ts   |  55 +++++++-
 .../new-registration.component.html           |   2 +-
 .../registries/mappers/licenses.mapper.ts     |   1 -
 .../registries/mappers/registration.mapper.ts |   1 -
 .../features/registries/registries.routes.ts  |  12 +-
 src/app/features/registries/services/index.ts |   1 +
 .../services/registration-subjects.service.ts |  74 +++++++++++
 .../registries/store/registries.actions.ts    |  14 +++
 .../registries/store/registries.model.ts      |   3 +-
 .../registries/store/registries.selectors.ts  |  12 +-
 .../registries/store/registries.state.ts      |  66 +++++++++-
 src/app/shared/components/index.ts            |   1 +
 .../subjects/subjects.component.html          |  61 +++++++++
 .../subjects/subjects.component.scss          |   0
 .../subjects/subjects.component.spec.ts       |  22 ++++
 .../components/subjects/subjects.component.ts | 111 ++++++++++++++++
 .../shared/mappers/subjects/subject-mapper.ts |  28 ++++-
 src/app/shared/models/index.ts                |   1 +
 src/app/shared/models/subject/index.ts        |   2 +
 .../models/subject/subject-service.model.ts   |   8 ++
 .../shared/models/subject/subject.model.ts    |   7 ++
 .../models/subject/subjects-json-api.model.ts |  50 ++++++++
 .../stores/subjects/subjects.actions.ts       |  10 ++
 .../shared/stores/subjects/subjects.model.ts  |   4 +-
 .../stores/subjects/subjects.selectors.ts     |  22 ++++
 .../shared/stores/subjects/subjects.state.ts  | 118 +++++++++++++++++-
 src/app/shared/tokens/index.ts                |   0
 src/app/shared/tokens/subjects.token.ts       |   5 +
 src/assets/i18n/en.json                       |   6 +
 33 files changed, 692 insertions(+), 21 deletions(-)
 create mode 100644 src/app/features/registries/services/registration-subjects.service.ts
 create mode 100644 src/app/shared/components/subjects/subjects.component.html
 create mode 100644 src/app/shared/components/subjects/subjects.component.scss
 create mode 100644 src/app/shared/components/subjects/subjects.component.spec.ts
 create mode 100644 src/app/shared/components/subjects/subjects.component.ts
 create mode 100644 src/app/shared/models/subject/index.ts
 create mode 100644 src/app/shared/models/subject/subject-service.model.ts
 create mode 100644 src/app/shared/models/subject/subject.model.ts
 create mode 100644 src/app/shared/models/subject/subjects-json-api.model.ts
 create mode 100644 src/app/shared/tokens/index.ts
 create mode 100644 src/app/shared/tokens/subjects.token.ts

diff --git a/src/app/core/constants/ngxs-states.constant.ts b/src/app/core/constants/ngxs-states.constant.ts
index 271cd4d57..936f30cab 100644
--- a/src/app/core/constants/ngxs-states.constant.ts
+++ b/src/app/core/constants/ngxs-states.constant.ts
@@ -15,7 +15,6 @@ import { NotificationSubscriptionState } from '@osf/features/settings/notificati
 import { ProfileSettingsState } from '@osf/features/settings/profile-settings/store/profile-settings.state';
 import { AddonsState, InstitutionsState } from '@shared/stores';
 import { LicensesState } from '@shared/stores/licenses';
-import { SubjectsState } from '@shared/stores/subjects';
 
 export const STATES = [
   AuthState,
@@ -35,6 +34,5 @@ export const STATES = [
   MeetingsState,
   RegistrationsState,
   ProjectMetadataState,
-  SubjectsState,
   LicensesState,
 ];
diff --git a/src/app/features/registries/components/metadata/metadata.component.html b/src/app/features/registries/components/metadata/metadata.component.html
index 574934bb7..acc9ff5b1 100644
--- a/src/app/features/registries/components/metadata/metadata.component.html
+++ b/src/app/features/registries/components/metadata/metadata.component.html
@@ -27,6 +27,7 @@ <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
   </section>
   <osf-contributors></osf-contributors>
   <osf-license></osf-license>
+  <osf-registries-subjects></osf-registries-subjects>
   <div class="flex justify-content-end">
     <p-button [label]="'registries.deleteDraft' | translate" severity="danger" (click)="deleteDraft()" class="mr-2">
     </p-button>
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
index 87e1e456c..b6ab526e1 100644
--- a/src/app/features/registries/components/metadata/metadata.component.ts
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -19,6 +19,7 @@ import { DeleteDraft } from '../../store';
 
 import { ContributorsComponent } from './contributors/contributors.component';
 import { LicenseComponent } from './license/license.component';
+import { SubjectsRegistriesComponent } from './subjects/subjects.component';
 
 @Component({
   selector: 'osf-metadata',
@@ -31,6 +32,7 @@ import { LicenseComponent } from './license/license.component';
     TextareaModule,
     ContributorsComponent,
     LicenseComponent,
+    SubjectsRegistriesComponent,
   ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.html b/src/app/features/registries/components/metadata/subjects/subjects.component.html
index 290fbd8b7..1e83c52cd 100644
--- a/src/app/features/registries/components/metadata/subjects/subjects.component.html
+++ b/src/app/features/registries/components/metadata/subjects/subjects.component.html
@@ -1 +1,10 @@
-<p>subjects works!</p>
+<osf-subjects
+  [loading]="subjectsLoading() || isSubjectsUpdating()"
+  [isSearching]="isSearching()"
+  [list]="subjects()"
+  [selected]="selectedSubjects()"
+  [searchedSubjects]="searchedSubjects()"
+  (loadChildren)="getSubjectChildren($event)"
+  (searchChanged)="searchSubjects($event)"
+  (updateSelection)="updateSelectedSubjects($event)"
+></osf-subjects>
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.ts b/src/app/features/registries/components/metadata/subjects/subjects.component.ts
index ddbd541ab..5fd96dc1a 100644
--- a/src/app/features/registries/components/metadata/subjects/subjects.component.ts
+++ b/src/app/features/registries/components/metadata/subjects/subjects.component.ts
@@ -1,10 +1,57 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import {
+  FetchRegistrationSubjects,
+  RegistriesSelectors,
+  UpdateRegistrationSubjects,
+} from '@osf/features/registries/store';
+import { SubjectsComponent } from '@osf/shared/components';
+import { Subject } from '@osf/shared/models';
+import { FetchChildrenSubjects, FetchSubjects } from '@osf/shared/stores';
+import { SubjectsSelectors } from '@osf/shared/stores/subjects/subjects.selectors';
 
 @Component({
-  selector: 'osf-subjects',
-  imports: [],
+  selector: 'osf-registries-subjects',
+  imports: [SubjectsComponent],
   templateUrl: './subjects.component.html',
   styleUrl: './subjects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SubjectsComponent {}
+export class SubjectsRegistriesComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly draftId = this.route.snapshot.params['id'];
+
+  protected subjects = select(SubjectsSelectors.getSubjects);
+  protected subjectsLoading = select(SubjectsSelectors.getSubjectsLoading);
+  protected searchedSubjects = select(SubjectsSelectors.getSearchedSubjects);
+  protected isSearching = select(SubjectsSelectors.getSearchedSubjectsLoading);
+  protected selectedSubjects = select(RegistriesSelectors.getSelectedSubjects);
+  protected isSubjectsUpdating = select(RegistriesSelectors.isSubjectsUpdating);
+
+  protected actions = createDispatchMap({
+    fetchSubjects: FetchSubjects,
+    fetchRegistrationSubjects: FetchRegistrationSubjects,
+    fetchChildrenSubjects: FetchChildrenSubjects,
+    updateRegistrationSubjects: UpdateRegistrationSubjects,
+  });
+
+  constructor() {
+    this.actions.fetchSubjects();
+    this.actions.fetchRegistrationSubjects(this.draftId);
+  }
+
+  getSubjectChildren(parentId: string) {
+    this.actions.fetchChildrenSubjects(parentId);
+  }
+
+  searchSubjects(search: string) {
+    this.actions.fetchSubjects(search);
+  }
+
+  updateSelectedSubjects(subjects: Subject[]) {
+    this.actions.updateRegistrationSubjects(this.draftId, subjects);
+  }
+}
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.html b/src/app/features/registries/components/new-registration/new-registration.component.html
index 6116c6feb..dfafdef82 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.html
+++ b/src/app/features/registries/components/new-registration/new-registration.component.html
@@ -35,7 +35,7 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
         <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
         <div class="flex">
           <p-select
-            formControlName="provider"
+            formControlName="project"
             [options]="projects()"
             optionLabel="title"
             optionValue="id"
diff --git a/src/app/features/registries/mappers/licenses.mapper.ts b/src/app/features/registries/mappers/licenses.mapper.ts
index 47cc364ad..9ad0a8290 100644
--- a/src/app/features/registries/mappers/licenses.mapper.ts
+++ b/src/app/features/registries/mappers/licenses.mapper.ts
@@ -2,7 +2,6 @@ import { License, LicensesResponseJsonApi } from '../models';
 
 export class LicensesMapper {
   static fromLicensesResponse(response: LicensesResponseJsonApi): License[] {
-    console.log('LicensesMapper.fromLicensesResponse', response);
     return response.data.map((item) => ({
       id: item.id,
       name: item.attributes.name,
diff --git a/src/app/features/registries/mappers/registration.mapper.ts b/src/app/features/registries/mappers/registration.mapper.ts
index 77cc75235..9ae2e1bd2 100644
--- a/src/app/features/registries/mappers/registration.mapper.ts
+++ b/src/app/features/registries/mappers/registration.mapper.ts
@@ -3,7 +3,6 @@ import { Registration } from '../models/registration.model';
 
 export class RegistrationMapper {
   static fromRegistrationResponse(response: RegistrationDataJsonApi): Registration {
-    console.log('RegistrationMapper.fromRegistrationResponse', response);
     return {
       id: response.id,
       title: response.attributes.title,
diff --git a/src/app/features/registries/registries.routes.ts b/src/app/features/registries/registries.routes.ts
index bd7aee04f..796ddb101 100644
--- a/src/app/features/registries/registries.routes.ts
+++ b/src/app/features/registries/registries.routes.ts
@@ -5,12 +5,22 @@ import { Routes } from '@angular/router';
 import { RegistriesComponent } from '@osf/features/registries/registries.component';
 import { RegistriesState } from '@osf/features/registries/store';
 import { ContributorsState } from '@osf/shared/components/contributors/store';
+import { SubjectsState } from '@osf/shared/stores';
+import { SUBJECTS_SERVICE } from '@osf/shared/tokens/subjects.token';
+
+import { RegistrationSubjectsService } from './services';
 
 export const registriesRoutes: Routes = [
   {
     path: '',
     component: RegistriesComponent,
-    providers: [provideStates([RegistriesState, ContributorsState])],
+    providers: [
+      provideStates([RegistriesState, ContributorsState, SubjectsState]),
+      {
+        provide: SUBJECTS_SERVICE,
+        useClass: RegistrationSubjectsService,
+      },
+    ],
     children: [
       {
         path: '',
diff --git a/src/app/features/registries/services/index.ts b/src/app/features/registries/services/index.ts
index b6471bbb9..99fc8de16 100644
--- a/src/app/features/registries/services/index.ts
+++ b/src/app/features/registries/services/index.ts
@@ -1,4 +1,5 @@
 export * from './licenses.service';
 export * from './projects.service';
 export * from './providers.service';
+export * from './registration-subjects.service';
 export * from './registries.service';
diff --git a/src/app/features/registries/services/registration-subjects.service.ts b/src/app/features/registries/services/registration-subjects.service.ts
new file mode 100644
index 000000000..13229a282
--- /dev/null
+++ b/src/app/features/registries/services/registration-subjects.service.ts
@@ -0,0 +1,74 @@
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+import { SubjectMapper } from '@osf/shared/mappers';
+import { Subject, SubjectsResponseJsonApi } from '@osf/shared/models';
+import { ISubjectsService } from '@osf/shared/models/subject/subject-service.model';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RegistrationSubjectsService implements ISubjectsService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getSubjects(search?: string): Observable<Subject[]> {
+    const params: Record<string, string> = {
+      'page[size]': '100',
+      sort: 'text',
+      related_counts: 'children',
+      'filter[parent]': 'null',
+    };
+    if (search) {
+      delete params['filter[parent]'];
+      params['filter[text]'] = search;
+      params['embed'] = 'parent';
+    }
+    return this.jsonApiService
+      .get<SubjectsResponseJsonApi>(`${this.apiUrl}/providers/registrations/osf/subjects/`, params)
+      .pipe(
+        map((response) => {
+          return SubjectMapper.fromSubjectsResponseJsonApi(response);
+        })
+      );
+  }
+
+  getChildrenSubjects(parentId: string): Observable<Subject[]> {
+    const params: Record<string, string> = {
+      'page[size]': '100',
+      page: '1',
+      sort: 'text',
+      related_counts: 'children',
+    };
+
+    return this.jsonApiService
+      .get<SubjectsResponseJsonApi>(`${this.apiUrl}/subjects/${parentId}/children/`, params)
+      .pipe(
+        map((response) => {
+          return SubjectMapper.fromSubjectsResponseJsonApi(response);
+        })
+      );
+  }
+
+  getRegistrationSubjects(draftId: string): Observable<Subject[]> {
+    return this.jsonApiService
+      .get<SubjectsResponseJsonApi>(`${this.apiUrl}/draft_registrations/${draftId}/subjects/`)
+      .pipe(
+        map((response) => {
+          return SubjectMapper.fromSubjectsResponseJsonApi(response);
+        })
+      );
+  }
+
+  updateRegistrationSubjects(draftId: string, subjects: Subject[]): Observable<void> {
+    const payload = {
+      data: subjects.map((item) => ({ id: item.id, type: 'subjects' })),
+    };
+
+    return this.jsonApiService.put(`${this.apiUrl}/draft_registrations/${draftId}/relationships/subjects/`, payload);
+  }
+}
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index f0d28123f..bc0e1579e 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -1,4 +1,5 @@
 import { ContributorAddModel, ContributorModel } from '@osf/shared/components/contributors/models';
+import { Subject } from '@osf/shared/models';
 
 export class GetRegistries {
   static readonly type = '[Registries] Get Registries';
@@ -68,3 +69,16 @@ export class DeleteContributor {
 export class FetchLicenses {
   static readonly type = '[Registries] Fetch Licenses';
 }
+
+export class FetchRegistrationSubjects {
+  static readonly type = '[Registries] Fetch Registration Subjects';
+  constructor(public registrationId: string) {}
+}
+
+export class UpdateRegistrationSubjects {
+  static readonly type = '[Registries] Update Registration Subject';
+  constructor(
+    public registrationId: string,
+    public subjects: Subject[]
+  ) {}
+}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index 9ffd22657..2ce1f6202 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -1,5 +1,5 @@
 import { ContributorModel } from '@osf/shared/components/contributors/models';
-import { AsyncStateModel, Resource } from '@shared/models';
+import { AsyncStateModel, Resource, Subject } from '@shared/models';
 
 import { License, PageSchema, Project, Provider } from '../models';
 import { Registration } from '../models/registration.model';
@@ -11,5 +11,6 @@ export interface RegistriesStateModel {
   contributorsList: AsyncStateModel<ContributorModel[]>;
   registries: AsyncStateModel<Resource[]>;
   licenses: AsyncStateModel<License[]>;
+  registrationSubjects: AsyncStateModel<Subject[]>;
   pagesSchema: AsyncStateModel<PageSchema[]>;
 }
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 044e44efd..0bac0f7a1 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -1,6 +1,6 @@
 import { Selector } from '@ngxs/store';
 
-import { Resource } from '@shared/models';
+import { Resource, Subject } from '@shared/models';
 
 import { License, PageSchema, Project, Provider, Registration } from '../models';
 
@@ -52,4 +52,14 @@ export class RegistriesSelectors {
   static getPagesSchema(state: RegistriesStateModel): PageSchema[] {
     return state.pagesSchema.data;
   }
+
+  @Selector([RegistriesState])
+  static getSelectedSubjects(state: RegistriesStateModel): Subject[] {
+    return state.registrationSubjects.data;
+  }
+
+  @Selector([RegistriesState])
+  static isSubjectsUpdating(state: RegistriesStateModel): boolean {
+    return state.registrationSubjects.isLoading;
+  }
 }
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index b385c2570..f2f609e8e 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -10,7 +10,13 @@ import { SearchService } from '@osf/shared/services';
 import { getResourceTypes } from '@osf/shared/utils';
 
 import { Project } from '../models';
-import { LicensesService, ProjectsService, ProvidersService, RegistriesService } from '../services';
+import {
+  LicensesService,
+  ProjectsService,
+  ProvidersService,
+  RegistrationSubjectsService,
+  RegistriesService,
+} from '../services';
 
 import {
   AddContributor,
@@ -20,11 +26,13 @@ import {
   FetchContributors,
   FetchDraft,
   FetchLicenses,
+  FetchRegistrationSubjects,
   FetchSchemaBlocks,
   GetProjects,
   GetProviders,
   GetRegistries,
   UpdateContributor,
+  UpdateRegistrationSubjects,
 } from './registries.actions';
 import { RegistriesStateModel } from './registries.model';
 
@@ -60,6 +68,11 @@ const DefaultState: RegistriesStateModel = {
     isLoading: false,
     error: null,
   },
+  registrationSubjects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
   pagesSchema: {
     data: [],
     isLoading: false,
@@ -78,6 +91,7 @@ export class RegistriesState {
   projectsService = inject(ProjectsService);
   registriesService = inject(RegistriesService);
   licensesService = inject(LicensesService);
+  subjectsService = inject(RegistrationSubjectsService);
 
   @Action(GetRegistries)
   getRegistries(ctx: StateContext<RegistriesStateModel>) {
@@ -381,6 +395,56 @@ export class RegistriesState {
     );
   }
 
+  @Action(FetchRegistrationSubjects)
+  fetchRegistrationSubjects(ctx: StateContext<RegistriesStateModel>, { registrationId }: FetchRegistrationSubjects) {
+    ctx.patchState({
+      registrationSubjects: {
+        ...ctx.getState().registrationSubjects,
+        isLoading: true,
+        error: null,
+      },
+    });
+
+    return this.subjectsService.getRegistrationSubjects(registrationId).pipe(
+      tap((subjects) => {
+        ctx.patchState({
+          registrationSubjects: {
+            data: subjects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'registrationSubjects', error))
+    );
+  }
+
+  @Action(UpdateRegistrationSubjects)
+  updateRegistrationSubjects(
+    ctx: StateContext<RegistriesStateModel>,
+    { registrationId, subjects }: UpdateRegistrationSubjects
+  ) {
+    ctx.patchState({
+      registrationSubjects: {
+        ...ctx.getState().registrationSubjects,
+        isLoading: true,
+        error: null,
+      },
+    });
+    return this.subjectsService.updateRegistrationSubjects(registrationId, subjects).pipe(
+      tap(() => {
+        ctx.patchState({
+          registrationSubjects: {
+            data: subjects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'registrationSubjects', error))
+    );
+  }
+
   private handleError(ctx: StateContext<RegistriesStateModel>, section: keyof RegistriesStateModel, error: Error) {
     ctx.patchState({
       [section]: {
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 53aaeb0fc..a63440d79 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -24,6 +24,7 @@ export { SearchInputComponent } from './search-input/search-input.component';
 export { SelectComponent } from './select/select.component';
 export { StepperComponent } from './stepper/stepper.component';
 export { SubHeaderComponent } from './sub-header/sub-header.component';
+export { SubjectsComponent } from './subjects/subjects.component';
 export { TextInputComponent } from './text-input/text-input.component';
 export { ToastComponent } from './toast/toast.component';
 export { TruncatedTextComponent } from './truncated-text/truncated-text.component';
diff --git a/src/app/shared/components/subjects/subjects.component.html b/src/app/shared/components/subjects/subjects.component.html
new file mode 100644
index 000000000..2ab6c967b
--- /dev/null
+++ b/src/app/shared/components/subjects/subjects.component.html
@@ -0,0 +1,61 @@
+<p-card class="w-full">
+  <h2 class="mb-2">{{ 'shared.subjects.title' | translate }}</h2>
+  <p-card class="block text-base mb-3">
+    @if (!selected().length) {
+      <p class="text-500">{{ 'shared.subjects.noSelected' | translate }}</p>
+    } @else {
+      @for (subject of selected(); track subject.id) {
+        <p-chip [label]="subject.name" [removable]="true" class="mb-2 mr-2" (onRemove)="removeSubject(subject)" />
+      }
+    }
+  </p-card>
+  <osf-search-input
+    class="w-full"
+    [control]="searchControl"
+    [placeholder]="'shared.subjects.searchSubjects' | translate"
+  />
+  @if (searchControl.value) {
+    <div class="mt-4 pl-3">
+      @if (isSearching()) {
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+      } @else {
+        @if (!searchedList().length) {
+          <p class="text-500">{{ 'shared.subjects.noSubject' | translate }}</p>
+        }
+        @for (subjects of searchedList(); track $index) {
+          <div class="flex mb-2">
+            <p-checkbox
+              [inputId]="'subjects-' + $index"
+              [value]="subjects"
+              (onChange)="selectSearched($event, subjects)"
+            />
+            <label for="subjects-{{ $index }}" class="flex flex-wrap ml-2">
+              @for (item of subjects; track item.id) {
+                <span [class]="$last ? 'font-bold' : ''">{{ item.name }}</span>
+                @if (!$last) {
+                  <span class="mx-1">/</span>
+                }
+              }
+            </label>
+          </div>
+        }
+      }
+    </div>
+  } @else {
+    <p-tree
+      [value]="subjectsTree()"
+      selectionMode="checkbox"
+      [selection]="selectedTree()"
+      [lazy]="true"
+      [loading]="loading()"
+      (onNodeExpand)="loadNode($event.node)"
+      (onNodeCollapse)="collapseNode($event.node)"
+      (onNodeSelect)="selectSubject($event.node.data)"
+      (onNodeUnselect)="removeSubject($event.node.data)"
+    >
+    </p-tree>
+  }
+</p-card>
diff --git a/src/app/shared/components/subjects/subjects.component.scss b/src/app/shared/components/subjects/subjects.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/components/subjects/subjects.component.spec.ts b/src/app/shared/components/subjects/subjects.component.spec.ts
new file mode 100644
index 000000000..ba5495891
--- /dev/null
+++ b/src/app/shared/components/subjects/subjects.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubjectsComponent } from './subjects.component';
+
+describe('SubjectsComponent', () => {
+  let component: SubjectsComponent;
+  let fixture: ComponentFixture<SubjectsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubjectsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SubjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/subjects/subjects.component.ts b/src/app/shared/components/subjects/subjects.component.ts
new file mode 100644
index 000000000..2e7714ca2
--- /dev/null
+++ b/src/app/shared/components/subjects/subjects.component.ts
@@ -0,0 +1,111 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { TreeNode } from 'primeng/api';
+import { Card } from 'primeng/card';
+import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
+import { Chip } from 'primeng/chip';
+import { Skeleton } from 'primeng/skeleton';
+import { Tree, TreeModule } from 'primeng/tree';
+
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { Subject } from '@osf/shared/models';
+
+import { SearchInputComponent } from '../search-input/search-input.component';
+
+@Component({
+  selector: 'osf-subjects',
+  imports: [Card, TranslatePipe, Chip, SearchInputComponent, Tree, TreeModule, Checkbox, Skeleton],
+  templateUrl: './subjects.component.html',
+  styleUrl: './subjects.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SubjectsComponent {
+  list = input<Subject[]>([]);
+  searchedSubjects = input<Subject[]>([]);
+  loading = input<boolean>(false);
+  isSearching = input<boolean>(false);
+  selected = input<Subject[]>([]);
+  searchChanged = output<string>();
+  loadChildren = output<string>();
+  updateSelection = output<Subject[]>();
+
+  subjectsTree = computed(() => this.list().map((subject: Subject) => this.mapSubjectToTreeNode(subject)));
+  selectedTree = computed(() => this.selected().map((subject: Subject) => this.mapSubjectToTreeNode(subject)));
+  searchedList = computed(() => this.searchedSubjects().map((subject: Subject) => this.mapSearchedSubject(subject)));
+  expanded: Record<string, boolean> = {};
+
+  protected searchControl = new FormControl<string>('');
+
+  constructor() {
+    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
+      this.searchChanged.emit(value ?? '');
+    });
+  }
+
+  loadNode(event: TreeNode) {
+    this.expanded[event.data.id] = true;
+    if (event.data.children?.length === 0) {
+      this.loadChildren.emit(event.data.id);
+    }
+  }
+
+  collapseNode(event: TreeNode) {
+    this.expanded[event.data.id] = false;
+  }
+
+  selectSubject(subject: Subject) {
+    const childrenIds = this.getChildrenIds([subject]);
+    const updatedSelection = [...this.selected().filter((s) => !childrenIds.includes(s.id)), subject];
+    this.updateSelection.emit(updatedSelection);
+  }
+
+  removeSubject(subject: Subject) {
+    const updatedSelection = this.selected().filter(
+      (s) => s.id !== subject.id && !this.getChildrenIds([subject]).includes(s.id)
+    );
+    this.updateSelection.emit(updatedSelection);
+  }
+
+  selectSearched(event: CheckboxChangeEvent, subjects: Subject[]) {
+    if (event.checked) {
+      this.updateSelection.emit([...this.selected(), ...subjects]);
+    } else {
+      const updatedSelection = this.selected().filter((s) => !subjects.some((sub) => sub.id === s.id));
+      this.updateSelection.emit(updatedSelection);
+    }
+  }
+
+  private getChildrenIds(subjects: Subject[]): string[] {
+    return subjects.reduce((acc: string[], subject: Subject) => {
+      acc.push(subject.id);
+      if (subject.children) {
+        acc.push(...this.getChildrenIds(subject.children));
+      }
+      return acc;
+    }, []);
+  }
+
+  private mapSubjectToTreeNode(subject: Subject): TreeNode {
+    return {
+      label: subject.name,
+      data: subject,
+      key: subject.id,
+      children: subject.children?.map((child: Subject) => this.mapSubjectToTreeNode(child)),
+      leaf: !subject.children,
+      expanded: this.expanded[subject.id] ?? false,
+    };
+  }
+
+  private mapSearchedSubject(subject: Subject | null | undefined, acc: Subject[] = []): Subject[] {
+    if (!subject) {
+      return acc.reverse();
+    }
+
+    acc.push(subject);
+    return this.mapSearchedSubject(subject.parent, acc);
+  }
+}
diff --git a/src/app/shared/mappers/subjects/subject-mapper.ts b/src/app/shared/mappers/subjects/subject-mapper.ts
index 7ce077037..7f1e653a3 100644
--- a/src/app/shared/mappers/subjects/subject-mapper.ts
+++ b/src/app/shared/mappers/subjects/subject-mapper.ts
@@ -1,4 +1,4 @@
-import { NodeSubjectModel, SubjectData } from '@shared/models';
+import { NodeSubjectModel, Subject, SubjectData, SubjectDataJsonApi, SubjectsResponseJsonApi } from '@shared/models';
 
 export class SubjectMapper {
   static mapSubjectsResponse(subjectData: SubjectData[]): NodeSubjectModel[] {
@@ -95,4 +95,30 @@ export class SubjectMapper {
 
     return sortSubjects(rootSubjects);
   }
+
+  static fromSubjectsResponseJsonApi(response: SubjectsResponseJsonApi): Subject[] {
+    return response.data.map((data) => {
+      const subject: Subject = {
+        id: data.id,
+        name: data.attributes.text,
+        children: data.relationships.children?.links.related.meta.count > 0 ? [] : undefined,
+        parent: data.embeds?.parent?.data ? this.setSubjectParent(data.embeds.parent.data) : null,
+      };
+
+      return subject;
+    });
+  }
+
+  private static setSubjectParent(data: SubjectDataJsonApi): Subject | null {
+    if (!data) {
+      return null;
+    }
+
+    return {
+      id: data.id,
+      name: data.attributes.text,
+      children: data.relationships?.children?.links?.related?.meta?.count > 0 ? [] : undefined,
+      parent: data.embeds?.parent?.data ? this.setSubjectParent(data.embeds.parent.data) : null,
+    };
+  }
 }
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index a21aa5130..0856d6e9d 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -25,6 +25,7 @@ export * from './severity.type';
 export * from './social-icon.model';
 export * from './step-option.model';
 export * from './store';
+export * from './subject';
 export * from './tab-option.model';
 export * from './table-parameters.model';
 export * from './tooltip-position.model';
diff --git a/src/app/shared/models/subject/index.ts b/src/app/shared/models/subject/index.ts
new file mode 100644
index 000000000..0088c2e47
--- /dev/null
+++ b/src/app/shared/models/subject/index.ts
@@ -0,0 +1,2 @@
+export * from './subject.model';
+export * from './subjects-json-api.model';
diff --git a/src/app/shared/models/subject/subject-service.model.ts b/src/app/shared/models/subject/subject-service.model.ts
new file mode 100644
index 000000000..b9b5ae941
--- /dev/null
+++ b/src/app/shared/models/subject/subject-service.model.ts
@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+
+import { Subject } from './subject.model';
+
+export interface ISubjectsService {
+  getSubjects(search?: string): Observable<Subject[]>;
+  getChildrenSubjects(parentId: string): Observable<Subject[]>;
+}
diff --git a/src/app/shared/models/subject/subject.model.ts b/src/app/shared/models/subject/subject.model.ts
new file mode 100644
index 000000000..83e715e5e
--- /dev/null
+++ b/src/app/shared/models/subject/subject.model.ts
@@ -0,0 +1,7 @@
+export interface Subject {
+  id: string;
+  name: string;
+  children?: Subject[];
+  parent?: Subject | null;
+  expanded?: boolean;
+}
diff --git a/src/app/shared/models/subject/subjects-json-api.model.ts b/src/app/shared/models/subject/subjects-json-api.model.ts
new file mode 100644
index 000000000..81fd4f296
--- /dev/null
+++ b/src/app/shared/models/subject/subjects-json-api.model.ts
@@ -0,0 +1,50 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface SubjectsResponseJsonApi {
+  data: SubjectDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type SubjectDataJsonApi = ApiData<
+  SubjectAttributesJsonApi,
+  SubjectEmbedsJsonApi,
+  SubjectRelationshipsJsonApi,
+  null
+>;
+
+interface SubjectAttributesJsonApi {
+  text: string;
+  taxonomy_name: string;
+}
+
+interface SubjectRelationshipsJsonApi {
+  parent?: {
+    links: {
+      related: {
+        href: string;
+        meta: Record<string, unknown>;
+      };
+    };
+    data?: {
+      id: string;
+      type: 'subjects';
+    };
+  };
+  children: {
+    links: {
+      related: {
+        href: string;
+        meta: {
+          count: number;
+        };
+      };
+    };
+  };
+}
+
+interface SubjectEmbedsJsonApi {
+  parent?: {
+    data: SubjectDataJsonApi;
+  };
+}
diff --git a/src/app/shared/stores/subjects/subjects.actions.ts b/src/app/shared/stores/subjects/subjects.actions.ts
index f50abb52c..d2a92eda6 100644
--- a/src/app/shared/stores/subjects/subjects.actions.ts
+++ b/src/app/shared/stores/subjects/subjects.actions.ts
@@ -9,3 +9,13 @@ export class UpdateProjectSubjects {
     public subjectIds: string[]
   ) {}
 }
+
+export class FetchSubjects {
+  static readonly type = '[Subjects] Fetch Subjects';
+  constructor(public search?: string) {}
+}
+
+export class FetchChildrenSubjects {
+  static readonly type = '[Subjects] Fetch Children Subjects';
+  constructor(public parentId: string) {}
+}
diff --git a/src/app/shared/stores/subjects/subjects.model.ts b/src/app/shared/stores/subjects/subjects.model.ts
index 6dc26bd20..e24bd610d 100644
--- a/src/app/shared/stores/subjects/subjects.model.ts
+++ b/src/app/shared/stores/subjects/subjects.model.ts
@@ -1,5 +1,7 @@
-import { AsyncStateModel, NodeSubjectModel } from '@shared/models';
+import { AsyncStateModel, NodeSubjectModel, Subject } from '@shared/models';
 
 export interface SubjectsModel {
   highlightedSubjects: AsyncStateModel<NodeSubjectModel[]>;
+  subjects: AsyncStateModel<Subject[]>;
+  searchedSubjects: AsyncStateModel<Subject[]>;
 }
diff --git a/src/app/shared/stores/subjects/subjects.selectors.ts b/src/app/shared/stores/subjects/subjects.selectors.ts
index 9ffb7d9e7..558097696 100644
--- a/src/app/shared/stores/subjects/subjects.selectors.ts
+++ b/src/app/shared/stores/subjects/subjects.selectors.ts
@@ -1,5 +1,7 @@
 import { Selector } from '@ngxs/store';
 
+import { Subject } from '@osf/shared/models';
+
 import { SubjectsModel } from './subjects.model';
 import { SubjectsState } from './subjects.state';
 
@@ -13,4 +15,24 @@ export class SubjectsSelectors {
   static getHighlightedSubjectsLoading(state: SubjectsModel): boolean {
     return state.highlightedSubjects.isLoading;
   }
+
+  @Selector([SubjectsState])
+  static getSubjects(state: SubjectsModel): Subject[] {
+    return state.subjects.data;
+  }
+
+  @Selector([SubjectsState])
+  static getSubjectsLoading(state: SubjectsModel): boolean {
+    return state.subjects.isLoading;
+  }
+
+  @Selector([SubjectsState])
+  static getSearchedSubjects(state: SubjectsModel): Subject[] {
+    return state.searchedSubjects.data;
+  }
+
+  @Selector([SubjectsState])
+  static getSearchedSubjectsLoading(state: SubjectsModel): boolean {
+    return state.searchedSubjects.isLoading;
+  }
 }
diff --git a/src/app/shared/stores/subjects/subjects.state.ts b/src/app/shared/stores/subjects/subjects.state.ts
index d7e0351e8..59cf82003 100644
--- a/src/app/shared/stores/subjects/subjects.state.ts
+++ b/src/app/shared/stores/subjects/subjects.state.ts
@@ -4,9 +4,13 @@ import { catchError, tap, throwError } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
-import { NodeSubjectModel } from '@shared/models';
+import { ISubjectsService } from '@osf/shared/models/subject/subject-service.model';
+import { SUBJECTS_SERVICE } from '@osf/shared/tokens/subjects.token';
+import { NodeSubjectModel, Subject } from '@shared/models';
 import { SubjectsService } from '@shared/services';
-import { GetSubjects, SubjectsModel, UpdateProjectSubjects } from '@shared/stores/subjects';
+
+import { FetchChildrenSubjects, FetchSubjects, GetSubjects, UpdateProjectSubjects } from './subjects.actions';
+import { SubjectsModel } from './subjects.model';
 
 const initialState: SubjectsModel = {
   highlightedSubjects: {
@@ -14,6 +18,16 @@ const initialState: SubjectsModel = {
     isLoading: false,
     error: null,
   },
+  subjects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  searchedSubjects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
 };
 
 @State<SubjectsModel>({
@@ -22,7 +36,73 @@ const initialState: SubjectsModel = {
 })
 @Injectable()
 export class SubjectsState {
-  private readonly subjectsService = inject(SubjectsService);
+  private readonly projectSubjectsService = inject(SubjectsService);
+  private readonly subjectsService = inject<ISubjectsService>(SUBJECTS_SERVICE);
+
+  @Action(FetchSubjects)
+  fetchSubjects(ctx: StateContext<SubjectsModel>, { search }: FetchSubjects) {
+    ctx.patchState({
+      subjects: {
+        ...ctx.getState().subjects,
+        isLoading: true,
+        error: null,
+      },
+      searchedSubjects: {
+        ...ctx.getState().searchedSubjects,
+        isLoading: search ? true : false,
+        error: null,
+      },
+    });
+
+    return this.subjectsService.getSubjects(search).pipe(
+      tap((subjects) => {
+        if (search) {
+          ctx.patchState({
+            searchedSubjects: {
+              data: subjects,
+              isLoading: false,
+              error: null,
+            },
+          });
+        } else {
+          ctx.patchState({
+            subjects: {
+              data: subjects,
+              isLoading: false,
+              error: null,
+            },
+          });
+        }
+      }),
+      catchError((error) => this.handleError(ctx, 'subjects', error))
+    );
+  }
+
+  @Action(FetchChildrenSubjects)
+  fetchSubjectsChildren(ctx: StateContext<SubjectsModel>, { parentId }: FetchChildrenSubjects) {
+    ctx.patchState({
+      subjects: {
+        ...ctx.getState().subjects,
+        isLoading: true,
+        error: null,
+      },
+    });
+
+    return this.subjectsService.getChildrenSubjects(parentId).pipe(
+      tap((children) => {
+        const state = ctx.getState();
+        const updatedSubjects = this.updateSubjectChildren(state.subjects.data, parentId, children);
+        ctx.patchState({
+          subjects: {
+            data: updatedSubjects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'subjects', error))
+    );
+  }
 
   @Action(GetSubjects)
   getSubjects(ctx: StateContext<SubjectsModel>) {
@@ -33,7 +113,7 @@ export class SubjectsState {
         error: null,
       },
     });
-    return this.subjectsService.getSubjects().pipe(
+    return this.projectSubjectsService.getSubjects().pipe(
       tap({
         next: (subjects) => {
           ctx.patchState({
@@ -70,7 +150,7 @@ export class SubjectsState {
 
   @Action(UpdateProjectSubjects)
   updateProjectSubjects(ctx: StateContext<SubjectsModel>, action: UpdateProjectSubjects) {
-    return this.subjectsService.updateProjectSubjects(action.projectId, action.subjectIds).pipe(
+    return this.projectSubjectsService.updateProjectSubjects(action.projectId, action.subjectIds).pipe(
       tap({
         next: (result) => {
           const state = ctx.getState();
@@ -107,4 +187,32 @@ export class SubjectsState {
       })
     );
   }
+
+  private updateSubjectChildren(subjects: Subject[], parentId: string, newChildren: Subject[]): Subject[] {
+    return subjects.map((subject) => {
+      if (subject.id === parentId) {
+        return { ...subject, children: newChildren };
+      }
+
+      if (subject.children && subject.children.length > 0) {
+        return {
+          ...subject,
+          children: this.updateSubjectChildren(subject.children, parentId, newChildren),
+        };
+      }
+
+      return subject;
+    });
+  }
+
+  private handleError(ctx: StateContext<SubjectsModel>, section: keyof SubjectsModel, error: Error) {
+    ctx.patchState({
+      [section]: {
+        ...ctx.getState()[section],
+        isLoading: false,
+        error: error.message,
+      },
+    });
+    return throwError(() => error);
+  }
 }
diff --git a/src/app/shared/tokens/index.ts b/src/app/shared/tokens/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/tokens/subjects.token.ts b/src/app/shared/tokens/subjects.token.ts
new file mode 100644
index 000000000..0d070316e
--- /dev/null
+++ b/src/app/shared/tokens/subjects.token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+import { ISubjectsService } from '../models/subject/subject-service.model';
+
+export const SUBJECTS_SERVICE = new InjectionToken<ISubjectsService>('SUBJECTS_SERVICE');
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 18bbf8a3c..bbc310ccd 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1606,6 +1606,12 @@
       "description": "A license tells others how they can use your work in the future and only applies to the information and files submitted with the registration.",
       "helpText": "For more information, see this ",
       "copyrightHolders": "Copyright Holders"
+    },
+    "subjects": {
+      "title": "Subjects",
+      "noSelected": "No subjects selected",
+      "searchSubjects": "Search subjects",
+      "noSubject": "No subjects found"
     }
   },
   "pageNotFound": {

From a9684e57a9e9c058bc2d20a8a935d553f446858b Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Tue, 1 Jul 2025 17:29:58 +0300
Subject: [PATCH 13/15] feat(registries): add spme fixes

---
 .../components/drafts/drafts.component.ts     | 19 ++++++++++++++---
 .../metadata/metadata.component.html          |  1 +
 .../components/metadata/metadata.component.ts | 21 ++++++++++++++++---
 .../metadata/tags/tags.component.html         |  8 ++++++-
 .../metadata/tags/tags.component.ts           | 16 +++++++++++---
 .../new-registration.component.html           |  2 ++
 .../new-registration.component.ts             |  1 +
 .../registries/store/registries.selectors.ts  | 10 +++++++++
 .../components/subjects/subjects.component.ts | 12 ++++++++---
 src/assets/i18n/en.json                       |  1 +
 10 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/src/app/features/registries/components/drafts/drafts.component.ts b/src/app/features/registries/components/drafts/drafts.component.ts
index 090bf1f57..16651827a 100644
--- a/src/app/features/registries/components/drafts/drafts.component.ts
+++ b/src/app/features/registries/components/drafts/drafts.component.ts
@@ -2,11 +2,14 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
+import { tap } from 'rxjs';
+
 import { ChangeDetectionStrategy, Component, computed, effect, inject, Signal, signal } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 
 import { StepperComponent, SubHeaderComponent } from '@osf/shared/components';
 import { StepOption } from '@osf/shared/models';
+import { LoaderService } from '@osf/shared/services';
 
 import { defaultSteps } from '../../constants';
 import { FetchDraft, FetchSchemaBlocks, RegistriesSelectors } from '../../store';
@@ -19,11 +22,13 @@ import { FetchDraft, FetchSchemaBlocks, RegistriesSelectors } from '../../store'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DraftsComponent {
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly loaderService = inject(LoaderService);
+
   protected readonly pages = select(RegistriesSelectors.getPagesSchema);
   protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
 
-  private readonly router = inject(Router);
-  private readonly route = inject(ActivatedRoute);
   private readonly actions = createDispatchMap({
     getSchemaBlocks: FetchSchemaBlocks,
     getDraftRegistration: FetchDraft,
@@ -48,13 +53,21 @@ export class DraftsComponent {
   registrationId = this.route.snapshot.children[0]?.params['id'] || '';
 
   constructor() {
+    this.loaderService.show();
     if (!this.draftRegistration()) {
       this.actions.getDraftRegistration(this.registrationId);
     }
     effect(() => {
       const registrationSchemaId = this.draftRegistration()?.registrationSchemaId;
       if (registrationSchemaId) {
-        this.actions.getSchemaBlocks(registrationSchemaId || '');
+        this.actions
+          .getSchemaBlocks(registrationSchemaId || '')
+          .pipe(
+            tap(() => {
+              this.loaderService.hide();
+            })
+          )
+          .subscribe();
       }
     });
 
diff --git a/src/app/features/registries/components/metadata/metadata.component.html b/src/app/features/registries/components/metadata/metadata.component.html
index acc9ff5b1..ca36978af 100644
--- a/src/app/features/registries/components/metadata/metadata.component.html
+++ b/src/app/features/registries/components/metadata/metadata.component.html
@@ -28,6 +28,7 @@ <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
   <osf-contributors></osf-contributors>
   <osf-license></osf-license>
   <osf-registries-subjects></osf-registries-subjects>
+  <osf-registries-metadata-tags></osf-registries-metadata-tags>
   <div class="flex justify-content-end">
     <p-button [label]="'registries.deleteDraft' | translate" severity="danger" (click)="deleteDraft()" class="mr-2">
     </p-button>
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
index b6ab526e1..2a765588e 100644
--- a/src/app/features/registries/components/metadata/metadata.component.ts
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -1,4 +1,4 @@
-import { createDispatchMap } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -6,7 +6,7 @@ import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { TextareaModule } from 'primeng/textarea';
 
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,11 +15,12 @@ import { InputLimits } from '@osf/shared/constants';
 import { CustomConfirmationService, ToastService } from '@osf/shared/services';
 import { CustomValidators } from '@osf/shared/utils';
 
-import { DeleteDraft } from '../../store';
+import { DeleteDraft, RegistriesSelectors } from '../../store';
 
 import { ContributorsComponent } from './contributors/contributors.component';
 import { LicenseComponent } from './license/license.component';
 import { SubjectsRegistriesComponent } from './subjects/subjects.component';
+import { RegistriesMetadataTagsComponent } from './tags/tags.component';
 
 @Component({
   selector: 'osf-metadata',
@@ -33,6 +34,7 @@ import { SubjectsRegistriesComponent } from './subjects/subjects.component';
     ContributorsComponent,
     LicenseComponent,
     SubjectsRegistriesComponent,
+    RegistriesMetadataTagsComponent,
   ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
@@ -46,6 +48,7 @@ export class MetadataComponent {
   private readonly customConfirmationService = inject(CustomConfirmationService);
 
   private readonly draftId = this.route.snapshot.params['id'];
+  protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
 
   protected actions = createDispatchMap({
     deleteDraft: DeleteDraft,
@@ -57,6 +60,18 @@ export class MetadataComponent {
     description: ['', CustomValidators.requiredTrimmed()],
   });
 
+  constructor() {
+    effect(() => {
+      const draft = this.draftRegistration();
+      if (draft) {
+        this.metadataForm.patchValue({
+          title: draft.title,
+          description: draft.description,
+        });
+      }
+    });
+  }
+
   submitMetadata(): void {
     console.log('Metadata submitted');
   }
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.html b/src/app/features/registries/components/metadata/tags/tags.component.html
index 1951e16ee..2d8798d8a 100644
--- a/src/app/features/registries/components/metadata/tags/tags.component.html
+++ b/src/app/features/registries/components/metadata/tags/tags.component.html
@@ -1 +1,7 @@
-<p>tags works!</p>
+<p-card>
+  <div class="flex flex-column gap-3">
+    <h2>{{ 'project.overview.metadata.tags' | translate }}</h2>
+
+    <osf-tags-input (tagsChanged)="onTagsChanged($event)" [tags]="[]"></osf-tags-input>
+  </div>
+</p-card>
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.ts b/src/app/features/registries/components/metadata/tags/tags.component.ts
index 6105502df..074f14175 100644
--- a/src/app/features/registries/components/metadata/tags/tags.component.ts
+++ b/src/app/features/registries/components/metadata/tags/tags.component.ts
@@ -1,10 +1,20 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { TagsInputComponent } from '@osf/shared/components';
+
 @Component({
-  selector: 'osf-tags',
-  imports: [],
+  selector: 'osf-registries-metadata-tags',
+  imports: [Card, TagsInputComponent, TranslatePipe],
   templateUrl: './tags.component.html',
   styleUrl: './tags.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TagsComponent {}
+export class RegistriesMetadataTagsComponent {
+  onTagsChanged(tags: string[]): void {
+    console.log('Tags changed:', tags);
+  }
+}
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.html b/src/app/features/registries/components/new-registration/new-registration.component.html
index dfafdef82..d9b7ce6ef 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.html
+++ b/src/app/features/registries/components/new-registration/new-registration.component.html
@@ -37,6 +37,7 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
           <p-select
             formControlName="project"
             [options]="projects()"
+            [placeholder]="'registries.new.selectProject' | translate"
             optionLabel="title"
             optionValue="id"
             (onChange)="onSelectProject($event.value)"
@@ -54,6 +55,7 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (fromProject ?
           [options]="providers()"
           optionLabel="name"
           optionValue="id"
+          [loading]="isProvidersLoading()"
           (onChange)="onSelectProvider($event.value)"
           class="w-6"
         />
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
index 60ad373a7..18996dd88 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.ts
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -30,6 +30,7 @@ export class NewRegistrationComponent {
   protected readonly providers = select(RegistriesSelectors.getProviders);
   protected readonly isDraftSubmitting = select(RegistriesSelectors.isDraftSubmitting);
   protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
+  protected readonly isProvidersLoading = select(RegistriesSelectors.isProvidersLoading);
   protected actions = createDispatchMap({
     getProjects: GetProjects,
     getProviders: GetProviders,
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 0bac0f7a1..4ea91666a 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -13,6 +13,11 @@ export class RegistriesSelectors {
     return state.providers.data;
   }
 
+  @Selector([RegistriesState])
+  static isProvidersLoading(state: RegistriesStateModel): boolean {
+    return state.providers.isLoading;
+  }
+
   @Selector([RegistriesState])
   static getProjects(state: RegistriesStateModel): Project[] {
     return state.projects.data;
@@ -28,6 +33,11 @@ export class RegistriesSelectors {
     return state.draftRegistration.data;
   }
 
+  @Selector([RegistriesState])
+  static getRegistrationLoading(state: RegistriesStateModel): boolean {
+    return state.draftRegistration.isLoading || state.draftRegistration.isSubmitting || state.pagesSchema.isLoading;
+  }
+
   @Selector([RegistriesState])
   static getContributors(state: RegistriesStateModel) {
     return state.contributorsList.data;
diff --git a/src/app/shared/components/subjects/subjects.component.ts b/src/app/shared/components/subjects/subjects.component.ts
index 2e7714ca2..d6fc72244 100644
--- a/src/app/shared/components/subjects/subjects.component.ts
+++ b/src/app/shared/components/subjects/subjects.component.ts
@@ -35,7 +35,7 @@ export class SubjectsComponent {
 
   subjectsTree = computed(() => this.list().map((subject: Subject) => this.mapSubjectToTreeNode(subject)));
   selectedTree = computed(() => this.selected().map((subject: Subject) => this.mapSubjectToTreeNode(subject)));
-  searchedList = computed(() => this.searchedSubjects().map((subject: Subject) => this.mapSearchedSubject(subject)));
+  searchedList = computed(() => this.searchedSubjects().map((subject: Subject) => this.mapParentsSubject(subject)));
   expanded: Record<string, boolean> = {};
 
   protected searchControl = new FormControl<string>('');
@@ -60,6 +60,12 @@ export class SubjectsComponent {
   selectSubject(subject: Subject) {
     const childrenIds = this.getChildrenIds([subject]);
     const updatedSelection = [...this.selected().filter((s) => !childrenIds.includes(s.id)), subject];
+    const parentSubjects = this.mapParentsSubject(subject.parent).filter(
+      (p) => !updatedSelection.some((s) => s.id === p.id)
+    );
+    if (parentSubjects.length) {
+      updatedSelection.push(...parentSubjects);
+    }
     this.updateSelection.emit(updatedSelection);
   }
 
@@ -100,12 +106,12 @@ export class SubjectsComponent {
     };
   }
 
-  private mapSearchedSubject(subject: Subject | null | undefined, acc: Subject[] = []): Subject[] {
+  private mapParentsSubject(subject: Subject | null | undefined, acc: Subject[] = []): Subject[] {
     if (!subject) {
       return acc.reverse();
     }
 
     acc.push(subject);
-    return this.mapSearchedSubject(subject.parent, acc);
+    return this.mapParentsSubject(subject.parent, acc);
   }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index b598a8301..cfd941a35 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -380,6 +380,7 @@
         "step3": "Which type of registration would you like to create?",
         "step2InfoText": "If your project includes components, you can select which components to include or exclude at the end of the registration."
       },
+      "selectProject": "Select your project",
 
       "createDraft": "Create draft"
     },

From 0c83d6f88fa1fc63aad9c437a5073d9a4eda74ec Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Wed, 2 Jul 2025 14:20:48 +0300
Subject: [PATCH 14/15] feat(registries): PR comments, refactoring

---
 .../custom-step/custom-step.component.ts      |  3 ++-
 .../components/drafts/drafts.component.ts     | 13 ++++++++---
 .../contributors/contributors.component.ts    |  2 +-
 .../metadata/metadata.component.html          |  4 ++--
 .../components/metadata/metadata.component.ts | 12 +++++-----
 .../registries-license.component.html}        |  0
 .../registries-license.component.scss}        |  0
 .../registries-license.component.spec.ts}     | 10 ++++-----
 .../registries-license.component.ts}          |  8 +++----
 .../registries-subjects.component.html}       |  0
 .../registries-subjects.component.scss}       |  0
 .../registries-subjects.component.spec.ts     | 22 +++++++++++++++++++
 .../registries-subjects.component.ts}         |  6 ++---
 .../registries-tags.component.html}           |  0
 .../registries-tags.component.scss}           |  0
 .../registries-tags.component.spec.ts}        | 10 ++++-----
 .../registries-tags.component.ts}             |  8 +++----
 .../subjects/subjects.component.spec.ts       | 22 -------------------
 .../registries/constants/defaultSteps.ts      |  4 ++--
 .../registries/mappers/page-schema.mapper.ts  |  1 -
 .../services/registration-subjects.service.ts |  3 +--
 .../registries/store/registries.state.ts      |  1 -
 src/app/shared/models/subject/index.ts        |  1 +
 .../shared/stores/subjects/subjects.state.ts  |  3 +--
 src/app/shared/tokens/subjects.token.ts       |  2 +-
 src/assets/i18n/en.json                       |  4 +++-
 26 files changed, 73 insertions(+), 66 deletions(-)
 rename src/app/features/registries/components/metadata/{license/license.component.html => registries-license/registries-license.component.html} (100%)
 rename src/app/features/registries/components/metadata/{license/license.component.scss => registries-license/registries-license.component.scss} (100%)
 rename src/app/features/registries/components/metadata/{license/license.component.spec.ts => registries-license/registries-license.component.spec.ts} (55%)
 rename src/app/features/registries/components/metadata/{license/license.component.ts => registries-license/registries-license.component.ts} (91%)
 rename src/app/features/registries/components/metadata/{subjects/subjects.component.html => registries-subjects/registries-subjects.component.html} (100%)
 rename src/app/features/registries/components/metadata/{subjects/subjects.component.scss => registries-subjects/registries-subjects.component.scss} (100%)
 create mode 100644 src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.spec.ts
 rename src/app/features/registries/components/metadata/{subjects/subjects.component.ts => registries-subjects/registries-subjects.component.ts} (92%)
 rename src/app/features/registries/components/metadata/{tags/tags.component.html => registries-tags/registries-tags.component.html} (100%)
 rename src/app/features/registries/components/metadata/{tags/tags.component.scss => registries-tags/registries-tags.component.scss} (100%)
 rename src/app/features/registries/components/metadata/{tags/tags.component.spec.ts => registries-tags/registries-tags.component.spec.ts} (56%)
 rename src/app/features/registries/components/metadata/{tags/tags.component.ts => registries-tags/registries-tags.component.ts} (71%)
 delete mode 100644 src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts

diff --git a/src/app/features/registries/components/custom-step/custom-step.component.ts b/src/app/features/registries/components/custom-step/custom-step.component.ts
index 249dcea83..ce91247cc 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.ts
+++ b/src/app/features/registries/components/custom-step/custom-step.component.ts
@@ -12,6 +12,7 @@ import { Tooltip } from 'primeng/tooltip';
 
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
@@ -46,7 +47,7 @@ export class CustomStepComponent {
   radio = null;
 
   constructor() {
-    this.route.params.subscribe((params) => {
+    this.route.params.pipe(takeUntilDestroyed()).subscribe((params) => {
       this.step.set(+params['step'].split('-')[0]);
     });
   }
diff --git a/src/app/features/registries/components/drafts/drafts.component.ts b/src/app/features/registries/components/drafts/drafts.component.ts
index 16651827a..d99033fb4 100644
--- a/src/app/features/registries/components/drafts/drafts.component.ts
+++ b/src/app/features/registries/components/drafts/drafts.component.ts
@@ -1,6 +1,6 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { tap } from 'rxjs';
 
@@ -20,11 +20,13 @@ import { FetchDraft, FetchSchemaBlocks, RegistriesSelectors } from '../../store'
   templateUrl: './drafts.component.html',
   styleUrl: './drafts.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [TranslateService],
 })
 export class DraftsComponent {
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
   private readonly loaderService = inject(LoaderService);
+  private readonly translateService = inject(TranslateService);
 
   protected readonly pages = select(RegistriesSelectors.getPagesSchema);
   protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
@@ -38,12 +40,17 @@ export class DraftsComponent {
     return this.router.url.includes('/review');
   }
 
+  defaultSteps: StepOption[] = defaultSteps.map((step) => ({
+    ...step,
+    label: this.translateService.instant(step.label),
+  }));
+
   steps: Signal<StepOption[]> = computed(() => {
     const customSteps = this.pages().map((page) => ({
       label: page.title,
       value: page.id,
     }));
-    return [defaultSteps[0], ...customSteps, defaultSteps[1]];
+    return [this.defaultSteps[0], ...customSteps, this.defaultSteps[1]];
   });
 
   currentStep = signal(
@@ -80,7 +87,7 @@ export class DraftsComponent {
   }
 
   stepChange(step: number): void {
-    // TODO: before navigating, validate the current step
+    // [NM] TODO: before navigating, validate the current step
     this.currentStep.set(step);
     const pageStep = this.steps()[step];
 
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.ts b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
index 34d98c634..916180a12 100644
--- a/src/app/features/registries/components/metadata/contributors/contributors.component.ts
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
@@ -88,7 +88,7 @@ export class ContributorsComponent implements OnInit {
   }
 
   onFocusOut() {
-    // TODO: make request to update contributor if changed
+    // [NM] TODO: make request to update contributor if changed
     console.log('Focus out event:', 'Changed:', this.hasChanges);
   }
 
diff --git a/src/app/features/registries/components/metadata/metadata.component.html b/src/app/features/registries/components/metadata/metadata.component.html
index ca36978af..5c44bd71e 100644
--- a/src/app/features/registries/components/metadata/metadata.component.html
+++ b/src/app/features/registries/components/metadata/metadata.component.html
@@ -26,9 +26,9 @@ <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
     </p-card>
   </section>
   <osf-contributors></osf-contributors>
-  <osf-license></osf-license>
+  <osf-registries-license></osf-registries-license>
   <osf-registries-subjects></osf-registries-subjects>
-  <osf-registries-metadata-tags></osf-registries-metadata-tags>
+  <osf-registries-tags></osf-registries-tags>
   <div class="flex justify-content-end">
     <p-button [label]="'registries.deleteDraft' | translate" severity="danger" (click)="deleteDraft()" class="mr-2">
     </p-button>
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
index 2a765588e..d7b289ec1 100644
--- a/src/app/features/registries/components/metadata/metadata.component.ts
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -18,9 +18,9 @@ import { CustomValidators } from '@osf/shared/utils';
 import { DeleteDraft, RegistriesSelectors } from '../../store';
 
 import { ContributorsComponent } from './contributors/contributors.component';
-import { LicenseComponent } from './license/license.component';
-import { SubjectsRegistriesComponent } from './subjects/subjects.component';
-import { RegistriesMetadataTagsComponent } from './tags/tags.component';
+import { RegistriesLicenseComponent } from './registries-license/registries-license.component';
+import { RegistriesSubjectsComponent } from './registries-subjects/registries-subjects.component';
+import { RegistriesTagsComponent } from './registries-tags/registries-tags.component';
 
 @Component({
   selector: 'osf-metadata',
@@ -32,9 +32,9 @@ import { RegistriesMetadataTagsComponent } from './tags/tags.component';
     TranslatePipe,
     TextareaModule,
     ContributorsComponent,
-    LicenseComponent,
-    SubjectsRegistriesComponent,
-    RegistriesMetadataTagsComponent,
+    RegistriesSubjectsComponent,
+    RegistriesTagsComponent,
+    RegistriesLicenseComponent,
   ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
diff --git a/src/app/features/registries/components/metadata/license/license.component.html b/src/app/features/registries/components/metadata/registries-license/registries-license.component.html
similarity index 100%
rename from src/app/features/registries/components/metadata/license/license.component.html
rename to src/app/features/registries/components/metadata/registries-license/registries-license.component.html
diff --git a/src/app/features/registries/components/metadata/license/license.component.scss b/src/app/features/registries/components/metadata/registries-license/registries-license.component.scss
similarity index 100%
rename from src/app/features/registries/components/metadata/license/license.component.scss
rename to src/app/features/registries/components/metadata/registries-license/registries-license.component.scss
diff --git a/src/app/features/registries/components/metadata/license/license.component.spec.ts b/src/app/features/registries/components/metadata/registries-license/registries-license.component.spec.ts
similarity index 55%
rename from src/app/features/registries/components/metadata/license/license.component.spec.ts
rename to src/app/features/registries/components/metadata/registries-license/registries-license.component.spec.ts
index 4cd128657..b4f491478 100644
--- a/src/app/features/registries/components/metadata/license/license.component.spec.ts
+++ b/src/app/features/registries/components/metadata/registries-license/registries-license.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LicenseComponent } from './license.component';
+import { RegistriesLicenseComponent } from './registries-license.component';
 
 describe('LicenseComponent', () => {
-  let component: LicenseComponent;
-  let fixture: ComponentFixture<LicenseComponent>;
+  let component: RegistriesLicenseComponent;
+  let fixture: ComponentFixture<RegistriesLicenseComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [LicenseComponent],
+      imports: [RegistriesLicenseComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(LicenseComponent);
+    fixture = TestBed.createComponent(RegistriesLicenseComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/features/registries/components/metadata/license/license.component.ts b/src/app/features/registries/components/metadata/registries-license/registries-license.component.ts
similarity index 91%
rename from src/app/features/registries/components/metadata/license/license.component.ts
rename to src/app/features/registries/components/metadata/registries-license/registries-license.component.ts
index ab302faf4..d81e74502 100644
--- a/src/app/features/registries/components/metadata/license/license.component.ts
+++ b/src/app/features/registries/components/metadata/registries-license/registries-license.component.ts
@@ -19,7 +19,7 @@ import { InterpolatePipe } from '@osf/shared/pipes';
 import { CustomValidators } from '@osf/shared/utils';
 
 @Component({
-  selector: 'osf-license',
+  selector: 'osf-registries-license',
   imports: [
     Card,
     TranslatePipe,
@@ -32,11 +32,11 @@ import { CustomValidators } from '@osf/shared/utils';
     InterpolatePipe,
     ReactiveFormsModule,
   ],
-  templateUrl: './license.component.html',
-  styleUrl: './license.component.scss',
+  templateUrl: './registries-license.component.html',
+  styleUrl: './registries-license.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LicenseComponent {
+export class RegistriesLicenseComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly draftId = this.route.snapshot.params['id'];
   private readonly fb = inject(FormBuilder);
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.html b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.html
similarity index 100%
rename from src/app/features/registries/components/metadata/subjects/subjects.component.html
rename to src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.html
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.scss b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.scss
similarity index 100%
rename from src/app/features/registries/components/metadata/subjects/subjects.component.scss
rename to src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.scss
diff --git a/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.spec.ts b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.spec.ts
new file mode 100644
index 000000000..c6b0b212d
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistriesSubjectsComponent } from './registries-subjects.component';
+
+describe('RegistriesSubjectsComponent', () => {
+  let component: RegistriesSubjectsComponent;
+  let fixture: ComponentFixture<RegistriesSubjectsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistriesSubjectsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistriesSubjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.ts b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.ts
similarity index 92%
rename from src/app/features/registries/components/metadata/subjects/subjects.component.ts
rename to src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.ts
index 5fd96dc1a..719f8e668 100644
--- a/src/app/features/registries/components/metadata/subjects/subjects.component.ts
+++ b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.ts
@@ -16,11 +16,11 @@ import { SubjectsSelectors } from '@osf/shared/stores/subjects/subjects.selector
 @Component({
   selector: 'osf-registries-subjects',
   imports: [SubjectsComponent],
-  templateUrl: './subjects.component.html',
-  styleUrl: './subjects.component.scss',
+  templateUrl: './registries-subjects.component.html',
+  styleUrl: './registries-subjects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SubjectsRegistriesComponent {
+export class RegistriesSubjectsComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly draftId = this.route.snapshot.params['id'];
 
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.html b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.html
similarity index 100%
rename from src/app/features/registries/components/metadata/tags/tags.component.html
rename to src/app/features/registries/components/metadata/registries-tags/registries-tags.component.html
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.scss b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.scss
similarity index 100%
rename from src/app/features/registries/components/metadata/tags/tags.component.scss
rename to src/app/features/registries/components/metadata/registries-tags/registries-tags.component.scss
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.spec.ts b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.spec.ts
similarity index 56%
rename from src/app/features/registries/components/metadata/tags/tags.component.spec.ts
rename to src/app/features/registries/components/metadata/registries-tags/registries-tags.component.spec.ts
index 235314eac..3ec731631 100644
--- a/src/app/features/registries/components/metadata/tags/tags.component.spec.ts
+++ b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TagsComponent } from './tags.component';
+import { RegistriesTagsComponent } from './registries-tags.component';
 
 describe('TagsComponent', () => {
-  let component: TagsComponent;
-  let fixture: ComponentFixture<TagsComponent>;
+  let component: RegistriesTagsComponent;
+  let fixture: ComponentFixture<RegistriesTagsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TagsComponent],
+      imports: [RegistriesTagsComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(TagsComponent);
+    fixture = TestBed.createComponent(RegistriesTagsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/features/registries/components/metadata/tags/tags.component.ts b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.ts
similarity index 71%
rename from src/app/features/registries/components/metadata/tags/tags.component.ts
rename to src/app/features/registries/components/metadata/registries-tags/registries-tags.component.ts
index 074f14175..bc0ca52f9 100644
--- a/src/app/features/registries/components/metadata/tags/tags.component.ts
+++ b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.ts
@@ -7,13 +7,13 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { TagsInputComponent } from '@osf/shared/components';
 
 @Component({
-  selector: 'osf-registries-metadata-tags',
+  selector: 'osf-registries-tags',
   imports: [Card, TagsInputComponent, TranslatePipe],
-  templateUrl: './tags.component.html',
-  styleUrl: './tags.component.scss',
+  templateUrl: './registries-tags.component.html',
+  styleUrl: './registries-tags.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RegistriesMetadataTagsComponent {
+export class RegistriesTagsComponent {
   onTagsChanged(tags: string[]): void {
     console.log('Tags changed:', tags);
   }
diff --git a/src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts b/src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts
deleted file mode 100644
index ba5495891..000000000
--- a/src/app/features/registries/components/metadata/subjects/subjects.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SubjectsComponent } from './subjects.component';
-
-describe('SubjectsComponent', () => {
-  let component: SubjectsComponent;
-  let fixture: ComponentFixture<SubjectsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SubjectsComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SubjectsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/features/registries/constants/defaultSteps.ts b/src/app/features/registries/constants/defaultSteps.ts
index 643a1b36a..ba7808628 100644
--- a/src/app/features/registries/constants/defaultSteps.ts
+++ b/src/app/features/registries/constants/defaultSteps.ts
@@ -2,12 +2,12 @@ import { StepOption } from '@osf/shared/models';
 
 export const defaultSteps: StepOption[] = [
   {
-    label: 'Metadata',
+    label: 'navigation.project.metadata',
     value: '',
     routeLink: 'metadata',
   },
   {
-    label: 'Review',
+    label: 'registries.review.step',
     value: '',
     routeLink: 'review',
   },
diff --git a/src/app/features/registries/mappers/page-schema.mapper.ts b/src/app/features/registries/mappers/page-schema.mapper.ts
index 85b94aaf6..6bfd884fa 100644
--- a/src/app/features/registries/mappers/page-schema.mapper.ts
+++ b/src/app/features/registries/mappers/page-schema.mapper.ts
@@ -4,7 +4,6 @@ import { SchemaBlocksResponseJsonApi } from '../models/schema-blocks-json-api.mo
 
 export class PageSchemaMapper {
   static fromSchemaBlocksResponse(response: SchemaBlocksResponseJsonApi): PageSchema[] {
-    console.log('PageSchemaMapper.fromSchemaBlocksResponse', response);
     const pages: PageSchema[] = [];
     let currentPage!: PageSchema;
     let currentQuestion: Question | null = null;
diff --git a/src/app/features/registries/services/registration-subjects.service.ts b/src/app/features/registries/services/registration-subjects.service.ts
index 13229a282..7f6f4f618 100644
--- a/src/app/features/registries/services/registration-subjects.service.ts
+++ b/src/app/features/registries/services/registration-subjects.service.ts
@@ -4,8 +4,7 @@ import { inject, Injectable } from '@angular/core';
 
 import { JsonApiService } from '@osf/core/services';
 import { SubjectMapper } from '@osf/shared/mappers';
-import { Subject, SubjectsResponseJsonApi } from '@osf/shared/models';
-import { ISubjectsService } from '@osf/shared/models/subject/subject-service.model';
+import { ISubjectsService, Subject, SubjectsResponseJsonApi } from '@osf/shared/models';
 
 import { environment } from 'src/environments/environment';
 
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index f2f609e8e..9cf274cad 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -158,7 +158,6 @@ export class RegistriesState {
         patchState({
           providers: {
             data: providers,
-
             isLoading: false,
             error: null,
           },
diff --git a/src/app/shared/models/subject/index.ts b/src/app/shared/models/subject/index.ts
index 0088c2e47..98738025a 100644
--- a/src/app/shared/models/subject/index.ts
+++ b/src/app/shared/models/subject/index.ts
@@ -1,2 +1,3 @@
 export * from './subject.model';
+export * from './subject-service.model';
 export * from './subjects-json-api.model';
diff --git a/src/app/shared/stores/subjects/subjects.state.ts b/src/app/shared/stores/subjects/subjects.state.ts
index 59cf82003..c1cbfadf6 100644
--- a/src/app/shared/stores/subjects/subjects.state.ts
+++ b/src/app/shared/stores/subjects/subjects.state.ts
@@ -4,9 +4,8 @@ import { catchError, tap, throwError } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
-import { ISubjectsService } from '@osf/shared/models/subject/subject-service.model';
 import { SUBJECTS_SERVICE } from '@osf/shared/tokens/subjects.token';
-import { NodeSubjectModel, Subject } from '@shared/models';
+import { ISubjectsService, NodeSubjectModel, Subject } from '@shared/models';
 import { SubjectsService } from '@shared/services';
 
 import { FetchChildrenSubjects, FetchSubjects, GetSubjects, UpdateProjectSubjects } from './subjects.actions';
diff --git a/src/app/shared/tokens/subjects.token.ts b/src/app/shared/tokens/subjects.token.ts
index 0d070316e..b189b9cd2 100644
--- a/src/app/shared/tokens/subjects.token.ts
+++ b/src/app/shared/tokens/subjects.token.ts
@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
 
-import { ISubjectsService } from '../models/subject/subject-service.model';
+import { ISubjectsService } from '../models';
 
 export const SUBJECTS_SERVICE = new InjectionToken<ISubjectsService>('SUBJECTS_SERVICE');
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index e9e564471..3dfe4b726 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -383,7 +383,8 @@
       },
       "selectProject": "Select your project",
 
-      "createDraft": "Create draft"
+      "createDraft": "Create draft",
+      "createdSuccessfully": "Draft created successfully"
     },
     "deleteDraft": "Delete Draft",
     "confirmDeleteDraft": "Are you sure you want to delete this draft registration?",
@@ -393,6 +394,7 @@
       "addContributors": "Add Contributor By Search"
     },
     "review": {
+      "step": "Review",
       "title": "Review Registration"
     }
   },

From 0309f3031326efa3bf876a09d448f86e2cb6bbce Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Wed, 2 Jul 2025 14:48:28 +0300
Subject: [PATCH 15/15] feat(registries): add fixes

---
 .../submit-preprint-stepper.component.ts            |  1 -
 .../custom-step/custom-step.component.html          | 13 +++++--------
 .../components/custom-step/custom-step.component.ts |  6 ++++--
 .../new-registration/new-registration.component.ts  |  1 -
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
index 10b49d34f..1b62fbbcc 100644
--- a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
+++ b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
@@ -90,7 +90,6 @@ export class SubmitPreprintStepperComponent implements OnInit, OnDestroy {
   }
 
   stepChange(step: number) {
-    console.log('Current step changed to:', step);
     if (step >= this.currentStep()) {
       return;
     }
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.html b/src/app/features/registries/components/custom-step/custom-step.component.html
index ec9267ac7..3b1a04f44 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.html
+++ b/src/app/features/registries/components/custom-step/custom-step.component.html
@@ -43,15 +43,16 @@ <h3 class="mb-2">
               </ng-template>
               <ng-template #content>
                 <div class="p-inplace-display">
-                  <span
-                    class="text-primary"
+                  <button
+                    class="text-primary border-none cursor-pointer bg-transparent text-sm"
                     tabindex="0"
                     role="button"
                     (click)="inplaceRef.deactivate()"
                     (keyup.enter)="inplaceRef.deactivate()"
                     (keyup.space)="inplaceRef.deactivate()"
-                    >{{ 'common.links.hideExample' | translate }}</span
                   >
+                    {{ 'common.links.hideExample' | translate }}
+                  </button>
                 </div>
                 <p class="m-0">{{ question.exampleText }}</p>
               </ng-template>
@@ -74,11 +75,7 @@ <h3 class="mb-2">
                     ></p-radioButton>
                     <label [for]="option.value" class="ml-2">{{ option.label }}</label>
                     @if (option.helpText) {
-                      <i
-                        class="flex mb-1 fas fa-circle-info ml-1 blue-icon cursor-pointer"
-                        [pTooltip]="option.helpText"
-                        tooltipPosition="right"
-                      ></i>
+                      <osf-info-icon [tooltipText]="option.helpText"></osf-info-icon>
                     }
                   </div>
                 }
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.ts b/src/app/features/registries/components/custom-step/custom-step.component.ts
index ce91247cc..fa37803cf 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.ts
+++ b/src/app/features/registries/components/custom-step/custom-step.component.ts
@@ -8,7 +8,6 @@ import { Inplace } from 'primeng/inplace';
 import { InputText } from 'primeng/inputtext';
 import { RadioButton } from 'primeng/radiobutton';
 import { Textarea } from 'primeng/textarea';
-import { Tooltip } from 'primeng/tooltip';
 
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
@@ -16,6 +15,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
+import { InfoIconComponent } from '@osf/shared/components';
+
 import { FieldType } from '../../enums';
 import { RegistriesSelectors } from '../../store';
 
@@ -27,11 +28,12 @@ import { RegistriesSelectors } from '../../store';
     RadioButton,
     FormsModule,
     Checkbox,
-    Tooltip,
+
     InputText,
     NgTemplateOutlet,
     Inplace,
     TranslatePipe,
+    InfoIconComponent,
   ],
   templateUrl: './custom-step.component.html',
   styleUrl: './custom-step.component.scss',
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
index 18996dd88..de7fbc31a 100644
--- a/src/app/features/registries/components/new-registration/new-registration.component.ts
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -47,7 +47,6 @@ export class NewRegistrationComponent {
     this.actions.getProjects();
     this.actions.getProviders();
     effect(() => {
-      //set the provider value when the providers are loaded
       const provider = this.draftForm.get('provider')?.value;
       if (!provider) {
         this.draftForm.get('provider')?.setValue(this.providers()[0]?.id);