chore(account-settings): api integration

package.json

@@ -52,6 +52,7 @@
     "@types/jasmine": "~5.1.0",
     "@types/jest": "^29.5.14",
     "angular-eslint": "19.1.0",
+    "angularx-qrcode": "^19.0.0",
     "eslint": "^9.20.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",

src/app/app.routes.ts

@@ -38,7 +38,9 @@ export const routes: Routes = [
       {
         path: 'home-logged-out',
         loadComponent: () =>
-          import('./features/home/logged-out/home-logged-out.component').then((mod) => mod.HomeLoggedOutComponent),
+          import('@osf/features/home/components/logged-out/home-logged-out.component').then(
+            (mod) => mod.HomeLoggedOutComponent
+          ),
       },
       {
         path: 'support',
@@ -117,6 +119,10 @@ export const routes: Routes = [
         loadComponent: () => import('./features/my-profile/my-profile.component').then((mod) => mod.MyProfileComponent),
         providers: [provideStates([ResourceFiltersState, ResourceFiltersOptionsState])],
       },
+      {
+        path: 'confirm/:userId/:emailId',
+        loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),
+      },
     ],
   },
 ];

src/app/core/components/breadcrumb/breadcrumb.component.html

@@ -1,4 +1,4 @@
-@if (parsedUrl()[0] !== 'home') {
+@if (!parsedUrl()[0].includes('home') && !parsedUrl()[0].includes('confirm')) {
   <div class="breadcrumbs flex column-gap-2">
     <i class="osf-icon-home"></i>
     <p>/</p>

src/app/core/constants/ngxs-states.constant.ts

@@ -3,6 +3,7 @@ import { UserState } from '@core/store/user';
 import { InstitutionsState } from '@osf/features/institutions/store';
 import { MyProjectsState } from '@osf/features/my-projects/store';
 import { SearchState } from '@osf/features/search/store';
+import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
 import { AddonsState } from '@osf/features/settings/addons/store';
 import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 import { ProfileSettingsState } from '@osf/features/settings/profile-settings/profile-settings.state';
@@ -18,4 +19,5 @@ export const STATES = [
   InstitutionsState,
   ProfileSettingsState,
   DeveloperAppsState,
+  AccountSettingsState,
 ];

src/app/core/services/json-api/json-api.service.ts

@@ -11,6 +11,8 @@ import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
 export class JsonApiService {
   http: HttpClient = inject(HttpClient);
   readonly #token = 'Bearer 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
+  // OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv
+  // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm
   readonly #headers = new HttpHeaders({
     Authorization: this.#token,
     Accept: 'application/vnd.api+json',
@@ -65,7 +67,7 @@ export class JsonApiService {
       .pipe(map((response) => response.data));
   }
 
-  delete(url: string): Observable<void> {
-    return this.http.delete<void>(url, { headers: this.#headers });
+  delete(url: string, body?: unknown): Observable<void> {
+    return this.http.delete<void>(url, { headers: this.#headers, body: body });
   }
 }

src/app/core/services/json-api/underscore-entites/user/user-us.entity.ts

@@ -16,8 +16,15 @@ export interface UserUS {
     suffix?: string;
     social: Social;
     date_registered: string;
+    allow_indexing?: boolean;
+  };
+  relationships: {
+    default_region: {
+      data: {
+        id: string;
+      };
+    };
   };
-  relationships: Record<string, unknown>;
   links: {
     html: string;
     profile_image: string;

src/app/core/services/mappers/users/users.mapper.ts

@@ -16,5 +16,7 @@ export function mapUserUStoUser(user: UserUS): User {
     employment: user.attributes.employment,
     iri: user.links.iri,
     social: user.attributes.social,
+    defaultRegionId: user.relationships?.default_region?.data?.id,
+    allowIndexing: user.attributes?.allow_indexing,
   };
 }

src/app/core/services/user/user.entity.ts

@@ -25,4 +25,6 @@ export interface User {
     impactStory?: string;
     researcherId?: string;
   };
+  defaultRegionId: string;
+  allowIndexing: boolean | undefined;
 }

src/app/features/home/components/confirm-email/confirm-email.component.html

@@ -0,0 +1,16 @@
+<div class="flex flex-column gap-6">
+  <h3 class="font-normal description">
+    {{ 'home.confirmEmail.description' | translate }}
+    <p class="inline font-bold">{{ config.data.emailAddress }}</p>
+    {{ 'home.confirmEmail.description2' | translate }}
+  </h3>
+  <div class="flex gap-2">
+    <p-button class="w-full" styleClass="w-full" (click)="dialogRef.close()" [text]="true" severity="secondary">
+      {{ 'home.confirmEmail.buttons.doNotAdd' | translate }}
+    </p-button>
+
+    <p-button class="w-full" styleClass="w-full" (click)="verifyEmail()">
+      {{ 'home.confirmEmail.buttons.addEmail' | translate }}
+    </p-button>
+  </div>
+</div>

src/app/features/home/components/confirm-email/confirm-email.component.scss

@@ -0,0 +1,5 @@
+:host {
+  .description {
+    text-transform: none;
+  }
+}

src/app/features/home/components/confirm-email/confirm-email.component.spec.ts

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

src/app/features/home/components/confirm-email/confirm-email.component.ts

@@ -0,0 +1,31 @@
+import { Store } from '@ngxs/store';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { VerifyEmail } from '@osf/features/settings/account-settings/store/account-settings.actions';
+
+@Component({
+  selector: 'osf-confirm-email',
+  imports: [Button, FormsModule, TranslateModule],
+  templateUrl: './confirm-email.component.html',
+  styleUrl: './confirm-email.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmEmailComponent {
+  readonly #store = inject(Store);
+  readonly dialogRef = inject(DynamicDialogRef);
+  readonly config = inject(DynamicDialogConfig);
+  readonly #router = inject(Router);
+
+  verifyEmail() {
+    this.#store.dispatch(new VerifyEmail(this.config.data.userId, this.config.data.emailId));
+    this.#router.navigate(['/settings/account']);
+  }
+}

src/app/features/home/logged-out/data.ts → src/app/features/home/components/logged-out/data.ts

@@ -4,21 +4,21 @@ export const slides = [
     name: 'Patricia Ayala',
     title: 'home.loggedOut.testimonials.slides.patricia.quote',
     author: 'Patricia Ayala',
-    facility: 'home.logged-out.testimonials.slides.patricia.facility',
+    facility: 'home.loggedOut.testimonials.slides.patricia.facility',
   },
   {
     img: 'assets/images/carousel2.png',
     name: 'Maya Mathur',
     title: 'home.loggedOut.testimonials.slides.maya.quote',
     author: 'Maya Mathur',
-    facility: 'home.logged-out.testimonials.slides.maya.facility',
+    facility: 'home.loggedOut.testimonials.slides.maya.facility',
   },
   {
     img: 'assets/images/carousel3.png',
     name: 'Philip Cohen',
     title: 'home.loggedOut.testimonials.slides.philip.quote',
     author: 'Philip Cohen',
-    facility: 'home.logged-out.testimonials.slides.philip.facility',
+    facility: 'home.loggedOut.testimonials.slides.philip.facility',
   },
 ];
 

src/app/features/home/logged-out/home-logged-out.component.html → src/app/features/home/components/logged-out/home-logged-out.component.html

@@ -85,7 +85,7 @@ <h3>
 
         <div class="info-section">
           <div class="icons-wrapper">
-            <img ngSrc="assets/icons/source/arrow-down.svg" alt="search icon" width="48" height="48" />
+            <img ngSrc="assets/icons/colored/publish.svg" alt="search icon" width="48" height="48" />
           </div>
           <div class="text-wrapper">
             <h2>

src/app/features/home/home.component.ts

@@ -4,20 +4,22 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { SortEvent } from 'primeng/api';
 import { Button } from 'primeng/button';
-import { DialogService } from 'primeng/dynamicdialog';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { TablePageEvent } from 'primeng/table';
 
-import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, Subject, take } from 'rxjs';
 
 import { Component, computed, DestroyRef, effect, inject, OnInit, signal } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { MY_PROJECTS_TABLE_PARAMS } from '@core/constants/my-projects-table.constants';
+import { ConfirmEmailComponent } from '@osf/features/home/components/confirm-email/confirm-email.component';
 import { GetUserInstitutions } from '@osf/features/institutions/store';
 import { MyProjectsItem } from '@osf/features/my-projects/entities/my-projects.entities';
 import { MyProjectsSearchFilters } from '@osf/features/my-projects/entities/my-projects-search-filters.models';
 import { ClearMyProjects, GetMyProjects, MyProjectsSelectors } from '@osf/features/my-projects/store';
+import { AccountSettingsService } from '@osf/features/settings/account-settings/services/account-settings.service';
 import { AddProjectFormComponent } from '@shared/components/add-project-form/add-project-form.component';
 import { MyProjectsTableComponent } from '@shared/components/my-projects-table/my-projects-table.component';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
@@ -43,6 +45,7 @@ export class HomeComponent implements OnInit {
   readonly #isXSmall$ = inject(IS_XSMALL);
   readonly #isMedium$ = inject(IS_MEDIUM);
   readonly #searchSubject = new Subject<string>();
+  readonly #accountSettingsServer = inject(AccountSettingsService);
 
   protected readonly isLoading = signal(false);
   protected readonly isSubmitting = signal(false);
@@ -66,6 +69,9 @@ export class HomeComponent implements OnInit {
     return this.projects().filter((project) => project.title.toLowerCase().includes(search));
   });
 
+  dialogRef: DynamicDialogRef | null = null;
+  emailAddress = '';
+
   constructor() {
     this.#setupSearchSubscription();
     this.#setupTotalRecordsEffect();
@@ -75,6 +81,38 @@ export class HomeComponent implements OnInit {
   ngOnInit() {
     this.#setupQueryParamsSubscription();
     this.#store.dispatch(new GetUserInstitutions());
+
+    // Check for userId and emailId route parameters
+    this.#route.params.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((params) => {
+      const userId = params['userId'];
+      const emailId = params['emailId'];
+
+      if (userId && emailId) {
+        this.#accountSettingsServer
+          .getEmail(emailId, userId)
+          .pipe(take(1))
+          .subscribe((email) => {
+            this.emailAddress = email.emailAddress;
+            this.addAlternateEmail();
+          });
+      }
+    });
+  }
+
+  addAlternateEmail() {
+    this.dialogRef = this.#dialogService.open(ConfirmEmailComponent, {
+      width: '448px',
+      focusOnShow: false,
+      header: this.#translateService.instant('home.confirmEmail.title'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+      data: {
+        emailAddress: this.emailAddress,
+        userId: this.#route.snapshot.params['userId'],
+        emailId: this.#route.snapshot.params['emailId'],
+      },
+    });
   }
 
   #setupQueryParamsSubscription(): void {

src/app/features/institutions/institutions.service.ts

@@ -6,6 +6,8 @@ import { inject, Injectable } from '@angular/core';
 import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
 import { JsonApiService } from '@core/services/json-api/json-api.service';
 
+import { environment } from '../../../environments/environment';
+
 import { Institution, UserInstitutionGetResponse } from './entities/institutions.models';
 import { InstitutionsMapper } from './mappers/institutions.mapper';
 
@@ -23,4 +25,11 @@ export class InstitutionsService {
       .get<JsonApiResponse<UserInstitutionGetResponse[], null>>(url)
       .pipe(map((response) => response.data.map((item) => InstitutionsMapper.fromResponse(item))));
   }
+
+  deleteUserInstitution(id: string, userId: string): Observable<void> {
+    const payload = {
+      data: [{ id: id, type: 'institutions' }],
+    };
+    return this.#jsonApiService.delete(`${environment.apiUrl}/users/${userId}/relationships/institutions/`, payload);
+  }
 }