orcid-angular/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html at d55f19359c395f29e6edbb9ee150dac9e0558198 · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<app-settings-panels-data>
  @if (success) {
  <app-alert-message type="success" class="mb-4.5">
    <div content class="mt-0.5" i18n>
      Two-factor authentication has been disabled
    </div>
  </app-alert-message>
  } @if (cancel) {
  <app-alert-message type="warning" class="mb-4.5">
    <div content class="mt-0.5" i18n>
      Two-factor authentication was not disabled
    </div>
  </app-alert-message>
  } @if (!twoFactorInfo?.enabled) {
  <div class="two-factor-panel">
    <p class="two-factor-panel__copy" i18n="@@account.addExtraSecurity">
      Add extra security to your ORCID account by enabling two-factor
      authentication (2FA).
    </p>
    <a
      class="two-factor-panel__link mb-6"
      href="https://support.orcid.org/hc/en-us/articles/360006971673"
      rel="noopener noreferrer"
      target="_blank"
      i18n="@@account.learnMoreAbout2FA"
    >
      Learn more about two-factor authentication
      <mat-icon inline="true" aria-hidden="true">open_in_new</mat-icon>
    </a>
    <button
      mat-raised-button
      color="primary"
      id="cy-two-factor-enable"
      class="two-factor-panel__enable-button"
      (click)="twoFactor()"
      i18n="@@account.enableTwoFactorAuth"
    >
      Enable two-factor authentication
    </button>
  </div>
  } @else {
  <div class="two-factor-panel two-factor-panel--enabled">
    <section class="two-factor-panel__section">
      <h4 i18n="@@account.signInWith2FA">Sign in with 2FA</h4>
      <p
        class="two-factor-panel__section-description"
        i18n="@@account.signInWith2FADescription"
      >
        Use your authentication app to generate a verification code whenever you
        sign in to ORCID.
      </p>
      <div class="two-factor-panel__requirement">
        <mat-icon
          inline="true"
          aria-hidden="true"
          class="two-factor-panel__requirement-icon"
        >
          check_circle
        </mat-icon>
        <div>
          <p class="two-factor-panel__requirement-title leading-5.25" i18n>
            Authentication app
          </p>
          <small>
            {{
              twoFactorInfo?.twoFactorCreationDate | monthDayYearDateToString
            }}
          </small>
        </div>
      </div>
    </section>

    <section class="two-factor-panel__section">
      <h4 i18n="@@account.accountRecovery">Account recovery</h4>
      <p
        class="two-factor-panel__section-description"
        i18n="@@account.accountRecoveryDescription"
      >
        Recover access to your ORCID account if you can't use your
        authentication app.
      </p>
      <div class="two-factor-panel__requirement">
        <mat-icon
          inline="true"
          aria-hidden="true"
          class="two-factor-panel__requirement-icon"
        >
          check_circle
        </mat-icon>
        <div>
          <p class="two-factor-panel__requirement-title leading-5.25" i18n>
            2FA recovery codes
          </p>
          <small class="leading-4.5">
            {{
              twoFactorInfo?.recoveryCodeCreationDate | monthDayYearDateToString
            }}
          </small>
        </div>
      </div>
    </section>

    <p class="two-factor-panel__copy" i18n="@@account.disable2FAWarning">
      You can disable two-factor authentication at any time. Turning 2FA off
      will reset any account recovery options you have set up.
    </p>
    <a
      class="two-factor-panel__link two-factor-panel__link--disable-info"
      href="https://support.orcid.org/hc/en-us/articles/360006971673"
      rel="noopener noreferrer"
      target="_blank"
      i18n="@@account.findOutMoreDisabling2FA"
    >
      Find out more about disabling two-factor authentication
      <mat-icon inline="true" aria-hidden="true">open_in_new</mat-icon>
    </a>
    <button
      mat-raised-button
      id="cy-two-factor-disable"
      class="two-factor-panel__disable-button"
      (click)="twoFactor()"
      i18n="@@account.disableTwoFactorAuth"
    >
      Disable two-factor authentication
    </button>
  </div>
  }
</app-settings-panels-data>