3 files changed, 39 insertions, 32 deletions
diff --git a/web_src/js/features/common-fetch-action.ts b/web_src/js/features/common-fetch-action.ts
index a4a69540a8..a372216ae6 100644
--- a/web_src/js/features/common-fetch-action.ts
+++ b/web_src/js/features/common-fetch-action.ts
@@ -1,11 +1,11 @@
 import {request} from '../modules/fetch.ts';
-import {showErrorToast} from '../modules/toast.ts';
+import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
 import {addDelegatedEventListener, submitEventSubmitter} from '../utils/dom.ts';
 import {confirmModal} from './comp/ConfirmModal.ts';
 import type {RequestOpts} from '../types.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 
-const {appSubUrl, i18n} = window.config;
+const {appSubUrl} = window.config;
 
 // fetchActionDoRedirect does real redirection to bypass the browser's limitations of "location"
 // more details are in the backend's fetch-redirect handler
@@ -23,10 +23,20 @@ function fetchActionDoRedirect(redirect: string) {
 }
 
 async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: RequestOpts) {
+  const showErrorForResponse = (code: number, message: string) => {
+    showErrorToast(`Error ${code || 'request'}: ${message}`);
+  };
+
+  let respStatus = 0;
+  let respText = '';
   try {
+    hideToastsAll();
     const resp = await request(url, opt);
-    if (resp.status === 200) {
-      let {redirect} = await resp.json();
+    respStatus = resp.status;
+    respText = await resp.text();
+    const respJson = JSON.parse(respText);
+    if (respStatus === 200) {
+      let {redirect} = respJson;
       redirect = redirect || actionElem.getAttribute('data-redirect');
       ignoreAreYouSure(actionElem); // ignore the areYouSure check before reloading
       if (redirect) {
@@ -35,22 +45,21 @@ async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: R
         window.location.reload();
       }
       return;
-    } else if (resp.status >= 400 && resp.status < 500) {
-      const data = await resp.json();
+    }
+
+    if (respStatus >= 400 && respStatus < 500 && respJson?.errorMessage) {
       // the code was quite messy, sometimes the backend uses "err", sometimes it uses "error", and even "user_error"
       // but at the moment, as a new approach, we only use "errorMessage" here, backend can use JSONError() to respond.
-      if (data.errorMessage) {
-        showErrorToast(data.errorMessage, {useHtmlBody: data.renderFormat === 'html'});
-      } else {
-        showErrorToast(`server error: ${resp.status}`);
-      }
+      showErrorToast(respJson.errorMessage, {useHtmlBody: respJson.renderFormat === 'html'});
     } else {
-      showErrorToast(`server error: ${resp.status}`);
+      showErrorForResponse(respStatus, respText);
     }
   } catch (e) {
-    if (e.name !== 'AbortError') {
-      console.error('error when doRequest', e);
-      showErrorToast(`${i18n.network_error} ${e}`);
+    if (e.name === 'SyntaxError') {
+      showErrorForResponse(respStatus, (respText || '').substring(0, 100));
+    } else if (e.name !== 'AbortError') {
+      console.error('fetchActionDoRequest error', e);
+      showErrorForResponse(respStatus, `${e}`);
     }
   }
   actionElem.classList.remove('is-loading', 'loading-icon-2px');
@@ -70,7 +79,7 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt
   }
 
   const formMethod = formEl.getAttribute('method') || 'get';
-  const formActionUrl = formEl.getAttribute('action');
+  const formActionUrl = formEl.getAttribute('action') || window.location.href;
   const formData = new FormData(formEl);
   const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')];
   if (submitterName) {
diff --git a/web_src/js/features/install.ts b/web_src/js/features/install.ts
index 34df4757f9..ca4bcce881 100644
--- a/web_src/js/features/install.ts
+++ b/web_src/js/features/install.ts
@@ -104,7 +104,7 @@ function initPreInstall() {
 }
 
 function initPostInstall() {
-  const el = document.querySelector('#goto-user-login');
+  const el = document.querySelector('#goto-after-install');
   if (!el) return;
 
   const targetUrl = el.getAttribute('href');
diff --git a/web_src/js/features/repo-editor.ts b/web_src/js/features/repo-editor.ts
index acf4127399..c6b5cccd54 100644
--- a/web_src/js/features/repo-editor.ts
+++ b/web_src/js/features/repo-editor.ts
@@ -7,6 +7,7 @@ import {initDropzone} from './dropzone.ts';
 import {confirmModal} from './comp/ConfirmModal.ts';
 import {applyAreYouSure, ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {submitFormFetchAction} from './common-fetch-action.ts';
 
 function initEditPreviewTab(elForm: HTMLFormElement) {
   const elTabMenu = elForm.querySelector('.repo-editor-menu');
@@ -143,31 +144,28 @@ export function initRepoEditor() {
 
   const elForm = document.querySelector<HTMLFormElement>('.repository.editor .edit.form');
 
+  // on the upload page, there is no editor(textarea)
+  const editArea = document.querySelector<HTMLTextAreaElement>('.page-content.repository.editor textarea#edit_area');
+  if (!editArea) return;
+
   // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
   // to enable or disable the commit button
   const commitButton = document.querySelector<HTMLButtonElement>('#commit-button');
   const dirtyFileClass = 'dirty-file';
 
-  // Enabling the button at the start if the page has posted
-  if (document.querySelector<HTMLInputElement>('input[name="page_has_posted"]')?.value === 'true') {
-    commitButton.disabled = false;
-  }
-
+  const syncCommitButtonState = () => {
+    const dirty = elForm.classList.contains(dirtyFileClass);
+    commitButton.disabled = !dirty;
+  };
   // Registering a custom listener for the file path and the file content
   // FIXME: it is not quite right here (old bug), it causes double-init, the global areYouSure "dirty" class will also be added
   applyAreYouSure(elForm, {
     silent: true,
     dirtyClass: dirtyFileClass,
     fieldSelector: ':input:not(.commit-form-wrapper :input)',
-    change($form: any) {
-      const dirty = $form[0]?.classList.contains(dirtyFileClass);
-      commitButton.disabled = !dirty;
-    },
+    change: syncCommitButtonState,
   });
-
-  // on the upload page, there is no editor(textarea)
-  const editArea = document.querySelector<HTMLTextAreaElement>('.page-content.repository.editor textarea#edit_area');
-  if (!editArea) return;
+  syncCommitButtonState(); // disable the "commit" button when no content changes
 
   initEditPreviewTab(elForm);
 
@@ -182,7 +180,7 @@ export function initRepoEditor() {
       editor.setValue(value);
     }
 
-    commitButton?.addEventListener('click', async (e) => {
+    commitButton.addEventListener('click', async (e) => {
       // A modal which asks if an empty file should be committed
       if (!editArea.value) {
         e.preventDefault();
@@ -191,7 +189,7 @@ export function initRepoEditor() {
           content: elForm.getAttribute('data-text-empty-confirm-content'),
         })) {
           ignoreAreYouSure(elForm);
-          elForm.submit();
+          submitFormFetchAction(elForm);
         }
       }
     });