D-Net

<ng-template #buttons>

  <!--<a class="portal-link uk-margin-small-right" (click)="privacy()">Privacy policy statement</a>-->

  <button class="uk-button uk-margin-small-right" (click)="resetMessages(); resetForm()">Cancel</button>

  <button *ngIf="enabled && (hasChanged || affiliationsChanged)" class="uk-button uk-button-primary" (click)="resetMessages(); updateCurator()">Save</button>

  <button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button>

</ng-template>

<div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Manage Personal Info</div>

<div class="uk-margin-large-bottom uk-flex uk-grid-divider" uk-grid>

  <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">

    <span class="loading-gif uk-align-center"></span>

  </div>

  <div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-1 uk-margin-left">

    <div class="uk-alert uk-alert-primary uk-flex uk-flex-middle">

      <span class="uk-icon uk-margin-small-right" uk-icon="info"></span>

      <div>

        Your personal info will be visible in the Curators' page of your Community Gateway.

        Read <a (click)="privacy()">privacy policy statement</a>.<br>

        <span *ngIf="!newCurator && !curatorsEnabled">

          Curators' page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.

        </span>

      </div>

    </div>

  </div>

  <table *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s uk-align-center">

    <tbody class="uk-table uk-align-center">

      <tr *ngIf="curator.name != null">

        <td for="name" class="uk-text-bold uk-text-right">

          Name

          <span class="uk-text-danger uk-text-bold">

            *

          </span>

          :

        </td>

        <td class="uk-text-left uk-width-1-1">

          <div *ngIf="!curator.name || curator.name === ''" class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>

          <input  type="text"

                  class="form-control uk-input" id="name"

                  [(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>

        </td>

      </tr>

      <tr *ngIf="photo != null">

        <td for="photo" class="uk-text-bold uk-align-right">Photo:</td>

        <td class="uk-text-left">

          <div class="uk-flex uk-flex-middle" uk-grid>

            <div class="uk-width-auto@l">

              <img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">

            </div>

            <div class="uk-width-expand@l uk-grid-margin-small" uk-grid>

              <div uk-form-custom class="uk-width-auto">

                <input id="photo" type="file"  (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/>

                <button class="uk-button  portal-button" type="button" tabindex="-1">

                  Upload a photo

                </button>

              </div>

              <div *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-width-auto">

                <button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">

                  Remove

                </button>

              </div>

            </div>

          </div>

          <div class="uk-margin-small-top uk-text-warning">

            Maximum photo resolution is 256x256 pixels.

          </div>

        </td>

      </tr>

      <tr *ngIf="curator.bio != null">

        <td for="bio" class="uk-text-bold uk-text-right">Biography:</td>

        <td class="uk-text-left">

          <textarea placeholder={{curator.bio}} type="text"

                    class="form-control uk-textarea" rows="6"

                    id="bio"

                    [(ngModel)]="curator.bio"

                    (input)="resetMessages(); change()">

          </textarea>

        </td>

      </tr>

      <tr *ngIf="curator.bio != null">

        <td class="uk-text-right"></td>

        <td class="uk-text-left">

        <div class="uk-text-danger uk-text-bold">

          * Required fields

        </div>

        </td>

      </tr>

      <tr>

        <td class="uk-text-right"></td>

        <td>

          <div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>

          <div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>

      </tr>

    </tbody>

  </table>

  <div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s">

    <affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"

                  (affiliationsChange)="affiliationsChanged = $event"

                  (resetCuratorMessages)="resetMessages();">

    </affiliations>

  </div>

</div>

<div class="uk-float-right uk-flex uk-flex-middle uk-visible@m" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">

  <ng-container *ngTemplateOutlet="buttons"></ng-container>

</div>

<div class="uk-float-right uk-margin-bottom uk-hidden@m">

  <ng-container *ngTemplateOutlet="buttons"></ng-container>

</div>

<modal-alert #removePhotoModal  (alertOutput)="removePhoto()">

  Your photo will be removed after you save your data. Are you sure you want to proceed?

</modal-alert>

<modal-alert #privacyStatement  (alertOutput)="privacyStatement.cancel()">

  <div class="">

    Your personal data and photo are processed by OpenAIRE in conformity with personal data protection legal framework.

    They  will be stored safely in our system for as long as OpenAIRE exists. Since you press the  "save" button,

    you give us the consent to make them public in your Community Gateway to let users know who is

    configuring the platform. You always have the right to exercise your rights and ask for access,

    rectification, erasure and restriction of your data. Please contact <a href="mailto:rcd-helpdesk@openaire.eu">rcd-helpdesk@openaire.eu</a> if

    you have any inquiries.

  </div>

</modal-alert>