From 8d862a8b55a6b861be39ab7fe527113db89060b5 Mon Sep 17 00:00:00 2001
From: Mark Williams <mark.williams@diamond.ac.uk>
Date: Wed, 8 Jul 2026 09:34:12 +0100
Subject: [PATCH] LIMS-2137: Update vee-validate to v3

---
 client/package-lock.json                      |   12 +-
 client/package.json                           |    2 +-
 .../extended-validation-provider.vue          |    8 +-
 client/src/js/app/index.js                    |   14 +-
 .../app/mixins/vee-validate-custom-rules.js   |   58 +-
 client/src/js/app/router/router.js            |    4 +-
 .../src/js/app/store/modules/store.menus.js   |    7 +-
 .../js/modules/feedback/views/vue-feedback.js |   19 +-
 .../components/XpdfSimpleSampleAddWrapper.vue |    4 +-
 .../components/conexs-submission-wrapper.vue  |   38 -
 client/src/js/modules/submission/routes.js    |   24 -
 .../submission/views/conexs-submission.vue    | 2080 -----------------
 client/src/js/modules/types/conexs/menu.js    |   25 -
 client/src/js/modules/types/sp/menu.js        |   21 -
 .../samples/views/simplesampleaddpoploader.js |   30 +-
 .../xpdf/samples/views/vue-simplesample.vue   |  228 +-
 .../js/templates/vue/feedback/feedback.html   |   33 +-
 .../vue/types/em/process/scipion.html         |  100 -
 18 files changed, 205 insertions(+), 2502 deletions(-)
 delete mode 100644 client/src/js/modules/submission/components/conexs-submission-wrapper.vue
 delete mode 100644 client/src/js/modules/submission/routes.js
 delete mode 100644 client/src/js/modules/submission/views/conexs-submission.vue
 delete mode 100644 client/src/js/modules/types/conexs/menu.js
 delete mode 100644 client/src/js/modules/types/sp/menu.js
 delete mode 100644 client/src/js/templates/vue/types/em/process/scipion.html

diff --git a/client/package-lock.json b/client/package-lock.json
index 654c52ee4..f1820efb9 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -43,7 +43,7 @@
         "uglymol": "^0.6.4",
         "underscore": "1.8.3",
         "util": "^0.12.4",
-        "vee-validate": "^2.2.15",
+        "vee-validate": "^3.0.0",
         "vue": "^2.6.10",
         "vue-router": "^3.4.3",
         "vuex": "^3.5.1"
@@ -16001,9 +16001,13 @@
       }
     },
     "node_modules/vee-validate": {
-      "version": "2.2.15",
-      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.2.15.tgz",
-      "integrity": "sha512-4TOsI8XwVkKVLkg8Nhmy+jyoJrR6XcTRDyxBarzcCvYzU61zamipS1WsB6FlDze8eJQpgglS4NXAS6o4NDPs1g=="
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.4.15.tgz",
+      "integrity": "sha512-qEtvq9X2N7l5pjBe/6YGrrIBHxJA4KTrb3QrER3qzM7fzkH730m8LyVWMIzM47l//618nlUa7VvTdMFTRKr8tQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^2.5.18"
+      }
     },
     "node_modules/vt-pbf": {
       "version": "3.1.3",
diff --git a/client/package.json b/client/package.json
index b130f2440..6f136fb61 100644
--- a/client/package.json
+++ b/client/package.json
@@ -91,7 +91,7 @@
     "uglymol": "^0.6.4",
     "underscore": "1.8.3",
     "util": "^0.12.4",
-    "vee-validate": "^2.2.15",
+    "vee-validate": "^3.0.0",
     "vue": "^2.6.10",
     "vue-router": "^3.4.3",
     "vuex": "^3.5.1"
diff --git a/client/src/js/app/components/extended-validation-provider.vue b/client/src/js/app/components/extended-validation-provider.vue
index 9a37e9146..8e1e39ff3 100644
--- a/client/src/js/app/components/extended-validation-provider.vue
+++ b/client/src/js/app/components/extended-validation-provider.vue
@@ -1,14 +1,14 @@
 <template>
   <validation-provider
     :ref="ref"
-    v-slot="{ errors, flags: { changed } }"
+    v-slot="{ errors, dirty }"
     :rules="rules"
     :name="name"
     :tag="tag"
     :vid="vid"
     :slim="slim"
   >
-    <div :class="{'tw-bg-dark-amber': changed, [classNames]: true }">
+    <div :class="{'tw-bg-dark-amber': dirty, [classNames]: true }">
       <slot
         :errors="errors"
         :input-changed="updateFieldFlags"
@@ -56,8 +56,8 @@ export default {
   },
   methods: {
     updateFieldFlags() {
-      this.$refs[this.ref].setFlags({ changed: true })
+      this.$refs[this.ref].setFlags({ dirty: true })
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/js/app/index.js b/client/src/js/app/index.js
index d46aec355..d4c95a8f9 100644
--- a/client/src/js/app/index.js
+++ b/client/src/js/app/index.js
@@ -2,7 +2,8 @@ require('font-awesome/css/font-awesome.css')
 require('css/main.scss')
 
 import Vue from 'vue'
-import VeeValidate from 'vee-validate'
+import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
+import * as rules from 'vee-validate/dist/rules'
 import PortalVue from 'portal-vue'
 
 import Main from 'app/layouts/main.vue'
@@ -13,12 +14,16 @@ import router from 'app/router/router'
 import MarionetteApp from 'app/marionette-application.js'
 
 import config from 'config.json'
-import VeeValidateCustomRules from 'app/mixins/vee-validate-custom-rules'
+import 'app/mixins/vee-validate-custom-rules'
 
-Vue.use(VeeValidate)
 Vue.use(PortalVue)
 
-Vue.use(VeeValidate)
+Vue.component('ValidationObserver', ValidationObserver)
+Vue.component('ValidationProvider', ValidationProvider)
+
+Object.keys(rules).forEach(rule => {
+  extend(rule, rules[rule]);
+});
 
 Vue.config.productionTip = false
 Vue.config.devtools = !config.production
@@ -26,7 +31,6 @@ Vue.config.devtools = !config.production
 const vm = new Vue({
   store,
   router,
-  mixins: [VeeValidateCustomRules],
   created: function() {
     console.log("VUE::created")
 
diff --git a/client/src/js/app/mixins/vee-validate-custom-rules.js b/client/src/js/app/mixins/vee-validate-custom-rules.js
index b999db72e..853efb577 100644
--- a/client/src/js/app/mixins/vee-validate-custom-rules.js
+++ b/client/src/js/app/mixins/vee-validate-custom-rules.js
@@ -1,17 +1,14 @@
+import { extend } from 'vee-validate'
+
 const isNullOrUndefined = (...values) => {
   return values.every(value => {
     return value === null || value === undefined;
   });
 };
 
-export default {
-  data() {
-    return {}
-  },
-  created() {
-    this.$validator.extend('closeExp', {
-      getMessage: field => field+ ' must have correctly closed brackets',
-      validate: value => {
+extend('closeExp', {
+    message: fieldName => fieldName + ' must have correctly closed brackets',
+    validate: value => {
         let count = 0;
         for(let i=0; i < value.length; i++){
           if(value.charAt(i) === '(')
@@ -24,16 +21,12 @@ export default {
           }
         }
         return count === 0;
-      }
-    })
+    }
+})
 
-    this.$validator.extend('field_exists', (value, [otherValue]) => {
-      if (otherValue) return true;
-    }, {
-      hasTarget: true
-    })
-
-    this.$validator.extend('positive_decimal', (value, { decimals = '*', separator = '.' } = {}) => {
+extend('positive_decimal', {
+  params: ['decimals', 'separator'],
+  validate: (value, { decimals = '*', separator = '.' } = {}) => {
       const validatePositiveDecimalValues = (val) => {
         if (isNullOrUndefined(val) || val === '' || val <= 0) {
           return false;
@@ -57,11 +50,17 @@ export default {
       }
 
       return validatePositiveDecimalValues(value)
-    }, {
-      paramNames: ['decimals', 'separator']
-    })
+  },
+  message: (fieldName, { decimals } = {}) => {
+    if (decimals && decimals !== '*') {
+      return fieldName + ' must be a positive decimal with a maximum of ' + decimals + ' decimal places'
+    }
+    return fieldName + ' must be a positive decimal'
+  }
+})
 
-    this.$validator.extend('non_zero_numeric', (value) => {
+extend('non_zero_numeric', {
+  validate: (value) => {
       const validateNonZeroNumericValues = (val) => {
         if (isNullOrUndefined(val) || val === '' || Number(val) <= 0) {
           return false;
@@ -75,6 +74,17 @@ export default {
       }
 
       return validateNonZeroNumericValues(value)
-    })
-  }
-}
\ No newline at end of file
+  },
+  message: fieldName => fieldName + ' must be a non-zero whole number'
+})
+
+extend('decimal', {
+  validate: value => {
+    if (value === null || value === undefined || value === '') {
+      return true
+    }
+    // Matches positive and negative floats/integers (e.g., 12, -3.4, 0.5)
+    return !isNaN(parseFloat(value)) && isFinite(value);
+  },
+  message: fieldName => fieldName + ' must be a valid decimal number'
+})
diff --git a/client/src/js/app/router/router.js b/client/src/js/app/router/router.js
index 3815217f3..d72e4ada5 100644
--- a/client/src/js/app/router/router.js
+++ b/client/src/js/app/router/router.js
@@ -36,7 +36,6 @@ import CellRoutes from 'modules/cell/routes.js'
 import StatusRoutes from 'modules/status/routes.js'
 import FaultRoutes from 'modules/fault/routes.js'
 import StatsRoutes from 'modules/stats/routes.js'
-import SubmissionRoutes from 'modules/submission/routes.js'
 import VisitsRoutes from 'modules/visits/routes.js'
 import { resolve } from 'promise'
 
@@ -101,7 +100,6 @@ router.addRoutes(CellRoutes)
 router.addRoutes(StatusRoutes)
 router.addRoutes(FaultRoutes)
 router.addRoutes(StatsRoutes)
-router.addRoutes(SubmissionRoutes)
 router.addRoutes(VisitsRoutes)
 
 
@@ -193,4 +191,4 @@ function handleRoutePermissions(routes) {
   return permission
 }
 
-export default router
\ No newline at end of file
+export default router
diff --git a/client/src/js/app/store/modules/store.menus.js b/client/src/js/app/store/modules/store.menus.js
index 15de6f2fb..659ed0db0 100644
--- a/client/src/js/app/store/modules/store.menus.js
+++ b/client/src/js/app/store/modules/store.menus.js
@@ -6,7 +6,6 @@ import SmMenu from 'modules/types/sm/menu.js'
 import TomoMenu from 'modules/types/tomo/menu.js'
 import XpdfMenu from 'modules/types/xpdf/menu.js'
 import GenProcMenu from 'modules/types/genproc/menu.js'
-import ConexsMenu from 'modules/types/conexs/menu.js'
 import EmMenu from 'modules/types/em/menu.js'
 
 const menuStore = {
@@ -21,14 +20,14 @@ const menuStore = {
         'sm': SmMenu,
         'tomo': TomoMenu,
         'xpdf': XpdfMenu,
-        'b18': ConexsMenu,
+        'b18': GenProcMenu,
         'i16': GenProcMenu,
         'i14': GenProcMenu,
-        'i18': ConexsMenu,
+        'i18': GenProcMenu,
         'i08': GenProcMenu,
         'i11': GenProcMenu,
         'k11': GenProcMenu,
-        'i20': ConexsMenu,
+        'i20': GenProcMenu,
         'i12': GenProcMenu,
         'i13': GenProcMenu,
         'b24': GenProcMenu,
diff --git a/client/src/js/modules/feedback/views/vue-feedback.js b/client/src/js/modules/feedback/views/vue-feedback.js
index 71fb363f6..6edc28ee1 100644
--- a/client/src/js/modules/feedback/views/vue-feedback.js
+++ b/client/src/js/modules/feedback/views/vue-feedback.js
@@ -1,13 +1,8 @@
 define(['vue',
-    'veevalidate',
-    'promise',
     'utils/vuewrapper',
     'modules/feedback/models/feedback',
     'templates/vue/feedback/feedback.html',
-    ], function(Vue, VeeValidate, Promise, VueWrapper, FeedbackModel, template) {
-
-    // Promise is not used, but required for IE if we want to use vee-validate
-    Vue.use(VeeValidate)
+    ], function(Vue, VueWrapper, FeedbackModel, template) {
 
     return VueWrapper.extend({
         vueView: Vue.extend({
@@ -21,10 +16,6 @@ define(['vue',
                 }
             },
             methods: {
-                // With new build and (IE polyfill) we could use
-                // Object.assign() to reset all data to initial state
-                // Using the method below is simple alternative that
-                // allows us to clear form data after submission
                 resetForm: function() {
                     this.name = ''
                     this.email = ''
@@ -33,13 +24,15 @@ define(['vue',
                     // To reset form validation, we should wait for next tick
                     // Vue rectivity means the DOM will not be updated immediately
                     this.$nextTick(function() {
-                        this.$validator.reset()
+                        if (this.$refs.formObserver) {
+                            this.$refs.formObserver.reset();
+                        }
                     })
                 },
                 onSubmit: function() {   
                     let self = this
 
-                    this.$validator.validateAll().then(function(result) {
+                    this.$refs.formObserver.validate().then(function(result) {
                         if (result) {
                             self.submitFeedback()
                         } else {
@@ -77,4 +70,4 @@ define(['vue',
             template: template
         })
     })
-})
\ No newline at end of file
+})
diff --git a/client/src/js/modules/samples/components/XpdfSimpleSampleAddWrapper.vue b/client/src/js/modules/samples/components/XpdfSimpleSampleAddWrapper.vue
index a35deadda..f873b9052 100644
--- a/client/src/js/modules/samples/components/XpdfSimpleSampleAddWrapper.vue
+++ b/client/src/js/modules/samples/components/XpdfSimpleSampleAddWrapper.vue
@@ -16,7 +16,6 @@ import SimpleSample from 'modules/types/xpdf/samples/views/vue-simplesample.vue'
 import Protein from 'models/protein'
 
 import EventBus from 'app/components/utils/event-bus.js'
-import VeeValidateCustom from 'app/mixins/vee-validate-custom-rules'
 
 
 export default {
@@ -24,7 +23,6 @@ export default {
     components: {
         'simple-sample': SimpleSample
     },
-    mixins: [VeeValidateCustom],
     props: {
         'pid': {
             type: Number,
@@ -69,4 +67,4 @@ export default {
         },
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/js/modules/submission/components/conexs-submission-wrapper.vue b/client/src/js/modules/submission/components/conexs-submission-wrapper.vue
deleted file mode 100644
index 0dc03b638..000000000
--- a/client/src/js/modules/submission/components/conexs-submission-wrapper.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="content">
-    <h1>Conexs</h1>
-    <p class="help">
-      This page allows you to submit conexs jobs to the cluster or wherever else it might be possible to someday
-    </p>
-    <conexs-submission />
-  </section>
-</template>
-
-<script>
-import ConexsSubmission from 'modules/submission/views/conexs-submission.vue'
-
-export default {
-    name: 'ConexsSubmissionWrapper',
-    components: {
-        'conexs-submission': ConexsSubmission
-    },
-    props: {
-
-    },
-
-    data: function() {
-return {
-
-    };
-},
-
-    created: {
-
-    },
-
-    methods: {
-
-    }
-}
-
-</script>
\ No newline at end of file
diff --git a/client/src/js/modules/submission/routes.js b/client/src/js/modules/submission/routes.js
deleted file mode 100644
index 3f8b03b79..000000000
--- a/client/src/js/modules/submission/routes.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// Specify the routes for this module
-// These all use wrapper components to hide the complexity
-// Depending on the proposal type different marionette views are needed
-// The wrapper components use samples-map to figure out which views are required
-
-// Because we are using wrapper vue components we can use the standard lazy loading async method
-const ConexsSubmissionWrapper = () => import(/* webpackChunkName: "submission" */ 'modules/submission/components/conexs-submission-wrapper.vue')
-
-app.addInitializer(function() {
-    app.on('conexs:show', function() {
-      app.navigate('/conexs')
-    })
-})
-
-const routes = [
-    // Submission routes
-    {
-      path: '/conexs',
-      name: 'conexs-submission',
-      component: ConexsSubmissionWrapper,
-    },
-]
-
-export default routes
\ No newline at end of file
diff --git a/client/src/js/modules/submission/views/conexs-submission.vue b/client/src/js/modules/submission/views/conexs-submission.vue
deleted file mode 100644
index d04784152..000000000
--- a/client/src/js/modules/submission/views/conexs-submission.vue
+++ /dev/null
@@ -1,2080 +0,0 @@
-<template>
-  <div>
-    <button
-      ref="orcaTabButton"
-      name="orcaTabButton"
-      class="button"
-      @click="tabDisplay($event)"
-    >
-      ORCA
-    </button>
-    <button
-      ref="fdmnesTabButton"
-      name="fdmnesTabButton"
-      class="button"
-      @click="tabDisplay($event)"
-    >
-      FDMNES
-    </button>
-    <button
-      ref="quantumEspressoTabButton"
-      name="quantumEspressoTabButton"
-      class="button"
-      @click="tabDisplay($event)"
-    >
-      Quantum Espresso
-    </button>
-        &nbsp;&nbsp;&nbsp;&nbsp;
-    <span>Cluster status: {{ clusterStatus }}</span>&nbsp;&nbsp;&nbsp;<i
-      v-if="clusterStatus != 'Running' && clusterStatus != 'Sleeping' && clusterStatus != 'Unavailable'"
-      class="fa icon grey fa-cog fa-spin"
-    />
-    <br>
-    <br>
-    <form
-      id="submit-orca"
-      method="post"
-      :class="{loading: isLoading}"
-      @submit.prevent="onSubmit"
-    >
-      <br>
-      <label class="left">Input file already exists (*.inp)?</label>
-      <input
-        ref="inputFile"
-        type="file"
-        @change="setInputFile($event)"
-      >
-      <button
-        ref="clearInputFile"
-        type="button"
-        name="clearInputFile"
-        class="button"
-        @click="clearFile($event)"
-      >
-        Clear
-      </button>
-      <br><br>
-      <div v-if="form != 'orca'">
-        <label
-          v-if="form == 'fdmnes'"
-          class="left"
-        >Element:</label>
-        <select
-          v-if="form == 'fdmnes'"
-          v-model="element"
-          name="element"
-          @change="overviewBuilder()"
-        >
-          <option v-for="e in elements">
-            {{ e['element'] }}
-          </option>
-        </select>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
-        <label class="notLeft">Absorption edge:</label>
-        <select
-          v-if="form == 'fdmnes'"
-          v-model="edge"
-          name="absorbEdge"
-          @change="overviewBuilder()"
-        >
-          <option v-for="edge in fdmnes_abs_edge">
-            {{ edge }}
-          </option>
-        </select>
-        <select
-          v-if="form == 'qe'"
-          v-model="edge"
-          name="absorbEdge"
-          @change="overviewBuilder()"
-        >
-          <option v-for="edge in qe_abs_edge">
-            {{ edge }}
-          </option>
-        </select>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-      </div>
-      <section
-        id="orcaTab"
-        :style="{display: orcaDisplay}"
-      >
-        <div style="float:right; width:40%; height:30%">
-          <p>ORCA is an ab initio, DFT, and semi-empirical SCF-MO package developed by Frank Neese et al. at the Max Planck Institut für Kohlenforschung.</p>
-          <span>ORCA webpage at Max-Planck-Institut: <a href="https://www.kofo.mpg.de/en/research/services/orca">https://www.kofo.mpg.de/en/research/services/orca</a></span>
-          <br>
-          <span>ORCA manual: <a href="https://www.kofo.mpg.de/412442/orca_manual-opt.pdf">https://www.kofo.mpg.de/412442/orca_manual-opt.pdf</a></span>
-          <br>
-          <span>ORCA input library website: <a href="https://sites.google.com/site/orcainputlibrary/home">https://sites.google.com/site/orcainputlibrary/home</a></span>
-          <br><br>
-          <p>If you publish calculation results performed with ORCA code please cite the original papers:</p>
-          <p><i>F. Neese, Wiley Interdisciplinary Reviews: Computational Molecular Science 2, 73 (2012).</i></p>
-          <p><i>F. Neese, Wiley Interdisciplinary Reviews: Computational Molecular Science 8, e1327 (2018).</i></p>
-          <br><br>
-          <p>Performing X-Ray Spectral Calculations with ORCA</p>
-          <br><br>
-          <p>For X-Ray Absorption Spectroscopy (XAS) calculations, we use the Time-Dependent Density Functional Theory (TD-DFT) approach.</p>
-          <p>In TD-DFT we must define the set of donor (core) and acceptor (empty) orbitals using the Orbital Window parameter orbwin[0] (and orbWin[1] in an open shell system), which defines the range of orbitals included in the calculation of the transitions. The 1s orbital is usually the lowest energy orbital and so has the index 0. We can specify the all of the empty orbitals using the flag -1 so:</p>
-          <br>
-          <p>orbwin[0] 0, 0, -1, -1</p>
-          <br>
-          <p>requests a calculation of the transitions (or roots) between the 0 index orbital (1s) and all of the empty orbitals. If you require a transition from a 1s orbital that is not the lowest index orbital, search for the appropriate index in the output file under the section ORBITAL ENERGIES and use this in place of “0, 0”</p>
-          <br>
-          <p>Two other parameters important for the calculation of the XAS spectrum are doquad, which when set to true, tells ORCA to compute quadrupole-allowed transitions and nroots which determines the number of transitions to compute. A higher value of nroot corresponds to increasingly higher energy transitions.</p>
-          <br>
-          <p>The main ORCA TD-DFT program computes a set of discrete transition energies and oscillator strengths. A post-processing tool orca_mapspc translates ORCA output files into plottable spectra. The post-processing tool is used to prepare many different spectra, for the XAS spectrum you can use the options ABSQ and XASQ for quadrupole inclusive spectra.</p>
-          <br>
-          <p>The spectrum can be plotted within a given energy range and with a given (Gaussian) broadening to approximate the core-hole lifetime broadening effects.</p>
-          <br><br>
-          <p>A note on the computation of XES spectra:</p>
-          <br>
-          <p>In XES mode, Web-CONEXS sets the acceptor core orbitals (final state) to the lowest energy orbitals through the keyword “CoreOrb 0,1”. In some cases, the final state could be to higher energy orbitals.</p>
-          <br>
-          <p>In this instance, the user must manually modify the core acceptor orbital within the input file. To do so, navigate to the ORBITAL ENERGIES section of the orca_result.txt and identify the index of the orbital with the correct energy. Using a plain text editor, update the “CoreOrb” keyword with the index of the desired orbital. You can run this calculation on your own computing facility or upload the new input file to Web-CONEXS for simulation.</p>
-          <br>
-          <p>The post processing tool orca_mapspc can be used to covert the main ORCA output into a plottable spectrum. For XES you can use either the XES or XESQ options to compute the spectrum with or without quadrupole transitions.</p>
-          <br><br>
-        </div>
-        <ul>
-          <li>
-            <label class="left">Which technique?</label>
-            <input
-              id="Xas"
-              v-model="technique"
-              type="radio"
-              name="technique"
-              value="Xas"
-              checked="checked"
-              @change="overviewBuilder()"
-            >
-            <label
-              class="notLeft"
-              style="margin-left:5px"
-              for="Xas"
-            >XAS</label>
-                        &nbsp;&nbsp;&nbsp;
-            <input
-              id="Xes"
-              v-model="technique"
-              type="radio"
-              name="technique"
-              value="Xes"
-              @change="overviewBuilder()"
-            >
-            <label
-              class="notLeft"
-              style="margin-left:5px"
-              for="Xes"
-            >XES</label>
-          </li>
-          <li>
-            <label class="left">Functional:</label>
-            <select
-              v-model="functional"
-              name="functional"
-              title="BP86 and BLYP are generalized gradient approximation (GGA) DFT functionals;
-B3LYP is a hybrid DFT GGA functional (20% HF exchange)."
-              @change="overviewBuilder()"
-            >
-              <option>BP86</option>
-              <option>BLYP</option>
-              <option>B3LYP RIJCOSX</option>
-            </select>
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
-            <label class="notLeft">Basis:</label>
-            <select
-              v-model="basis"
-              name="basis"
-              title="These basis sets are all-electron for elements H-Kr, and automatically load Stuttgart-Dresden effective core potentials for elements Rb-Rn.
-def2-SVP is a valence double-zeta basis set with 'new' polarization functions.
-def2-SV(P) is the same with slightly reduced polarization. For elements beyond Ar in the periodic table we recommend using the def2-TZVP basis set."
-              @change="overviewBuilder()"
-            >
-              <option>def2-SVP</option>
-              <option>def2-SV(P)</option>
-              <option>def2-TZVP</option>
-            </select>
-          </li>
-          <li>
-            <label class="left">Charge value:</label>
-            <input
-              v-model="charge"
-              v-validate="'required|decimal'"
-              type="text"
-              name="charge"
-              :class="{ferror: errors.has('charge')}"
-              title="Total charge of the system"
-              @change="overviewBuilder()"
-            >
-            <label class="notLeft">Multiplicity value:</label>
-            <input
-              v-model="multiplicity"
-              v-validate="'required|decimal'"
-              type="text"
-              name="multiplicity"
-              :class="{ferror: errors.has('multiplicity')}"
-              title="The multiplicity = 2S+1"
-              @change="overviewBuilder()"
-            >
-            <label
-              class="notLeft"
-              style="margin-right:5px"
-            >Solvent:</label>
-            <select
-              v-model="solvent"
-              name="solvent"
-              title="Add solvent if necessary"
-              @change="overviewBuilder()"
-            >
-              <option v-for="s in orca_solvents">
-                {{ s['name'] }}
-              </option>
-            </select>
-          </li>
-          <li v-if="technique == 'Xas'">
-            <label class="left">OrbWin[0] Start:</label>
-            <input
-              v-model="orbWin0Start"
-              v-validate="'required|numeric|min_value:0'"
-              type="text"
-              name="orbWin0Start"
-              :class="{ferror: errors.has('orbWin0Start')}"
-              title="orbwin[0] - Start, Stop, -1, -1
-e.g. 0,0,-1,-1 # Selecting the alpha set (orbwin[0]). Selecting donor orbital range : 0 to 0 (the lowest energy
-orbital only, means K-edge) and acceptor orbital range: -1 to -1 (meaning all virtual orbitals)"
-              @change="overviewBuilder()"
-            >
-            <span
-              v-if="errors.has('orbWin0Start')"
-              class="errormessage ferror"
-            >{{ errors.first('orbWin0Start') }}</span>
-
-            <label class="notLeft">OrbWin[0] Stop:</label>
-            <input
-              v-model="orbWin0Stop"
-              v-validate="'required|numeric|min_value:0'"
-              type="text"
-              name="orbWin0Stop"
-              :class="{ferror: errors.has('orbWin0Stop')}"
-              title="orbwin[0] - Start, Stop, -1, -1
-e.g. 0,0,-1,-1 # Selecting the alpha set (orbwin[0]). Selecting donor orbital range : 0 to 0 (the lowest energy
-orbital only, means K-edge) and acceptor orbital range: -1 to -1 (meaning all virtual orbitals)"
-              @change="overviewBuilder()"
-            >
-            <span
-              v-if="errors.has('orbWin0Stop')"
-              class="errormessage ferror"
-            >{{ errors.first('orbWin0Stop') }}</span>
-          </li>
-          <li v-if="technique == 'Xas'">
-            <label class="left">OrbWin[1] Start:</label>
-            <input
-              v-model="orbWin1Start"
-              v-validate="'required|numeric|min_value:0'"
-              type="text"
-              name="orbWin1Start"
-              :class="{ferror: errors.has('orbWin1Start')}"
-              title="orbwin[1] - Start, Stop, -1, -1
-e.g. 0,0,-1,-1 # Selecting the beta set in the same way as the alpha set. Not necessary if system is closed-shell."
-              @change="overviewBuilder()"
-            >
-            <span
-              v-if="errors.has('orbWin1Start')"
-              class="errormessage ferror"
-            >{{ errors.first('orbWin1Start') }}</span>
-
-            <label class="notLeft">OrbWin[1] Stop:</label>
-            <input
-              v-model="orbWin1Stop"
-              v-validate="'required|numeric|min_value:0'"
-              type="text"
-              name="orbWin1Stop"
-              :class="{ferror: errors.has('orbWin1Stop')}"
-              title="orbwin[1] - Start, Stop, -1, -1
-e.g. 0,0,-1,-1 # Selecting the beta set in the same way as the alpha set. Not necessary if system is closed-shell.
-"
-              @change="overviewBuilder()"
-            >
-            <span
-              v-if="errors.has('orbWin1Stop')"
-              class="errormessage ferror"
-            >{{ errors.first('orbWin1Stop') }}</span>
-          </li>
-          <li>
-            <label class="left">Load structure (.xyz, .gmnt):</label>
-            <input
-              ref="orcaStructureFile"
-              type="file"
-              title="Use file for structure (must be in correct format) or manually add structure using Atoms"
-              @change="setStructureFile($event); overviewBuilder($event)"
-            >
-            <button
-              ref="clearStructureFile"
-              type="button"
-              name="clearStructureFile"
-              class="button"
-              @click="clearFile($event)"
-            >
-              Clear
-            </button>
-          </li>
-        </ul>
-      </section>
-
-      <section
-        id="fdmnesTab"
-        :style="{display: fdmnesDisplay}"
-      >
-        <div style="float:right; width:40%; height:30%">
-          <p>FDMNES (Finite Difference Method Near Edge Structure) is a user friendly software that provides access to x-ray spectra over a broad energy range. It uses the finite differences approach to go beyond the muffin tin approximation. This ab initio (first principles) approach, which is based upon the finite difference method, aims to eliminate all methodological parameters and go beyond the limitations of the spherical muffin tin approximation. It includes density functional theory and time-dependent density functional theory. It is still possible to compute the spectrum using the multiple-scattering muffin tin approach by specifying the keyword Green in the input file.</p>
-          <br><br>
-          <p>How to build upon an FDMNES simulated spectra<p>
-          <br>
-          <p>Once you have generated a run an FDMNES calculation with Web-CONEXS there are a set of logical steps you can take to improves the spectrum as detailed in the FDMNES instructions manual, which we reproduce here for your convenience. </p>
-          <span><a href="https://cloud.neel.cnrs.fr/index.php/s/nL2c6kH2PLwcB5r">https://cloud.neel.cnrs.fr/index.php/s/nL2c6kH2PLwcB5r</a></span>
-          <br><br>
-          <p>If the system has elements heavier than Z = 50 add the keyword “Relativism” or “Spinorbit” to the input file. Note that this will increase the cost of the simulation.</p>
-          <br>
-          <p>For systems not in the gas phase, add the keyword “Vmax” equal to -6 eV.</p>
-          <p>Check how the spectrum changes as the size of the calculation radius is increased. The calculation radius is controlled by the parameter “Radius”.<p>
-          <p>By default the FDMNES uses an LDA exchange-correlation potential. Use the keyword “PBE96” to use a GGA functional instead.</p>
-          <p>Include Quadrupole transitions using the keyword “Quadrupole”</p>
-          <br><br>
-          <span>FDMNES webpage: <a href="http://fdmnes.neel.cnrs.fr/">http://fdmnes.neel.cnrs.fr/</a></span>
-          <span>FDMNES theory and input: <a href="https://research.ncl.ac.uk/media/sites/researchwebsites/collaborativenetworkforx-rayspectroscopy/Joly_FDMNES_CONEXS_Newcastle.pdf">HJoly_FDMNES_CONEXS_Newcastle.pdf</a></span>
-          <br><br>
-          <p>If you publish calculation results performed with FDMNES code please cite the original papers:</p>
-          <p><i>J. Phys.: Condens. Matter 21, 345501 (2009).</i></p>
-          <p><i>J. Chem. Theory Comput. 11, 4512-4521 (2015).</i></p>
-          <p><i>J. Synchrotron Rad. 23, 551-559 (2016).</i></p>
-        </div>
-        <br>
-        <ul>
-          <li>
-            <label class="left">Use Green's function approach</label>
-            <input
-              v-model="fdmnes_method"
-              type="checkbox"
-              @change="overviewBuilder()"
-            >
-
-            <label class="notLeft">Crystal?</label>
-            <select
-              v-model="crystal"
-              name="crystal"
-              @change="overviewBuilder()"
-            >
-              <option>Crystal</option>
-              <option>Molecule</option>
-            </select>
-          </li>
-          <li>
-            <label class="left">Load structure (.cif, .pdb):</label>
-            <input
-              ref="fdmnesStructureFile"
-              type="file"
-              @change="setStructureFile($event); overviewBuilder($event)"
-            >
-            <button
-              ref="clearStructureFile"
-              type="button"
-              name="clearStructureFile"
-              class="button"
-              @click="clearFile($event)"
-            >
-              Clear
-            </button>
-          </li>
-        </ul>
-      </section>
-
-      <section
-        id="quantumEspressoTab"
-        :style="{display: quantumEspressoDisplay}"
-      >
-        <div style="float:right; width:40%; height:30%">
-          <p>Quantum ESPRESSO (Quantum opEn-Source Package for Research in Electronic Structure, Simulation, and Optimisation) is a suite of applications for ab-initio electronic structure calculations using plane waves and pseudopotentials.</p>
-          <p>
-            <span>Quantum ESPRESSO webpage: <a href="https://www.quantum-espresso.org/">https://www.quantum-espresso.org</a></span>
-            <br>
-            <span>Pw.x input descriptions: <a href="https://www.quantum-espresso.org/Doc/INPUT_PW.html">https://www.quantum-espresso.org/Doc/INPUT_PW.html</a></span>
-            <br>
-            <span>XSPECTRA input descriptions: <a href="https://github.com/QEF/q-e/blob/master/XSpectra/Doc/INPUT_XSPECTRA">https://github.com/QEF/q-e/blob/master/XSpectra/Doc/INPUT_XSPECTRA</a></span>
-            <br><br>
-          </p><p>If you publish calculation results performed with QE code please cite the original papers:</p>
-          <p><i>Journal of Physics: Condensed Matter 21, 395502 (2009).</i></p>
-          <p><i>Phys. Rev. B 80, 075102 (2009)</i></p>
-          <p><i>Phys. Rev. B 87, 205105 (2013)</i></p>
-          <p><i>Journal of Physics: Condensed Matter 29, 465901 (2017).</i></p>
-          <p><i>The Journal of Chemical Physics 152, 154105 (2020).</i></p>
-          <br><br>
-          <p> X-ray absorption simulations in quantum espresso are carried out in two steps. Firstly using the pw.x code and then using the xspectra.x code. The input files for these to codes are ASCII files separated into cards (or blocks). The beginning of a block is denoted by an & symbol and the name of the card, the card is closed with a "/", for example:</p>
-          <p> &CONTROL … /. </p>
-          <p> For pw.x the input cards must be given in the order: control, system, electrons. Information on the geometry is given in the input file and can be provided as a set of atomic coordinates in Angstrom and a set of cell parameters also in Angstroms.</p>
-          <br><br>
-          <p>Materials Project provides open web-based access to computed information on known and predicted materials.</p>
-          <span><a href="https://materialsproject.org/">https://materialsproject.org/</a></span>
-          <p>If you use the Materials Project as a resource in your research, please cite the following work:</p>
-          <p><i>APL Materials, 2013, 1(1), 011002.</i></p>
-        </div>
-        <br>
-        <br><br>
-        <label>Cards</label>
-        <br><br>
-        <button
-          ref="systemCardBtn"
-          type="button"
-          name="systemCardBtn"
-          class="button"
-          @click="cardDisplay($event)"
-        >
-          SYSTEM
-        </button>
-        <button
-          ref="atomicPositionCardBtn"
-          type="button"
-          name="atomicPositionCardBtn"
-          class="button"
-          @click="cardDisplay($event)"
-        >
-          ATOMIC_POSITION
-        </button>
-        <button
-          ref="cellParamsCardBtn"
-          type="button"
-          name="cellParamsCardBtn"
-          class="button"
-          @click="cardDisplay($event)"
-        >
-          CELL_PARAMETERS
-        </button>
-        <button
-          ref="mpApiBtn"
-          type="button"
-          name="mpApiBtn"
-          class="button"
-          @click="cardDisplay($event)"
-        >
-          MATERIALS_PROJECT
-        </button>
-
-        <br><br>
-
-        <section
-          v-if="card == 'system' && quantumEspressoDisplay == 'inline'"
-          id="systemCard"
-          name="systemCard"
-        >
-          <ul>
-            <li>
-              <label class="left">Conductivity:</label>
-              <select
-                v-model="conductivity"
-                name="conductivity"
-                @change="overviewBuilder()"
-              >
-                <option>metallic</option>
-                <option>semiconductor</option>
-                <option>insulator</option>
-              </select>
-            </li>
-          </ul>
-        </section>
-
-        <section
-          v-if="card == 'position' && quantumEspressoDisplay == 'inline'"
-          id="atomicPositionCard"
-          name="atomicPositionCard"
-        >
-          <ul>
-            <li>
-              <label class="left">ATOMIC_POSITIONS:</label>
-              <select
-                v-model="atomicPositionType"
-                name="atomicPositionType"
-                @change="overviewBuilder()"
-              >
-                <option>bohr</option>
-                <option>angstrom</option>
-                <option>crystal</option>
-              </select>
-            </li>
-            <li>
-              <label class="left">Atoms:</label>
-              <table-component
-                :headers="qeAtomHeaders"
-                :data="atomData"
-                actions="Actions"
-                add-row="addRow"
-                style="width:40%"
-              >
-                <template
-                  slot="actions"
-                  slot-scope="{ row }"
-                >
-                  <button
-                    type="button"
-                    class="button"
-                    @click="removeAtom(row.ID); overviewBuilder()"
-                  >
-                    Remove
-                  </button> 
-                </template>
-                <template
-                  slot="addRow"
-                  slot-scope="{ row }"
-                >
-                  <td>
-                    <select
-                      v-model="atom"
-                      name="atom"
-                    >
-                      <option v-for="e in ppElements">
-                        {{ e['element'] }}
-                      </option>
-                    </select>
-                  </td>
-                  <td>
-                    <input
-                      v-model="atomX"
-                      v-validate="'required|decimal|min_value:-100|max_value:100'"
-                      type="text"
-                      name="atomX"
-                      :class="{ferror: errors.has('atomX')}"
-                    >
-                  </td>
-                  <td>
-                    <input
-                      v-model="atomY"
-                      v-validate="'required|decimal|min_value:-100|max_value:100'"
-                      type="text"
-                      name="atomY"
-                      :class="{ferror: errors.has('atomY')}"
-                    >
-                  </td>
-                  <td>
-                    <input
-                      v-model="atomZ"
-                      v-validate="'required|decimal|min_value:-100|max_value:100'"
-                      type="text"
-                      name="atomZ"
-                      :class="{ferror: errors.has('atomZ')}"
-                    >
-                  </td>
-                  <td>
-                    <input
-                      v-model="absorbingAtom"
-                      type="checkbox"
-                      title="Only one atom can be marked as absorbing"
-                      :disabled="absorbingAtomDisabled"
-                    >
-                  </td>
-                  <td>
-                    <button
-                      class="button"
-                      type="button"
-                      @click="addAtom(); overviewBuilder()"
-                    >
-                      Add
-                    </button>
-                  </td>
-                </template>
-              </table-component>
-            </li>
-          </ul>
-        </section>
-        <section
-          v-if="card =='cellParams' && quantumEspressoDisplay == 'inline'"
-          id="cellParametersCard"
-          name="cellParametersCard"
-        >
-          <ul>
-            <li>
-              <label class="left">Cell Parameters Type:</label>
-              <select
-                v-model="cellParamsType"
-                name="cellParamsType"
-                @change="overviewBuilder()"
-              >
-                <option>bohr</option>
-                <option>angstrom</option>
-              </select>
-            </li>
-            <li>
-              <label class="left">Cell Parameters:</label>
-              <table-component
-                :headers="[{key: 'X', title: 'X'}, {key: 'Y', title: 'Y'}, {key: 'Z', title: 'Z'}]"
-                :data="cellParamData"
-                actions="Vector"
-                style="width:40%"
-              >
-                <template
-                  slot="actions"
-                  slot-scope="{ row }"
-                >
-                  <span>{{ 'V'+row.ID }}</span>
-                </template>
-                <template
-                  slot="content"
-                  slot-scope="{ row }"
-                >
-                  <td>
-                    <input
-                      v-model="row.X"
-                      v-validate="'required|decimal|min_value:-100|max_value:100'"
-                      type="text"
-                      :name="row.ID+'X'"
-                      :class="{ferror: errors.has(row.ID+'X')}"
-                      @change="overviewBuilder()"
-                    >
-                  </td>
-                  <td>
-                    <input
-                      v-model="row.Y"
-                      v-validate="'required|decimal|min_value:-100|max_value:100'"
-                      type="text"
-                      :name="row.ID+'Y'"
-                      :class="{ferror: errors.has(row.ID+'Y')}"
-                      @change="overviewBuilder()"
-                    >
-                  </td>
-                  <td>
-                    <input
-                      v-model="row.Z"
-                      v-validate="'required|decimal|min_value:-100|max_value:100'"
-                      type="text"
-                      :name="row.ID+'Z'"
-                      :class="{ferror: errors.has(row.ID+'Z')}"
-                      @change="overviewBuilder()"
-                    >
-                  </td>
-                </template>
-              </table-component>
-            </li>
-          </ul>
-        </section>
-        <section
-          v-if="card =='mpApi' && quantumEspressoDisplay == 'inline'"
-          id="mpApiCard"
-          name="mpApiCard"
-        >
-          <ul>
-            <li>
-              <label class="left">Your personal MP token:</label>
-              <input
-                v-model="mpApiToken"
-                style="width: 30%"
-                type="text"
-                name="mpApiToken"
-              >
-            </li>
-            <li>
-              <label class="left">Material ID (e.g., mp-100):</label>
-              <input
-                v-model="mpApiId"
-                style="width: 30%"
-                type="text"
-                name="mpApiId"
-              >
-            </li>
-            <li>
-              <label class="left">Which atom is absorbing (counting from 1)?:</label>
-              <input
-                v-model="mpApiAtom"
-                type="number"
-                min="1"
-                max="100"
-                name="mpApiAtom"
-              >
-            </li>
-            <li>
-              <button
-                ref="fetchMpapiInput"
-                type="button"
-                name="fetchMpapiInput"
-                class="button"
-                @click="fetchMpApi($event)"
-              >
-                Fetch from MP api
-              </button>
-            </li>
-          </ul>
-        </section>
-      </section>
-
-      <ul>
-        <!-- This gets pushed out of alignment because li tags inside a form are considered flex containers. This means the helper text floating right is in the way and pushes it out
-                    We can fix it by adding display: block but the same will happen to other elements if the page is resized. -->
-        <li>
-          <label
-            v-if="quantumEspressoDisplay != 'inline'"
-            class="left"
-          >Atoms:</label>
-          <table-component
-            v-if="orcaDisplay == 'inline' || fdmnesDisplay == 'inline'"
-            :headers="atomHeaders"
-            :data="atomData"
-            actions="Actions"
-            add-row="addRow"
-            title="Define system structure as atom and position (Angstrom)"
-            style="padding-bottom: 0px"
-          >
-            <template
-              slot="actions"
-              slot-scope="{ row }"
-            >
-              <button
-                type="button"
-                class="button"
-                @click="removeAtom(row.ID); overviewBuilder()"
-              >
-                Remove
-              </button> 
-            </template>
-            <template
-              slot="addRow"
-              slot-scope="{ row }"
-            >
-              <td>
-                <select
-                  v-model="atom"
-                  v-validate="'required'"
-                  name="atom"
-                  :class="{ferror: errors.has('atom')}"
-                >
-                  <option v-for="e in elements">
-                    {{ e['element'] }}
-                  </option>
-                </select>
-              </td>
-              <td>
-                <input
-                  v-model="atomX"
-                  v-validate="atomRules"
-                  type="text"
-                  name="atomX"
-                  :class="{ferror: errors.has('atomX')}"
-                >
-              </td>
-              <td>
-                <input
-                  v-model="atomY"
-                  v-validate="atomRules"
-                  type="text"
-                  name="atomY"
-                  :class="{ferror: errors.has('atomY')}"
-                >
-              </td>
-              <td>
-                <input
-                  v-model="atomZ"
-                  v-validate="atomRules"
-                  type="text"
-                  name="atomZ"
-                  :class="{ferror: errors.has('atomZ')}"
-                >
-              </td>
-              <td>
-                <button
-                  class="button"
-                  type="button"
-                  @click="addAtom(); overviewBuilder()"
-                >
-                  Add
-                </button>
-              </td>
-            </template>
-          </table-component>
-        </li>
-
-        <li v-if="fdmnesDisplay == 'inline'">
-          <label class="left">Params:</label>
-          <table-component
-            :headers="fdmnesParameterHeaders"
-            :data="fdmnesParams"
-            style="padding-bottom: 0px"
-          >
-            <template
-              slot="content"
-              slot-scope="{ row }"
-            >
-              <td>
-                <input
-                  v-model="fdmnesParams[0].A"
-                  v-validate="'required|decimal|min_value:-100|max_value:100'"
-                  type="text"
-                  name="fdmnesParamA"
-                  :class="{ferror: errors.has('fdmnesParamA')}"
-                  @change="overviewBuilder()"
-                >
-              </td>
-              <td>
-                <input
-                  v-model="fdmnesParams[0].B"
-                  v-validate="'required|decimal|min_value:-100|max_value:100'"
-                  type="text"
-                  name="fdmnesParamB"
-                  :class="{ferror: errors.has('fdmnesParamB')}"
-                  @change="overviewBuilder()"
-                >
-              </td>
-              <td>
-                <input
-                  v-model="fdmnesParams[0].C"
-                  v-validate="'required|decimal|min_value:-100|max_value:100'"
-                  type="text"
-                  name="fdmnesParamC"
-                  :class="{ferror: errors.has('fdmnesParamC')}"
-                  @change="overviewBuilder()"
-                >
-              </td>
-              <td>
-                <input
-                  v-model="fdmnesParams[0].Alpha"
-                  v-validate="'required|decimal|min_value:0|max_value:180'"
-                  type="text"
-                  name="fdmnesParamAlpha"
-                  :class="{ferror: errors.has('fdmnesParamAlpha')}"
-                  @change="overviewBuilder()"
-                >
-              </td>
-              <td>
-                <input
-                  v-model="fdmnesParams[0].Beta"
-                  v-validate="'required|decimal|min_value:0|max_value:180'"
-                  type="text"
-                  name="fdmnesParamBeta"
-                  :class="{ferror: errors.has('fdmnesParamBeta')}"
-                  @change="overviewBuilder()"
-                >
-              </td>
-              <td>
-                <input
-                  v-model="fdmnesParams[0].Gamma"
-                  v-validate="'required|decimal|min_value:0|max_value:180'"
-                  type="text"
-                  name="fdmnesParamGamma"
-                  :class="{ferror: errors.has('fdmnesParamGamma')}"
-                  @change="overviewBuilder()"
-                >
-              </td>
-            </template>
-          </table-component>
-        </li>
-
-        <li>
-          <label class="left">Overview (cannot edit!):</label>
-          <textarea
-            id="fileContents"
-            :value="inputFileContents"
-            :rows="textAreaRows"
-            :cols="textAreaColumns"
-            style="width:auto;height:auto"
-            title="Job overview to be submitted to the calculation cluster"
-            readonly
-          />
-        </li>
-
-        <li>
-          <label class="left">Save input file:</label>
-          <button
-            type="button"
-            class="button"
-            @click="downloadFileContents()"
-          >
-            Download
-          </button>
-        </li>
-        <li v-if="orcaDisplay == 'inline'">
-          <label class="left">Spectrum Type:</label>
-          <select
-            v-model="orcaSpectrumType"
-            name="orcaSpectrumType"
-          >
-            <option v-for="s in orcaMapKeyword">
-              {{ s }}
-            </option>
-          </select>
-          <label class="notLeft">Start Value (eV):</label>
-                    &nbsp;
-          <input
-            v-model="orcaStartValue"
-            v-validate="'required|decimal'"
-            type="text"
-            name="orcaStartValue"
-            :class="{ferror: errors.has('orcaStartValue')}"
-          >
-                    &nbsp;
-          <label class="notLeft">Stop Value (eV):</label>
-                    &nbsp;
-          <input
-            v-model="orcaStopValue"
-            v-validate="'required|decimal'"
-            type="text"
-            name="orcaStopValue"
-            :class="{ferror: errors.has('orcaStopValue')}"
-          >
-                    &nbsp;
-          <label class="notLeft">Gaussian Broadening (eV):</label>
-                    &nbsp;
-          <input
-            v-model="orcaBroadening"
-            v-validate="'required|decimal|min_value:0|max_value:100'"
-            type="text"
-            name="orcaBroadening"
-            :class="{ferror: errors.has('orcaBroadening')}"
-          >
-        </li>
-        <li v-if="orcaDisplay == 'inline'">
-          <input
-            v-model="orcaLicense"
-            type="checkbox"
-            name="orcaLicense"
-            value="accepted"
-          >
-                    &nbsp;
-          <label
-            class="notleft"
-            style="font-size:14px; color:red"
-          >  Please tick here to comply with ORCA license agreement <a href="https://orcaforum.kofo.mpg.de/app.php/privacypolicy/policy">https://orcaforum.kofo.mpg.de/app.php/privacypolicy/policy</a></label>
-                    <!-- <label v-if="orcaLicense" class="left">Thanks!</label> -->
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        </li>
-        <!-- Here vertical align does not really work -->
-        <li style="vertical-align:middle; position: relative;">
-          <label class="left">CPUs: </label>
-          <input
-            v-model="cpus"
-            v-validate="'required|numeric|min_value:1|max_value:10'"
-            type="text"
-            name="cpus"
-            :class="{ferror: errors.has('cpus')}"
-            @change="overviewBuilder()"
-          >
-          <span
-            v-if="errors.has('cpus')"
-            class="errormessage ferror"
-          >{{ errors.first('cpus') }}</span>
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          <label class="notLeft">Memory required in Gb:</label>
-          <input
-            v-model="memory"
-            v-validate="'required|numeric|min_value:1|max_value:32'"
-            type="text"
-            name="memory"
-            :class="{ferror: errors.has('memory')}"
-            @change="overviewBuilder()"
-          >
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          <span
-            v-if="errors.has('memory')"
-            class="errormessage ferror"
-          >{{ errors.first('memory') }}</span>
-          <button
-            type="button"
-            class="button submit"
-            name="orcaSubmit"
-            :disabled="isSubmitDisabled || (!orcaLicense && orcaDisplay=='inline')"
-            @click="onSubmit($event)"
-          >
-            SUBMIT
-          </button>
-        </li>
-        <li>
-          <span style="font-size:13px">On successful submission, your results will be sent to the e-mail address associated with your fedid</span>
-        </li>
-
-        <hr style="border:1px solid #ccc">
-
-        <li v-if="jobData.length">
-          <label class="left">Your Job Status'</label>
-          <table-component
-            :headers="[{key: 'jobID', title: 'Job ID'}, {key: 'jobType', title: 'Job Type'}, {key: 'jobStatus', title: 'Job Status'}]"
-            :data="jobData"
-            actions="Actions"
-            title="Status of requested and running jobs"
-          >
-            <template
-              slot="actions"
-              slot-scope="{ row }"
-            >
-              <button
-                :ref="'job'+row.jobID"
-                type="button"
-                class="button"
-                @click="killJob(row.jobID)"
-              >
-                Kill Job
-              </button>
-            </template>
-          </table-component>
-        </li>
-      </ul>
-    </form>
-  </div>
-</template>
-
-<script>
-    import Backbone from 'backbone'
-    import Table from 'app/components/table.vue'
-
-    export default {
-        name: 'ConexsSubmission',
-        components: {
-            'table-component': Table,
-        },
-        props: {},
-
-        data: function(){
-            return {
-                // Shared
-                inputFile: null,
-                inputFileContents: '',
-                textAreaRows: 25,
-                textAreaColumns: 100,
-                textAreaDisplay: 'inline',
-                cpus: 4,
-                memory: 16,
-                output: '',
-                elements: [
-                    {'element': 'H', 'number': 1, 'mass': 1.0078, 'pseudopotential': 'H.pbe-rrkjus_gipaw.UPF'}, {'element': 'He', 'number': 2, 'mass': 4.0026, 'pseudopotential': 'He.pbe-rrkjus_gipaw.UPF'}, {'element': 'Li', 'number': 3, 'mass': 6.94, 'pseudopotential': 'Li.pbe-s-rrkjus_gipaw.UPF'},
-                    {'element': 'Be', 'number': 4, 'mass': 9.0122, 'pseudopotential': 'Be.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'B', 'number': 5, 'mass': 10.81, 'pseudopotential': 'B.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'C', 'number': 6, 'mass': 12.011, 'pseudopotential': 'C.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'N', 'number': 7, 'mass': 14.007, 'pseudopotential': 'N.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'O', 'number': 8, 'mass': 15.999, 'pseudopotential': 'O.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'F', 'number': 9, 'mass': 18.9984, 'pseudopotential': 'F.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'Ne', 'number': 10, 'mass': 20.1797, 'pseudopotential': 'Ne.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Na', 'number': 11, 'mass': 22.9898, 'pseudopotential': 'Na.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Mg', 'number': 12, 'mass': 24.305, 'pseudopotential': 'Mg.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Al', 'number': 13, 'mass': 26.9815, 'pseudopotential': 'Al.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Si', 'number': 14, 'mass': 28.085, 'pseudopotential': 'Si.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'P', 'number': 15, 'mass': 30.9738, 'pseudopotential': 'P.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'S', 'number': 16, 'mass': 32.06, 'pseudopotential': 'S.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Cl', 'number': 17, 'mass': 35.453, 'pseudopotential': 'Cl.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Ar', 'number': 18, 'mass': 39.948, 'pseudopotential': 'Ar.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'K', 'number': 19, 'mass': 39.0983, 'pseudopotential': 'K.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Ca', 'number': 20, 'mass': 40.078, 'pseudopotential': 'Ca.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Sc', 'number': 21, 'mass': 44.9559, 'pseudopotential': 'Sc.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Ti', 'number': 22, 'mass': 47.867, 'pseudopotential': 'Ti.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'V', 'number': 23, 'mass': 50.9415, 'pseudopotential': 'V.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Cr', 'number': 24, 'mass': 51.996, 'pseudopotential': 'Cr.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Mn', 'number': 25, 'mass': 54.938, 'pseudopotential': 'Mn.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Fe', 'number': 26, 'mass': 55.845, 'pseudopotential': 'Fe.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Co', 'number': 27, 'mass': 58.9332, 'pseudopotential': 'Co.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'Ni', 'number': 28, 'mass': 58.6934, 'pseudopotential': 'Ni.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Cu', 'number': 29, 'mass': 63.546, 'pseudopotential': 'Cu.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Zn', 'number': 30, 'mass': 65.38, 'pseudopotential': 'Zn.pbe-dn-rrkjus_gipaw.UPF'},
-                    {'element': 'Ga', 'number': 31, 'mass': 69.72, 'pseudopotential': 'Ga.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Ge', 'number': 32, 'mass': 72.63, 'pseudopotential': 'Ge.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'As', 'number': 33, 'mass': 74.9216, 'pseudopotential': 'As.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'Se', 'number': 34, 'mass': 78.971, 'pseudopotential': 'Se.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Br', 'number': 35, 'mass': 79.904, 'pseudopotential': 'Br.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Kr', 'number': 36, 'mass': 83.798, 'pseudopotential': 'Kr.pbe-dn-rrkjus_gipaw.UPF'},
-                    {'element': 'Rb', 'number': 37, 'mass': 85.4678, 'pseudopotential': 'Rb.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Sr', 'number': 38, 'mass': 87.62, 'pseudopotential': 'Sr.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Y', 'number': 39, 'mass': 88.9058, 'pseudopotential': 'Y.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Zr', 'number': 40, 'mass': 91.224, 'pseudopotential': 'Zr.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Nb', 'number': 41, 'mass': 92.9064, 'pseudopotential': 'Nb.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Mo', 'number': 42, 'mass': 95.95, 'pseudopotential': 'Mo.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Tc', 'number': 43, 'mass': 97.907, 'pseudopotential': 'Tc.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Ru', 'number': 44, 'mass': 101.07, 'pseudopotential': 'Ru.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Rh', 'number': 45, 'mass': 102.906, 'pseudopotential': 'Rh.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Pd', 'number': 46, 'mass': 106.42, 'pseudopotential': 'Pd.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Ag', 'number': 47, 'mass': 107.868, 'pseudopotential': 'Ag.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Cd', 'number': 48, 'mass': 112.414, 'pseudopotential': 'Cd.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'In', 'number': 49, 'mass': 114.818, 'pseudopotential': 'In.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Sn', 'number': 50, 'mass': 118.71, 'pseudopotential': 'Sn.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Sb', 'number': 51, 'mass': 121.76, 'pseudopotential': 'Sb.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'Te', 'number': 52, 'mass': 127.6, 'pseudopotential': 'Te.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'I', 'number': 53, 'mass': 126.905, 'pseudopotential': 'I.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Xe', 'number': 54, 'mass': 131.293, 'pseudopotential': 'Xe.pbe-dn-rrkjus_gipaw.UPF'},
-                    {'element': 'Cs', 'number': 55, 'mass': 132.905, 'pseudopotential': 'Cs.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Ba', 'number': 56, 'mass': 137.327, 'pseudopotential': 'Ba.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'La', 'number': 57, 'mass': 138.905, 'pseudopotential': 'La.pbe-spfn-rrkjus_gipaw.UPF'},
-                    {'element': 'Ce', 'number': 58, 'mass': 140.116, 'pseudopotential': 'Ce.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Pr', 'number': 59, 'mass': 140.908, 'pseudopotential': 'Pr.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Nd', 'number': 60, 'mass': 144.242, 'pseudopotential': 'Nd.pbe-spdn-rrkjus_gipaw.UPF'},
-                    {'element': 'Pm', 'number': 61, 'mass': 145.0, 'pseudopotential': 'Pm.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Sm', 'number': 62, 'mass': 150.36, 'pseudopotential': 'Sm.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Eu', 'number': 63, 'mass': 151.96, 'pseudopotential': 'Eu.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Gd', 'number': 64, 'mass': 157.25, 'pseudopotential': 'Gd.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Tb', 'number': 65, 'mass': 158.925, 'pseudopotential': 'Tb.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Dy', 'number': 66, 'mass': 162.5, 'pseudopotential': 'Dy.pbe-spdn-rrkjus_gipaw.UPF'},
-                    {'element': 'Ho', 'number': 67, 'mass': 164.93, 'pseudopotential': 'Ho.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Er', 'number': 68, 'mass': 167.259, 'pseudopotential': 'Er.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Tm', 'number': 69, 'mass': 168.934, 'pseudopotential': 'Tm.pbe-spdn-rrkjus_gipaw.UPF'},
-                    {'element': 'Yb', 'number': 70, 'mass': 173.045, 'pseudopotential': 'Yb.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Lu', 'number': 71, 'mass': 174.967, 'pseudopotential': 'Lu.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Hf', 'number': 72, 'mass': 178.49, 'pseudopotential': 'Hf.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Ta', 'number': 73, 'mass': 180.948, 'pseudopotential': 'Ta.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'W', 'number': 74, 'mass': 183.84, 'pseudopotential': 'W.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Re', 'number': 75, 'mass': 186.207, 'pseudopotential': 'Re.pbe-spn-rrkjus_gipaw.UPF'},
-                    {'element': 'Os', 'number': 76, 'mass': 190.23, 'pseudopotential': 'Os.pbe-spn-rrkjus_gipaw.UPF'}, {'element': 'Ir', 'number': 77, 'mass': 192.217, 'pseudopotential': 'Ir.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Pt', 'number': 78, 'mass': 195.084, 'pseudopotential': 'Pt.pbe-n-rrkjus_gipaw.UPF'},
-                    {'element': 'Au', 'number': 79, 'mass': 196.967, 'pseudopotential': 'Au.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Hg', 'number': 80, 'mass': 200.592, 'pseudopotential': 'Hg.pbe-n-rrkjus_gipaw.UPF'}, {'element': 'Tl', 'number': 81, 'mass': 204.383, 'pseudopotential': 'Tl.pbe-dn-rrkjus_gipaw.UPF'},
-                    {'element': 'Pb', 'number': 82, 'mass': 207.2, 'pseudopotential': 'Pb.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Bi', 'number': 83, 'mass': 208.98, 'pseudopotential': 'Bi.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Po', 'number': 84, 'mass': 209.0, 'pseudopotential': 'Po.pbe-dn-rrkjus_gipaw.UPF'},
-                    {'element': 'At', 'number': 85, 'mass': 210.0, 'pseudopotential': 'At.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Rn', 'number': 86, 'mass': 222.0, 'pseudopotential': 'Rn.pbe-dn-rrkjus_gipaw.UPF'}, {'element': 'Fr', 'number': 87, 'mass': 223.0, 'pseudopotential': 'Fr.pbe-spdn-rrkjus_gipaw.UPF'},
-                    {'element': 'Ra', 'number': 88, 'mass': 226.0, 'pseudopotential': 'Ra.pbe-spdn-rrkjus_gipaw.UPF'}, {'element': 'Ac', 'number': 89, 'mass': 227.0, 'pseudopotential': 'Ac.pbe-spfn-rrkjus_gipaw.UPF'}, {'element': 'Th', 'number': 90, 'mass': 232.038, 'pseudopotential': 'Th.pbe-spfn-rrkjus_gipaw.UPF'},
-                    {'element': 'Pa', 'number': 91, 'mass': 231.036, 'pseudopotential': 'Pa.pbe-spfn-rrkjus_gipaw.UPF'}, {'element': 'U', 'number': 92, 'mass': 238.029, 'pseudopotential': 'U.pbe-spfn-rrkjus_gipaw.UPF'}, {'element': 'Np', 'number': 93, 'mass': 237.048, 'pseudopotential': 'Np.pbe-spfn-rrkjus_gipaw.UPF'},
-                    {'element': 'Pu', 'number': 94, 'mass': 239.052, 'pseudopotential': 'Pu.pbe-spfn-rrkjus_gipaw.UPF'}, {'element': 'Am', 'number': 95, 'mass': 243.0, 'pseudopotential': 'Am.pbe-spfn-rrkjus_gipaw.UPF'}
-                ],
-                element: '',
-                edge: '',
-                structureFile: null,
-                atomHeaders: [{key: 'Atom', title: 'Atom'}, {key: 'X', title: 'X'}, {key: 'Y', title: 'Y'}, {key: 'Z', title: 'Z'}],
-                atomData: [],
-                atom: 'H',
-                atomX: 0,
-                atomY: 0,
-                atomZ: 0,
-                isSubmitDisabled: true,
-                clusterStatus: '',
-                form: '',
-                jobData: [],
-
-
-                // ORCA
-                orcaLicense: false,
-                orcaDisplay: 'inline',
-                technique: '',
-                functional: '',
-                basis: '',
-                charge: 0,
-                multiplicity: 1,
-                solvent: '',
-
-                orca_solvents: [
-                         { name: 'None', value: [0,0] },
-                         { name: 'Water', value: [80.4, 1.33] },
-                         { name:'Acetone', value: [20.7, 1.359] },
-                         { name:'Acetonitrile', value: [36.6, 1.344] },
-                         { name: 'Ammonia', value: [22.4, 1.33] },
-                         { name: 'Benzene', value: [2.28, 1.501] },
-                         { name: 'CCl4', value: [2.24, 1.466] },
-                         { name: 'CH2Cl2', value: [9.08, 1.424] },
-                         { name: 'Chloroform', value: [4.9, 1.45] },
-                         { name: 'Cyclohexane', value: [2.02, 1.425] },
-                         { name: 'DMF', value: [38.3, 1.430] },
-                         { name: 'DMSO',  value: [47.2, 1.479] },
-                         { name: 'Ethanol', value: [24.3, 1.361] },
-                         { name: 'Hexane', value: [1.89, 1.375] },
-                         { name: 'Methanol', value: [32.63, 1.329] },
-                         { name: 'Octanol', value: [10.3, 1.421] },
-                         { name: 'Pyridine', value: [12.5, 1.510] },
-                         { name: 'THF', value: [7.25, 1.407] },
-                         { name: 'Toluene', value:[2.4, 1.497] }
-                ],
-                orbWin0Start: 0,
-                orbWin0Stop: 0,
-                orbWin1Start: 0,
-                orbWin1Stop: 0,
-                orcaSpectrumType: '',
-                orcaMapKeyword: [
-                    "", "ABS", "ABSQ", "XES", "XESQ",
-                    "XAS", "XASQ"
-                ],
-                orcaStartValue: 0,
-                orcaStopValue: 1000,
-                orcaBroadening: 1,
-
-
-                // FDMNES
-                fdmnesDisplay: 'none',
-                fdmnes_result_file: 'result',
-                fdmnes_abs_edge: ['K',
-                         'L1', 'L2', 'L3',
-                         'M1', 'M2', 'M3', 'M4', 'M5',
-                ],
-                fdmnes_method: '',
-                crystal: '',
-                fdmnesParameterHeaders: [{key: 'A', title: 'A'}, {key: 'B', title: 'B'}, {key: 'C', title: 'C'}, {key: 'Alpha', title: 'Alpha'}, {key: 'Beta', title: 'Beta'}, {key: 'Gamma', title: 'Gamma'}],
-                fdmnesParams: [{A: 0, B: 0, C: 0, Alpha: 90, Beta: 90, Gamma: 90}],
-
-
-                // QUANTUM ESPRESSO
-                qe_abs_edge: ['K', 'L1', 'L2', 'L23'],
-
-                // Control
-                quantumEspressoDisplay: 'none',
-                card: 'system',
-                title: '',
-                calculation: 'scf',
-                verbosity: 'low',
-                restart_mode: 'from_scratch',
-                forces: '',
-                etot_conv_thr: '1.0000000000d-05',
-                prefix: '',
-                forc_conv_thr: '1.0000000000d-04',
-
-                // System
-                nat: 0,
-                ntyp: 0,
-                ecutwfc: 50,
-                ibrav: 0,
-                conductivity: 'metallic',
-                occupations: '',
-                smearing: '',
-                degauss: '',
-                electronCount: 0,
-
-                // Electrons
-                disagonalization: 'david',
-                electron_maxstep: 50,
-                mixing_beta: 0.2,
-
-                // Atomic_Position
-                atomicPositionType: '',
-                qeAtomHeaders: [{key: 'Atom', title: 'Atom'}, {key: 'X', title: 'X'}, {key: 'Y', title: 'Y'}, {key: 'Z', title: 'Z'}, {key: 'AbsorbingAtom', title: 'Absorbing Atom?'}],
-                absorbingAtom: false,
-                absorbingAtomDisabled: false,
-
-                // Cell_Parameters
-                cellParamsType: '',
-                cellParamData: [
-                    { ID: 1, X: 0, Y: 0, Z: 0 },
-                    { ID: 2, X: 0, Y: 0, Z: 0 },
-                    { ID: 3, X: 0, Y: 0, Z: 0 }
-                ],
-                // MP_API
-                mpApiToken: '',
-                mpApiId: '',
-                mpApiAtom: 'required|decimal|min_value:1|max_value:100',
-
-                // Can use decimal:5 to limit 5 decimal places
-                atomRules: '',
-                orcaAtomRules: 'required|decimal|min_value:-100|max_value:100',
-                fdmnesAtomRules: 'required|decimal|min_value:-1|max_value:1'
-            }
-        },
-
-        computed: {
-            // Elements with pseudopotential files - may be deprecated since last set of PP changes
-            ppElements: function(){
-                return this.elements.filter(function(e){
-                    if(e.pseudopotential) {
-                        return e.pseudopotential
-                    }
-                })
-            }
-        },
-
-        created: function(){
-            this.startCluster()
-
-            // orca
-            this.functional = 'BP86'
-            this.basis = 'def2-SVP'
-            this.solvent = this.orca_solvents[0]['name']
-            this.technique = 'Xas'
-            this.atomRules = this.orcaAtomRules
-            this.form = 'orca'
-
-            //fdmnes
-            this.edge = this.fdmnes_abs_edge[0]
-            this.crystal = 'Crystal'
-
-            //qe
-            this.forces = '.FALSE.'
-            this.occupations = 'smearing'
-            this.smearing = 'gaussian'
-
-            this.overviewBuilder()
-        },
-
-        mounted: function(){
-            this.$refs.orcaTabButton.classList.add('active')
-            this.$refs.systemCardBtn.classList.add('active')
-        },
-
-        methods: {
-            startCluster: function(){
-                console.log('startCluster called')
-                let self = this
-                Backbone.ajax({
-                    url: app.apiurl + '/conexs',
-                    data: { login: app.user },
-                    method: 'POST',
-                    success: function(response){
-                        if(response['cluster']){
-                            if(response['cluster'].status == 'new'){
-                                console.log('starting new cluster for: ' + app.user)
-                                self.isSubmitEnabled = false
-
-                                setInterval(function(){
-                                    self.pollClusterStatus()
-                                }, 5000)
-
-                                setInterval(function(){
-                                    self.getJobStatus()
-                                }, 5000)
-
-                            } else {
-                                console.log('cluster already available for: ' + app.user)
-                                self.isSubmitDisabled = false
-                                self.clusterStatus = response['cluster'].status
-
-                                setInterval(function(){
-                                    self.pollClusterStatus()
-                                }, 5000)
-
-                                setInterval(function(){
-                                    self.getJobStatus()
-                                }, 5000)
-                            }
-                        }
-                    },
-                    error: function(response){
-                        console.log('error starting cluster: ' + response)
-                        //app.alert({ title: 'Error', message: response })
-                        self.clusterStatus = 'Unavailable, please try again later'
-                        self.isSubmitDisabled = true
-                    }
-                })
-            },
-
-            pollClusterStatus: function(){
-                let self = this
-                Backbone.ajax({
-                    url: app.apiurl + '/conexs/status',
-                    data: {
-                        login: app.user
-                    },
-                    method: 'POST', //should be a get really
-                    success: function(response){
-                        if(!response[app.user].status){
-                            self.clusterStatus = 'Unavailable'
-                        } else {
-                            self.clusterStatus = response[app.user].status
-                        }
-
-                        if(self.clusterStatus == 'Sleeping' || self.clusterStatus == 'Running'){
-                            self.isSubmitDisabled = false
-                        } else {
-                            self.isSubmitDisabled = true
-                        }
-                    },
-                    error: function(response){
-                        console.log('error getting cluster status: ' + response)
-                        //app.alert({ title: 'Error', message: response })
-                        self.clusterStatus = 'Unavailable'
-                        self.isSubmitDisabled = true
-                    }
-                })
-            },
-
-            getJobStatus: function(){
-                let self = this
-                Backbone.ajax({
-                    url: app.apiurl + '/conexs/jobs',
-                    data: {
-                        login: app.user
-                    },
-                    method: 'GET',
-                    success: function(response){
-                        self.jobData = response
-                    },
-                    error: function(response){
-                        console.log('Unsable to get job status ' + response)
-                    }
-                })
-            },
-
-            tabDisplay: function(event){
-                var name = event.target.name 
-
-                this.$refs.inputFile.value = ''
-                this.$refs.orcaStructureFile.value = ''
-                this.$refs.fdmnesStructureFile.value = ''
-                this.structureFile = null
-
-                this.$refs.orcaTabButton.classList.remove('active')
-                this.$refs.fdmnesTabButton.classList.remove('active')
-                this.$refs.quantumEspressoTabButton.classList.remove('active')
-                this.$refs[name].classList.add('active')
-
-                this.atomData = []
-                
-                // We could use the card logic here, but the input file clearing above will need refactoring too
-                // With v-if == false the section is not rendered to the DOM at all so we get undefined var errors
-                switch(name){
-                    case "orcaTabButton":
-                        this.orcaDisplay = 'inline'
-                        this.fdmnesDisplay = 'none'
-                        this.quantumEspressoDisplay = 'none'
-                        this.atomRules = this.orcaAtomRules
-                        this.form = 'orca'
-                        break
-                    case "fdmnesTabButton":
-                        this.orcaDisplay = 'none'
-                        this.fdmnesDisplay = 'inline'
-                        this.quantumEspressoDisplay = 'none'
-                        this.atomRules = this.fdmnesAtomRules
-                        this.form = 'fdmnes'
-                        break
-                    case "quantumEspressoTabButton":
-                        this.orcaDisplay = 'none'
-                        this.fdmnesDisplay = 'none'
-                        this.quantumEspressoDisplay = 'inline'
-                        this.controlCardDisplay = true
-                        this.form = 'qe'
-                        break
-                }
-                this.overviewBuilder()
-            },
-
-            /**
-             * Handle which card to show on the QE tab
-             * May need to switch this to use the tab display method instead
-             * to sort out some v-validate issues when elements are re-rendered
-             */
-            cardDisplay: function(event){
-                var name = event.target.name
-
-                this.$refs.systemCardBtn.classList.remove('active')
-                this.$refs.atomicPositionCardBtn.classList.remove('active')
-                this.$refs.cellParamsCardBtn.classList.remove('active')
-                this.$refs.mpApiBtn.classList.remove('active')
-                this.$refs[name].classList.add('active')
-
-                switch(name){
-                    case "systemCardBtn":
-                        this.card = 'system'
-                        break
-                    case "atomicPositionCardBtn":
-                        this.card = 'position'
-                        break
-                    case "cellParamsCardBtn":
-                        this.card = 'cellParams'
-                        break
-                    case "mpApiBtn":
-                        this.card = 'mpApi'
-                        break
-                    default:
-                        this.card = 'control'
-                        break
-                }
-            },
-
-            /**
-             * Changing tabs too quick can mess up with overview box
-             * Could disable the tab buttons until overview is ready?
-             */
-            overviewBuilder: function(event){
-                if(this.orcaDisplay == 'inline')
-                    this.orcaOverviewBuilder(event)
-                else if(this.fdmnesDisplay == 'inline')
-                    this.fdmnesOverviewBuilder(event)
-                else if(this.quantumEspressoDisplay == 'inline')
-                    this.quantumEspressoOverviewBuilder(event)
-                else
-                    console.log('Unspecified tab is displaying, no overviewBuilder function available')
-
-            },
-
-            // Build Orca overview file/string based on form inputs or files uploaded
-            orcaOverviewBuilder: function(event){
-                if (this.technique == 'Xas') {
-                    this.output = '! ' + this.functional + ' DKH2 ' + this.basis + ' SARC/J '
-
-                    if (this.solvent != 'None') {
-                        this.output += 'CPCM(' + this.solvent + ') '
-                    }
-
-                    this.output += '\n'
-                    this.output += '%maxcore 5024' + "\n\n"
-                    this.output += '%pal nprocs ' + this.cpus + "\n"
-                    this.output += 'end' + "\n\n"
-                    this.output += '%tddft' + "\n"
-
-                    if(this.technique == 'Xas'){
-                        this.output += 'orbWin[0] = ' + this.orbWin0Start + ',' + this.orbWin0Stop + ',-1,-1' + "\n"
-                        this.output += 'orbWin[1] = ' + this.orbWin1Start + ',' + this.orbWin1Stop + ',-1,-1' + "\n"
-                    }
-
-                    this.output += 'doquad true' + "\n"
-                    this.output += 'nroots 20' + "\n"
-                    this.output += 'maxdim 10' + "\n"
-                    this.output += 'end' + "\n\n"
-                }
-                else if (this.technique == 'Xes') {
-                    this.output = '! UKS ' + this.functional + ' DKH2 ' + this.basis + ' SARC/J '
-
-                    if (this.solvent != 'None') {
-                        this.output += 'CPCM(' + this.solvent + ') '
-                    }
-                    this.output += '%maxcore 5024' + "\n\n"
-                    this.output += '%pal nprocs ' + this.cpus + "\n"
-                    this.output += 'end' + "\n\n"
-
-                    this.output += '%xes' + "\n"
-                    this.output += 'CoreOrb 0,1' + "\n"
-                    this.output += 'OrbOp 0,1' + "\n"
-                    this.output += 'DoSOC true' + "\n"
-                    this.output += 'Normalize true' + "\n"
-                    this.output += 'MDOriginAdjustMethod 1' + "\n"
-                    this.output += 'end' + "\n\n"
-                }
-
-                if (this.solvent != 'None') {
-                    this.output += '%cpcm' + "\n"
-                    var solventArr = []
-
-                    for(var i=0; i < this.orca_solvents.length; i++){
-                        if(this.orca_solvents[i]['name'] == this.solvent){
-                            solventArr = this.orca_solvents[i]['value']
-                            break
-                        }
-                    }
-
-                    this.output += 'epsilon ' + solventArr[0] + ' # Dielectric constant' + "\n"
-                    this.output += 'refrac ' + solventArr[1] + ' # Refractive index' + "\n"
-                    this.output += 'end' + "\n\n"
-                }
-
-                if (event && event.target.files[0] || this.structureFile) {
-                    var structureFileName = this.structureFile ? this.structureFile.name : event.target.files[0].name
-
-                    if(structureFileName.endsWith('.xyz')){
-                        this.output += "* xyzfile " + this.charge + " " + this.multiplicity + " " + structureFileName + "\n"
-                    }
-                    else if(structureFileName.endsWith('.gzmt')){
-                        this.output += "* gzmtfile " + this.charge + " " + this.multiplicity + " " + structureFileName + "\n"
-                    }
-                    else {
-                        console.log(structureFileName)
-                        app.alert({title: 'error', message: 'Orca structure file must be .xyz or .gmnt'})
-                        this.$refs.fdmnesStructureFile.value = ''
-                        this.$refs.orcaStructureFile.value = ''
-                    }
-                } else {
-                    this.output += '*xyz ' + this.charge + ' ' + this.multiplicity + "\n"
-
-                    for(var i=0; i<this.atomData.length; i++){
-                        this.output += this.atomData[i].Atom + ' ' + this.atomData[i].X + ' ' + this.atomData[i].Y + ' ' + this.atomData[i].Z + "\n"
-                    }
-                }
-
-                if(!this.structureFile){
-                    this.output += "*"
-                }
-
-                this.inputFileContents = this.output
-                this.resizeOverview()
-            },
-
-            // Build Fdmnes overview file/string based on form inputs or files uploaded
-            fdmnesOverviewBuilder: function(event){
-                this.output = 'Filout' + "\n"
-                this.output += this.fdmnes_result_file + "\n\n"
-                this.output += 'Range' + "\n"
-                this.output += '-10. 0.25 50' + '       !E_min, step, E_intermediate, step ...' + "\n\n"
-                this.output += 'Edge' + "\n"
-                this.output += this.edge + "\n\n"
-                this.output += 'Z_absorber' + "\n"
-
-                for(var i=0; i<this.elements.length; i++){
-                    if(this.element == this.elements[i]['element']){
-                        this.output += this.elements[i]['number'] + "\n\n"
-                    }
-                }
-
-                this.output += 'SCF' + '        !Performs self-consistent calculation' + "\n"
-                this.output += 'Energpho' + '       !Output energy relative to the photon energy of absorbing atom' + "\n\n"
-                this.output += this.fdmnes_method ? "Green\n" : ""
-                this.output += 'Quadrupole' + "\n"
-
-                if(this.edge.includes('L'))
-                    this.output += 'Spinorbit' + "\n\n"
-                else
-                    this.output += "\n"
-
-                this.output += 'Radius' + '     ! Radius of the cluster where final state calculation is performed' + "\n"
-                this.output += '6' + "\n\n"
-
-                var ready = false
-                let self = this
-                var check = function(){
-                    if(ready){
-                        self.output += "\n\n"
-                        self.output += 'Convolution' + "\n\n"
-                        self.output += 'End'
-                        self.inputFileContents = self.output
-                        self.output = ''
-                        self.resizeOverview()
-                    } else {
-                        setTimeout(check, 1000)
-                    }
-                }
-                check()
-
-                if (event && event.target.files[0] || this.structureFile) {
-                    var structureFileName = this.structureFile ? this.structureFile.name : event.target.files[0].name
-
-                    if(structureFileName.endsWith('.cif')){
-                        this.output += 'Cif_file' + "\n"
-                        this.output += structureFileName
-                    }
-                    else if(structureFileName.endsWith('.pdb')){
-                        this.output += 'Pdb_file' + "\n"
-                        this.output += structureFileName
-                    }
-                    else {
-                        app.alert({title: 'error', message: 'Structure file must be .cif or .pdb'})
-                        this.$refs.fdmnesStructureFile.value = ''
-                        this.$refs.orcaStructureFile.value = ''
-                    }
-                    ready = true
-                } else {
-                    if(this.crystal == 'Crystal')
-                        this.output += 'Crystal' + '        ! Periodic material description (unit cell)' + "\n"
-                    else if(this.crystal == 'Molecule')
-                        this.output += 'Molecule' + '       ! Periodic or cylindrical or spherical coordinates' + "\n"
-
-                    this.output += this.fdmnesParams[0].A + " " + this.fdmnesParams[0].B + " " + this.fdmnesParams[0].C + " " + this.fdmnesParams[0].Alpha + " " + this.fdmnesParams[0].Beta + " " + this.fdmnesParams[0].Gamma + "     ! a, b, c, alpha, beta, gamma\n"
-
-                    this.atomData.forEach(function(item, index){
-                        for(var i=0; i<self.elements.length; i++){
-                            if(item["Atom"] == self.elements[i]['element']){
-                                self.output += self.elements[i]['number'] + " " + item.X + " " + item.Y + " " + item.Z + "     ! Atomic Number, Position\n"
-                            }
-                        }
-                    })
-
-                    ready = true
-                }
-            },
-
-            // Build Quantum Espresso overview file/string based on form inputs or files uploaded
-            quantumEspressoOverviewBuilder: function(event){
-                let self = this
-
-                this.output = "&CONTROL \n"
-                this.output += " calculation = \'" + this.calculation + "\'\n"
-                this.output += " etot_conv_thr = " + this.etot_conv_thr + "\n"
-                this.output += " outdir = \'.\/\' \n"
-                this.output += " prefix = \'" + this.prefix + "\' \n"
-                this.output += " pseudo_dir = \'.\/\' \n"
-                this.output += " restart_mode = \'" + this.restart_mode + "\' \n"
-                this.output += " title = \'" + this.title + "\' \n"
-                this.output += " tprnfor = " + this.forces + "\n"
-                this.output += " verbosity = \'" + this.verbosity + "\' \n"
-                this.output += " forc_conv_thr = " + this.forc_conv_thr + "\n"
-                this.output += "/ \n\n"
-
-                this.output += "&SYSTEM \n"
-                this.output += " ibrav = " + this.ibrav + "\n"
-
-                if(this.conductivity == 'metallic'){
-                    this.occupations = 'smearing'
-                    this.smearing = 'fermi-dirac'
-                    this.degauss = '5.0000000000d-03'
-                    this.output += " occupations = \'" + this.occupations + "\'\n"
-                    this.output += " smearing = \'" + this.smearing + "\'\n"
-                    this.output += " degauss = " + this.degauss + "\n"
-                } else {
-                    this.occupations = ''
-                    this.smearing = ''
-                    this.degauss = ''
-                }
-
-                if((this.electronCount % 2) == 1){
-                    this.output += " nspin = 2 \n"
-                    this.output += " tot_magnetization = 1.0000000000d+00 \n"
-                }
-
-                this.output += " nat = " + this.nat + "\n"
-                this.output += " ntyp = " + this.ntyp + "\n"
-                this.output += " ecutwfc = " + this.ecutwfc + "\n"
-                this.output += "/ \n\n"
-
-                this.output += "&ELECTRONS \n"
-                this.output += " diagonalization = \'" + this.disagonalization + "\'\n"
-                this.output += " electron_maxstep = " + this.electron_maxstep + "\n"
-                this.output += " mixing_beta = " + this.mixing_beta + "\n"
-                this.output += "/ \n\n"
-
-                this.output += "ATOMIC_SPECIES \n"
-
-                var ppe = []
-
-                this.atomData.forEach(function(item, index){
-                    self.ppElements.forEach(function(el, idx){
-                        if(el.element == item.Atom && !ppe.includes(el.element) || el.element == item.Atom && item.AbsorbingAtom == 'Yes'){
-                            if(item.AbsorbingAtom == 'Yes'){
-                                self.output += el.element + "* " + el.mass + " " + el.pseudopotential + "\n"
-                                ppe.push(el.element + '*')
-                            }
-                            else {
-                                self.output += el.element + " " + el.mass + " " + el.pseudopotential + "\n"
-                                ppe.push(el.element)
-                            }
-                        }
-                    })
-                })
-                this.output += "\n\n"
-
-                this.output += "ATOMIC_POSITIONS {" + this.atomicPositionType + "}\n"
-
-                this.atomData.forEach(function(item, index){
-                    console.log(item)
-                    if(item.AbsorbingAtom == 'Yes')
-                        self.output += item.Atom + "* " + item.X + " " + item.Y + " " + item.Z + "\n"
-                    else
-                        self.output += item.Atom + " " + item.X + " " + item.Y + " " + item.Z + "\n"
-                })
-                this.output += "\n\n"
-
-                this.output += "K_POINTS automatic\n"
-                this.output += "1 1 1 0 0 0\n"
-                this.output += "\n\n"
-
-                this.output += "CELL_PARAMETERS {" + this.cellParamsType + "}\n"
-
-                this.cellParamData.forEach(function(item, index){
-                    self.output += " " + item.X + " " + item.Y + " " + item.Z + "\n"
-                })
-
-
-                this.inputFileContents = this.output
-                this.output = ''
-            },
-
-            /**
-             * Resize text area to display the entire file without scrollbars
-             */
-            resizeOverview: function(){
-                var rows = this.inputFileContents.split("\n")
-                var longestRow = 0
-
-                for(var i=0; i<rows.length; i++){
-                    if(rows[i].length > longestRow)
-                        longestRow = rows[i].length
-                }
-
-                this.textAreaRows = rows.length
-                this.textAreaColumns = longestRow
-            },
-
-            /**
-             * Download contents of the overview text area as a .txt file
-             */
-            downloadFileContents: function() {
-                // Create hidden <a> tag to get hyperlink for created Blob
-                const a = document.createElement('a')
-                a.href = URL.createObjectURL(
-                    new Blob([this.inputFileContents], {type:"txt"})
-                )
-                a.setAttribute("download", "input.txt")
-                document.body.appendChild(a);
-                a.click()
-                document.body.removeChild(a)
-            },
-
-            setInputFile: function(event, onLoadFileHandler){
-                let self = this
-                this.inputFile = event.target.files[0]
-
-                let reader = new FileReader()
-                reader.onload = function(e){
-                    self.inputFileContents = e.target.result
-                    self.resizeOverview()
-                }
-                reader.readAsText(this.inputFile)
-            },
-
-            /**
-             * Allow user to clear a file from input dialog without selecting a new file
-             */
-            clearFile: function(e){
-                console.log(e)
-                switch (e.target.name){
-                    case 'clearInputFile':
-                        this.$refs.inputFile.value = ''
-                        break
-                    case 'clearStructureFile':
-                        this.structureFile = null
-                        this.$refs.orcaStructureFile.value = ''
-                        this.$refs.fdmnesStructureFile.value = ''
-                        break
-                }
-                this.overviewBuilder()
-            },
-
-            fetchMpApi: function(e){
-                e.preventDefault()
-                let self = this
-
-                self.isLoading = true
-
-                let data = {
-                        mpapiToken: self.mpApiToken,
-                        mpapiMaterial: self.mpApiId,
-                        mpapiAbsorbingAtom: self.mpApiAtom
-                    }
-
-                Backbone.ajax({
-                    url: app.apiurl + '/conexs/mpapi',
-                    data: data,
-                    method: 'POST',
-                    
-                    success: function(response) {
-                        self.isLoading = false
-                        console.log(response)
-                        if(!response.error){
-                            self.inputFileContents = response
-                            console.log('got no error in body of MP API fetching response')
-                            app.alert({className: 'message notify', message: "Fetching completed"})                                    
-                        } else {
-                            console.log('error in body of MP API fetching response')
-                            app.alert({className: 'Error', message: response.error})
-                        }
-                    },
-
-                    error: function(response) {
-                        self.isLoading = false
-                        console.log(response)
-                        app.alert({ title: 'Error', message: response })
-                    },
-                })
-
-            },
-
-            onSubmit: function(e){
-                e.preventDefault()
-                let self = this
-
-                /* Useful for debugging v-validate errors
-                for(var i=0; i<this.$validator.errors.items.length;i++){
-                    console.log(this.$validator.errors.items[i].field + ' ' + this.$validator.errors.items[i].msg)
-                }*/
-
-                this.$validator.validateAll().then(function(result){
-                    self.isLoading = true
-
-                    if(result && self.inputFileContents != ''){
-
-                        let data = {
-                            data: self.inputFileContents,
-                            charge: self.charge,
-                            multiplicity: self.multiplicity,
-                            cpu: self.cpus,
-                            memory: self.memory,
-                            fedid: app.user,
-                            element: self.element,
-
-                            fdmnes_method: self.fdmnes_method,
-                            edge: self.edge,
-                            crystal: self.crystal,
-
-                            calculation: self.calculation,
-                            etot_conv_thr: self.etot_conv_thr,
-                            prefix: self.prefix,
-                            restart_mode: self.restart_mode,
-                            title: self.title,
-                            forces: self.forces,
-                            verbosity: self.verbosity,
-
-                            ibrav: self.ibrav,
-                            occupations: self.occupations,
-                            smearing: self.smearing,
-                            degauss: self.degauss,
-
-                            disagonalization: self.disagonalization,
-                            electron_maxstep: self.electron_maxstep,
-                            mixing_beta: self.mixing_beta,
-                            form: self.form,
-                        }
-
-                        let formData = new FormData()
-
-                        // Add data
-                        for(var key in data){
-                            formData.append(key, data[key])
-                        }
-
-                        if(self.form == 'orca'){
-                            formData.append('orcaSpectrumType', self.orcaSpectrumType)
-                            formData.append('orcaStartValue', self.orcaStartValue)
-                            formData.append('orcaStopValue', self.orcaStopValue)
-                            formData.append('orcaBroadening', self.orcaBroadening)
-                        }
-
-                        // Add structure file
-                        if(self.$refs.orcaStructureFile.value){
-                            console.log(self.$refs.orcaStructureFile.value)
-                            formData.append('orcaStructureFile', self.structureFile)
-                        } else if (self.$refs.fdmnesStructureFile.value) {
-                            console.log(self.$refs.fdmnesStructureFile.value)
-                            formData.append('fdmnesStructureFile', self.structureFile)
-                        }
-
-                        Backbone.ajax({
-                            url: app.apiurl + '/conexs/submit',
-                            data: formData,
-                            method: 'POST',
-                            // Required to allow split content type between file/data
-                            // Stops AJAX setting it's preferred defaults
-                            contentType: false,
-                            processData: false,
-
-                            success: function(response) {
-                                self.isLoading = false
-                                if(!response.error){
-                                    console.log('got no error in response to job submission')
-                                    app.alert({className: 'message notify', message: "Successfully submitted conexs file contents!"})                                    
-                                } else {
-                                    console.log('error upon job submission')
-                                    app.alert({className: 'Error', message: response.error})
-                                }                                
-                            },
-                            error: function(response) {
-                                self.isLoading = false
-                                app.alert({ title: 'Error', message: response })
-                            },
-                        })
-                    } else {
-                        self.isLoading = false
-                        app.alert({ title: 'Error', message: 'No file provided, selected file is empty, or form elements are invalid.'})
-                    }
-                })
-            },
-
-            addAtom: function(){
-                var newAtom
-                if(this.atom){
-
-                    if(this.form == 'qe') {
-                        let self = this
-                        let exists = false
-                        this.atomData.forEach(function(item, index){
-                            if(item.Atom == self.atom && item.AbsorbingAtom == 'Yes' && self.absorbingAtom || item.Atom == self.atom && item.AbsorbingAtom == 'No' && !self.absorbingAtom){
-                                exists = true
-                            }
-                        })
-                        if(!exists) {
-                            this.ntyp = this.ntyp+1
-                        }
-
-                        this.elements.forEach(function(item, index){
-                            if(item.element == self.atom){
-                                self.electronCount += item.number
-                            }
-                        })
-                    }
-
-                    newAtom = {
-                        ID: this.atomData.length,
-                        Atom: this.atom,
-                        X: this.atomX,
-                        Y: this.atomY,
-                        Z: this.atomZ,
-                        AbsorbingAtom: this.absorbingAtom ? 'Yes' : 'No'
-                    }
-                    this.atomData[this.atomData.length] = newAtom
-
-                    if(this.absorbingAtom)
-                        this.absorbingAtomDisabled = true
-
-                    if(this.structureFile) {
-                        this.structureFile = null
-                        this.$refs.orcaStructureFile.value = ''
-                        this.$refs.fdmnesStructureFile.value = ''
-                    }
-
-                    // Select the next available element or loop back to the first
-                    // Works around problem described below
-                    // QE uses a computed subset of elements
-                    if(this.form == 'qe'){
-                        for(var i = 0; i<this.ppElements.length; i++){
-                            if(this.ppElements[i].element == this.atom){
-                                if(i == this.ppElements.length -1){
-                                    this.atom = 'H'
-                                } else {
-                                    this.atom = this.ppElements[++i].element
-                                }
-                            }
-                        }
-                    } else {
-                        for(var i = 0; i<this.elements.length; i++){
-                            if(this.elements[i].element == this.atom){
-                                if(i == this.elements.length -1){
-                                    this.atom = 'H'
-                                } else {
-                                    this.atom = this.elements[++i].element
-                                }
-                            }
-                        }
-                    }
-
-                    // We want to reset this back to an element, but if it's the same element we just added the table doesn't transition properly
-                    // Need to either debug the table component (somehow) to see why. Above code is a work around
-                    //this.atom = ''
-                    this.atomX = 0
-                    this.atomY = 0
-                    this.atomZ = 0
-                    this.absorbingAtom = false
-                } else {
-                    app.alert({title: 'Error', message: "Invalid atom data!"})
-                }
-
-                if(this.form == 'qe'){
-                    this.nat = this.atomData.length
-                }
-            },
-
-            removeAtom: function(atomID){
-                var atomIndex
-                var atomName
-                var absorbingAtomLocal
-                for(var i = 0; i< this.atomData.length; i++){
-                    if(this.atomData[i].ID == atomID){
-                        atomIndex = i
-                        atomName = this.atomData[i].Atom
-                        absorbingAtomLocal = this.atomData[i].AbsorbingAtom
-                        break
-                    }
-                }
-
-                if(this.atomData[atomIndex].AbsorbingAtom == 'Yes')
-                    this.absorbingAtomDisabled = false
-
-                this.atomData.splice(atomIndex, 1)
-
-                if(this.form == 'qe') {
-                    this.nat = this.atomData.length
-
-                    var exists = false
-                    this.atomData.forEach(function(item, index){
-                        if(item.Atom == atomName && absorbingAtomLocal == 'Yes' && item.AbsorbingAtom == 'Yes' || item.Atom == atomName && absorbingAtomLocal == 'No' && item.AbsorbingAtom == 'No'){
-                            exists = true
-                        }
-                    })
-                    if(!exists) {
-                        this.ntyp = this.ntyp-1
-                    }
-
-                    let self = this
-                    this.elements.forEach(function(item, index){
-                        if(item.element == atomName){
-                            self.electronCount -= item.number
-                        }
-                    })
-                }
-            },
-
-            setStructureFile: function(event){
-                this.structureFile = event.target.files[0]
-            },
-
-            killJob: function(jobID){
-                console.log('kill job pressed for jobId: ' + jobID)
-                this.$refs['job'+jobID].disabled = true
-                
-                let self = this
-                Backbone.ajax({
-                    url: app.apiurl + "/conexs/kill",
-                    data: {
-                        login: app.user,
-                        jobId: jobID
-                    },
-                    method: 'POST',
-                    success: function(response){
-                        console.log('Job successfully killed')
-                        if(self.jobData.length){
-                            self.jobData.forEach(function(item, index){
-                                if(item.jobID == jobID){
-                                    item.jobStatus = 'Killed'
-                                }
-                            })
-                        }
-                    },
-                    error: function(response){
-                        self.$refs['job'+jobID].disabled = false
-                        console.log('failed to kill job')
-                        app.alert({ title: 'Error', message: 'Failed to kill job, please try again later'})
-                    }
-                })
-            }
-        },
-    }
-</script>
-
-<style scoped>
-    label.left {
-        width: 9%;
-        text-align: right;
-    }
-    label.notLeft {
-        width: 5%;
-        margin-left: 30px;
-    }
-    button {
-        width: 150px;
-        height: 30px;
-    }
-    input[type="text"]:focus {
-        width: 50px;
-        background-color: #42b3d569;
-    }
-    input[type="text"] {
-        width: 50px;
-    }
-    li {
-        padding: 5px;
-    }
-    button.active {
-        background-color: #cccccc;
-    }
-</style>
diff --git a/client/src/js/modules/types/conexs/menu.js b/client/src/js/modules/types/conexs/menu.js
deleted file mode 100644
index c546be83c..000000000
--- a/client/src/js/modules/types/conexs/menu.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * The menu specification for conexs pages
- */
-
-define([], function() {
-
-    return {
-        menu: {
-            dc: 'View All Data',
-            visits: 'Visits',
-            contacts: 'Lab Contacts',
-            conexs: 'Conexs Submission',
-            migrate: 'Migrate',
-        },
-
-        extra: {
-
-        },
-
-        admin: {
-
-        },
-    }
-
-})
diff --git a/client/src/js/modules/types/sp/menu.js b/client/src/js/modules/types/sp/menu.js
deleted file mode 100644
index 373330922..000000000
--- a/client/src/js/modules/types/sp/menu.js
+++ /dev/null
@@ -1,21 +0,0 @@
-define([], function() {
-    
-    return {
-        menu: {
-            dc: 'View All Data',
-            visits: 'Visits',
-            cal: 'Calendar',
-            stats: 'Statistics',
-            conexs: 'Conexs Submission'
-        },
-        
-        extra: {
-            //projects: 'Projects',
-        },
-        
-        admin: {
-            faults: { title: 'Fault Reports', icon: 'fa-tasks', permission: 'fault_view' },
-        },
-    }
-    
-})
diff --git a/client/src/js/modules/types/xpdf/samples/views/simplesampleaddpoploader.js b/client/src/js/modules/types/xpdf/samples/views/simplesampleaddpoploader.js
index 968a0dc2b..7f47ec8c2 100644
--- a/client/src/js/modules/types/xpdf/samples/views/simplesampleaddpoploader.js
+++ b/client/src/js/modules/types/xpdf/samples/views/simplesampleaddpoploader.js
@@ -1,33 +1,7 @@
 define(['vue',
-    'veevalidate',
-    'promise',
     'utils/vuewrapper',
     'modules/types/xpdf/samples/views/vue-simplesample.vue',
-    ], function(Vue, VeeValidate, Promise, VueWrapper, SimpleSample) {
-
-    // Promise is not used, but required for IE if we want to use vee-validate
-    Vue.use(VeeValidate)
-
-    VeeValidate.Validator.extend('closeExp', {
-        getMessage: field => field+ ' must have correctly closed brackets',
-        validate: value => {
-            var count = 0
-            for(var i=0;i<value.length;i++){
-                if(value.charAt(i) === '(')
-                    count++
-                else if(value.charAt(i) === ')'){
-                    if(count === 0)
-                        return false
-                    else
-                        count--
-                }
-            }
-            if(count === 0)
-                return true
-            else
-                return false
-        }
-    })
+    ], function(Vue, VueWrapper, SimpleSample) {
 
     return VueWrapper.extend({
         vueView: Vue.extend({
@@ -37,4 +11,4 @@ define(['vue',
             template: '<section class="content"><h1>Add Simple Sample</h1><p class="help">This page allows you to add all sample information for one or more samples in a single transaction</p><simplesample></simplesample></section>',
         })
     })
-})
\ No newline at end of file
+})
diff --git a/client/src/js/modules/types/xpdf/samples/views/vue-simplesample.vue b/client/src/js/modules/types/xpdf/samples/views/vue-simplesample.vue
index 375aaf672..3615211c9 100644
--- a/client/src/js/modules/types/xpdf/samples/views/vue-simplesample.vue
+++ b/client/src/js/modules/types/xpdf/samples/views/vue-simplesample.vue
@@ -1,10 +1,11 @@
 <template>
   <div>
+  <validation-observer ref="observer" v-slot="{ handleSubmit }">
     <form
       id="add_protein"
       method="post"
       :class="{loading: isLoading}"
-      @submit.prevent="onSubmit"
+      @submit.prevent="handleSubmit(onSubmit)"
     >
       <div class="form">
         <input
@@ -64,86 +65,92 @@
 
         <section v-else>
           <ul>
+
             <li>
               <label>Name
                 <span class="small">Name of the sample</span></label>
-              <span class="name"><input
-                v-model="name"
-                v-validate="'required'"
-                type="text"
-                name="name"
-                :class="{ferror: errors.has('name')}"
-                :disabled="proteinid"
-              ></span>
-              <span
-                v-if="errors.has('name')"
-                class="errormessage ferror"
-              >{{ errors.first('name') }}</span>
+              <validation-provider rules="required" name="name" tag="div" v-slot="{ errors }">
+                <span class="name"><input
+                  v-model="name"
+                  type="text"
+                  name="name"
+                  :class="{ferror: errors.length > 0}"
+                  :disabled="proteinid"
+                ></span>
+                <span
+                  v-if="errors.length > 0"
+                  class="errormessage ferror"
+                >{{ errors[0] }}</span>
+              </validation-provider>
             </li>
 
             <li>
               <label>Acronym
                 <span class="small">Short form name for sample (must be unique!)</span></label>
-              <span class="name"><input
-                v-model="acronym"
-                v-validate="'required'"
-                type="text"
-                name="acronym"
-                :class="{ferror: errors.has('acronym')}"
-              ></span>
-              <span
-                v-if="errors.has('acronym')"
-                class="errormessage ferror"
-              >{{ errors.first('acronym') }}</span>
+              <validation-provider rules="required" name="acronym" tag="div" v-slot="{ errors }">
+                <span class="name"><input
+                  v-model="acronym"
+                  type="text"
+                  name="acronym"
+                  :class="{ferror: errors.length > 0}"
+                ></span>
+                <span
+                  v-if="errors.length > 0"
+                  class="errormessage ferror"
+                >{{ errors[0] }}</span>
+              </validation-provider>
             </li>
 
             <li>
               <label>Composition
                 <span class="small">Chemical formula of the material</span></label>
-              <span class="composition"><input
-                v-model="seq"
-                v-validate="{required: true, closeExp: true, regex:/^[a-zA-Z0-9\(\)\.]*$/ }"
-                type="text"
-                name="seq"
-                :class="{ferror: errors.has('seq')}"
-              ></span>
-              <span
-                v-if="errors.has('seq')"
-                class="errormessage ferror"
-              >{{ errors.first('seq') }}</span>
+              <validation-provider rules="required|closeExp|regex:^[a-zA-Z0-9\(\)\.]*$" name="seq" tag="div" v-slot="{ errors }">
+                <span class="composition"><input
+                  v-model="seq"
+                  type="text"
+                  name="seq"
+                  :class="{ferror: errors.length > 0}"
+                ></span>
+                <span
+                  v-if="errors.length > 0"
+                  class="errormessage ferror"
+                >{{ errors[0] }}</span>
+              </validation-provider>
             </li>
 
             <li>
               <label>Density
                 <span class="small">Crystallographic density of the phase (g cm<span class="super">-3</span>)</span></label>
-              <span><input
-                v-model="density"
-                v-validate="'required|decimal'"
-                type="text"
-                name="density"
-                :class="{ferror: errors.has('density')}"
-              ></span>
-              <span
-                v-if="errors.has('density')"
-                class="errormessage ferror"
-              >{{ errors.first('density') }}</span>
+              <validation-provider rules="required|decimal" name="density" tag="div" v-slot="{ errors }">
+                <span><input
+                  v-model="density"
+                  type="text"
+                  name="density"
+                  :class="{ferror: errors.length > 0}"
+                ></span>
+                <span
+                  v-if="errors.length > 0"
+                  class="errormessage ferror"
+                >{{ errors[0] }}</span>
+              </validation-provider>
             </li>
 
             <li>
               <label>Packing Fraction
                 <span class="small">Must be between 0 and 1</span>
               </label>
-              <span><input
-                v-model="fraction"
-                v-validate="'required|min_value:0|max_value:1'"
-                type="text"
-                name="fraction"
-                :class="{ferror: errors.has('fraction')}"
-              ></span>
-              <span
-                v-if="errors.has('fraction')"
-                class="errormessage ferror"
-              >{{ errors.first('fraction') }}</span>
+              <validation-provider rules="required|min_value:0|max_value:1" name="fraction" tag="div" v-slot="{ errors }">
+                <span><input
+                  v-model="fraction"
+                  type="text"
+                  name="fraction"
+                  :class="{ferror: errors.length > 0}"
+                ></span>
+                <span
+                  v-if="errors.length > 0"
+                  class="errormessage ferror"
+                >{{ errors[0] }}</span>
+              </validation-provider>
             </li>
 
             <li>
@@ -159,21 +166,23 @@
         </section>
 
         <ul>
+
           <li>
             <label>Exposure Time
               <span class="small">Must be a non negative integer</span>
             </label>
-            <span><input
-              v-model="expTime"
-              v-validate="'required|min_value:0'"
-              type="text"
-              name="expTime"
-              :class="{ferror: errors.has('expTime')}"
-            ></span>
-            <span
-              v-if="errors.has('expTime')"
-              class="errormessage ferror"
-            >{{ errors.first('expTime') }}</span>
+            <validation-provider rules="required|min_value:0" name="expTime" tag="div" v-slot="{ errors }">
+              <span><input
+                v-model="expTime"
+                type="text"
+                name="expTime"
+                :class="{ferror: errors.length > 0}"
+              ></span>
+              <span
+                v-if="errors.length > 0"
+                class="errormessage ferror"
+              >{{ errors[0] }}</span>
+            </validation-provider>
           </li>
 
           <li>
@@ -188,31 +197,34 @@
             <label>Capillary
               <span class="small">The capillary or container that should be associated with this sample</span>
             </label>
-            <select
-              id="containerSelect"
-              v-model="type"
-              v-validate="'required'"
-              name="type"
-              style="width: 400px"
-              :disabled="containerless"
-              @change="getCapillaryInfo('density')"
-            >
-              <option
-                v-if="!hasExistingCapillaries"
-                disabled
-                value=""
+            <validation-provider rules="required" name="type" tag="div" v-slot="{ errors }">
+              <select
+                id="containerSelect"
+                v-model="type"
+                name="type"
+                style="width: 400px"
+                :disabled="containerless"
+                :class="{ferror: errors.length > 0}"
+                @change="getCapillaryInfo('density')"
               >
-                Container*
-              </option>
-              <option v-for="container in containers">
-                {{ container }}
-              </option>
-            </select>
-            <span
-              v-if="errors.has('type')"
-              class="errormessage ferror"
-            >{{ errors.first('type') }}</span>
+                <option
+                  v-if="!hasExistingCapillaries"
+                  disabled
+                  value=""
+                >
+                  Container*
+                </option>
+                <option v-for="container in containers">
+                  {{ container }}
+                </option>
+              </select>
+              <span
+                v-if="errors.length > 0"
+                class="errormessage ferror"
+              >{{ errors[0] }}</span>
+            </validation-provider>
           </li>
+
         </ul>
 
         <button
@@ -260,6 +272,7 @@
         </button>
       </div>
     </form>
+  </validation-observer>
   </div>
 </template>
 
@@ -461,27 +474,22 @@
                 this.containers = this.containers.concat(existingSamplesArray)
             },
             onSubmit: function(e){
-                e.preventDefault()
-                let self = this
-                
-                this.$validator.validateAll().then(function(result){
-                    if(self.fileUpload){
-                        if(result && self.fileValid && self.csvErrors.length === 0 && self.defaultDewarId){
-                            self.prepareFromFile()
-                        } else {
-                            console.log('File submission prevented, validation failed');
-                            app.alert({ title: 'Error', message: 'File validation failed, or default dewar for this visit could not be created' })
-                        }
+
+                if(this.fileUpload){
+                    if(this.fileValid && this.csvErrors.length === 0 && this.defaultDewarId){
+                        this.prepareFromFile()
                     } else {
-                        if(result && self.defaultDewarId){
-                            self.prepareSimpleSample()
-                        } else {
-                            console.log('Form submission prevented, validation failed');
-                            app.alert({ title: 'Error', message: 'Form validation failed, or default dewar for this visit could not be created' })
-                        }
+                        console.log('File submission prevented, validation failed');
+                        app.alert({ title: 'Error', message: 'File validation failed, or default dewar for this visit could not be created' })
                     }
-                    
-                })
+                } else {
+                    if(this.defaultDewarId){
+                        this.prepareSimpleSample()
+                    } else {
+                        console.log('Form submission prevented, validation failed');
+                        app.alert({ title: 'Error', message: 'Form validation failed, or default dewar for this visit could not be created' })
+                    }
+                }
             },
 
             prepareFromFile: function(){
diff --git a/client/src/js/templates/vue/feedback/feedback.html b/client/src/js/templates/vue/feedback/feedback.html
index 7d6f3e8e4..1c58e8707 100644
--- a/client/src/js/templates/vue/feedback/feedback.html
+++ b/client/src/js/templates/vue/feedback/feedback.html
@@ -3,34 +3,37 @@ <h1>Send Feedback</h1>
 
     <p class="help">This page is for sending feedback about the ISPyB web interface to the developers, not for your beamtime! Please use UAS to report feedback for your visits</p>
 
-    <form novalidate v-bind:class="{loading: isLoading}">
+    <validation-observer ref="formObserver" v-slot="{ handleSubmit }">
+
+    <form novalidate v-bind:class="{loading: isLoading}" @submit.prevent="handleSubmit(onSubmit)">
 
     <div class="form">
         <ul>
 
-            <li>
+            <validation-provider rules="required" name="name" tag="li" v-slot="{ errors }">
                 <label>Your Name</label>
-                <input type="text" name="name" v-bind:class="{ferror: errors.has('name')}" v-validate="'required'" v-model="name"/>
-                <span v-if="errors.has('name')" class="errormesage ferror">{{ errors.first('name') }}</span>
-            </li>
+                <input type="text" name="name" v-bind:class="{ferror: errors.length > 0}" v-model="name"/>
+                <span v-if="errors.length > 0" class="errormesage ferror">{{ errors[0] }}</span>
+            </validation-provider>
 
-            <li>
+            <validation-provider rules="required|email" name="email" tag="li" v-slot="{ errors }">
                 <label>Your Email Address</label>
-                <input name="email" type="email"  v-bind:class="{ferror: errors.has('email')}" v-validate="'required|email'" v-model="email"/>
-                <span v-if="errors.has('email')" class="errormesage ferror">{{ errors.first('email') }}</span>
-            </li>
+                <input name="email" type="email" v-bind:class="{ferror: errors.length > 0}" v-model="email"/>
+                <span v-if="errors.length > 0" class="errormesage ferror">{{ errors[0] }}</span>
+            </validation-provider>
 
-            <li>
+            <validation-provider rules="required" name="feedback" tag="li" v-slot="{ errors }">
                 <label>Feedback</label>
-                <textarea name="feedback"  v-bind:class="{ferror: errors.has('feedback')}" v-validate="'required'" v-model="feedback"></textarea>
-                <span v-if="errors.has('feedback')" class="errormesage ferror">{{ errors.first('feedback') }}</span>
-            </li>
+                <textarea name="feedback" v-bind:class="{ferror: errors.length > 0}" v-model="feedback"></textarea>
+                <span v-if="errors.length > 0" class="errormesage ferror">{{ errors[0] }}</span>
+            </validation-provider>
 
         </ul>
 
-        <button name="submit" value="1" type="submit" class="button submit" v-on:click.prevent="onSubmit">Send Feedback</button>
+        <button name="submit" value="1" type="submit" class="button submit">Send Feedback</button>
 
     </div>
 
     </form>
-</section>
\ No newline at end of file
+    </validation-observer>
+</section>
diff --git a/client/src/js/templates/vue/types/em/process/scipion.html b/client/src/js/templates/vue/types/em/process/scipion.html
deleted file mode 100644
index af13a698c..000000000
--- a/client/src/js/templates/vue/types/em/process/scipion.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<section class="content">
-    <h1>Scipion Processing</h1>
-
-    <p class="help">This page is for submitting processing jobs to Scipion.</p>
-
-    <p v-if="isVisitLoaded && !isVisitActive" class="message alert">
-        This session ended at {{ visitEndDateAsString }}. It may no longer be submitted for processing. <a class="button refresh" v-on:click.prevent="onContinue">OK</a>
-    </p>
-
-    <form novalidate v-bind:class="{loading: showSpinner}">
-        <div class="form">
-            <ul>
-                <li>
-                    <label>Dose per frame (e<span class="super">-</span>/Å<span class="super">2</span>)</label>
-                    <input type="text" name="dosePerFrame" v-bind:class="{ferror: errors.has('dosePerFrame')}"
-                           v-validate="'required|min_value:0.001|max_value:10'" v-model="dosePerFrame"
-                           :readonly="isFormReadOnly"/>
-                    <span v-if="errors.has('dosePerFrame')" class="errormessage ferror">{{ errors.first('dosePerFrame') }}</span>
-                </li>
-
-                <li>
-                    <label>Number of frames</label>
-                    <input type="text" name="numberOfIndividualFrames"
-                           v-bind:class="{ferror: errors.has('numberOfIndividualFrames')}"
-                           v-validate="'required|min_value:1|max_value:500'" v-model="numberOfIndividualFrames"
-                           :readonly="isFormReadOnly">
-                    <span v-if="errors.has('numberOfIndividualFrames')" class="errormessage ferror">{{ errors.first('numberOfIndividualFrames') }}</span>
-                </li>
-
-                <li>
-                    <label>Patch X</label>
-                    <input type="text" name="patchX" v-bind:class="{ferror: errors.has('patchX')}"
-                           v-validate="'required|min_value:1'" v-model="patchX" :readonly="isFormReadOnly">
-                    <span v-if="errors.has('patchX')"
-                          class="errormessage ferror">{{ errors.first('patchX') }}</span>
-                </li>
-
-                <li>
-                    <label>Patch Y</label>
-                    <input type="text" name="patchY" v-bind:class="{ferror: errors.has('patchY')}"
-                           v-validate="'required|min_value:1'" v-model="patchY" :readonly="isFormReadOnly">
-                    <span v-if="errors.has('patchY')"
-                          class="errormessage ferror">{{ errors.first('patchY') }}</span>
-                </li>
-
-                <li>
-                    <label>Pixel Size (Å/pixel)</label>
-                    <input type="text" name="samplingRate" v-bind:class="{ferror: errors.has('samplingRate')}"
-                           v-validate="'required|min_value:0.1|max_value:10'" v-model="samplingRate"
-                           :readonly="isFormReadOnly">
-                    <span v-if="errors.has('samplingRate')" class="errormessage ferror">{{ errors.first('samplingRate') }}</span>
-                </li>
-
-                <li>
-                    <label>Particle Radius (Å)</label>
-                    <input type="text" name="particleSize" v-bind:class="{ferror: errors.has('particleSize')}"
-                           v-validate="'required|min_value:1|max_value:1000'" v-model="particleSize"
-                           :readonly="isFormReadOnly">
-                    <span v-if="errors.has('particleSize')" class="errormessage ferror">{{ errors.first('particleSize') }}</span>
-                </li>
-
-                <li>
-                    <label>Gautomatch Min Distance (Å)</label>
-                    <input type="text" name="minDist" v-bind:class="{ferror: errors.has('minDist')}"
-                           v-validate="'required|min_value:1|max_value:1000'" v-model="minDist"
-                           :readonly="isFormReadOnly">
-                    <span v-if="errors.has('minDist')"
-                          class="errormessage ferror">{{ errors.first('minDist') }}</span>
-                </li>
-
-                <li>
-                    <label>CTF Window Size (pixel)</label>
-                    <input type="text" name="windowSize" v-bind:class="{ferror: errors.has('windowSize')}"
-                           v-validate="'required|min_value:128|max_value:2048'" v-model="windowSize"
-                           :readonly="isFormReadOnly">
-                    <span v-if="errors.has('windowSize')"
-                          class="errormessage ferror">{{ errors.first('windowSize') }}</span>
-                </li>
-
-                <li>
-                    <label>Phase Plate Used</label>
-                    <input type="checkbox" name="findPhaseShift" value="true" v-model="findPhaseShift"
-                           :disabled="isFormReadOnly">
-                </li>
-            </ul>
-
-            <button name="start" type="submit" class="button submit" v-on:click.prevent="onSubmit" v-if="!isJobQueued" :disabled="isFormReadOnly">
-                Start Processing
-            </button>
-
-            <button name="cancel" type="submit" class="button submit" v-on:click.prevent="onContinue" v-if="!isJobQueued" :disabled="isFormReadOnly">
-                Cancel
-            </button>
-
-            <button name="start" type="submit" class="button submit" v-on:click.prevent="onContinue" v-if="isJobQueued">
-                Monitor
-            </button>
-        </div>
-    </form>
-</section>