orcid-angular/src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.html at f9911ff00afca55e82f8b542189928950a454046 · ORCID/orcid-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<form [formGroup]="twoFactorForm">
  <orcid-step-view
    i18n-title="@@account.enableTwoFactorAuth"
    i18n-subtitle="@@account.step2RecoveryCodes"
    i18n-primaryLabel="@@account.enableTwoFactorAuth"
    title="Enable two-factor authentication"
    subtitle="Step 2 of 2 - 2FA recovery codes"
    primaryLabel="Enable two-factor authentication"
    [primaryDisabled]="!canCompleteSetup"
    (primaryAction)="completeSetup()"
  >
    <div class="copy-block">
      <div class="copy-block__intro">
        <h4 id="backup-codes-label" i18n="@@account.yourRecoveryCodesTitle">
          Your 2FA recovery codes
        </h4>
        <p i18n="@@account.recoveryCodes">
          Recovery codes can be used to access your ORCID account when you
          aren’t able to use your authentication app. Each recovery code can
          only be used once.
        </p>
      </div>
      <a
        class="learn-more-link"
        i18n="@@account.learnMoreAbout2FA"
        rel="noopener noreferrer"
        target="_blank"
        href="https://support.orcid.org/hc/en-us/articles/360006971673"
      >
        Learn more about 2FA recovery codes
        <mat-icon inline="true" aria-hidden="true">open_in_new</mat-icon>
      </a>
    </div>

    <div class="backup-codes-wrapper">
      <textarea
        class="backup-codes orc-font-body-small"
        formControlName="backupCodes"
        rows="10"
        readonly
        aria-labelledby="backup-codes-label"
      >
      </textarea>
    </div>

    <div class="actions-row">
      <button
        type="button"
        class="link-action"
        (click)="downloadRecoveryCodes()"
      >
        <mat-icon inline="true" aria-hidden="true">file_download</mat-icon>
        <span class="underline" i18n="@@account.download2FARecovery">
          Download 2FA recovery codes
        </span>
      </button>
      <div class="actions-divider" aria-hidden="true"></div>
      <button
        type="button"
        class="link-action"
        (click)="markCodesCopied(); tooltip.toggle()"
        [cdkCopyToClipboard]="backupCodesClipboard"
        matTooltip="{{ tooltipClipboard }}"
        (mouseenter)="$event.stopImmediatePropagation()"
        (mouseleave)="$event.stopImmediatePropagation()"
        #tooltip="matTooltip"
      >
        <mat-icon inline="true" aria-hidden="true">content_copy</mat-icon>
        <span class="underline" i18n="@@account.copy2FARecovery">
          Copy 2FA recovery codes
        </span>
      </button>
    </div>

    <div class="confirm-block">
      <h4 i18n="@@account.confirmRecoveryCodesTitle">
        Confirm 2FA recovery codes
      </h4>
      <mat-checkbox
        formControlName="confirmCodes"
        i18n="@@account.confirmRecoveryCodesCheckbox"
      >
        I have downloaded or copied my 2FA recovery codes and stored them
        somewhere safe
      </mat-checkbox>
    </div>
  </orcid-step-view>
</form>