diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js
index 75e624a6a..0418f3a14 100644
--- a/web_src/js/features/repo-settings.js
+++ b/web_src/js/features/repo-settings.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import {minimatch} from 'minimatch';
 import {createMonaco} from './codeeditor.js';
 import {onInputDebounce, toggleElem} from '../utils/dom.js';
+import {POST} from '../modules/fetch.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -11,18 +12,19 @@ export function initRepoSettingsCollaboration() {
     const $dropdown = $(e);
     const $text = $dropdown.find('> .text');
     $dropdown.dropdown({
-      action(_text, value) {
+      async action(_text, value) {
         const lastValue = $dropdown.attr('data-last-value');
-        $.post($dropdown.attr('data-url'), {
-          _csrf: csrfToken,
-          uid: $dropdown.attr('data-uid'),
-          mode: value,
-        }).fail(() => {
+        try {
+          $dropdown.attr('data-last-value', value);
+          $dropdown.dropdown('hide');
+          const data = new FormData();
+          data.append('uid', $dropdown.attr('data-uid'));
+          data.append('mode', value);
+          await POST($dropdown.attr('data-url'), {data});
+        } catch {
           $text.text('(error)'); // prevent from misleading users when error occurs
           $dropdown.attr('data-last-value', lastValue);
-        });
-        $dropdown.attr('data-last-value', value);
-        $dropdown.dropdown('hide');
+        }
       },
       onChange(_value, text, _$choice) {
         $text.text(text); // update the text when using keyboard navigating