orcid-angular/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html at fd75f203dd9f83050c2aa06003bcbf392937b806 · 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
129
130
131
<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 two-factor-panel__copy--intro"
      i18n="@@account.addExtraSecurity"
    >
      Add extra security to your ORCID account by enabling two-factor
      authentication (2FA).
    </p>
    <a
      class="two-factor-panel__link"
      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>