settings-actions-duplicated.component.html

<app-settings-panels-data>
  @if (success) {
  <app-alert-message type="success" class="mb-4.5">
    <h4 title i18n>Duplicate account removed</h4>
    <p
      content
      class="mt-0.5"
      i18n="
        successful deprecation message|orcidToDeprecate=accound id that was
        deprecated
      "
    >
      <span>The record</span>&nbsp;<strong>{{ orcidToDeprecate }}</strong
      >&nbsp;<span>has been deprecated.</span>
    </p>
  </app-alert-message>
  } @if (cancelAuthentication) {
  <app-alert-message type="warning" class="mb-4.5">
    <h4 title i18n>Duplicate account not removed</h4>
    <p content class="mt-0.5" i18n>
      We could not verify your ORCID account details. The duplicate record has
      not been deprecated.
    </p>
  </app-alert-message>
  }
  <p i18n="@@account.ifYouHaveTwoorMore" class="mb-0 leading-5.25">
    If you have two or more ORCID records you can easily remove any unwanted
    duplicates.
  </p>
  <p class="mb-4!">
    <a
      id="cy-learn-more-about-removing-duplicated"
      class="underline leading-5.25"
      href="https://support.orcid.org/hc/en-us/articles/360006896634-Removing-your-additional-or-duplicate-ORCID-iD"
      rel="noopener noreferrer"
      target="_blank"
      i18n="@@account.learnMoreAboutRemovingDuplicates"
      >Learn more about removing duplicate records</a
    >
  </p>

  <app-alert-message class="row mb-8">
    <h4 title i18n>What happens when you remove a duplicate ORCID account?</h4>

    <ul content i18n>
      <li class="list-disc!">
        The email addresses are transferred from the duplicate account to
        <strong>{{ orcid }}</strong>
      </li>
      <li class="list-disc!">
        All information on the duplicate account is permanently deleted
      </li>
    </ul>
  </app-alert-message>
  @if (authenticated) {
  <form [formGroup]="form" (ngSubmit)="onSubmit()" autocomplete="off">
    <h3 i18n class="mb-2 mt-0">You are removing this duplicate account</h3>
    @if (data.deprecatingAccountName) {
    <p class="leading-5.25">{{ data.deprecatingAccountName }}</p>
    } @else {
    <p class="leading-5.25" i18n="@@account.nameIsPri">Name is private</p>
    }
    <p class="mb-6! leading-5.25">
      https:{{ baseUrl + data.deprecatingOrcid }}
    </p>

    <strong i18n class="leading-5.25"
      >Email addresses to be transferred to this account</strong
    >&nbsp;<strong>({{ orcid }})</strong>
    <div class="mb-6!">{{ data.deprecatingEmails?.join(', ') }}</div>
    <em class="block mb-8!" i18n
      >All other information on this account will be permanently deleted.</em
    >
    <button
      mat-raised-button
      color="warn"
      type="submit"
      i18n
      id="cy-remove-duplicate-record"
    >
      Remove duplicate account
    </button>
  </form>
  } @else {
  <form [formGroup]="form" (ngSubmit)="submitVerify()" autocomplete="off">
    <h3 i18n class="mt-0 mb-2">Which account do you want to remove?</h3>
    <p i18n class="mb-8!">
      You will need to verify your sign in details for the duplicate account
      before it can be removed.
    </p>

    <label
      class="row mat-caption"
      [ngClass]="{
        error:
          form.controls.deprecatingOrcidOrEmail?.invalid &&
          form.controls.deprecatingOrcidOrEmail?.touched
      }"
    >
      <strong i18n>Duplicate account email address or ORCID iD </strong>
    </label>
    <mat-form-field
      appearance="outline"
      subscriptSizing="dynamic"
      class="mat-form-field-min input-container mb-6!"
    >
      <input
        formControlName="deprecatingOrcidOrEmail"
        type="text"
        matInput
        autocomplete="off"
        [errorStateMatcher]="errorMatcher"
        id="cy-duplicate-rercod-email"
      />
    </mat-form-field>

    <label
      class="row mat-caption"
      [ngClass]="{
        error:
          form.controls.password?.invalid && form.controls.password?.touched
      }"
    >
      <strong i18n>Duplicate account password </strong>
    </label>
    <mat-form-field
      appearance="outline"
      subscriptSizing="dynamic"
      class="mat-form-field-min input-container mb-8!"
    >
      <input
        formControlName="password"
        type="password"
        matInput
        autocomplete="new-password"
        [errorStateMatcher]="errorMatcher"
        id="cy-duplicate-rercod-email"
      />
    </mat-form-field>

    <mat-error class="mb-4! -mt-2!" *ngFor="let error of errors">{{
      error
    }}</mat-error>

    <div class="button-container">
      <button
        mat-raised-button
        i18n
        type="submit"
        [disabled]="form.invalid || loadingVerify"
        class="cy-remove-duplicated-record"
      >
        Verify duplicate account details
      </button>
    </div>
  </form>
  }
</app-settings-panels-data>