new_server_form: Add autocomplete domain in new server form input.

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,8 +58,15 @@ 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<void> {
     $saveServerButton.textContent = "Connecting...";
@@ -99,6 +111,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/";