@@ -17,11 +17,16 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
17
17
< div class ="server-input-container ">
18
18
< div class ="title "> ${ t . __ ( "Organization URL" ) } </ div >
19
19
< 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 >
25
30
</ div >
26
31
< div class ="server-center ">
27
32
< button id ="connect "> ${ t . __ ( "Connect" ) } </ button >
@@ -53,15 +58,23 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
53
58
$root . textContent = "" ;
54
59
$root . append ( $newServerForm ) ;
55
60
const $newServerUrl : HTMLInputElement = $newServerForm . querySelector (
56
- "input.setting-input-value " ,
61
+ "input.setting-input-add-server " ,
57
62
) ! ;
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 - z A - Z \d - ] * $ / ;
58
70
59
- < < < << << HEAD
60
71
async function submitFormHandler ( ) : Promise < void > {
61
72
$saveServerButton . textContent = "Connecting..." ;
62
73
let serverConf ;
63
74
try {
64
- serverConf = await DomainUtil . checkDomain ( $newServerUrl . value . trim ( ) ) ;
75
+ serverConf = await DomainUtil . checkDomain (
76
+ await autoComplete ( $newServerUrl . value . trim ( ) ) ,
77
+ ) ;
65
78
} catch ( error : unknown ) {
66
79
$saveServerButton . textContent = "Connect" ;
67
80
await dialog . showMessageBox ( {
@@ -74,20 +87,20 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
74
87
} ) ;
75
88
return ;
76
89
}
90
+
77
91
await DomainUtil . addDomain ( serverConf ) ;
78
92
onChange ( ) ;
79
93
}
80
94
81
- autoComplete ( url : string ) : string {
82
- const pattern = / ^ [ a - z A - Z \d - ] * $ / ;
83
- let serverUrl = url . trim ( ) ;
95
+ async function autoComplete ( url : string ) : Promise < string > {
96
+ let serverUrl = url . trim ( ) ;
84
97
85
- if ( pattern . test ( serverUrl ) ) {
86
- serverUrl = ' https://' + serverUrl + ' .zulipchat.com' ;
87
- }
98
+ if ( urlValidationPattern . test ( serverUrl ) ) {
99
+ serverUrl = " https://" + serverUrl + " .zulipchat.com" ;
100
+ }
88
101
89
- return serverUrl ;
90
- }
102
+ return serverUrl ;
103
+ }
91
104
92
105
$saveServerButton . addEventListener ( "click" , async ( ) => {
93
106
await submitFormHandler ( ) ;
@@ -97,6 +110,15 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
97
110
await submitFormHandler ( ) ;
98
111
}
99
112
} ) ;
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
+ } ) ;
100
122
101
123
// Open create new org link in default browser
102
124
const link = "https://zulip.com/new/" ;
0 commit comments