1 files changed, 29 insertions, 10 deletions
diff --git a/web_src/js/features/repo-new.ts b/web_src/js/features/repo-new.ts
index 8a77a77b4a..e2aa13f490 100644
--- a/web_src/js/features/repo-new.ts
+++ b/web_src/js/features/repo-new.ts
@@ -1,11 +1,14 @@
-import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
-import {htmlEscape} from 'escape-goat';
+import {hideElem, querySingleVisibleElem, showElem, toggleElem} from '../utils/dom.ts';
+import {htmlEscape} from '../utils/html.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {sanitizeRepoName} from './repo-common.ts';
 
 const {appSubUrl} = window.config;
 
 function initRepoNewTemplateSearch(form: HTMLFormElement) {
-  const inputRepoOwnerUid = form.querySelector<HTMLInputElement>('#uid');
+  const elSubmitButton = querySingleVisibleElem<HTMLInputElement>(form, '.ui.primary.button');
+  const elCreateRepoErrorMessage = form.querySelector('#create-repo-error-message');
+  const elRepoOwnerDropdown = form.querySelector('#repo_owner_dropdown');
   const elRepoTemplateDropdown = form.querySelector<HTMLInputElement>('#repo_template_search');
   const inputRepoTemplate = form.querySelector<HTMLInputElement>('#repo_template');
   const elTemplateUnits = form.querySelector('#template_units');
@@ -18,12 +21,24 @@ function initRepoNewTemplateSearch(form: HTMLFormElement) {
   inputRepoTemplate.addEventListener('change', checkTemplate);
   checkTemplate();
 
-  const $dropdown = fomanticQuery(elRepoTemplateDropdown);
+  const $repoOwnerDropdown = fomanticQuery(elRepoOwnerDropdown);
+  const $repoTemplateDropdown = fomanticQuery(elRepoTemplateDropdown);
   const onChangeOwner = function () {
-    $dropdown.dropdown('setting', {
+    const ownerId = $repoOwnerDropdown.dropdown('get value');
+    const $ownerItem = $repoOwnerDropdown.dropdown('get item', ownerId);
+    hideElem(elCreateRepoErrorMessage);
+    elSubmitButton.disabled = false;
+    if ($ownerItem?.length) {
+      const elOwnerItem = $ownerItem[0];
+      elCreateRepoErrorMessage.textContent = elOwnerItem.getAttribute('data-create-repo-disallowed-prompt') ?? '';
+      const hasError = Boolean(elCreateRepoErrorMessage.textContent);
+      toggleElem(elCreateRepoErrorMessage, hasError);
+      elSubmitButton.disabled = hasError;
+    }
+    $repoTemplateDropdown.dropdown('setting', {
       apiSettings: {
-        url: `${appSubUrl}/repo/search?q={query}&template=true&priority_owner_id=${inputRepoOwnerUid.value}`,
-        onResponse(response) {
+        url: `${appSubUrl}/repo/search?q={query}&template=true&priority_owner_id=${ownerId}`,
+        onResponse(response: any) {
           const results = [];
           results.push({name: '', value: ''}); // empty item means not using template
           for (const tmplRepo of response.data) {
@@ -32,14 +47,14 @@ function initRepoNewTemplateSearch(form: HTMLFormElement) {
               value: String(tmplRepo.repository.id),
             });
           }
-          $dropdown.fomanticExt.onResponseKeepSelectedItem($dropdown, inputRepoTemplate.value);
+          $repoTemplateDropdown.fomanticExt.onResponseKeepSelectedItem($repoTemplateDropdown, inputRepoTemplate.value);
           return {results};
         },
         cache: false,
       },
     });
   };
-  inputRepoOwnerUid.addEventListener('change', onChangeOwner);
+  $repoOwnerDropdown.dropdown('setting', 'onChange', onChangeOwner);
   onChangeOwner();
 }
 
@@ -66,7 +81,7 @@ export function initRepoNew() {
     let help = form.querySelector(`.help[data-help-for-repo-name="${CSS.escape(inputRepoName.value)}"]`);
     if (!help) help = form.querySelector(`.help[data-help-for-repo-name=""]`);
     showElem(help);
-    const repoNamePreferPrivate = {'.profile': false, '.profile-private': true};
+    const repoNamePreferPrivate: Record<string, boolean> = {'.profile': false, '.profile-private': true};
     const preferPrivate = repoNamePreferPrivate[inputRepoName.value];
     // inputPrivate might be disabled because site admin "force private"
     if (preferPrivate !== undefined && !inputPrivate.closest('.disabled, [disabled]')) {
@@ -74,6 +89,10 @@ export function initRepoNew() {
     }
   };
   inputRepoName.addEventListener('input', updateUiRepoName);
+  inputRepoName.addEventListener('change', () => {
+    inputRepoName.value = sanitizeRepoName(inputRepoName.value);
+    updateUiRepoName();
+  });
   updateUiRepoName();
 
   initRepoNewTemplateSearch(form);