diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css index 89f1c0436..dbc79d467 100644 --- a/app/renderer/css/preference.css +++ b/app/renderer/css/preference.css @@ -238,7 +238,8 @@ img.server-info-icon { max-width: 450px; } -.setting-input-value:focus { +.setting-input-value:focus, +label.setting-input-value:focus-within { border: rgb(78 191 172 / 100%) 2px solid; } @@ -246,6 +247,34 @@ img.server-info-icon { border: rgb(239 83 80 / 100%) 2px solid; } +.setting-input-add-server, +.add-server-domain, +.server-url-size-calc { + outline: 0; + margin: 0; + padding: 0; + border: 0; + float: left; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: rgb(34 44 49 / 100%); + background: inherit; +} + +.setting-input-add-server { + width: 34ch; +} + +.setting-input-add-server:focus + .add-server-domain { + color: inherit; +} + +.server-url-size-calc { + visibility: hidden; + height: 0; +} + .manual-proxy-block { width: 96%; } diff --git a/app/renderer/js/pages/preference/new-server-form.ts b/app/renderer/js/pages/preference/new-server-form.ts index 2d7fe4db7..96c60a4f3 100644 --- a/app/renderer/js/pages/preference/new-server-form.ts +++ b/app/renderer/js/pages/preference/new-server-form.ts @@ -17,11 +17,15 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
${t.__("Organization URL")}
- +
@@ -53,14 +57,23 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { $root.textContent = ""; $root.append($newServerForm); const $newServerUrl: HTMLInputElement = $newServerForm.querySelector( - "input.setting-input-value", + "input.setting-input-add-server", )!; + const $serverDomain: HTMLSpanElement = $newServerForm.querySelector( + "span.add-server-domain", + )!; + const $urlSizeCalc: HTMLSpanElement = $newServerForm.querySelector( + "span.server-url-size-calc", + )!; + const urlValidationPattern = /^[a-zA-Z\d-]*$/; async function submitFormHandler(): Promise { $saveServerButton.textContent = "Connecting..."; let serverConf; try { - serverConf = await DomainUtil.checkDomain($newServerUrl.value.trim()); + serverConf = await DomainUtil.checkDomain( + await autoComplete($newServerUrl.value.trim()), + ); } catch (error: unknown) { $saveServerButton.textContent = "Connect"; await dialog.showMessageBox({ @@ -78,6 +91,17 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { onChange(); } + async function autoComplete(url: string): Promise { + const pattern = /^[a-zA-Z\d-]*$/; + let serverUrl = url.trim(); + + if (pattern.test(serverUrl)) { + serverUrl = "https://" + serverUrl + ".zulipchat.com"; + } + + return serverUrl; + } + $saveServerButton.addEventListener("click", async () => { await submitFormHandler(); }); @@ -86,6 +110,16 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { await submitFormHandler(); } }); + $newServerUrl.addEventListener("input", async () => { + $newServerUrl.value = $newServerUrl.value.trim(); + const url = $newServerUrl.value; + $urlSizeCalc.textContent = url; + $newServerUrl.style.width = `${$urlSizeCalc.offsetWidth}px`; + + $serverDomain.textContent = urlValidationPattern.test(url) + ? ".zulipchat.com" + : ""; + }); // Open create new org link in default browser const link = "https://zulip.com/new/";