login: Link to doc for what "server URL" is and how to find it

- Add informative helper text below the "server URL" field in the login screen.
- When tapped, the helper text opens Zulip documentation explaining server URLs and how to find them.
- Improves user experience during login by providing clear guidance.
- Fixes: #109

Author: VatsalBhesaniya

assets/l10n/app_en.arb

@@ -289,6 +289,21 @@
   "@loginServerUrlInputLabel": {
     "description": "Input label in login page for Zulip server URL entry."
   },
+  "serverUrlDocLinkLabel": "What's this?",
+  "@serverUrlDocLinkLabel": {
+    "description": "Link to doc to help users understand what a server URL is and how to find theirs."
+  },
+  "errorUnableToOpenLinkTitle": "Unable to open link",
+  "@errorUnableToOpenLinkTitle": {
+    "description": "Error title when a link fails to open."
+  },
+  "errorLinkCouldNotBeOpened": "Link could not be opened: {url}",
+  "@errorLinkCouldNotBeOpened": {
+    "description": "Error message when a specific link could not be opened.",
+    "placeholders": {
+      "url": {"type": "String", "example": "http://example.com/"}
+    }
+  },
   "loginHidePassword": "Hide password",
   "@loginHidePassword": {
     "description": "Icon label for button to hide password in input form."

lib/widgets/login.dart

@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 
 import '../api/exception.dart';
 import '../api/route/account.dart';
 import '../api/route/realm.dart';
 import '../api/route/users.dart';
+import '../model/binding.dart';
 import '../model/store.dart';
 import 'app.dart';
 import 'dialog.dart';
@@ -101,6 +103,8 @@ class ServerUrlTextEditingController extends TextEditingController {
 class AddAccountPage extends StatefulWidget {
   const AddAccountPage({super.key});
 
+  static const String serverUrlHelpUrl = 'https://zulip.com/help/logging-in#find-the-zulip-log-in-url';
+
   static Route<void> buildRoute() {
     return _LoginSequenceRoute(page: const AddAccountPage());
   }
@@ -207,7 +211,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,
@@ -223,7 +226,14 @@ class _AddAccountPageState extends State<AddAccountPage> {
                 decoration: InputDecoration(
                   labelText: zulipLocalizations.loginServerUrlInputLabel,
                   errorText: errorText,
-                  helperText: kLayoutPinningHelperText,
+                  helper: GestureDetector(
+                    onTap: () {
+                      _launchUrl(context);
+                    },
+                    child: Text(
+                      zulipLocalizations.serverUrlDocLinkLabel,
+                      style: Theme.of(context).textTheme.bodySmall!
+                        .apply(color: const HSLColor.fromAHSL(1, 200, 1, 0.4).toColor()))),
                   hintText: 'your-org.zulipchat.com')),
               const SizedBox(height: 8),
               ElevatedButton(
@@ -235,6 +245,30 @@ class _AddAccountPageState extends State<AddAccountPage> {
   }
 }
 
+void _launchUrl(BuildContext context) async {
+  Future<void> showError(BuildContext context, String? message) {
+    return showErrorDialog(
+        context: context,
+        title: ZulipLocalizations.of(context).errorUnableToOpenLinkTitle,
+        message: [
+          ZulipLocalizations.of(context).errorLinkCouldNotBeOpened(AddAccountPage.serverUrlHelpUrl),
+          if (message != null) message,
+        ].join("\n\n"));
+  }
+
+  bool launched = false;
+  String? errorMessage;
+  try {
+    launched = await ZulipBinding.instance.launchUrl(Uri.parse(AddAccountPage.serverUrlHelpUrl));
+  } on PlatformException catch (e) {
+    errorMessage = e.message;
+  }
+  if (!launched) {
+    if (!context.mounted) return;
+    await showError(context, errorMessage);
+  }
+}
+
 class PasswordLoginPage extends StatefulWidget {
   const PasswordLoginPage({super.key, required this.serverSettings});
 

test/widgets/login_test.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:http/http.dart' as http;
+import 'package:url_launcher/url_launcher.dart';
 import 'package:zulip/api/route/account.dart';
 import 'package:zulip/api/route/realm.dart';
 import 'package:zulip/model/localizations.dart';
@@ -13,6 +14,7 @@ import '../api/fake_api.dart';
 import '../example_data.dart' as eg;
 import '../model/binding.dart';
 import '../stdlib_checks.dart';
+import 'dialog_checks.dart';
 
 void main() {
   TestZulipBinding.ensureInitialized();
@@ -142,4 +144,41 @@ void main() {
     // TODO test handling failure in fetchApiKey request
     // TODO test _inProgress logic
   });
+
+  group('Server URL Helper Text', () {
+    Future<void> prepareAddAccountPage(WidgetTester tester) async {
+      await tester.pumpWidget(const MaterialApp(
+        localizationsDelegates: ZulipLocalizations.localizationsDelegates,
+        supportedLocales: ZulipLocalizations.supportedLocales,
+        home: AddAccountPage(),
+      ));
+    }
+
+    final zulipLocalizations = GlobalLocalizations.zulipLocalizations;
+
+    Future<Finder> findHelperText(WidgetTester tester) async {
+      return find.text(zulipLocalizations.serverUrlDocLinkLabel);
+    }
+
+    testWidgets('launches URL when helper text is tapped', (tester) async {
+      await prepareAddAccountPage(tester);
+      final helper = await findHelperText(tester);
+      await tester.tap(helper);
+
+      check(testBinding.takeLaunchUrlCalls())
+          .single.equals((url: Uri.parse(AddAccountPage.serverUrlHelpUrl), mode: LaunchMode.platformDefault));
+    });
+
+    testWidgets('shows error dialog when URL fails to open', (tester) async {
+      await prepareAddAccountPage(tester);
+      testBinding.launchUrlResult = false;
+      final helper = await findHelperText(tester);
+      await tester.tap(helper);
+      await tester.pump();
+
+      checkErrorDialog(tester,
+          expectedTitle: zulipLocalizations.errorUnableToOpenLinkTitle,
+          expectedMessage: zulipLocalizations.errorLinkCouldNotBeOpened(AddAccountPage.serverUrlHelpUrl));
+    });
+  });
 }