Skip to content

Commit 7b1550e

Browse files
committed
new_server_form: Add autocomplete domain in new server form
Fixes zulip#1012
1 parent 6ee4064 commit 7b1550e

File tree

2 files changed

+64
-17
lines changed

2 files changed

+64
-17
lines changed

app/renderer/css/preference.css

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,14 +238,39 @@ img.server-info-icon {
238238
max-width: 450px;
239239
}
240240

241-
.setting-input-value:focus {
241+
.setting-input-value:focus,
242+
label.setting-input-value:focus-within {
242243
border: rgb(78 191 172 / 100%) 2px solid;
243244
}
244245

245246
.invalid-input-value:focus {
246247
border: rgb(239 83 80 / 100%) 2px solid;
247248
}
248249

250+
.setting-input-add-server,
251+
.add-server-domain,
252+
.server-url-size-calc {
253+
outline: 0;
254+
margin: 0;
255+
padding: 0;
256+
border: 0;
257+
float: left;
258+
font-family: inherit;
259+
font-size: inherit;
260+
line-height: inherit;
261+
color: inherit;
262+
background: inherit;
263+
}
264+
265+
.setting-input-add-server {
266+
color: rgb(34 44 49 / 100%);
267+
}
268+
269+
.server-url-size-calc {
270+
visibility: hidden;
271+
height: 0;
272+
}
273+
249274
.manual-proxy-block {
250275
width: 96%;
251276
}

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

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,16 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
1717
<div class="server-input-container">
1818
<div class="title">${t.__("Organization URL")}</div>
1919
<div class="add-server-info-row">
20-
<input
21-
class="setting-input-value"
22-
autofocus
23-
placeholder="your-organization.zulipchat.com or zulip.your-organization.com"
24-
/>
20+
<label class="setting-input-value">
21+
<input
22+
class="setting-input-add-server"
23+
autofocus
24+
placeholder="your-organization.zulipchat.com"
25+
style="width: 34ch"
26+
/>
27+
<span class="add-server-domain"></span>
28+
<span id="server-url-size-calc"></span>
29+
</label>
2530
</div>
2631
<div class="server-center">
2732
<button id="connect">${t.__("Connect")}</button>
@@ -53,15 +58,23 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
5358
$root.textContent = "";
5459
$root.append($newServerForm);
5560
const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
56-
"input.setting-input-value",
61+
"input.setting-input-add-server",
5762
)!;
63+
const $serverDomain: HTMLSpanElement = $newServerForm.querySelector(
64+
"span.add-server-domain",
65+
)!;
66+
const $urlSizeCalc: HTMLSpanElement = $newServerForm.querySelector(
67+
"span#server-url-size-calc",
68+
)!;
69+
const urlValidationPattern = /^[a-zA-Z\d-]*$/;
5870

59-
<<<<<<< HEAD
6071
async function submitFormHandler(): Promise<void> {
6172
$saveServerButton.textContent = "Connecting...";
6273
let serverConf;
6374
try {
64-
serverConf = await DomainUtil.checkDomain($newServerUrl.value.trim());
75+
serverConf = await DomainUtil.checkDomain(
76+
await autoComplete($newServerUrl.value.trim()),
77+
);
6578
} catch (error: unknown) {
6679
$saveServerButton.textContent = "Connect";
6780
await dialog.showMessageBox({
@@ -74,20 +87,20 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
7487
});
7588
return;
7689
}
90+
7791
await DomainUtil.addDomain(serverConf);
7892
onChange();
7993
}
8094

81-
autoComplete(url: string): string {
82-
const pattern = /^[a-zA-Z\d-]*$/;
83-
let serverUrl = url.trim();
95+
async function autoComplete(url: string): Promise<string> {
96+
let serverUrl = url.trim();
8497

85-
if (pattern.test(serverUrl)) {
86-
serverUrl = 'https://' + serverUrl + '.zulipchat.com';
87-
}
98+
if (urlValidationPattern.test(serverUrl)) {
99+
serverUrl = "https://" + serverUrl + ".zulipchat.com";
100+
}
88101

89-
return serverUrl;
90-
}
102+
return serverUrl;
103+
}
91104

92105
$saveServerButton.addEventListener("click", async () => {
93106
await submitFormHandler();
@@ -97,6 +110,15 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
97110
await submitFormHandler();
98111
}
99112
});
113+
$newServerUrl.addEventListener("input", async () => {
114+
const url = $newServerUrl.value;
115+
$urlSizeCalc.textContent = url;
116+
$newServerUrl.style.width = `${$urlSizeCalc.offsetWidth}px`;
117+
118+
$serverDomain.textContent = urlValidationPattern.test(url)
119+
? ".zulipchat.com"
120+
: "";
121+
});
100122

101123
// Open create new org link in default browser
102124
const link = "https://zulip.com/new/";

0 commit comments

Comments
 (0)