diff --git a/assets/src/bundles/vault/vault-create-tasks.js b/assets/src/bundles/vault/vault-create-tasks.js
index 38fbf1c3..35f55961 100644
--- a/assets/src/bundles/vault/vault-create-tasks.js
+++ b/assets/src/bundles/vault/vault-create-tasks.js
@@ -1,152 +1,171 @@
 /**
- * Copyright (C) 2018-2019  The Software Heritage developers
+ * Copyright (C) 2018-2022  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 import * as EmailValidator from 'email-validator';
 
 import {handleFetchError, csrfPost, htmlAlert} from 'utils/functions';
 
 const alertStyle = {
   'position': 'fixed',
   'left': '1rem',
   'bottom': '1rem',
   'z-index': '100000'
 };
 
+function vaultModalHandleEnterKey(event) {
+  if (event.keyCode === 13) {
+    event.preventDefault();
+    $('.modal.show').last().find('button:contains("Ok")').trigger('click');
+  }
+}
+
 export async function vaultRequest(objectType, swhid) {
   let vaultUrl;
   if (objectType === 'directory') {
     vaultUrl = Urls.api_1_vault_cook_flat(swhid);
   } else {
     vaultUrl = Urls.api_1_vault_cook_git_bare(swhid);
   }
   // check if object has already been cooked
   const response = await fetch(vaultUrl);
   const data = await response.json();
 
   // object needs to be cooked
   if (data.exception === 'NotFoundExc' || data.status === 'failed') {
     // if last cooking has failed, remove previous task info from localStorage
     // in order to force the recooking of the object
     swh.vault.removeCookingTaskInfo([swhid]);
-    $(`#vault-cook-${objectType}-modal`).modal('show');
+    const vaultModalId = `#vault-cook-${objectType}-modal`;
+    $(vaultModalId).modal('show');
+    $('body').on('keyup', vaultModalId, vaultModalHandleEnterKey);
     // object has been cooked and should be in the vault cache,
     // it will be asked to cook it again if it is not
   } else if (data.status === 'done') {
-    $(`#vault-fetch-${objectType}-modal`).modal('show');
+    const vaultModalId = `#vault-fetch-${objectType}-modal`;
+    $(vaultModalId).modal('show');
+    $('body').on('keyup', vaultModalId, vaultModalHandleEnterKey);
   } else {
     const cookingServiceDownAlert =
           $(htmlAlert('danger',
                       'Archive cooking service is currently experiencing issues.<br/>' +
                       'Please try again later.',
                       true));
     cookingServiceDownAlert.css(alertStyle);
     $('body').append(cookingServiceDownAlert);
   }
 }
 
 async function addVaultCookingTask(objectType, cookingTask) {
 
   const swhidsContext = swh.webapp.getSwhIdsContext();
   cookingTask.origin = swhidsContext[objectType].context.origin;
   cookingTask.path = swhidsContext[objectType].context.path;
   cookingTask.browse_url = swhidsContext[objectType].swhid_with_context_url;
   if (!cookingTask.browse_url) {
     cookingTask.browse_url = swhidsContext[objectType].swhid_url;
   }
 
   let vaultCookingTasks = JSON.parse(localStorage.getItem('swh-vault-cooking-tasks'));
   if (!vaultCookingTasks) {
     vaultCookingTasks = [];
   }
   if (vaultCookingTasks.find(val => {
     return val.bundle_type === cookingTask.bundle_type &&
             val.swhid === cookingTask.swhid;
   }) === undefined) {
     let cookingUrl;
     if (cookingTask.bundle_type === 'flat') {
       cookingUrl = Urls.api_1_vault_cook_flat(cookingTask.swhid);
     } else {
       cookingUrl = Urls.api_1_vault_cook_git_bare(cookingTask.swhid);
     }
     if (cookingTask.email) {
       cookingUrl += '?email=' + encodeURIComponent(cookingTask.email);
     }
 
     try {
       const response = await csrfPost(cookingUrl);
       handleFetchError(response);
       vaultCookingTasks.push(cookingTask);
       localStorage.setItem('swh-vault-cooking-tasks', JSON.stringify(vaultCookingTasks));
       $('#vault-cook-directory-modal').modal('hide');
+      $('body').off('keyup', '#vault-cook-directory-modal', vaultModalHandleEnterKey);
       $('#vault-cook-revision-modal').modal('hide');
+      $('body').off('keyup', '#vault-cook-revision-modal', vaultModalHandleEnterKey);
       const cookingTaskCreatedAlert =
           $(htmlAlert('success',
                       'Archive cooking request successfully submitted.<br/>' +
                       `Go to the <a href="${Urls.browse_vault()}">Downloads</a> page ` +
                       'to get the download link once it is ready.',
                       true));
       cookingTaskCreatedAlert.css(alertStyle);
       $('body').append(cookingTaskCreatedAlert);
     } catch (_) {
       $('#vault-cook-directory-modal').modal('hide');
+      $('body').off('keyup', '#vault-cook-directory-modal', vaultModalHandleEnterKey);
       $('#vault-cook-revision-modal').modal('hide');
+      $('body').off('keyup', '#vault-cook-revision-modal', vaultModalHandleEnterKey);
       const cookingTaskFailedAlert =
           $(htmlAlert('danger',
                       'Archive cooking request submission failed.',
                       true));
       cookingTaskFailedAlert.css(alertStyle);
       $('body').append(cookingTaskFailedAlert);
     }
   }
 }
 
 export function cookDirectoryArchive(swhid) {
   const email = $('#swh-vault-directory-email').val().trim();
   if (!email || EmailValidator.validate(email)) {
     const cookingTask = {
       'bundle_type': 'flat',
       'swhid': swhid,
       'email': email,
       'status': 'new'
     };
     addVaultCookingTask('directory', cookingTask);
 
   } else {
     $('#invalid-email-modal').modal('show');
+    $('body').on('keyup', '#invalid-email-modal', vaultModalHandleEnterKey);
   }
 }
 
 export async function fetchDirectoryArchive(directorySwhid) {
   $('#vault-fetch-directory-modal').modal('hide');
+  $('body').off('keyup', '#vault-cook-revision-modal', vaultModalHandleEnterKey);
   const vaultUrl = Urls.api_1_vault_cook_flat(directorySwhid);
   const response = await fetch(vaultUrl);
   const data = await response.json();
   swh.vault.fetchCookedObject(data.fetch_url);
 }
 
 export function cookRevisionArchive(revisionId) {
   const email = $('#swh-vault-revision-email').val().trim();
   if (!email || EmailValidator.validate(email)) {
     const cookingTask = {
       'bundle_type': 'git_bare',
       'swhid': revisionId,
       'email': email,
       'status': 'new'
     };
     addVaultCookingTask('revision', cookingTask);
   } else {
     $('#invalid-email-modal').modal('show');
+    $('body').on('keyup', '#invalid-email-modal', vaultModalHandleEnterKey);
   }
 }
 
 export async function fetchRevisionArchive(revisionSwhid) {
-  $('#vault-fetch-directory-modal').modal('hide');
+  $('#vault-fetch-revision-modal').modal('hide');
+  $('body').off('keyup', '#vault-fetch-revision-modal', vaultModalHandleEnterKey);
   const vaultUrl = Urls.api_1_vault_cook_git_bare(revisionSwhid);
   const response = await fetch(vaultUrl);
   const data = await response.json();
   swh.vault.fetchCookedObject(data.fetch_url);
 }
diff --git a/assets/src/bundles/webapp/webapp-utils.js b/assets/src/bundles/webapp/webapp-utils.js
index 5481088d..715f8a82 100644
--- a/assets/src/bundles/webapp/webapp-utils.js
+++ b/assets/src/bundles/webapp/webapp-utils.js
@@ -1,402 +1,404 @@
 /**
- * Copyright (C) 2018-2021  The Software Heritage developers
+ * Copyright (C) 2018-2022  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 import objectFitImages from 'object-fit-images';
 import {selectText} from 'utils/functions';
 import {BREAKPOINT_MD} from 'utils/constants';
 
 let collapseSidebar = false;
 const previousSidebarState = localStorage.getItem('remember.lte.pushmenu');
 if (previousSidebarState !== undefined) {
   collapseSidebar = previousSidebarState === 'sidebar-collapse';
 }
 
 $(document).on('DOMContentLoaded', () => {
   // set state to collapsed on smaller devices
   if ($(window).width() < BREAKPOINT_MD) {
     collapseSidebar = true;
   }
 
   // restore previous sidebar state (collapsed/expanded)
   if (collapseSidebar) {
     // hack to avoid animated transition for collapsing sidebar
     // when loading a page
     const sidebarTransition = $('.main-sidebar, .main-sidebar:before').css('transition');
     const sidebarEltsTransition = $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition');
     $('.main-sidebar, .main-sidebar:before').css('transition', 'none');
     $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', 'none');
     $('body').addClass('sidebar-collapse');
     $('.swh-words-logo-swh').css('visibility', 'visible');
     // restore transitions for user navigation
     setTimeout(() => {
       $('.main-sidebar, .main-sidebar:before').css('transition', sidebarTransition);
       $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', sidebarEltsTransition);
     });
   }
 });
 
 $(document).on('collapsed.lte.pushmenu', event => {
   if ($('body').width() >= BREAKPOINT_MD) {
     $('.swh-words-logo-swh').css('visibility', 'visible');
   }
 });
 
 $(document).on('shown.lte.pushmenu', event => {
   $('.swh-words-logo-swh').css('visibility', 'hidden');
 });
 
 function ensureNoFooterOverflow() {
   $('body').css('padding-bottom', $('footer').outerHeight() + 'px');
 }
 
 $(document).ready(() => {
   // redirect to last browse page if any when clicking on the 'Browse' entry
   // in the sidebar
   $(`.swh-browse-link`).click(event => {
     const lastBrowsePage = sessionStorage.getItem('last-browse-page');
     if (lastBrowsePage) {
       event.preventDefault();
       window.location = lastBrowsePage;
     }
   });
 
   const mainSideBar = $('.main-sidebar');
 
   function updateSidebarState() {
     const body = $('body');
     if (body.hasClass('sidebar-collapse') &&
         !mainSideBar.hasClass('swh-sidebar-collapsed')) {
       mainSideBar.removeClass('swh-sidebar-expanded');
       mainSideBar.addClass('swh-sidebar-collapsed');
       $('.swh-words-logo-swh').css('visibility', 'visible');
     } else if (!body.hasClass('sidebar-collapse') &&
                !mainSideBar.hasClass('swh-sidebar-expanded')) {
       mainSideBar.removeClass('swh-sidebar-collapsed');
       mainSideBar.addClass('swh-sidebar-expanded');
       $('.swh-words-logo-swh').css('visibility', 'hidden');
     }
     // ensure correct sidebar state when loading a page
     if (body.hasClass('hold-transition')) {
       setTimeout(() => {
         updateSidebarState();
       });
     }
   }
 
   // set sidebar state after collapse / expand animation
   mainSideBar.on('transitionend', evt => {
     updateSidebarState();
   });
 
   updateSidebarState();
 
   // ensure footer do not overflow main content for mobile devices
   // or after resizing the browser window
   ensureNoFooterOverflow();
   $(window).resize(function() {
     ensureNoFooterOverflow();
     if ($('body').hasClass('sidebar-collapse') && $('body').width() >= BREAKPOINT_MD) {
       $('.swh-words-logo-swh').css('visibility', 'visible');
     }
   });
   // activate css polyfill 'object-fit: contain' in old browsers
   objectFitImages();
 
   // reparent the modals to the top navigation div in order to be able
   // to display them
   $('.swh-browse-top-navigation').append($('.modal'));
 
   let selectedCode = null;
 
   function getCodeOrPreEltUnderPointer(e) {
-    const elts = document.elementsFromPoint(e.clientX, e.clientY);
-    for (const elt of elts) {
-      if (elt.nodeName === 'CODE' || elt.nodeName === 'PRE') {
-        return elt;
+    if (e.clientX && e.clientY) {
+      const elts = document.elementsFromPoint(e.clientX, e.clientY);
+      for (const elt of elts) {
+        if (elt.nodeName === 'CODE' || elt.nodeName === 'PRE') {
+          return elt;
+        }
       }
     }
     return null;
   }
 
   // click handler to set focus on code block for copy
   $(document).click(e => {
     selectedCode = getCodeOrPreEltUnderPointer(e);
   });
 
   function selectCode(event, selectedCode) {
     if (selectedCode) {
       const hljsLnCodeElts = $(selectedCode).find('.hljs-ln-code');
       if (hljsLnCodeElts.length) {
         selectText(hljsLnCodeElts[0], hljsLnCodeElts[hljsLnCodeElts.length - 1]);
       } else {
         selectText(selectedCode.firstChild, selectedCode.lastChild);
       }
       event.preventDefault();
     }
   }
 
   // select the whole text of focused code block when user
   // double clicks or hits Ctrl+A
   $(document).dblclick(e => {
     if ((e.ctrlKey || e.metaKey)) {
       selectCode(e, getCodeOrPreEltUnderPointer(e));
     }
   });
 
   $(document).keydown(e => {
     if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
       selectCode(e, selectedCode);
     }
   });
 
   // show/hide back-to-top button
   let scrollThreshold = 0;
   scrollThreshold += $('.swh-top-bar').height() || 0;
   scrollThreshold += $('.navbar').height() || 0;
   $(window).scroll(() => {
     if ($(window).scrollTop() > scrollThreshold) {
       $('#back-to-top').css('display', 'block');
     } else {
       $('#back-to-top').css('display', 'none');
     }
   });
 
   // navbar search form submission callback
   $('#swh-origins-search-top').submit(event => {
     event.preventDefault();
     if (event.target.checkValidity()) {
       $(event.target).removeClass('was-validated');
       const searchQueryText = $('#swh-origins-search-top-input').val().trim();
       const queryParameters = new URLSearchParams();
       queryParameters.append('q', searchQueryText);
       queryParameters.append('with_visit', true);
       queryParameters.append('with_content', true);
       window.location = `${Urls.browse_search()}?${queryParameters.toString()}`;
     } else {
       $(event.target).addClass('was-validated');
     }
   });
 });
 
 export function initPage(page) {
 
   $(document).ready(() => {
     // set relevant sidebar link to page active
     $(`.swh-${page}-item`).addClass('active');
     $(`.swh-${page}-link`).addClass('active');
 
     // triggered when unloading the current page
     $(window).on('unload', () => {
       // backup current browse page
       if (page === 'browse') {
         sessionStorage.setItem('last-browse-page', window.location);
       }
     });
   });
 }
 
 export function initHomePage() {
   $(document).ready(async() => {
     $('.swh-coverage-list').iFrameResize({heightCalculationMethod: 'taggedElement'});
     const response = await fetch(Urls.stat_counters());
     const data = await response.json();
 
     if (data.stat_counters && !$.isEmptyObject(data.stat_counters)) {
       for (const objectType of ['content', 'revision', 'origin', 'directory', 'person', 'release']) {
         const count = data.stat_counters[objectType];
         if (count !== undefined) {
           $(`#swh-${objectType}-count`).html(count.toLocaleString());
         } else {
           $(`#swh-${objectType}-count`).closest('.swh-counter-container').hide();
         }
       }
     } else {
       $('.swh-counter').html('0');
     }
     if (data.stat_counters_history && !$.isEmptyObject(data.stat_counters_history)) {
       for (const objectType of ['content', 'revision', 'origin']) {
         const history = data.stat_counters_history[objectType];
         if (history) {
           swh.webapp.drawHistoryCounterGraph(`#swh-${objectType}-count-history`, history);
         } else {
           $(`#swh-${objectType}-count-history`).hide();
         }
 
       }
     } else {
       $('.swh-counter-history').hide();
     }
   });
   initPage('home');
 }
 
 export function showModalMessage(title, message) {
   $('#swh-web-modal-message .modal-title').text(title);
   $('#swh-web-modal-message .modal-content p').text(message);
   $('#swh-web-modal-message').modal('show');
 }
 
 export function showModalConfirm(title, message, callback) {
   $('#swh-web-modal-confirm .modal-title').text(title);
   $('#swh-web-modal-confirm .modal-content p').text(message);
   $('#swh-web-modal-confirm #swh-web-modal-confirm-ok-btn').bind('click', () => {
     callback();
     $('#swh-web-modal-confirm').modal('hide');
     $('#swh-web-modal-confirm #swh-web-modal-confirm-ok-btn').unbind('click');
   });
   $('#swh-web-modal-confirm').modal('show');
 }
 
 export function showModalHtml(title, html, width = '500px') {
   $('#swh-web-modal-html .modal-title').text(title);
   $('#swh-web-modal-html .modal-body').html(html);
   $('#swh-web-modal-html .modal-dialog').css('max-width', width);
   $('#swh-web-modal-html .modal-dialog').css('width', width);
   $('#swh-web-modal-html').modal('show');
 }
 
 export function addJumpToPagePopoverToDataTable(dataTableElt) {
   dataTableElt.on('draw.dt', function() {
     $('.paginate_button.disabled').css('cursor', 'pointer');
     $('.paginate_button.disabled').on('click', event => {
       const pageInfo = dataTableElt.page.info();
       let content = '<select class="jump-to-page">';
       for (let i = 1; i <= pageInfo.pages; ++i) {
         let selected = '';
         if (i === pageInfo.page + 1) {
           selected = 'selected';
         }
         content += `<option value="${i}" ${selected}>${i}</option>`;
       }
       content += `</select><span> / ${pageInfo.pages}</span>`;
       $(event.target).popover({
         'title': 'Jump to page',
         'content': content,
         'html': true,
         'placement': 'top',
         'sanitizeFn': swh.webapp.filterXSS
       });
       $(event.target).popover('show');
       $('.jump-to-page').on('change', function() {
         $('.paginate_button.disabled').popover('hide');
         const pageNumber = parseInt($(this).val()) - 1;
         dataTableElt.page(pageNumber).draw('page');
       });
     });
   });
 
   dataTableElt.on('preXhr.dt', () => {
     $('.paginate_button.disabled').popover('hide');
   });
 }
 
 let swhObjectIcons;
 
 export function setSwhObjectIcons(icons) {
   swhObjectIcons = icons;
 }
 
 export function getSwhObjectIcon(swhObjectType) {
   return swhObjectIcons[swhObjectType];
 }
 
 let browsedSwhObjectMetadata = {};
 
 export function setBrowsedSwhObjectMetadata(metadata) {
   browsedSwhObjectMetadata = metadata;
 }
 
 export function getBrowsedSwhObjectMetadata() {
   return browsedSwhObjectMetadata;
 }
 
 // This will contain a mapping between an archived object type
 // and its related SWHID metadata for each object reachable from
 // the current browse view.
 // SWHID metadata contain the following keys:
 //   * object_type: type of archived object
 //   * object_id: sha1 object identifier
 //   * swhid: SWHID without contextual info
 //   * swhid_url: URL to resolve SWHID without contextual info
 //   * context: object describing SWHID context
 //   * swhid_with_context: SWHID with contextual info
 //   * swhid_with_context_url: URL to resolve SWHID with contextual info
 let swhidsContext_ = {};
 
 export function setSwhIdsContext(swhidsContext) {
   swhidsContext_ = {};
   for (const swhidContext of swhidsContext) {
     swhidsContext_[swhidContext.object_type] = swhidContext;
   }
 }
 
 export function getSwhIdsContext() {
   return swhidsContext_;
 }
 
 function setFullWidth(fullWidth) {
   if (fullWidth) {
     $('#swh-web-content').removeClass('container');
     $('#swh-web-content').addClass('container-fluid');
   } else {
     $('#swh-web-content').removeClass('container-fluid');
     $('#swh-web-content').addClass('container');
   }
   localStorage.setItem('swh-web-full-width', JSON.stringify(fullWidth));
   $('#swh-full-width-switch').prop('checked', fullWidth);
 }
 
 export function fullWidthToggled(event) {
   setFullWidth($(event.target).prop('checked'));
 }
 
 export function setContainerFullWidth() {
   const previousFullWidthState = JSON.parse(localStorage.getItem('swh-web-full-width'));
   if (previousFullWidthState !== null) {
     setFullWidth(previousFullWidthState);
   }
 }
 
 function coreSWHIDIsLowerCase(swhid) {
   const qualifiersPos = swhid.indexOf(';');
   let coreSWHID = swhid;
   if (qualifiersPos !== -1) {
     coreSWHID = swhid.slice(0, qualifiersPos);
   }
   return coreSWHID.toLowerCase() === coreSWHID;
 }
 
 export async function validateSWHIDInput(swhidInputElt) {
   const swhidInput = swhidInputElt.value.trim();
   let customValidity = '';
   if (swhidInput.toLowerCase().startsWith('swh:')) {
     if (coreSWHIDIsLowerCase(swhidInput)) {
       const resolveSWHIDUrl = Urls.api_1_resolve_swhid(swhidInput);
       const response = await fetch(resolveSWHIDUrl);
       const responseData = await response.json();
       if (responseData.hasOwnProperty('exception')) {
         customValidity = responseData.reason;
       }
     } else {
       const qualifiersPos = swhidInput.indexOf(';');
       if (qualifiersPos === -1) {
         customValidity = 'Invalid SWHID: all characters must be in lowercase. ';
         customValidity += `Valid SWHID is ${swhidInput.toLowerCase()}`;
       } else {
         customValidity = 'Invalid SWHID: the core part must be in lowercase. ';
         const coreSWHID = swhidInput.slice(0, qualifiersPos);
         customValidity += `Valid SWHID is ${swhidInput.replace(coreSWHID, coreSWHID.toLowerCase())}`;
       }
     }
   }
   swhidInputElt.setCustomValidity(customValidity);
   $(swhidInputElt).siblings('.invalid-feedback').text(customValidity);
 }
 
 export function isUserLoggedIn() {
   return JSON.parse($('#swh_user_logged_in').text());
 }
diff --git a/cypress/integration/vault.spec.js b/cypress/integration/vault.spec.js
index e950cd45..9c98efff 100644
--- a/cypress/integration/vault.spec.js
+++ b/cypress/integration/vault.spec.js
@@ -1,581 +1,580 @@
 /**
- * Copyright (C) 2019-2021  The Software Heritage developers
+ * Copyright (C) 2019-2022  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 const progressbarColors = {
   'new': 'rgba(128, 128, 128, 0.5)',
   'pending': 'rgba(0, 0, 255, 0.5)',
   'done': 'rgb(92, 184, 92)'
 };
 
 function checkVaultCookingTask(objectType) {
   cy.contains('button', 'Download')
     .click();
 
   cy.contains('.dropdown-item', objectType)
     .click();
 
   cy.wait('@checkVaultCookingTask');
 }
 
 function getVaultItemList() {
   return JSON.parse(window.localStorage.getItem('swh-vault-cooking-tasks'));
 }
 
 function updateVaultItemList(vaultItems) {
   window.localStorage.setItem('swh-vault-cooking-tasks', JSON.stringify(vaultItems));
 }
 
 // Mocks API response : /api/1/vault/(:bundleType)/(:swhid)
 // bundleType : {'flat', 'git_bare'}
 function genVaultCookingResponse(bundleType, swhid, status, message, fetchUrl) {
   return {
     'bundle_type': bundleType,
     'id': 1,
     'progress_message': message,
     'status': status,
     'swhid': swhid,
     'fetch_url': fetchUrl
   };
 };
 
 // Tests progressbar color, status
 // And status in localStorage
 function testStatus(taskId, color, statusMsg, status) {
   cy.get(`.swh-vault-table #vault-task-${CSS.escape(taskId)}`)
     .should('be.visible')
     .find('.progress-bar')
     .should('be.visible')
     .and('have.css', 'background-color', color)
     .and('contain', statusMsg)
     .then(() => {
       // Vault item with object_id as taskId should exist in localStorage
       const currentVaultItems = getVaultItemList();
       const vaultItem = currentVaultItems.find(obj => obj.swhid === taskId);
 
       assert.isNotNull(vaultItem);
       assert.strictEqual(vaultItem.status, status);
     });
 }
 
 describe('Vault Cooking User Interface Tests', function() {
 
   before(function() {
     const dirInfo = this.origin[0].directory[0];
     this.directory = `swh:1:dir:${dirInfo.id}`;
     this.directoryUrl = this.Urls.browse_origin_directory() +
       `?origin_url=${this.origin[0].url}&path=${dirInfo.path}`;
     this.vaultDirectoryUrl = this.Urls.api_1_vault_cook_flat(this.directory);
     this.vaultFetchDirectoryUrl = this.Urls.api_1_vault_fetch_flat(this.directory);
 
     this.revisionId = this.origin[1].revisions[0];
     this.revision = `swh:1:rev:${this.revisionId}`;
     this.revisionUrl = this.Urls.browse_revision(this.revisionId);
     this.vaultRevisionUrl = this.Urls.api_1_vault_cook_git_bare(this.revision);
     this.vaultFetchRevisionUrl = this.Urls.api_1_vault_fetch_git_bare(this.revision);
 
     const release = this.origin[1].release;
     this.releaseUrl = this.Urls.browse_release(release.id) + `?origin_url=${this.origin[1].url}`;
     this.vaultReleaseDirectoryUrl = this.Urls.api_1_vault_cook_flat(`swh:1:dir:${release.directory}`);
   });
 
   beforeEach(function() {
     // For some reason, this gets reset if we define it in the before() hook,
     // so we need to define it here
     this.vaultItems = [
       {
         'bundle_type': 'git_bare',
         'swhid': this.revision,
         'email': '',
         'status': 'done',
         'fetch_url': `/api/1/vault/git-bare/${this.revision}/raw/`,
         'progress_message': null
       }
     ];
     this.legacyVaultItems = [
       {
         'object_type': 'revision',
         'object_id': this.revisionId,
         'email': '',
         'status': 'done',
         'fetch_url': `/api/1/vault/revision/${this.revisionId}/gitfast/raw/`,
         'progress_message': null
       }
     ];
 
     this.genVaultDirCookingResponse = (status, message = null) => {
       return genVaultCookingResponse('flat', this.directory, status,
                                      message, this.vaultFetchDirectoryUrl);
     };
 
     this.genVaultRevCookingResponse = (status, message = null) => {
       return genVaultCookingResponse('git_bare', this.revision, status,
                                      message, this.vaultFetchRevisionUrl);
     };
 
   });
 
   it('should report an error when vault service is experiencing issues', function() {
     // Browse a directory
     cy.visit(this.directoryUrl);
 
     // Stub responses when requesting the vault API to simulate
     // an internal server error
     cy.intercept(this.vaultDirectoryUrl, {
       body: {'exception': 'APIError'},
       statusCode: 500
     }).as('checkVaultCookingTask');
 
     cy.contains('button', 'Download')
       .click();
 
     // Check error alert is displayed
     cy.get('.alert-danger')
     .should('be.visible')
     .should('contain', 'Archive cooking service is currently experiencing issues.');
   });
 
   it('should report an error when a cooking task creation failed', function() {
 
     // Browse a directory
     cy.visit(this.directoryUrl);
 
     // Stub responses when requesting the vault API to simulate
     // a task can not be created
     cy.intercept('GET', this.vaultDirectoryUrl, {
       body: {'exception': 'NotFoundExc'}
     }).as('checkVaultCookingTask');
 
     cy.intercept('POST', this.vaultDirectoryUrl, {
       body: {'exception': 'ValueError'},
       statusCode: 500
     }).as('createVaultCookingTask');
 
     cy.contains('button', 'Download')
       .click();
 
     // Create a vault cooking task through the GUI
     cy.get('.modal-dialog')
       .contains('button:visible', 'Ok')
       .click();
 
     cy.wait('@createVaultCookingTask');
 
     // Check error alert is displayed
     cy.get('.alert-danger')
       .should('be.visible')
       .should('contain', 'Archive cooking request submission failed.');
   });
 
   it('should display previous cooking tasks', function() {
 
     updateVaultItemList(this.vaultItems);
 
     cy.visit(this.Urls.browse_vault());
 
     cy.contains(`#vault-task-${CSS.escape(this.revision)} button`, 'Download')
       .click();
   });
 
   it('should display and upgrade previous cooking tasks from the legacy format', function() {
     updateVaultItemList(this.legacyVaultItems);
 
     cy.visit(this.Urls.browse_vault());
 
     // Check it is displayed
     cy.contains(`#vault-task-${CSS.escape(this.revision)} button`, 'Download')
       .then(() => {
         // Check the LocalStorage was upgraded
         expect(getVaultItemList()).to.deep.equal(this.vaultItems);
       });
   });
 
   it('should create a directory cooking task and report the success', function() {
 
     // Browse a directory
     cy.visit(this.directoryUrl);
 
     // Stub response to the vault API to simulate archive download
     cy.intercept('GET', this.vaultFetchDirectoryUrl, {
       fixture: `${this.directory.replace(/:/g, '_')}.tar.gz`,
       headers: {
         'Content-disposition': `attachment; filename=${this.directory.replace(/:/g, '_')}.tar.gz`,
         'Content-Type': 'application/gzip'
       }
     }).as('fetchCookedArchive');
 
     // Stub responses when checking vault task status
     const checkVaulResponses = [
       {'exception': 'NotFoundExc'},
       this.genVaultDirCookingResponse('new'),
       this.genVaultDirCookingResponse('pending', 'Processing...'),
       this.genVaultDirCookingResponse('done')
     ];
 
     // trick to override the response of an intercepted request
     // https://github.com/cypress-io/cypress/issues/9302
     cy.intercept('GET', this.vaultDirectoryUrl, req => req.reply(checkVaulResponses.shift()))
       .as('checkVaultCookingTask');
 
     // Stub responses when requesting the vault API to simulate
     // a task has been created
     cy.intercept('POST', this.vaultDirectoryUrl, {
       body: this.genVaultDirCookingResponse('new')
     }).as('createVaultCookingTask');
 
     cy.contains('button', 'Download')
       .click();
 
     cy.window().then(win => {
       const swhIdsContext = win.swh.webapp.getSwhIdsContext();
       const browseDirectoryUrl = swhIdsContext.directory.swhid_with_context_url;
 
       // Create a vault cooking task through the GUI
       cy.get('.modal-dialog')
         .contains('button:visible', 'Ok')
         .click();
 
       cy.wait('@createVaultCookingTask');
 
       // Check success alert is displayed
       cy.get('.alert-success')
         .should('be.visible')
         .should('contain', 'Archive cooking request successfully submitted.');
 
       // Go to Downloads page
       cy.visit(this.Urls.browse_vault());
 
       cy.wait('@checkVaultCookingTask').then(() => {
         testStatus(this.directory, progressbarColors['new'], 'new', 'new');
       });
 
       cy.wait('@checkVaultCookingTask').then(() => {
         testStatus(this.directory, progressbarColors['pending'], 'Processing...', 'pending');
       });
 
       cy.wait('@checkVaultCookingTask').then(() => {
         testStatus(this.directory, progressbarColors['done'], 'done', 'done');
       });
 
       cy.get(`#vault-task-${CSS.escape(this.directory)} .vault-origin a`)
         .should('contain', this.origin[0].url)
         .should('have.attr', 'href', `${this.Urls.browse_origin()}?origin_url=${this.origin[0].url}`);
 
       cy.get(`#vault-task-${CSS.escape(this.directory)} .vault-object-info a`)
         .should('have.text', this.directory)
         .should('have.attr', 'href', browseDirectoryUrl);
 
       cy.get(`#vault-task-${CSS.escape(this.directory)}`)
         .invoke('attr', 'title')
         .should('contain', 'the directory can be extracted');
 
       cy.get(`#vault-task-${CSS.escape(this.directory)} .vault-dl-link button`)
         .click();
 
       cy.wait('@fetchCookedArchive').then((xhr) => {
         assert.isNotNull(xhr.response.body);
       });
     });
   });
 
   it('should create a revision cooking task and report its status', function() {
     cy.adminLogin();
 
     // Browse a revision
     cy.visit(this.revisionUrl);
 
     // Stub response to the vault API indicating to simulate archive download
     cy.intercept({url: this.vaultFetchRevisionUrl}, {
       fixture: `${this.revision.replace(/:/g, '_')}.git.tar`,
       headers: {
         'Content-disposition': `attachment; filename=${this.revision.replace(/:/g, '_')}.git.tar`,
         'Content-Type': 'application/x-tar'
       }
     }).as('fetchCookedArchive');
 
     // Stub responses when checking vault task status
     const checkVaultResponses = [
       {'exception': 'NotFoundExc'},
       this.genVaultRevCookingResponse('new'),
       this.genVaultRevCookingResponse('pending', 'Processing...'),
       this.genVaultRevCookingResponse('done')
     ];
 
     // trick to override the response of an intercepted request
     // https://github.com/cypress-io/cypress/issues/9302
     cy.intercept('GET', this.vaultRevisionUrl, req => req.reply(checkVaultResponses.shift()))
       .as('checkVaultCookingTask');
 
     // Stub responses when requesting the vault API to simulate
     // a task has been created
     cy.intercept('POST', this.vaultRevisionUrl, {
       body: this.genVaultRevCookingResponse('new')
     }).as('createVaultCookingTask');
 
     // Create a vault cooking task through the GUI
     checkVaultCookingTask('as git');
 
     cy.window().then(win => {
       const swhIdsContext = win.swh.webapp.getSwhIdsContext();
       const browseRevisionUrl = swhIdsContext.revision.swhid_url;
 
       // Create a vault cooking task through the GUI
-      cy.get('.modal-dialog')
-        .contains('button:visible', 'Ok')
-        .click();
+      cy.get('.modal.show')
+        .type('{enter}');
 
       cy.wait('@createVaultCookingTask');
 
       // Check success alert is displayed
       cy.get('.alert-success')
         .should('be.visible')
         .should('contain', 'Archive cooking request successfully submitted.');
 
       // Go to Downloads page
       cy.visit(this.Urls.browse_vault());
 
       cy.wait('@checkVaultCookingTask').then(() => {
         testStatus(this.revision, progressbarColors['new'], 'new', 'new');
       });
 
       cy.wait('@checkVaultCookingTask').then(() => {
         testStatus(this.revision, progressbarColors['pending'], 'Processing...', 'pending');
       });
 
       cy.wait('@checkVaultCookingTask').then(() => {
         testStatus(this.revision, progressbarColors['done'], 'done', 'done');
       });
 
       cy.get(`#vault-task-${CSS.escape(this.revision)} .vault-origin`)
         .should('have.text', 'unknown');
 
       cy.get(`#vault-task-${CSS.escape(this.revision)} .vault-object-info a`)
         .should('have.text', this.revision)
         .should('have.attr', 'href', browseRevisionUrl);
 
       cy.get(`#vault-task-${CSS.escape(this.revision)}`)
         .invoke('attr', 'title')
         .should('contain', 'the git repository can be imported');
 
       cy.get(`#vault-task-${CSS.escape(this.revision)} .vault-dl-link button`)
         .click();
 
       cy.wait('@fetchCookedArchive').then((xhr) => {
         assert.isNotNull(xhr.response.body);
       });
     });
   });
 
   it('should create a directory cooking task from the release view', function() {
 
     // Browse a directory
     cy.visit(this.releaseUrl);
 
     // Stub responses when checking vault task status
     const checkVaultResponses = [
       {'exception': 'NotFoundExc'},
       this.genVaultDirCookingResponse('new')
     ];
 
     // trick to override the response of an intercepted request
     // https://github.com/cypress-io/cypress/issues/9302
     cy.intercept('GET', this.vaultReleaseDirectoryUrl, req => req.reply(checkVaultResponses.shift()))
       .as('checkVaultCookingTask');
 
     // Stub responses when requesting the vault API to simulate
     // a task has been created
     cy.intercept('POST', this.vaultReleaseDirectoryUrl, {
       body: this.genVaultDirCookingResponse('new')
     }).as('createVaultCookingTask');
 
     cy.contains('button', 'Download')
       .click();
 
     // Create a vault cooking task through the GUI
     cy.get('.modal-dialog')
         .contains('button:visible', 'Ok')
         .click();
 
     cy.wait('@createVaultCookingTask');
 
     // Check success alert is displayed
     cy.get('.alert-success')
         .should('be.visible')
         .should('contain', 'Archive cooking request successfully submitted.');
   });
 
   it('should create a directory cooking task with an email address', function() {
     // Browse a directory
     cy.visit(this.directoryUrl);
 
     // Stub responses when checking vault task status
     cy.intercept('GET', this.vaultDirectoryUrl, {body: {'exception': 'NotFoundExc'}})
       .as('checkVaultCookingTask');
 
     // Stub responses when requesting the vault API to simulate
     // a task has been created
     cy.intercept('POST', this.vaultDirectoryUrl + '?email=foo%2Bbar%40example.org', {
       body: this.genVaultDirCookingResponse('new')
     }).as('createVaultCookingTask');
 
     // Open vault cook directory modal
     cy.contains('button', 'Download')
       .click();
 
     cy.wait('@checkVaultCookingTask');
 
     // Create a vault cooking task through the GUI and fill email input
     cy.get('#vault-cook-directory-modal input[type="email"]')
       .type('foo+bar@example.org', {force: true});
 
     cy.get('#vault-cook-directory-modal')
       .contains('button:visible', 'Ok')
       .click();
 
     cy.wait('@createVaultCookingTask');
 
   });
 
   it('should offer to recook an archive if no longer available for download', function() {
 
     updateVaultItemList(this.vaultItems);
 
     // Send 404 when fetching vault item
     cy.intercept({url: this.vaultFetchRevisionUrl}, {
       statusCode: 404,
       body: {
         'exception': 'NotFoundExc',
         'reason': `Revision with ID '${this.revision}' not found.`
       },
       headers: {
         'Content-Type': 'json'
       }
     }).as('fetchCookedArchive');
 
     cy.visit(this.Urls.browse_vault())
       .get(`#vault-task-${CSS.escape(this.revision)} .vault-dl-link button`)
       .click();
 
     cy.wait('@fetchCookedArchive').then(() => {
       cy.intercept('POST', this.vaultRevisionUrl, {
         body: this.genVaultRevCookingResponse('new')
       }).as('createVaultCookingTask');
 
       cy.intercept(this.vaultRevisionUrl, {
         body: this.genVaultRevCookingResponse('new')
       }).as('checkVaultCookingTask');
 
       cy.get('#vault-recook-object-modal > .modal-dialog')
         .should('be.visible')
         .contains('button:visible', 'Ok')
         .click();
 
       cy.wait('@checkVaultCookingTask')
         .then(() => {
           testStatus(this.revision, progressbarColors['new'], 'new', 'new');
         });
     });
   });
 
   it('should remove selected vault items', function() {
 
     updateVaultItemList(this.vaultItems);
 
     cy.visit(this.Urls.browse_vault())
       .get(`#vault-task-${CSS.escape(this.revision)}`)
       .find('input[type="checkbox"]')
       .click({force: true});
     cy.contains('button', 'Remove selected tasks')
       .click();
 
     cy.get(`#vault-task-${CSS.escape(this.revision)}`)
       .should('not.exist');
   });
 
   it('should offer to immediately download a directory tarball if already cooked', function() {
 
     // Browse a directory
     cy.visit(this.directoryUrl);
 
     // Stub response to the vault API to simulate archive download
     cy.intercept({url: this.vaultFetchDirectoryUrl}, {
       fixture: `${this.directory.replace(/:/g, '_')}.tar.gz`,
       headers: {
         'Content-disposition': `attachment; filename=${this.directory.replace(/:/g, '_')}.tar.gz`,
         'Content-Type': 'application/gzip'
       }
     }).as('fetchCookedArchive');
 
     // Stub responses when requesting the vault API to simulate
     // the directory tarball has already been cooked
     cy.intercept(this.vaultDirectoryUrl, {
       body: this.genVaultDirCookingResponse('done')
     }).as('checkVaultCookingTask');
 
     // Create a vault cooking task through the GUI
     cy.contains('button', 'Download')
       .click();
 
     // Start archive download through the GUI
     cy.get('.modal-dialog')
       .contains('button:visible', 'Ok')
       .click();
 
     cy.wait('@fetchCookedArchive');
 
   });
 
   it('should offer to immediately download a bare revision git archive if already cooked', function() {
     cy.adminLogin();
     // Browse a directory
     cy.visit(this.revisionUrl);
 
     // Stub response to the vault API to simulate archive download
     cy.intercept({url: this.vaultFetchRevisionUrl}, {
       fixture: `${this.revision.replace(/:/g, '_')}.git.tar`,
       headers: {
         'Content-disposition': `attachment; filename=${this.revision.replace(/:/g, '_')}.git.tar`,
         'Content-Type': 'application/x-tar'
       }
     }).as('fetchCookedArchive');
 
     // Stub responses when requesting the vault API to simulate
     // the directory tarball has already been cooked
     cy.intercept(this.vaultRevisionUrl, {
       body: this.genVaultRevCookingResponse('done')
     }).as('checkVaultCookingTask');
 
     checkVaultCookingTask('as git');
 
     // Start archive download through the GUI
     cy.get('.modal-dialog')
       .contains('button:visible', 'Ok')
       .click();
 
     cy.wait('@fetchCookedArchive');
 
   });
 
   it('should offer to recook an object if previous vault task failed', function() {
 
     cy.visit(this.directoryUrl);
 
     // Stub responses when requesting the vault API to simulate
     // the last cooking of the directory tarball has failed
     cy.intercept(this.vaultDirectoryUrl, {
       body: this.genVaultDirCookingResponse('failed')
     }).as('checkVaultCookingTask');
 
     cy.contains('button', 'Download')
       .click();
 
     // Check that recooking the directory is offered to user
     cy.get('.modal-dialog')
       .contains('button:visible', 'Ok')
       .should('be.visible');
   });
 
 });
diff --git a/swh/web/templates/includes/vault-create-tasks.html b/swh/web/templates/includes/vault-create-tasks.html
index b04544f1..97e1edf5 100644
--- a/swh/web/templates/includes/vault-create-tasks.html
+++ b/swh/web/templates/includes/vault-create-tasks.html
@@ -1,177 +1,177 @@
 {% comment %}
-Copyright (C) 2017-2021  The Software Heritage developers
+Copyright (C) 2017-2022  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 
 {% if vault_cooking %}
   {% if user.is_authenticated  and user.is_staff or "swh.vault.git_bare.ui" in user.get_all_permissions %}
     <div class="btn-group">
       <button class="btn btn-default btn-sm dropdown-toggle swh-vault-download" type="button" data-toggle="dropdown">
         <i class="mdi mdi-download mdi-fw" aria-hidden="true"></i>
         Download
       </button>
       <div class="dropdown-menu swh-vault-menu">
         {% if vault_cooking.directory_context %}
           <button class="dropdown-item" type="button" tabindex="-1" onclick="swh.vault.vaultRequest('directory', '{{ vault_cooking.directory_swhid }}')">
             <i class="{{ swh_object_icons.directory }} mdi-fw" aria-hidden="true"></i>
             as tarball
           </button>
         {% endif %}
         {% if vault_cooking.revision_context %}
           <button class="dropdown-item" type="button" tabindex="-1" onclick="swh.vault.vaultRequest('revision', '{{ vault_cooking.revision_swhid }}')">
             <i class="{{ swh_object_icons.revision }} mdi-fw" aria-hidden="true"></i>
             as git
           </button>
         {% endif %}
       </div>
     </div>
   {% else %}
     <button class="btn btn-default btn-sm swh-vault-download" type="button" onclick="swh.vault.vaultRequest('directory', '{{ vault_cooking.directory_swhid }}')">
       <i class="mdi mdi-download mdi-fw" aria-hidden="true"></i>
       Download
     </button>
   {% endif %}
 
 
   <!-- modals related to the creation of vault cooking tasks -->
   <!-- they will be reparented in the script below in order to be able to display them -->
   <div class="modal fade" id="vault-cook-directory-modal" tabindex="-1" role="dialog" aria-labelledby="vault-cook-directory-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h6 class="modal-title" id="vault-cook-directory-modal-label">Cook and download a directory from the Software Heritage Vault</h6>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <p>
             You have requested the cooking of the directory with identifier <strong>{{ vault_cooking.directory_swhid }}</strong>
             into a standard <code>tar.gz archive</code>.
           </p>
           <p>
             Are you sure you want to continue ?
           </p>
           <form>
             <div class="form-group">
               <label for="email">(Optional) Send download link once it is available to that email address:</label>
               <input type="email" class="form-control" id="swh-vault-directory-email">
             </div>
           </form>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
           <button type="button" class="btn btn-default btn-sm" onclick="swh.vault.cookDirectoryArchive('{{ vault_cooking.directory_swhid }}')">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
   <div class="modal fade" id="vault-fetch-directory-modal" tabindex="-1" role="dialog" aria-labelledby="vault-fetch-directory-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h6 class="modal-title" id="vault-fetch-directory-modal-label">Download a directory from the Software Heritage Vault</h6>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <p>
             You have requested the download of the directory with identifier <strong>{{ vault_cooking.directory_swhid }}</strong>
             as a standard <code>tar.gz archive</code>.
           </p>
           <p>
             Are you sure you want to continue ?
           </p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
           <button type="button" class="btn btn-default btn-sm" onclick="swh.vault.fetchDirectoryArchive('{{ vault_cooking.directory_swhid }}')">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
   <div class="modal fade" id="vault-cook-revision-modal" tabindex="-1" role="dialog" aria-labelledby="vault-cook-revision-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h6 class="modal-title" id="vault-cook-revision-modal-label">Cook and download a revision from the Software Heritage Vault</h6>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <p>
             You have requested the cooking of the history heading to revision with identifier <strong>{{ vault_cooking.revision_swhid }}</strong>
             into a <code>bare git archive</code>.
           </p>
           <p>
             Are you sure you want to continue ?
           </p>
           <form>
             <div class="form-group">
               <label for="email">(Optional) Send download link once it is available to that email address:</label>
               <input type="email" class="form-control" id="swh-vault-revision-email">
             </div>
           </form>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
           <button type="button" class="btn btn-default btn-sm" onclick="swh.vault.cookRevisionArchive('{{ vault_cooking.revision_swhid }}')">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
   <div class="modal fade" id="vault-fetch-revision-modal" tabindex="-1" role="dialog" aria-labelledby="vault-fetch-revision-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h6 class="modal-title" id="vault-fetch-revision-modal-label">Download a revision from the Software Heritage Vault</h6>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <p>
             You have requested the download of the history heading to revision with identifier <strong>{{ vault_cooking.revision_swhid }}</strong>
             as a <code>bare git archive</code>.
           </p>
           <p>
             Are you sure you want to continue ?
           </p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
           <button type="button" class="btn btn-default btn-sm" onclick="swh.vault.fetchRevisionArchive('{{ vault_cooking.revision_swhid }}')">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
   <div class="modal fade" id="invalid-email-modal" tabindex="-1" role="dialog" aria-labelledby="invalid-email-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="invalid-email-modal-label">Invalid Email !</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         </div>
         <div class="modal-body">
           <p>The provided email is not well-formed.</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
   {% include "includes/vault-common.html" %}
 
 {% endif %}