login: Link to doc to help users understand what their "server URL" is

chrisbobbe · chrisbobbe · commit 2b29aec49bab · 2026-05-14T12:11:14.000-07:00
Fixes #109. Done with an icon button, rather than an inline link in the help text (as I think we'd envisioned at first), because that could be an annoyingly small touch target, and right next to the "Continue" button so easy to mis-tap.
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -958,6 +958,14 @@
   "@loginRealmUrlLabel": {
     "description": "Label in login page for Zulip realm/org URL entry."
   },
+  "loginRealmUrlHelperText": "This is the address you would use to open Zulip in a browser.",
+  "@loginRealmUrlHelperText": {
+    "description": "Helper text below the Zulip organization URL entry field on the login page."
+  },
+  "loginRealmUrlHelpButton": "Help",
+  "@loginRealmUrlHelpButton": {
+    "description": "Tooltip for the 'help' icon button for the org-URL input in the login flow."
+  },
   "loginHidePassword": "Hide password",
   "@loginHidePassword": {
     "description": "Icon label for button to hide password in input form."
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -1460,6 +1460,18 @@ abstract class ZulipLocalizations {
   /// **'Your Zulip organization URL'**
   String get loginRealmUrlLabel;
 
+  /// Helper text below the Zulip organization URL entry field on the login page.
+  ///
+  /// In en, this message translates to:
+  /// **'This is the address you would use to open Zulip in a browser.'**
+  String get loginRealmUrlHelperText;
+
+  /// Tooltip for the 'help' icon button for the org-URL input in the login flow.
+  ///
+  /// In en, this message translates to:
+  /// **'Help'**
+  String get loginRealmUrlHelpButton;
+
   /// Icon label for button to hide password in input form.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -810,6 +810,13 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Passwort verstecken';
 
diff --git a/lib/generated/l10n/zulip_localizations_el.dart b/lib/generated/l10n/zulip_localizations_el.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsEl extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_es.dart b/lib/generated/l10n/zulip_localizations_es.dart
@@ -802,6 +802,13 @@ class ZulipLocalizationsEs extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'URL de tu organización de Zulip';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Ocultar contraseña';
 
diff --git a/lib/generated/l10n/zulip_localizations_et.dart b/lib/generated/l10n/zulip_localizations_et.dart
@@ -793,6 +793,13 @@ class ZulipLocalizationsEt extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Peida salasõna';
 
diff --git a/lib/generated/l10n/zulip_localizations_fr.dart b/lib/generated/l10n/zulip_localizations_fr.dart
@@ -818,6 +818,13 @@ class ZulipLocalizationsFr extends ZulipLocalizations {
   String get loginRealmUrlLabel =>
       'L\'adresse (URL) de Zulip pour votre organisation';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Cacher le mot de passe';
 
diff --git a/lib/generated/l10n/zulip_localizations_he.dart b/lib/generated/l10n/zulip_localizations_he.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsHe extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_hu.dart b/lib/generated/l10n/zulip_localizations_hu.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsHu extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
@@ -809,6 +809,13 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'URL della tua organizzazione Zulip';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Nascondi password';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -773,6 +773,13 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'パスワードを非表示';
 
diff --git a/lib/generated/l10n/zulip_localizations_kk.dart b/lib/generated/l10n/zulip_localizations_kk.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsKk extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_lv.dart b/lib/generated/l10n/zulip_localizations_lv.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsLv extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -804,6 +804,13 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Ukryj hasło';
 
diff --git a/lib/generated/l10n/zulip_localizations_pt.dart b/lib/generated/l10n/zulip_localizations_pt.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsPt extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -804,6 +804,13 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'URL вашей организации Zulip';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Скрыть пароль';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Skryť heslo';
 
diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -815,6 +815,13 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Skrij geslo';
 
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -805,6 +805,13 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Приховати пароль';
 
diff --git a/lib/generated/l10n/zulip_localizations_vi.dart b/lib/generated/l10n/zulip_localizations_vi.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsVi extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -790,6 +790,13 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   @override
   String get loginRealmUrlLabel => 'Your Zulip organization URL';
 
+  @override
+  String get loginRealmUrlHelperText =>
+      'This is the address you would use to open Zulip in a browser.';
+
+  @override
+  String get loginRealmUrlHelpButton => 'Help';
+
   @override
   String get loginHidePassword => 'Hide password';
 
diff --git a/lib/widgets/login.dart b/lib/widgets/login.dart
@@ -16,9 +16,11 @@ import '../log.dart';
 import '../model/binding.dart';
 import '../model/server_support.dart';
 import '../model/store.dart';
+import 'actions.dart';
 import 'button.dart';
 import 'dialog.dart';
 import 'home.dart';
+import 'icons.dart';
 import 'input.dart';
 import 'page.dart';
 import 'store.dart';
@@ -242,7 +244,6 @@ class _AddAccountPageState extends State<AddAccountPage> {
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 400),
             child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
-              // TODO(#109) Link to doc about what a "server URL" is and how to find it
               // TODO(#111) Perhaps give tappable realm URL suggestions based on text typed so far
               TextField(
                 controller: _controller,
@@ -262,7 +263,18 @@ class _AddAccountPageState extends State<AddAccountPage> {
                     //   (or don't use it here?)
                     label: Text(zulipLocalizations.loginRealmUrlLabel),
                     errorText: errorText,
-                    helperText: kLayoutPinningHelperText,
+                    helperText: zulipLocalizations.loginRealmUrlHelperText,
+                    helperMaxLines: 4,
+
+                    suffixIconConstraints: BoxConstraints.tight(ZulipIconButtonSize.large.surface),
+                    suffixIcon: ZulipIconButton(
+                      icon: ZulipIcons.help,
+                      tooltip: zulipLocalizations.loginRealmUrlHelpButton,
+                      onPressed: () => PlatformActions.launchUrl(context,
+                        Uri.parse('https://zulip.com/help/logging-in#find-the-zulip-log-in-url')),
+                      size: .large,
+                      backgroundWhenPressed: false,
+                    ),
                     hintText: AddAccountPage._serverUrlHint,
                   )),
               const SizedBox(height: 8),
diff --git a/test/widgets/login_test.dart b/test/widgets/login_test.dart
