first code for email notification

ccp/js/executionformcontroller.js

@@ -45,16 +45,22 @@ class CCPExecutionForm extends HTMLElement{
         <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
         <style>
-          
+          .ccp-execution-form{
+            position: relative;
+          }
+          .plexiglass{
+            position: absolute; 
+            width:100%; 
+            height:100%; 
+            z-index:1000;
+            background-color: rgba(0,0,0,.1)
+          }
         </style>
         <template id="EXECUTION_FORM_TEMPLATE">
           <div class="ccp-execution-form" name="execution_form">
             <h5 class="ccp-method-title"></h5>
             <p class="description font-italic font-weight-lighter"></p>
-            <div name="plexiglass" class="ccp-invisible">
+            <div class="plexiglass d-none"></div>
-              <span name="status"></span>
-              <span class="fas fa-spinner fa-spin"></span>
-            </div>
             <form name="execution_form" class="d-flex flex-column gap-3" style="gap:5px">
               <div class="card">
                 <div class="card-header">
@@ -76,6 +82,21 @@ class CCPExecutionForm extends HTMLElement{
                   </div>
                 </div>
               </div>
+              <div class="card">
+                <div class="card-header">
+                  <h5>Notifications</h5>
+                </div>
+                <div class="card-body">
+                  <div class="form-row">
+                    <div class="col form-group">
+                      <div class="col form-check">
+                        <input class="form-check-input" type="checkbox" name="emailnotification" alt="Request email notification" title="Request email notification"/>
+                          <label class="form-check-label">Email notification</label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
               <button id="execute_method_button" class="btn btn-info">Execute</button>
             </form>
           </div>    
@@ -90,7 +111,16 @@ class CCPExecutionForm extends HTMLElement{
     `
   }
   
+  lockRender(){
+    this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
+  }
+  
+  unlockRender(){
+    this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
+  }
+  
   loadMethod(){
+    this.lockRender()
     return this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then(
       (resp)=>{
         if(resp.status === 200){
@@ -105,9 +135,10 @@ class CCPExecutionForm extends HTMLElement{
       
     }).then(resp=>{
       this.#data.executable = resp.status === 200 
+      this.unlockRender()
     }).then(()=>{
       this.showMethod()
-    }).catch(err=>alert(err))
+    }).catch(err=>{alert(err); this.unlockRender()})
   }
   
   showEmpty(resp){
@@ -122,6 +153,7 @@ class CCPExecutionForm extends HTMLElement{
   }
   
   sendExecutionRequest(){
+    this.lockRender()
     const url = this.#serviceurl + "/processes/" + this.#method + "/execution"
     const req = this.buildRequest()
     this.#boot.secureFetch(
@@ -141,7 +173,8 @@ class CCPExecutionForm extends HTMLElement{
       if(this.#executionmonitor){
         this.#executionmonitor.addExecution( { self : data.links[0].href, events : [data], jobID : data.jobID, method : this.#data.title})
       }
-    }).catch(err => alert("Unable to call execute: " + err))
+      this.unlockRender()
+    }).catch(err => {alert("Unable to call execute: " + err); this.unlockRender()})
   }
   
   buildRequest(){