Re-activated all report functionality with proper authentication through KeyCloak.

client/conf.js

@@ -2,12 +2,12 @@ window.nomadEnv = {
   //apiRoot: "https://labdev-nomad.esc.rzg.mpg.de/dev/nomad/encyclopedia-api/",
   //guiRoot: "https://labdev-nomad.esc.rzg.mpg.de/dev/nomad/encyclopedia-api/",
   //userCookieDomain: ".esc.rzg.mpg.de",
-  userCookieDomain: ".nomad-lab.eu",
-  apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
+  //userCookieDomain: ".nomad-lab.eu",
+  //apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
   //guiRoot: "https://nomad-lab.eu/prod/rae/encyclopedia/",
   guiRoot: "http://localhost:3000/gui/",
-  //apiRoot: "/",
-  //userCookieDomain: ".localhost",
+  apiRoot: "http://localhost:3000/",
+  userCookieDomain: ".localhost",
   guestUserToken: 'eyJhbGciOiJIUzI1NiIsImlhdCI6MTUyMzg4MDE1OSwiZXhwIjoxNjgxNTYwMTU5fQ.ey'+
   'JpZCI6ImVuY2d1aSJ9.MsMWQa3IklH7cQTxRaIRSF9q8D_2LD5Fs2-irpWPTp4',
   keycloakBase: 'https://nomad-lab.eu/fairdi/keycloak/auth/',

client/src/common/FlaggingFormPopup.js

@@ -64,8 +64,6 @@ flaggingFormPopup.innerHTML =`
 
 </div>
 `;
-
-// Form elements
 let categoryField = flaggingFormPopup.querySelector('#flagging-category');
 let eStructOption = categoryField.querySelector('option[value="electronicstruct"]');
 let thermalOption = categoryField.querySelector('option[value="thermalprops"]');
@@ -74,21 +72,16 @@ let closeButton = flaggingFormPopup.querySelector('img');
 let validationMsg = flaggingFormPopup.querySelector('#form-validation-msg');
 let sendButton = flaggingFormPopup.querySelector('button');
 let materialIdField = flaggingFormPopup.querySelector('#error-material-id');
-
-let treeLeaf = null;
 let overviewEStructCalcs = null;
 
-
-function _setCurrentPage(pageId){
-
+function _setCurrentPage(pageId) {
   subcategoryField.innerHTML = '';
   let materialId = DataStore.getMaterialData().material_id;
   materialIdField.textContent = materialId;
 
-  if (pageId === null){
+  if (pageId === null) {
     categoryField.disabled = false;
     subcategoryField.style.display = 'none';
-
   } else {
     categoryField.disabled = true;
     subcategoryField.style.display = 'block';
@@ -128,12 +121,9 @@ function _setCurrentPage(pageId){
         break;
     }
   }
+}
 
-} // function _setCurrentPage
-
-
-function show(pageStatus){
-  treeLeaf = pageStatus.markedLeaf;
+function show(pageStatus) {
   overviewEStructCalcs = pageStatus.eStructCalcs;
 
   // Show/hide some dropdown list options
@@ -152,7 +142,6 @@ function show(pageStatus){
   flaggingPopupBackground.style.visibility = 'visible';
 }
 
-
 function hide(){
   flaggingPopupBackground.style.visibility = 'hidden';
   flaggingFormPopup.style.visibility = 'hidden';
@@ -163,7 +152,6 @@ function hide(){
   validationMsg.innerHTML = '';
 }
 
-
 function createOption(text, value){
   let opt = document.createElement('option');
   opt.value = (value === undefined ? text : value);
@@ -171,72 +159,67 @@ function createOption(text, value){
   return opt;
 }
 
-
 closeButton.addEventListener('click', e => {
   hide();
 });
 
-
 sendButton.addEventListener('click', e => {
 
+  // First double-check that the authentication is still valid.
   let categoryChosen = categoryField.options[categoryField.selectedIndex];
+  var keycloak = window.keycloak;
+  if (!keycloak.authenticated) {
+    validationMsg.innerHTML = "Your authentication has expired. Please login again.";
+    return;
+  }
 
-  if (!categoryField.disabled && categoryChosen.value === ''){ // Overview case
+  // Check fields
+  if (!categoryField.disabled && categoryChosen.value === '') { // Overview case
     validationMsg.innerHTML = 'The category fields must be set';
-
-  } else if (categoryField.disabled && subcategoryField.value === '' // Detaisl pages case
-            && categoryChosen.value !== util.MAT_VIEW.methodology){
+    return;
+  } else if (categoryField.disabled && subcategoryField.value === '' // Details pages case
+            && categoryChosen.value !== util.MAT_VIEW.methodology) {
     validationMsg.innerHTML = 'The subcategory fields must be set';
-
-  } else {
-    validationMsg.innerHTML = 'Sending report...';
-    let textareaText = flaggingFormPopup.querySelector('textarea').value;
-    let materialId = DataStore.getMaterialData().material_id;
-    let userdata = util.getUserData();
-
-
-    let titleText = 'User issue | Material '+materialId;
-    let descriptionText = '**Server:** '+util.getServerLocation()+
-      '\\n\\n**User:** '+userdata.username+', '+userdata.email;
-
-    // Overview page
-    if ( !categoryField.disabled){
-      descriptionText += '\\n\\n**Category:** Overview / '+categoryChosen.text;
-
-      if (categoryChosen.value === util.MAT_VIEW.electronicstruct
-          && overviewEStructCalcs !== null)
-        descriptionText += '\\n\\n**Chosen calculations:** '+
-          (overviewEStructCalcs.bs === null ? '' : 'BS calculation '+overviewEStructCalcs.bs)+
-          (overviewEStructCalcs.dos === null ? '' : ' DOS calculation '+overviewEStructCalcs.dos);
-
-    } else { // Details pages
-      descriptionText += '\\n\\n**Category:** '+categoryChosen.text;
-
-      if (categoryChosen.value !== util.MAT_VIEW.methodology){
-        descriptionText += '\\n\\n**Subcategory:** '+
-          subcategoryField.options[subcategoryField.selectedIndex].text+
-          '\\n\\n**Calculation/group marked on the tree:** '+treeLeaf;
+    return;
+  }
+  
+  // Send report
+  validationMsg.innerHTML = 'Sending report...';
+  let textareaText = flaggingFormPopup.querySelector('textarea').value;
+  let materialId = DataStore.getMaterialData().material_id;
+  keycloak.loadUserProfile()
+    .then(function(profile) {
+      let report = {};
+      report.server = util.getServerLocation();
+      report.username = profile.username;
+      report.email = profile.email;
+      report.first_name = profile.firstName;
+      report.last_name = profile.lastName;
+      report.message = textareaText;
+      report.category = categoryChosen.text;
+
+      // Overview page
+      if (!categoryField.disabled) {
+        report.representatives = DataStore.getRepresentatives();
+      } else { // Details pages
+        report.subcategory = subcategoryField.options[subcategoryField.selectedIndex].text;
       }
-    }
 
-    descriptionText += '\\n\\n**User text:** '+textareaText;
-
-    let queryJson =`{
-      "title": "${titleText}",
-      "description": "${descriptionText}"}`;
-    console.log('Flagging POST request Json: ',queryJson);//, util.getFlaggingURL());
-
-
-    util.serverReqPOST(util.getFlaggingURL(), queryJson, e => {
-      console.log('response',e);
-      if (e.target.status === 200) hide();
+      let token = keycloak.token;
+
+      util.serverReqPOST(util.getReportURL(materialId), JSON.stringify(report), e => {
+        if (e.target.status === 204) {
+          hide();
+        } else {
+          validationMsg.innerHTML = "Could not connect to the service. Please check your connection and try again later.";
+        }
+      }, token);
+    })
+    .catch(error => {
+      console.log(error);
+      validationMsg.innerHTML = "Could not connect to the service. Please check your connection and try again later.";
     });
-
-  }
-
 });
 
-
-
 // EXPORTS
 module.exports = { show, hide };

client/src/common/util.js

@@ -132,7 +132,7 @@ function getShortCode(id) {
 
 function setAuthRequestHeader(userDataP, value){
 
-  if (value === undefined){// default value
+  if (value === undefined) { // default value
     authRequestHeaderValue = AUTH_REQUEST_HEADER_GUEST_USER;
     userData = null;
     //console.log('user: ANONYMOUS  authRequestHeader: ',authRequestHeaderValue);
@@ -155,13 +155,16 @@ function serverReq(url, callback){
 }
 
 
-function serverReqPOST(url, data, callback){
+function serverReqPOST(url, data, callback, token){
   var oReq = new XMLHttpRequest();
   oReq.addEventListener('load', callback);
   oReq.open('POST', url);
   oReq.setRequestHeader('Content-Type', 'application/json');
-  //console.log('authRequestHeaderValue: ',authRequestHeaderValue);
-  oReq.setRequestHeader('Authorization', authRequestHeaderValue);
+  if (token !== null) {
+    oReq.setRequestHeader('Authorization', 'Bearer ' + token);
+  } else {
+    oReq.setRequestHeader('Authorization', authRequestHeaderValue);
+  }
   oReq.send(data);
   return oReq;
 }
@@ -212,8 +215,8 @@ function getCalcEnergiesURL(matId,calcId){
   return API_BASE_URL+'materials/'+matId+'/calculations/'+calcId+'/energies';//'/materials/calculations';//
 }
 
-function getFlaggingURL(){
-  return API_BASE_URL+'flagme';
+function getReportURL(matId) {
+  return API_BASE_URL+'materials/'+matId+'/reports';
 }
 
 
@@ -456,7 +459,7 @@ module.exports = {
   getMaterialStatsURL: getMaterialStatsURL,
   getMaterialXsURL: getMaterialXsURL,
   getCalcEnergiesURL: getCalcEnergiesURL,
-  getFlaggingURL,
+  getReportURL,
   setBrowserHashPath: setBrowserHashPath,
   loadLib: loadLib,
   getNumberArray: getNumberArray,

client/src/main.js

@@ -66,6 +66,7 @@ var keycloak = new Keycloak({
     realm: window.nomadEnv.keycloakRealm,
     clientId: window.nomadEnv.keycloakClientId
 });
+window.keycloak = keycloak;
 let loginButton = document.querySelector('#login-button');
 let logoutButton = document.querySelector('#logout-button');
 let userName = document.querySelector('#user-name');
@@ -106,7 +107,7 @@ logoutButton.onclick = () => {
    but it has to be set up when the app starts */
 let flaggingTab = document.getElementById('calc-flagging-tab');
 flaggingTab.style.top = (window.innerHeight/2)+'px';
-flaggingTab.addEventListener('click',e => {
+flaggingTab.addEventListener('click', e => {
   FlaggingFormPopup.show(MaterialModule.getCurrentPageStatus());
 });
 

client/webpack.config.js

+const path = require('path');
+
 module.exports = {
     entry: "./src/main.js",
     output: {
         path: __dirname,
         filename: "bundle.js"
     },
-
     module: {}
 };