new_server_form: Add autocomplete domain in new server form

Fixes zulip#1012

Author: manila

app/renderer/css/preference.css

@@ -238,14 +238,39 @@ 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;
 }
 
 .invalid-input-value:focus {
   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: inherit;
+  background: inherit;
+}
+
+.setting-input-add-server {
+  color: rgb(34 44 49 / 100%);
+}
+
+.server-url-size-calc {
+  visibility: hidden;
+  height: 0;
+}
+
 .manual-proxy-block {
   width: 96%;
 }

app/renderer/js/pages/preference/new-server-form.ts

@@ -17,11 +17,16 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
     <div class="server-input-container">
       <div class="title">${t.__("Organization URL")}</div>
       <div class="add-server-info-row">
-        <input
-          class="setting-input-value"
-          autofocus
-          placeholder="your-organization.zulipchat.com or zulip.your-organization.com"
-        />
+        <label class="setting-input-value">
+          <input
+            class="setting-input-add-server"
+            autofocus
+            placeholder="your-organization.zulipchat.com"
+            style="width: 34ch"
+          />
+          <span class="add-server-domain"></span>
+          <span class="server-url-size-calc"></span>
+        </label>
       </div>
       <div class="server-center">
         <button id="connect">${t.__("Connect")}</button>
@@ -53,15 +58,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-]*$/;
 
-<<<<<<< HEAD
   async function submitFormHandler(): Promise<void> {
     $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({
@@ -74,20 +87,20 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
       });
       return;
     }
+
     await DomainUtil.addDomain(serverConf);
     onChange();
   }
 
-	autoComplete(url: string): string {
-		const pattern = /^[a-zA-Z\d-]*$/;
-		let serverUrl = url.trim();
+  async function autoComplete(url: string): Promise<string> {
+    let serverUrl = url.trim();
 
-		if (pattern.test(serverUrl)) {
-			serverUrl = 'https://' + serverUrl + '.zulipchat.com';
-		}
+    if (urlValidationPattern.test(serverUrl)) {
+      serverUrl = "https://" + serverUrl + ".zulipchat.com";
+    }
 
-		return serverUrl;
-	}
+    return serverUrl;
+  }
 
   $saveServerButton.addEventListener("click", async () => {
     await submitFormHandler();
@@ -97,6 +110,15 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
       await submitFormHandler();
     }
   });
+  $newServerUrl.addEventListener("input", async () => {
+    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/";