[develop-16-deposit | WIP ]

deposit/deposit-file/deposit-file.component.ts

@@ -12,65 +12,73 @@ declare var UIkit: any;
 @Component({
   selector: 'deposition',
   template: `
-    <div class="">
+<div class="uk-alert uk-padding-xsmall uk-text-small" *ngIf="userTokens && userTokens.zenodoDuration">
-      <div *ngIf="!authorized" class="uk-text-center">
+  The session with Zenodo will be valid for {{(userTokens.zenodoDuration/3600) <24?(userTokens.zenodoDuration/3600) + (userTokens.zenodoDuration == '3600'?' hour':' hours'): (userTokens.zenodoDuration/(3600 * 24)) + ' days'}}
-        <div class="uk-section-small">
+</div>
-          Authorize OpenAIRE to deposit files in your Zenodo account.
+    <div *ngIf="prevMongoRecords && prevMongoRecords.length > 0" >
+      <div>You have already upload the following files:</div>
+      <!--<div class="uk-text-xsmall">Note that if the records are deleted in zenodo the links will not </div>-->
+      <div class="uk-text-small">
+        <div *ngFor="let record of prevMongoRecords">
+          <div> {{record.depositDate}} <a *ngIf=" record.recordId"
+                                          [href]="properties.zenodoDepositAPI + 'uploads/' + record.recordId">View
+            in Zenodo
+            <icon name="edit"></icon>
+          </a></div>
+          <div> {{record.filenames.join(', ')}}
+          </div>
+
         </div>
-        <!--<a  (click)="openGrantModal('Grant Openaire')"
-           class="uk-button uk-button-primary">Authorize</a>-->
-        <a (click)="authorize()"
-           class="uk-button uk-button-primary">Authorize</a>
-
       </div>
-
+    </div>
-      <form *ngIf="authorized && !space" class=" uk-section-small">
+    <div *ngIf="!space">
-
+      <div class="uk-margin-medium-top uk-text-center uk-text-meta uk-text-large">
-
+        Use basic metadata (title, description, type) of this record to upload a file in Zenodo. 
+      </div>
+      <form *ngIf="!space" class=" uk-section-small uk-flex uk-flex-center">
         <div class="uk-float-left">
-              <span class="js-upload" uk-form-custom>
+                <span class="js-upload" uk-form-custom>
-                <input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/>
+                  <input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"
-                <span class="uk-link " style="text-decoration: underline;">Upload a file to deposit </span>
+                         multiple="multiple"/>
-              </span>
+                  <span class="uk-link " style="text-decoration: underline;">Upload a file to deposit </span>
+                </span>
         </div>
       </form>
+    </div>
  
-      <div class="uk-alert uk-alert-warning">
+    <ng-container *ngIf="space">
-        <div class="uk-text-small"> This is for testing</div>
+      <!--          <div><a [href]="space.links.html" target="_blank">{{space.metadata.title}}</a></div>-->
-        <button (click)="getInfo(null)">get info</button>
+      <div class="uk-flex uk-flex-center uk-text-success"><icon name="file_download_done" [ratio]="3"></icon></div>
-        <button (click)="checkAccess(null)">get info</button>
+    <div class="uk-text-center">Your file has been uploaded in Zenodo in <b>draft</b> mode. You can view the record
+        <a   [href]="space.links.html" target="_blank">here</a>, edit and publish it.
+        <div  >The preserved DOI is {{space.metadata.prereserve_doi.doi}}.</div>
       </div>
+
+      <a (click)="deleteSpace()" 
+         class="uk-button uk-button-danger uk-margin-top">Undo: This will delete your deposited file in zenodo.</a>
+
+    </ng-container>
+    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
+    <div *ngIf="message" [innerHTML]="message"></div>
+    <div *ngIf="showLoading" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
+      <loading></loading>
+    </div>
+    <modal-alert #grantModal [overflowBody]=false (alertOutput)="authorize()">
+      <div>
+        <!--          <div>{{requestGrantMessage}}</div>-->
+      </div>
+    </modal-alert>
+    <modal-alert #depositInfoModal>
       <ng-container *ngIf="space">
         <!--          <div><a [href]="space.links.html" target="_blank">{{space.metadata.title}}</a></div>-->
         <div>Your file has been deposited in Zenodo with the main metadata of this record. You can view the new record
           <a [href]="space.links.html" target="_blank">here</a>, edit and publish it.
         </div>
         <div>The preserved DOI is {{space.metadata.prereserve_doi.doi}}.</div>
-
-        <a (click)="deleteSpace()"
-           class="uk-button uk-button-danger">Undo: This will delete your deposited file in zenodo.</a>
-
       </ng-container>
-      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
+    </modal-alert>
-      <div *ngIf="message" [innerHTML]="message"></div>
+<!--    <a (click)="getAccessByRefresh(null)">get new Access by Refreh</a>-->
-      <div *ngIf="showLoading" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
+
-        <loading></loading>
-      </div>
-      <modal-alert #grantModal [overflowBody]=false (alertOutput)="authorize()">
-        <div>
-          <!--          <div>{{requestGrantMessage}}</div>-->
-        </div>
-      </modal-alert>
-      <modal-alert #depositInfoModal>
-        <ng-container *ngIf="space">
-          <!--          <div><a [href]="space.links.html" target="_blank">{{space.metadata.title}}</a></div>-->
-          <div>Your file has been deposited in Zenodo with the main metadata of this record. You can view the new record
-            <a [href]="space.links.html" target="_blank">here</a>, edit and publish it.
-          </div>
-          <div>The preserved DOI is {{space.metadata.prereserve_doi.doi}}.</div>
-        </ng-container>
-      </modal-alert>
-    </div>
   `
 })
 
@@ -79,7 +87,8 @@ export class DepositionComponent {
   properties = properties;
   @Input() result: ResultLandingInfo;
 
-  authorizeUrl = this.properties.zenodoDepositAPI + "oauth/authorize?response_type=code&client_id=" +
+  authorizeUrl = this.properties.zenodoDepositAPI +
+    /* "oauth/authorize?response_type=code&client_id=" +*/ "oauth/authorize?response_type=token&client_id=" +
     this.properties.zenodoDepositClientId + "&scope=deposit%3Awrite+deposit%3Aactions&state=step1&redirect_uri=" +
     encodeURIComponent(this.properties.zenodoDepositRedirectURI);
 
@@ -95,6 +104,8 @@ export class DepositionComponent {
   public code: string = "";
   public gotToken: boolean = false;
   public space = null;
+  public mongoRecord = null;
+  public prevMongoRecords = null;
   public window: any;
   user//: User;
   userTokens;
@@ -124,20 +135,8 @@ export class DepositionComponent {
     } else {
       this.authorized = false;
     }
-    // }));
+    this.getPrevUploads();
-    /* this.subscriptions.push(this.route.queryParams.subscribe(params => {
-       if (params['code']) {
-         this.code = params['code'];
-         localStorage.setItem('deposit_code', this.code);
-       } else if (localStorage.getItem('deposit_code')) {
-         this.code = localStorage.getItem('deposit_code');
-       }
-       // if(this.code){
-       //   this.authorized = true;
-       // }
-       this.gotToken = false;
 
-     }));*/
   }
 
   ngOnDestroy() {
@@ -159,7 +158,6 @@ export class DepositionComponent {
   }
 
   authorize() {
-    console.log(this.authorizeUrl)
     this.window = window.open(this.authorizeUrl, '_blank',
       'location=yes,height=700,width=540,left=500,top=100,scrollbars=yes,status=yes');
     // this.requestGrant = false;
@@ -168,16 +166,17 @@ export class DepositionComponent {
     let self = this;
     window.onmessage = function (ev) {
       if (ev.isTrusted && ev.origin == location.origin) {
+        console.log(ev.data)
         let user = {
-          id: self.user.id,
+          _id: self.user.id,
           firstName: self.user.firstname,
           lastName: self.user.lastname,
           email: self.user.email,
           zenodoToken: ev.data['access_token'],
           zenodoDuration: ev.data['expires_in'],
-          zenodoRefresh: ev.data['refresh_token'],
+          zenodoRefresh: ev.data['refresh_token']?ev.data['refresh_token']:"",
           zenodoUserId: ev.data['user']['id'],
-          code: ev.data['code']
+          code: ev.data['code']?ev.data['code']:""
 
         };
 
@@ -185,6 +184,9 @@ export class DepositionComponent {
           if (res) {
             self.authorized = true;
             self.userTokens = res;
+            if (self.filesToUpload) {
+              self.start();
+            }
           }
         })
       }
@@ -204,42 +206,10 @@ export class DepositionComponent {
     this.grantModal.cancel();
   }
 
-  // the following method uses client ID and client Secret, which are sessitive data.
-  // Our API should return the response, without revealing the call to ORCID.
-  /*public getToken() {
-    this.showLoading = true;
-    console.log(this.code)
-
-    this._http.get(properties.utilsService + "/deposit/getToken?code=" + this.code).subscribe(res => {
-      console.log(res)
-      localStorage.setItem('deposit_token', res['access_token']);
-      localStorage.setItem('deposit_refresh', res['refresh_token']);
-    })
-
-  }
-
-  public getTokenByRefresh() {
-    this.showLoading = true;
-    console.log(this.code, localStorage.getItem('deposit_refresh'))
-
-    this._http.get(properties.utilsService + "/deposit/getToken?refresh_token=" + localStorage.getItem('deposit_refresh')).subscribe(res => {
-      console.log(res)
-      localStorage.setItem('deposit_token', res['access_token']);
-      localStorage.setItem('deposit_refresh', res['refresh_token']);
-    })
-
-  }*/
-
   public getInfo(func) {
     if (this.userTokens.zenodoToken) {
-
-      /* this._http.get("http://localhost:8000/deposit/info?token=" + localStorage.getItem('deposit_token')).subscribe(res => {
-         console.log(res)
-
-       })*/
       this._http.get(this.properties.zenodoDepositAPI + "api/deposit/depositions?access_token=" + this.userTokens.zenodoToken).subscribe(res => {
         console.log(res)
-        alert(res)
         if (func) {
           func();
         }
@@ -263,25 +233,27 @@ export class DepositionComponent {
     this.space = null;
     this.errorMessage = null;
     this.showLoading = true;
-    console.log(this.userTokens.zenodoToken)
     if (this.userTokens.zenodoToken) {
       let record = this.resultInfoToZenodoRecord();
-      console.log(record)
       this._http.post(this.properties.zenodoDepositAPI + "api/deposit/depositions?access_token=" + this.userTokens.zenodoToken, {
-
         "metadata": record
         /*,
         "submitted": true*/
       }).subscribe(res => {
-        console.log(res)
         this.space = res;
         // this.meta();
         console.log(res)
-        this.depositFile();
+        // for(let file of this.filesToUpload) {
+        //   this.depositFile(file);
+        // }
+        this.depositFile(this.filesToUpload[0]);
+        this.saveRecord(record, this.filesToUpload, this.space);
+        this.filesToUpload = [];
       }, error => {
         console.error(error.message)
-        this.errorMessage = error.message;
+        // this.errorMessage = error.message;
-        this.showLoading = false;
+        // this.showLoading = false;
+        this.authorize();
       })
     }
   }
@@ -294,9 +266,9 @@ export class DepositionComponent {
       creators: [],
       description: this.result.description
     }
-    if (this.result.resultType == 'publication' && this.result.types[0]) {
+    /*    if (this.result.resultType == 'publication' && this.result.types[0]) {
-      record['publication_type'] = this.result.types[0];
+          record['publication_type'] = this.result.types[0];
-    }
+        }*/
     for (let author of this.result.authors) {
       record.creators.push({name: author.fullName, orcid: author.orcid})
     }
@@ -309,24 +281,22 @@ export class DepositionComponent {
       // this.errorMessage = "There is no selected file to upload.";
       return;
     }
-    this.start();
+    if (this.authorized) {
+      // if(valid?) {
+      this.start();
+      // }
+    } else {
+      this.authorize();
+    }
   }
 
 
-  depositFile() {
+  depositFile(file) {
-
     const formData: FormData = new FormData();
-    formData.append('file', this.filesToUpload[0]);
+    formData.append('file', file);
-    const fileName = this.filesToUpload[0].name; // Replace with file name
+    const fileName = file.name; // Replace with file name
-
     let url = `${this.space.links.bucket}/${fileName}`;
 
-
-    const data = {
-      name: fileName,
-      ...formData
-    };
-
     const headers = new HttpHeaders({
       'Content-type': 'application/octet-stream'
     });
@@ -356,12 +326,49 @@ export class DepositionComponent {
      }*/
   }
 
+  saveRecord(record, files, res) {
+    let mongoRecord = {
+
+      aaiId: this.user.id,
+      title: record.title,
+      description: record.description,
+      type: record["upload_type"],
+      date: record.publication_date,
+      authors: [],
+      filenames: [],
+      pids: [],
+      openAIREId: this.result.relcanId,
+      recordId: this.space.record_id,
+      ownerId: this.userTokens.zenodoUserId
+    };
+    for (let file of files) {
+      mongoRecord.filenames.push(file.name)
+    }
+    for (let pidtype of this.result.identifiers.keys()) {
+      for (let pid of this.result.identifiers.get(pidtype)) {
+        if (mongoRecord.pids.indexOf(pid) == -1) {
+          mongoRecord.pids.push(pid)
+        }
+      }
+    }
+    for (let author of record.creators) {
+      mongoRecord.authors.push({name: author.name, orcid: author.orcid ? author.orcid : ""})
+    }
+    this._http.post(this.properties.depositAPI + "deposit/record/save", mongoRecord).subscribe(res => {
+      console.log(res)
+      this.mongoRecord = res;
+    })
+
+  }
+
   deleteSpace() {
     this._http.delete(this.properties.zenodoDepositAPI + "api/deposit/depositions/" + this.space.id + "?access_token=" + this.userTokens.zenodoToken,
     ).subscribe(res => {
       console.log(res)
       this.space = null;
+      this._http.delete(this.properties.depositAPI + "deposit/record/delete?id=" + this.mongoRecord._id).subscribe(res => {
 
+      })
     }, error => {
       console.error(error.message)
       UIkit.notification({
@@ -393,4 +400,18 @@ export class DepositionComponent {
 
     })
   }
+
+  getPrevUploads() {
+    let pids = [];
+    for (let pidtype of this.result.identifiers.keys()) {
+      for (let pid of this.result.identifiers.get(pidtype)) {
+        if (pids.indexOf(pid) == -1) {
+          pids.push(pid)
+        }
+      }
+    }
+    this._http.get(this.properties.depositAPI + "deposit/record/get?aaiId=" + this.user.id + (pids.length > 0 ? "&pid=" + pids.join("&pid=") : "") + "&openaireId=" + this.result.relcanId).subscribe(res => {
+      this.prevMongoRecords = res;
+    })
+  }
 }

deposit/deposit-file/deposit-file.module.ts

@@ -3,12 +3,14 @@ import {CommonModule} from '@angular/common';
 import {DepositionComponent} from "./deposit-file.component";
 import {AlertModalModule} from "../../utils/modal/alertModal.module";
 import {LoadingModule} from "../../utils/loading/loading.module";
+import {IconsModule} from "../../utils/icons/icons.module";
 
 @NgModule({
   imports: [
     CommonModule,
     AlertModalModule,
     LoadingModule,
+    IconsModule,
   ],
   declarations: [
     DepositionComponent

deposit/deposit-grant-redirect/deposit.component.ts

@@ -46,7 +46,7 @@ export class DepositComponent {
     this.updateDescription(description);
     this.updateUrl( properties.domain + properties.baseLink + this.route.url);
 
-    this.subscriptions.push(this.route.queryParams.subscribe(params => {
+    /*this.subscriptions.push(this.route.queryParams.subscribe(params => {
       this.gotToken = false;
       this.code = params['code'];
       if (this.code) {
@@ -54,7 +54,25 @@ export class DepositComponent {
       } else {
         this.message = "No code provided to authorize OpenAIRE to deposit in your Zenodo account. Please try again!"
       }
-    }));
+    }));*/
+    this.route.fragment.subscribe((fragment: string | null) => {
+      console.log(fragment)
+      let res = {};
+      //access_token=2qULnkWIsZf6XLUgnbASgcC6zhNt18&expires_in=5184000&token_type=Bearer&scope=deposit:write+deposit:actions&state=step1&user={'id':+'12352'}
+      let splits = fragment.split("&");
+      for(let split of splits){
+        if(split.split('=')[0] == 'access_token'){
+          res['access_token'] = split.split('=')[1]
+        }
+        if(split.split('=')[0] == 'expires_in'){
+          res['expires_in'] = split.split('=')[1]
+        }
+        if(split.split('=')[0] == 'user'){
+          res['user'] = split.split('=')[1]
+        }
+      }
+      this.closeModal(res);
+    });
   }
 
   ngOnDestroy() {
@@ -70,15 +88,7 @@ export class DepositComponent {
     this._http.get(this.properties.depositAPI + "deposit/zenodo/getTokenByCode?code=" + this.code).subscribe(res => {
       console.log(res)
       res["code"] = this.code
-      this.message = "<div>Thank you for authorizing OpenAIRE to use your Zenodo account for deposit!</div>" +
+      this.closeModal(res);
-        "<div class='uk-margin-small-top'>This window will automatically close and you will be ready to deposit.</div>";
-      if(window && window.opener) {
-        window.opener.postMessage(res,"*");
-        window.close();
-      }
-      setTimeout(() => {
-        this.message += "<div class='uk-margin-top'>If this window does not close automatically, please close it and continue!</div>";
-      }, 3000);
     }, error =>{
       console.log(error)
       this.message = error.message
@@ -86,7 +96,17 @@ export class DepositComponent {
 
   }
 
-
+  closeModal(res){
+    this.message = "<div>Thank you for authorizing OpenAIRE to use your Zenodo account for deposit!</div>" +
+      "<div class='uk-margin-small-top'>This window will automatically close and you will be ready to deposit.</div>";
+    if(window && window.opener) {
+      window.opener.postMessage(res,"*");
+      window.close();
+    }
+    setTimeout(() => {
+      this.message += "<div class='uk-margin-top'>If this window does not close automatically, please close it and continue!</div>";
+    }, 3000);
+  }
   private updateTitle(title: string) {
     this._title.setTitle(title);
     this._meta.updateTag({content: title}, "property='og:title'");

landingPages/result/resultLanding.component.html

@@ -77,7 +77,7 @@
                       </div>
                     </div>
                     <div class="uk-width-expand">
-                      <entity-actions [cite]="true" [share]="true" [linking]="true" [deposit]="true" [depositFile]="properties.environment == 'development' && properties.adminToolsPortalType == 'explore'"
+                      <entity-actions [cite]="true" [share]="true" [linking]="true" [depositFile]="properties.environment == 'development' && properties.adminToolsPortalType == 'explore'"
                                       [type]="resultLandingInfo.resultType"
                                       [result]="resultLandingInfo" [id]="resultLandingInfo.objIdentifier">
                         <!-- ORCID -->

utils/entity-actions/entity-actions.component.ts

@@ -35,22 +35,22 @@ import {EnvProperties} from "../properties/env-properties";
           <span *ngIf="!compactView" class="uk-margin-xsmall-left">Cite</span>
         </a>
       </div>
-      <div *ngIf="(deposit && isRouteAvailable('participate/deposit/learn-how') || depositFile)">
+      <div *ngIf="(depositFile && properties.zenodoDepositClientId)">
         <a (click)="openDepositModal()"
-           [attr.uk-tooltip]="showTooltip ? 'title: Deposit; pos: bottom; cls: uk-active  uk-text-small uk-padding-small' : 'cls: uk-invisible'"
+           [attr.uk-tooltip]="showTooltip ? 'title: Deposit: upload a file in Zenodo; pos: bottom; cls: uk-active  uk-text-small uk-padding-small' : 'cls: uk-invisible'"
            class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon class="uk-text-bolder" [flex]="true" [ratio]="0.8" name="upload" visuallyHidden="upload"></icon>
-          <span *ngIf="!compactView" class="uk-margin-xsmall-left">Deposit</span>
+          <span *ngIf="!compactView" class="uk-margin-xsmall-left">Upload a file</span>
         </a>
       </div>
-      <!--<div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
+      <div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
         <a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
           [attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
           class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
           <span *ngIf="!compactView" class="uk-margin-xsmall-left">Deposit</span>
         </a>
-      </div>-->
+      </div>
       <div *ngIf="embed" >
         <a (click)="openEmbedResultsModal()"
           [attr.uk-tooltip]="showTooltip ? 'title: Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website; pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
@@ -59,9 +59,6 @@ import {EnvProperties} from "../properties/env-properties";
           <span *ngIf="!compactView" class="uk-margin-xsmall-left">Embed</span>
         </a>
       </div>
-     <!-- <ng-container *ngIf="depositFile">
-        <deposition [result]="result"></deposition>
-      </ng-container>-->
       <ng-content></ng-content>
     </div>
     <modal-alert *ngIf="cite" #citeModal>
@@ -93,32 +90,8 @@ import {EnvProperties} from "../properties/env-properties";
         </div>
       </div>
     </modal-alert>
-    <modal-alert *ngIf="deposit || depositFile" #depositModal classBody="uk-flex uk-flex-center uk-flex-middle">
+    <modal-alert *ngIf=" depositFile" #depositModal classBody="uk-flex uk-flex-center uk-flex-middle">
-      <div *ngIf="!depositClicked" class="uk-text-center">
+        <deposition [result]="result" class="uk-width-1-1">  </deposition>
-        <div  *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
-          <div>
-            <a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
-               [attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
-               class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
-              <!--<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>-->
-              <span *ngIf="!compactView" class="uk-margin-xsmall-left">Find a repository to deposit or publish your research in Open Access</span>
-            </a>
-          </div>
-        </div>
-        <div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how') && depositFile"  class="uk-section-small">OR</div>
-        <div *ngIf="depositFile && properties.zenodoDepositClientId">
-          <a class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'"
-          (click)="depositClicked = true">
-            <icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
-            <span *ngIf="!compactView" class="uk-margin-xsmall-left">Upload a file in Zenodo</span>
-          </a>
-          
-        </div>
-      </div>
-      <div *ngIf="depositClicked"  class="uk-width-1-1">
-        <a (click)="depositClicked = false" >Back</a>
-        <deposition [result]="result"></deposition>
-      </div> 
     </modal-alert>
   `
 })