diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 65ee4363c..59e8aa6ae 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -191,7 +191,7 @@ export const routes: Routes = [ ], }, { - path: 'confirm/:userId/:emailId', + path: 'confirm/:userId/:token', loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent), }, ], diff --git a/src/app/features/home/components/confirm-email/confirm-email.component.html b/src/app/features/home/components/confirm-email/confirm-email.component.html index 948f95be5..fa2138610 100644 --- a/src/app/features/home/components/confirm-email/confirm-email.component.html +++ b/src/app/features/home/components/confirm-email/confirm-email.component.html @@ -1,16 +1,26 @@
-

- {{ 'home.confirmEmail.description' | translate }} -

{{ config.data.emailAddress }}

- {{ 'home.confirmEmail.description2' | translate }} -

-
- - {{ 'home.confirmEmail.buttons.doNotAdd' | translate }} - - - - {{ 'home.confirmEmail.buttons.addEmail' | translate }} - -
+ @if (!verifyingEmail()) { +

+ {{ 'home.confirmEmail.description' | translate }} +

{{ config.data.emailAddress }}

+ {{ 'home.confirmEmail.description2' | translate }} +

+
+ + +
+ } @else { + + }
diff --git a/src/app/features/home/components/confirm-email/confirm-email.component.ts b/src/app/features/home/components/confirm-email/confirm-email.component.ts index 0b62d83d5..eb5fcfe10 100644 --- a/src/app/features/home/components/confirm-email/confirm-email.component.ts +++ b/src/app/features/home/components/confirm-email/confirm-email.component.ts @@ -1,31 +1,53 @@ -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 { finalize } from 'rxjs'; + +import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; import { Router } from '@angular/router'; -import { VerifyEmail } from '@osf/features/settings/account-settings/store'; +import { AccountSettingsService } from '@osf/features/settings/account-settings/services'; +import { LoadingSpinnerComponent } from '@shared/components'; @Component({ selector: 'osf-confirm-email', - imports: [Button, FormsModule, TranslateModule], + imports: [Button, FormsModule, TranslateModule, LoadingSpinnerComponent], 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); + readonly #accountSettingsService = inject(AccountSettingsService); + readonly #destroyRef = inject(DestroyRef); + + verifyingEmail = signal(false); + + closeDialog() { + this.#router.navigate(['/home']); + this.dialogRef.close(); + } verifyEmail() { - this.#store.dispatch(new VerifyEmail(this.config.data.userId, this.config.data.emailId)); - this.#router.navigate(['/settings/account']); + this.verifyingEmail.set(true); + this.#accountSettingsService + .confirmEmail(this.config.data.userId, this.config.data.token) + .pipe( + takeUntilDestroyed(this.#destroyRef), + finalize(() => this.verifyingEmail.set(false)) + ) + .subscribe({ + next: () => { + this.#router.navigate(['/settings/account-settings']); + this.dialogRef.close(); + }, + error: () => this.closeDialog(), + }); } } diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts index cb5c9f209..f00372814 100644 --- a/src/app/features/home/home.component.ts +++ b/src/app/features/home/home.component.ts @@ -42,7 +42,7 @@ export class HomeComponent implements OnInit { readonly #route = inject(ActivatedRoute); readonly #translateService = inject(TranslateService); readonly #dialogService = inject(DialogService); - readonly #accountSettingsServer = inject(AccountSettingsService); + readonly #accountSettingsService = inject(AccountSettingsService); protected readonly isLoading = signal(false); protected readonly isSubmitting = signal(false); @@ -79,36 +79,38 @@ export class HomeComponent implements OnInit { 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']; + const token = params['token']; - if (userId && emailId) { - this.#accountSettingsServer - .getEmail(emailId, userId) + if (userId && token) { + this.#accountSettingsService + .getEmail(token, userId) .pipe(take(1)) .subscribe((email) => { this.emailAddress = email.emailAddress; - this.addAlternateEmail(); + this.addAlternateEmail(token); }); } }); } - 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'], - }, + addAlternateEmail(token: string) { + this.#translateService.get('home.confirmEmail.title').subscribe((title) => { + this.dialogRef = this.#dialogService.open(ConfirmEmailComponent, { + width: '448px', + focusOnShow: false, + header: title, + closeOnEscape: true, + modal: true, + closable: true, + data: { + emailAddress: this.emailAddress, + userId: this.#route.snapshot.params['userId'], + emailId: this.#route.snapshot.params['emailId'], + token: token, + }, + }); }); } diff --git a/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html b/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html index 11d189634..fbda9dbfc 100644 --- a/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html +++ b/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html @@ -41,18 +41,21 @@

{{ 'settings.accountSettings.connectedEmails. } @if (deletingEmailIds().has(email.id)) { - + } - - {{ 'settings.accountSettings.connectedEmails.buttons.makePrimary' | translate }} - + @if (makingPrimaryIds().has(email.id)) { + + } @else { + + + } } } @@ -82,22 +85,25 @@