refactor(mobile): form & form field (#25042)

* refactor: form & form field

* chore: remove unused components

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
Co-authored-by: Alex <alex.tran1502@gmail.com>

mobile/lib/main.dart

@@ -42,6 +42,7 @@ import 'package:immich_mobile/utils/http_ssl_options.dart';
 import 'package:immich_mobile/utils/licenses.dart';
 import 'package:immich_mobile/utils/migration.dart';
 import 'package:immich_mobile/wm_executor.dart';
+import 'package:immich_ui/immich_ui.dart';
 import 'package:intl/date_symbol_data_local.dart';
 import 'package:logging/logging.dart';
 import 'package:timezone/data/latest.dart';
@@ -252,6 +253,13 @@ class ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserve
         themeMode: ref.watch(immichThemeModeProvider),
         darkTheme: getThemeData(colorScheme: immichTheme.dark, locale: context.locale),
         theme: getThemeData(colorScheme: immichTheme.light, locale: context.locale),
+        builder: (context, child) => ImmichTranslationProvider(
+          translations: ImmichTranslations(
+            submit: "submit".t(context: context),
+            password: "password".t(context: context),
+          ),
+          child: ImmichThemeProvider(colorScheme: context.colorScheme, child: child!),
+        ),
         routerConfig: router.config(
           deepLinkBuilder: _deepLinkBuilder,
           navigatorObservers: () => [AppNavigationObserver(ref: ref)],

mobile/lib/presentation/pages/dev/ui_showcase.page.dart

@@ -19,6 +19,17 @@ List<Widget> _showcaseBuilder(Function(ImmichVariant variant, ImmichColor color)
   return children;
 }
 
+class _ComponentTitle extends StatelessWidget {
+  final String title;
+
+  const _ComponentTitle(this.title);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(title, style: context.textTheme.titleLarge);
+  }
+}
+
 @RoutePage()
 class ImmichUIShowcasePage extends StatelessWidget {
   const ImmichUIShowcasePage({super.key});
@@ -35,13 +46,51 @@ class ImmichUIShowcasePage extends StatelessWidget {
             mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Text("IconButton", style: context.textTheme.titleLarge),
+              const _ComponentTitle("IconButton"),
               ..._showcaseBuilder(
                 (variant, color) =>
-                    ImmichIconButton(icon: Icons.favorite, color: color, variant: variant, onTap: () {}),
+                    ImmichIconButton(icon: Icons.favorite, color: color, variant: variant, onPressed: () {}),
+              ),
+              const _ComponentTitle("CloseButton"),
+              ..._showcaseBuilder(
+                (variant, color) => ImmichCloseButton(color: color, variant: variant, onPressed: () {}),
+              ),
+              const _ComponentTitle("TextButton"),
+
+              ImmichTextButton(
+                labelText: "Text Button",
+                onPressed: () {},
+                variant: ImmichVariant.filled,
+                color: ImmichColor.primary,
+              ),
+              ImmichTextButton(
+                labelText: "Text Button",
+                onPressed: () {},
+                variant: ImmichVariant.filled,
+                color: ImmichColor.primary,
+                loading: true,
+              ),
+              ImmichTextButton(
+                labelText: "Text Button",
+                onPressed: () {},
+                variant: ImmichVariant.ghost,
+                color: ImmichColor.primary,
+              ),
+              ImmichTextButton(
+                labelText: "Text Button",
+                onPressed: () {},
+                variant: ImmichVariant.ghost,
+                color: ImmichColor.primary,
+                loading: true,
+              ),
+              const _ComponentTitle("Form"),
+              ImmichForm(
+                onSubmit: () {},
+                child: const Column(
+                  spacing: 10,
+                  children: [ImmichTextInput(label: "Title", hintText: "Enter a title")],
+                ),
               ),
-              Text("CloseButton", style: context.textTheme.titleLarge),
-              ..._showcaseBuilder((variant, color) => ImmichCloseButton(color: color, variant: variant, onTap: () {})),
             ],
           ),
         ),

mobile/lib/presentation/pages/editing/drift_crop.page.dart

@@ -37,7 +37,7 @@ class DriftCropImagePage extends HookWidget {
             icon: Icons.done_rounded,
             color: ImmichColor.primary,
             variant: ImmichVariant.ghost,
-            onTap: () async {
+            onPressed: () async {
               final croppedImage = await cropController.croppedImage();
               unawaited(context.pushRoute(DriftEditImageRoute(asset: asset, image: croppedImage, isEdited: true)));
             },
@@ -79,13 +79,13 @@ class DriftCropImagePage extends HookWidget {
                                   icon: Icons.rotate_left,
                                   variant: ImmichVariant.ghost,
                                   color: ImmichColor.secondary,
-                                  onTap: () => cropController.rotateLeft(),
+                                  onPressed: () => cropController.rotateLeft(),
                                 ),
                                 ImmichIconButton(
                                   icon: Icons.rotate_right,
                                   variant: ImmichVariant.ghost,
                                   color: ImmichColor.secondary,
-                                  onTap: () => cropController.rotateRight(),
+                                  onPressed: () => cropController.rotateRight(),
                                 ),
                               ],
                             ),

mobile/lib/widgets/forms/login/login_form.dart

@@ -14,6 +14,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/auth.provider.dart';
 import 'package:immich_mobile/providers/background_sync.provider.dart';
 import 'package:immich_mobile/providers/backup/backup.provider.dart';
@@ -29,12 +30,7 @@ import 'package:immich_mobile/utils/version_compatibility.dart';
 import 'package:immich_mobile/widgets/common/immich_logo.dart';
 import 'package:immich_mobile/widgets/common/immich_title_text.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
-import 'package:immich_mobile/widgets/forms/login/email_input.dart';
-import 'package:immich_mobile/widgets/forms/login/loading_icon.dart';
-import 'package:immich_mobile/widgets/forms/login/login_button.dart';
-import 'package:immich_mobile/widgets/forms/login/o_auth_login_button.dart';
-import 'package:immich_mobile/widgets/forms/login/password_input.dart';
-import 'package:immich_mobile/widgets/forms/login/server_endpoint_input.dart';
+import 'package:immich_ui/immich_ui.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
 import 'package:package_info_plus/package_info_plus.dart';
@@ -45,16 +41,33 @@ class LoginForm extends HookConsumerWidget {
 
   final log = Logger('LoginForm');
 
+  String? _validateUrl(String? url) {
+    if (url == null || url.isEmpty) return null;
+
+    final parsedUrl = Uri.tryParse(url);
+    if (parsedUrl == null || !parsedUrl.isAbsolute || !parsedUrl.scheme.startsWith("http") || parsedUrl.host.isEmpty) {
+      return 'login_form_err_invalid_url'.tr();
+    }
+
+    return null;
+  }
+
+  String? _validateEmail(String? email) {
+    if (email == null || email == '') return null;
+    if (email.endsWith(' ')) return 'login_form_err_trailing_whitespace'.tr();
+    if (email.startsWith(' ')) return 'login_form_err_leading_whitespace'.tr();
+    if (email.contains(' ') || !email.contains('@')) {
+      return 'login_form_err_invalid_email'.tr();
+    }
+    return null;
+  }
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final emailController = useTextEditingController.fromValue(TextEditingValue.empty);
     final passwordController = useTextEditingController.fromValue(TextEditingValue.empty);
     final serverEndpointController = useTextEditingController.fromValue(TextEditingValue.empty);
-    final emailFocusNode = useFocusNode();
     final passwordFocusNode = useFocusNode();
-    final serverEndpointFocusNode = useFocusNode();
-    final isLoading = useState<bool>(false);
-    final isLoadingServer = useState<bool>(false);
     final isOauthEnable = useState<bool>(false);
     final isPasswordLoginEnable = useState<bool>(false);
     final oAuthButtonLabel = useState<String>('OAuth');
@@ -96,7 +109,6 @@ class LoginForm extends HookConsumerWidget {
       }
 
       try {
-        isLoadingServer.value = true;
         final endpoint = await ref.read(authProvider.notifier).validateServerUrl(serverUrl);
 
         // Fetch and load server config and features
@@ -120,7 +132,6 @@ class LoginForm extends HookConsumerWidget {
         );
         isOauthEnable.value = false;
         isPasswordLoginEnable.value = true;
-        isLoadingServer.value = false;
       } on HandshakeException {
         ImmichToast.show(
           context: context,
@@ -130,7 +141,6 @@ class LoginForm extends HookConsumerWidget {
         );
         isOauthEnable.value = false;
         isPasswordLoginEnable.value = true;
-        isLoadingServer.value = false;
       } catch (e) {
         ImmichToast.show(
           context: context,
@@ -140,10 +150,7 @@ class LoginForm extends HookConsumerWidget {
         );
         isOauthEnable.value = false;
         isPasswordLoginEnable.value = true;
-        isLoadingServer.value = false;
       }
-
-      isLoadingServer.value = false;
     }
 
     useEffect(() {
@@ -230,8 +237,6 @@ class LoginForm extends HookConsumerWidget {
     login() async {
       TextInput.finishAutofillContext();
 
-      isLoading.value = true;
-
       // Invalidate all api repository provider instance to take into account new access token
       invalidateAllApiRepositoryProviders(ref);
 
@@ -261,8 +266,6 @@ class LoginForm extends HookConsumerWidget {
           toastType: ToastType.error,
           gravity: ToastGravity.TOP,
         );
-      } finally {
-        isLoading.value = false;
       }
     }
 
@@ -306,8 +309,6 @@ class LoginForm extends HookConsumerWidget {
           codeChallenge,
         );
 
-        isLoading.value = true;
-
         // Invalidate all api repository provider instance to take into account new access token
         invalidateAllApiRepositoryProviders(ref);
       } catch (error, stack) {
@@ -319,7 +320,6 @@ class LoginForm extends HookConsumerWidget {
           toastType: ToastType.error,
           gravity: ToastGravity.TOP,
         );
-        isLoading.value = false;
         return;
       }
 
@@ -338,7 +338,6 @@ class LoginForm extends HookConsumerWidget {
               .saveAuthInfo(accessToken: loginResponseDto.accessToken);
 
           if (isSuccess) {
-            isLoading.value = false;
             final permission = ref.watch(galleryPermissionNotifier);
             final isBeta = Store.isBetaTimelineEnabled;
             if (!isBeta && (permission.isGranted || permission.isLimited)) {
@@ -364,9 +363,7 @@ class LoginForm extends HookConsumerWidget {
             toastType: ToastType.error,
             gravity: ToastGravity.TOP,
           );
-        } finally {
-          isLoading.value = false;
-        }
+        } finally {}
       } else {
         ImmichToast.show(
           context: context,
@@ -374,66 +371,10 @@ class LoginForm extends HookConsumerWidget {
           toastType: ToastType.info,
           gravity: ToastGravity.TOP,
         );
-        isLoading.value = false;
         return;
       }
     }
 
-    buildSelectServer() {
-      const buttonRadius = 25.0;
-      return Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          ServerEndpointInput(
-            controller: serverEndpointController,
-            focusNode: serverEndpointFocusNode,
-            onSubmit: getServerAuthSettings,
-          ),
-          const SizedBox(height: 18),
-          Row(
-            children: [
-              Expanded(
-                child: ElevatedButton.icon(
-                  style: ElevatedButton.styleFrom(
-                    padding: const EdgeInsets.symmetric(vertical: 12),
-                    shape: const RoundedRectangleBorder(
-                      borderRadius: BorderRadius.only(
-                        topLeft: Radius.circular(buttonRadius),
-                        bottomLeft: Radius.circular(buttonRadius),
-                      ),
-                    ),
-                  ),
-                  onPressed: () => context.pushRoute(const SettingsRoute()),
-                  icon: const Icon(Icons.settings_rounded),
-                  label: const Text(""),
-                ),
-              ),
-              const SizedBox(width: 1),
-              Expanded(
-                flex: 3,
-                child: ElevatedButton.icon(
-                  style: ElevatedButton.styleFrom(
-                    padding: const EdgeInsets.symmetric(vertical: 12),
-                    shape: const RoundedRectangleBorder(
-                      borderRadius: BorderRadius.only(
-                        topRight: Radius.circular(buttonRadius),
-                        bottomRight: Radius.circular(buttonRadius),
-                      ),
-                    ),
-                  ),
-                  onPressed: isLoadingServer.value ? null : getServerAuthSettings,
-                  icon: const Icon(Icons.arrow_forward_rounded),
-                  label: const Text('next', style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)).tr(),
-                ),
-              ),
-            ],
-          ),
-          const SizedBox(height: 18),
-          if (isLoadingServer.value) const LoadingIcon(),
-        ],
-      );
-    }
-
     buildVersionCompatWarning() {
       checkVersionMismatch();
 
@@ -455,66 +396,102 @@ class LoginForm extends HookConsumerWidget {
       );
     }
 
-    buildLogin() {
-      return AutofillGroup(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [
-            buildVersionCompatWarning(),
-            Text(
-              sanitizeUrl(serverEndpointController.text),
-              style: context.textTheme.displaySmall,
-              textAlign: TextAlign.center,
+    final serverSelectionOrLogin = serverEndpoint.value == null
+        ? Padding(
+            padding: const EdgeInsets.only(top: ImmichSpacing.md),
+            child: Column(
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                ImmichForm(
+                  submitText: 'next'.t(context: context),
+                  submitIcon: Icons.arrow_forward_rounded,
+                  onSubmit: getServerAuthSettings,
+                  child: ImmichTextInput(
+                    controller: serverEndpointController,
+                    label: 'login_form_endpoint_url'.t(context: context),
+                    hintText: 'login_form_endpoint_hint'.t(context: context),
+                    validator: _validateUrl,
+                    keyboardAction: TextInputAction.next,
+                    keyboardType: TextInputType.url,
+                    autofillHints: const [AutofillHints.url],
+                    onSubmit: (ctx, _) => ImmichForm.of(ctx).submit(),
+                  ),
+                ),
+                ImmichTextButton(
+                  labelText: 'settings'.t(context: context),
+                  icon: Icons.settings,
+                  variant: ImmichVariant.ghost,
+                  onPressed: () => context.pushRoute(const SettingsRoute()),
+                ),
+              ],
             ),
-            if (isPasswordLoginEnable.value) ...[
-              const SizedBox(height: 18),
-              EmailInput(
-                controller: emailController,
-                focusNode: emailFocusNode,
-                onSubmit: passwordFocusNode.requestFocus,
-              ),
-              const SizedBox(height: 8),
-              PasswordInput(controller: passwordController, focusNode: passwordFocusNode, onSubmit: login),
-            ],
-
-            // Note: This used to have an AnimatedSwitcher, but was removed
-            // because of https://github.com/flutter/flutter/issues/120874
-            isLoading.value
-                ? const LoadingIcon()
-                : Column(
-                    crossAxisAlignment: CrossAxisAlignment.stretch,
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      const SizedBox(height: 18),
-                      if (isPasswordLoginEnable.value) LoginButton(onPressed: login),
-                      if (isOauthEnable.value) ...[
-                        if (isPasswordLoginEnable.value)
-                          Padding(
-                            padding: const EdgeInsets.symmetric(horizontal: 16.0),
-                            child: Divider(color: context.isDarkTheme ? Colors.white : Colors.black),
-                          ),
-                        OAuthLoginButton(
-                          serverEndpointController: serverEndpointController,
-                          buttonLabel: oAuthButtonLabel.value,
-                          isLoading: isLoading,
-                          onPressed: oAuthLogin,
+          )
+        : AutofillGroup(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                buildVersionCompatWarning(),
+                Padding(
+                  padding: const EdgeInsets.only(bottom: ImmichSpacing.md),
+                  child: Text(
+                    sanitizeUrl(serverEndpointController.text),
+                    style: context.textTheme.displaySmall,
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+                if (isPasswordLoginEnable.value)
+                  ImmichForm(
+                    submitText: 'login'.t(context: context),
+                    submitIcon: Icons.login_rounded,
+                    onSubmit: login,
+                    child: Column(
+                      spacing: ImmichSpacing.md,
+                      children: [
+                        ImmichTextInput(
+                          controller: emailController,
+                          label: 'email'.t(context: context),
+                          hintText: 'login_form_email_hint'.t(context: context),
+                          validator: _validateEmail,
+                          keyboardAction: TextInputAction.next,
+                          keyboardType: TextInputType.emailAddress,
+                          autofillHints: const [AutofillHints.email],
+                          onSubmit: (_, _) => passwordFocusNode.requestFocus(),
+                        ),
+                        ImmichPasswordInput(
+                          controller: passwordController,
+                          focusNode: passwordFocusNode,
+                          label: 'password'.t(context: context),
+                          hintText: 'login_form_password_hint'.t(context: context),
+                          keyboardAction: TextInputAction.go,
+                          onSubmit: (ctx, _) => ImmichForm.of(ctx).submit(),
                         ),
                       ],
-                    ],
+                    ),
                   ),
-            if (!isOauthEnable.value && !isPasswordLoginEnable.value) Center(child: const Text('login_disabled').tr()),
-            const SizedBox(height: 12),
-            TextButton.icon(
-              icon: const Icon(Icons.arrow_back),
-              onPressed: () => serverEndpoint.value = null,
-              label: const Text('back').tr(),
+                if (isOauthEnable.value)
+                  ImmichForm(
+                    submitText: oAuthButtonLabel.value,
+                    submitIcon: Icons.pin_outlined,
+                    onSubmit: oAuthLogin,
+                    child: isPasswordLoginEnable.value
+                        ? Padding(
+                            padding: const EdgeInsets.only(left: 18.0, right: 18.0, top: 12.0),
+                            child: Divider(color: context.isDarkTheme ? Colors.white : Colors.black, height: 5),
+                          )
+                        : const SizedBox.shrink(),
+                  ),
+                if (!isOauthEnable.value && !isPasswordLoginEnable.value)
+                  Center(child: const Text('login_disabled').tr()),
+                ImmichTextButton(
+                  labelText: 'back'.t(context: context),
+                  icon: Icons.arrow_back,
+                  variant: ImmichVariant.ghost,
+                  onPressed: () => serverEndpoint.value = null,
+                ),
+              ],
             ),
-          ],
-        ),
-      );
-    }
-
-    final serverSelectionOrLogin = serverEndpoint.value == null ? buildSelectServer() : buildLogin();
+          );
 
     return LayoutBuilder(
       builder: (context, constraints) {

mobile/lib/widgets/forms/login/o_auth_login_button.dart

@@ -1,31 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-
-class OAuthLoginButton extends ConsumerWidget {
-  final TextEditingController serverEndpointController;
-  final ValueNotifier<bool> isLoading;
-  final String buttonLabel;
-  final Function() onPressed;
-
-  const OAuthLoginButton({
-    super.key,
-    required this.serverEndpointController,
-    required this.isLoading,
-    required this.buttonLabel,
-    required this.onPressed,
-  });
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return ElevatedButton.icon(
-      style: ElevatedButton.styleFrom(
-        backgroundColor: context.primaryColor.withAlpha(230),
-        padding: const EdgeInsets.symmetric(vertical: 12),
-      ),
-      onPressed: onPressed,
-      icon: const Icon(Icons.pin_rounded),
-      label: Text(buttonLabel, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
-    );
-  }
-}

mobile/lib/widgets/forms/login/password_input.dart

@@ -1,37 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-
-class PasswordInput extends HookConsumerWidget {
-  final TextEditingController controller;
-  final FocusNode? focusNode;
-  final Function()? onSubmit;
-
-  const PasswordInput({super.key, required this.controller, this.focusNode, this.onSubmit});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final isPasswordVisible = useState<bool>(false);
-
-    return TextFormField(
-      obscureText: !isPasswordVisible.value,
-      controller: controller,
-      decoration: InputDecoration(
-        labelText: 'password'.tr(),
-        border: const OutlineInputBorder(),
-        hintText: 'login_form_password_hint'.tr(),
-        hintStyle: const TextStyle(fontWeight: FontWeight.normal, fontSize: 14),
-        suffixIcon: IconButton(
-          onPressed: () => isPasswordVisible.value = !isPasswordVisible.value,
-          icon: Icon(isPasswordVisible.value ? Icons.visibility_off_sharp : Icons.visibility_sharp),
-        ),
-      ),
-      autofillHints: const [AutofillHints.password],
-      keyboardType: TextInputType.text,
-      onFieldSubmitted: (_) => onSubmit?.call(),
-      focusNode: focusNode,
-      textInputAction: TextInputAction.go,
-    );
-  }
-}

mobile/lib/widgets/forms/login/server_endpoint_input.dart

@@ -1,46 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/utils/url_helper.dart';
-
-class ServerEndpointInput extends StatelessWidget {
-  final TextEditingController controller;
-  final FocusNode focusNode;
-  final Function()? onSubmit;
-
-  const ServerEndpointInput({super.key, required this.controller, required this.focusNode, this.onSubmit});
-
-  String? _validateInput(String? url) {
-    if (url == null || url.isEmpty) return null;
-
-    final parsedUrl = Uri.tryParse(sanitizeUrl(url));
-    if (parsedUrl == null || !parsedUrl.isAbsolute || !parsedUrl.scheme.startsWith("http") || parsedUrl.host.isEmpty) {
-      return 'login_form_err_invalid_url'.tr();
-    }
-
-    return null;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(top: 16.0),
-      child: TextFormField(
-        controller: controller,
-        decoration: InputDecoration(
-          labelText: 'login_form_endpoint_url'.tr(),
-          border: const OutlineInputBorder(),
-          hintText: 'login_form_endpoint_hint'.tr(),
-          errorMaxLines: 4,
-        ),
-        validator: _validateInput,
-        autovalidateMode: AutovalidateMode.always,
-        focusNode: focusNode,
-        autofillHints: const [AutofillHints.url],
-        keyboardType: TextInputType.url,
-        autocorrect: false,
-        onFieldSubmitted: (_) => onSubmit?.call(),
-        textInputAction: TextInputAction.go,
-      ),
-    );
-  }
-}