angular-osf/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html at 886f0ad5c03f9cb2245620c085411fb7a424f6b9 · CenterForOpenScience/angular-osf · 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
<p-card>
  <h2>{{ 'settings.accountSettings.connectedEmails.title' | translate }}</h2>

  <p class="mt-4">
    {{ 'settings.accountSettings.connectedEmails.description' | translate }}
  </p>

  <div class="flex flex-column mt-4 gap-4">
    <div class="flex align-items-center flex-wrap gap-2">
      <p>
        {{ 'settings.accountSettings.connectedEmails.primaryEmail' | translate }}
      </p>

      @if (isEmailsLoading()) {
        <p-skeleton width="20rem" height="2.5rem" />
      } @else {
        <p>{{ primaryEmail()?.emailAddress }}</p>
      }
    </div>

    <div class="flex align-items-center flex-wrap gap-2">
      <p>
        {{ 'settings.accountSettings.connectedEmails.alternateEmails' | translate }}
      </p>

      <div class="flex flex-column gap-3 xl:flex-row xl:flex-wrap">
        @if (isEmailsLoading()) {
          <p-skeleton width="20rem" height="2.5rem" />
        } @else {
          @for (email of confirmedEmails(); track email.id) {
            <div class="flex align-items-center flex-wrap gap-2">
              <osf-readonly-input
                [value]="email.emailAddress"
                (deleteItem)="openConfirmDeleteEmail(email)"
              ></osf-readonly-input>

              <p-button
                [label]="'settings.accountSettings.connectedEmails.buttons.makePrimary' | translate"
                severity="secondary"
                (click)="makePrimary(email)"
              >
              </p-button>
            </div>
          }
        }
      </div>
    </div>

    <div class="flex align-items-center flex-wrap gap-2">
      <p>
        {{ 'settings.accountSettings.connectedEmails.unconfirmedEmails' | translate }}
      </p>

      <div class="flex flex-column gap-3 xl:flex-row xl:flex-wrap">
        @if (isEmailsLoading()) {
          <p-skeleton width="20rem" height="2.5rem" />
        } @else {
          @for (email of unconfirmedEmails(); track email.id) {
            <div class="flex align-items-center flex-wrap gap-2">
              <osf-readonly-input
                [value]="email.emailAddress"
                (deleteItem)="openConfirmDeleteEmail(email)"
              ></osf-readonly-input>

              <p-button
                [label]="
                  (isSmall()
                    ? 'settings.accountSettings.connectedEmails.buttons.resendConfirmation'
                    : 'settings.accountSettings.connectedEmails.buttons.resend'
                  ) | translate
                "
                severity="secondary"
                [disabled]="isEmailsSubmitting()"
                [loading]="isEmailsSubmitting()"
                (click)="resendConfirmation(email)"
              >
              </p-button>
            </div>
          }
        }
      </div>
    </div>
  </div>

  <div class="flex justify-content-end mt-4">
    <p-button
      (onClick)="addEmail()"
      [label]="'settings.accountSettings.connectedEmails.buttons.addEmail' | translate"
    />
  </div>
</p-card>