fix: pop-up menu position

mobile/lib/extensions/asset_extensions.dart

@@ -1,5 +1,5 @@
 import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/utils/timezone.dart';
+import 'package:timezone/timezone.dart';
 
 extension TZExtension on Asset {
   /// Returns the created time of the asset from the exif info (if available) or from
@@ -7,11 +7,24 @@ extension TZExtension on Asset {
   /// the timezone offset in [Duration]
   (DateTime, Duration) getTZAdjustedTimeAndOffset() {
     DateTime dt = fileCreatedAt.toLocal();
-
     if (exifInfo?.dateTimeOriginal != null) {
-      return applyTimezoneOffset(dateTime: exifInfo!.dateTimeOriginal!, timeZone: exifInfo?.timeZone);
+      dt = exifInfo!.dateTimeOriginal!;
+      if (exifInfo?.timeZone != null) {
+        dt = dt.toUtc();
+        try {
+          final location = getLocation(exifInfo!.timeZone!);
+          dt = TZDateTime.from(dt, location);
+        } on LocationNotFoundException {
+          RegExp re = RegExp(r'^utc(?:([+-]\d{1,2})(?::(\d{2}))?)?$', caseSensitive: false);
+          final m = re.firstMatch(exifInfo!.timeZone!);
+          if (m != null) {
+            final duration = Duration(hours: int.parse(m.group(1) ?? '0'), minutes: int.parse(m.group(2) ?? '0'));
+            dt = dt.add(duration);
+            return (dt, duration);
+          }
+        }
+      }
     }
-
     return (dt, dt.timeZoneOffset);
   }
 }

mobile/lib/models/auth/oauth_login_data.model.dart

@@ -1,7 +0,0 @@
-class OAuthLoginData {
-  final String serverUrl;
-  final String state;
-  final String codeVerifier;
-
-  const OAuthLoginData({required this.serverUrl, required this.state, required this.codeVerifier});
-}

mobile/lib/pages/login/login.page.dart

@@ -27,7 +27,7 @@ class LoginPage extends HookConsumerWidget {
     });
 
     return Scaffold(
-      body: const LoginForm(),
+      body: LoginForm(),
       bottomNavigationBar: SafeArea(
         child: Padding(
           padding: const EdgeInsets.only(bottom: 16.0),

mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart

@@ -109,7 +109,7 @@ class AddActionButton extends ConsumerWidget {
     final size = renderObject.size;
     final position = renderObject.localToGlobal(Offset.zero);
 
-    return RelativeRect.fromLTRB(position.dx, position.dy - size.height - 200, position.dx + size.width, position.dy);
+    return RelativeRect.fromLTRB(position.dx, position.dy - size.height - 225, position.dx + size.width, position.dy);
   }
 
   void _openAlbumSelector(BuildContext context, WidgetRef ref) {

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart

@@ -10,7 +10,6 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_tile.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
@@ -30,7 +29,6 @@ import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/action_button.utils.dart';
 import 'package:immich_mobile/utils/bytes_units.dart';
-import 'package:immich_mobile/utils/timezone.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 const _kSeparator = '  •  ';
@@ -87,21 +85,13 @@ class AssetDetailBottomSheet extends ConsumerWidget {
 class _AssetDetailBottomSheet extends ConsumerWidget {
   const _AssetDetailBottomSheet();
 
-  String _getDateTime(BuildContext ctx, BaseAsset asset, ExifInfo? exifInfo) {
+  String _getDateTime(BuildContext ctx, BaseAsset asset) {
-    DateTime dateTime = asset.createdAt.toLocal();
+    final dateTime = asset.createdAt.toLocal();
-    Duration timeZoneOffset = dateTime.timeZoneOffset;
-
-    // Use EXIF timezone information if available (matching web app behavior)
-    if (exifInfo?.dateTimeOriginal != null) {
-      (dateTime, timeZoneOffset) = applyTimezoneOffset(
-        dateTime: exifInfo!.dateTimeOriginal!,
-        timeZone: exifInfo.timeZone,
-      );
-    }
-
     final date = DateFormat.yMMMEd(ctx.locale.toLanguageTag()).format(dateTime);
     final time = DateFormat.jm(ctx.locale.toLanguageTag()).format(dateTime);
-    final timezone = 'GMT${timeZoneOffset.formatAsOffset()}';
+    final timezone = dateTime.timeZoneOffset.isNegative
+        ? 'UTC-${dateTime.timeZoneOffset.inHours.abs().toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}'
+        : 'UTC+${dateTime.timeZoneOffset.inHours.toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}';
     return '$date$_kSeparator$time $timezone';
   }
 
@@ -279,7 +269,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
       children: [
         // Asset Date and Time
         SheetTile(
-          title: _getDateTime(context, asset, exifInfo),
+          title: _getDateTime(context, asset),
           titleStyle: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
           trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
           onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,

mobile/lib/providers/auth.provider.dart

@@ -12,29 +12,13 @@ import 'package:immich_mobile/providers/infrastructure/user.provider.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/auth.service.dart';
 import 'package:immich_mobile/services/secure_storage.service.dart';
-import 'package:immich_mobile/services/server_info.service.dart';
 import 'package:immich_mobile/services/upload.service.dart';
 import 'package:immich_mobile/services/widget.service.dart';
 import 'package:immich_mobile/utils/hash.dart';
-import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
 import 'package:immich_mobile/utils/debug_print.dart';
 
-class ServerAuthSettings {
-  final String endpoint;
-  final bool isOAuthEnabled;
-  final bool isPasswordLoginEnabled;
-  final String oAuthButtonText;
-
-  const ServerAuthSettings({
-    required this.endpoint,
-    required this.isOAuthEnabled,
-    required this.isPasswordLoginEnabled,
-    required this.oAuthButtonText,
-  });
-}
-
 final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
   return AuthNotifier(
     ref.watch(authServiceProvider),
@@ -43,7 +27,6 @@ final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
     ref.watch(uploadServiceProvider),
     ref.watch(secureStorageServiceProvider),
     ref.watch(widgetServiceProvider),
-    ref.watch(serverInfoServiceProvider),
   );
 });
 
@@ -54,7 +37,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
   final UploadService _uploadService;
   final SecureStorageService _secureStorageService;
   final WidgetService _widgetService;
-  final ServerInfoService _serverInfoService;
   final _log = Logger("AuthenticationNotifier");
 
   static const Duration _timeoutDuration = Duration(seconds: 7);
@@ -66,7 +48,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
     this._uploadService,
     this._secureStorageService,
     this._widgetService,
-    this._serverInfoService,
   ) : super(
         const AuthState(
           deviceId: "",
@@ -83,27 +64,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
     return _authService.validateServerUrl(url);
   }
 
-  Future<ServerAuthSettings?> getServerAuthSettings(String serverUrl) async {
-    final sanitizedUrl = sanitizeUrl(serverUrl);
-    final encodedUrl = punycodeEncodeUrl(sanitizedUrl);
-
-    final endpoint = await _authService.validateServerUrl(encodedUrl);
-
-    final features = await _serverInfoService.getServerFeatures();
-    final config = await _serverInfoService.getServerConfig();
-
-    if (features == null || config == null) {
-      return null;
-    }
-
-    return ServerAuthSettings(
-      endpoint: endpoint,
-      isOAuthEnabled: features.oauthEnabled,
-      isPasswordLoginEnabled: features.passwordLogin,
-      oAuthButtonText: config.oauthButtonText.isNotEmpty ? config.oauthButtonText : 'OAuth',
-    );
-  }
-
   /// Validating the url is the alternative connecting server url without
   /// saving the information to the local database
   Future<bool> validateAuxilaryServerUrl(String url) async {

mobile/lib/providers/oauth.provider.dart

@@ -1,27 +1,5 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/models/auth/oauth_login_data.model.dart';
-import 'package:immich_mobile/providers/api.provider.dart';
 import 'package:immich_mobile/services/oauth.service.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/providers/api.provider.dart';
-
-export 'package:immich_mobile/models/auth/oauth_login_data.model.dart';
 
 final oAuthServiceProvider = Provider((ref) => OAuthService(ref.watch(apiServiceProvider)));
-
-final oAuthProvider = StateNotifierProvider<OAuthNotifier, AsyncValue<void>>(
-  (ref) => OAuthNotifier(ref.watch(oAuthServiceProvider)),
-);
-
-class OAuthNotifier extends StateNotifier<AsyncValue<void>> {
-  final OAuthService _oAuthService;
-
-  OAuthNotifier(this._oAuthService) : super(const AsyncValue.data(null));
-
-  Future<OAuthLoginData?> getOAuthLoginData(String serverUrl) {
-    return _oAuthService.getOAuthLoginData(serverUrl);
-  }
-
-  Future<LoginResponseDto?> completeOAuthLogin(OAuthLoginData oAuthData) {
-    return _oAuthService.completeOAuthLogin(oAuthData);
-  }
-}

mobile/lib/services/action.service.dart

@@ -15,7 +15,6 @@ import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/repositories/download.repository.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/utils/timezone.dart';
 import 'package:immich_mobile/widgets/common/date_time_picker.dart';
 import 'package:immich_mobile/widgets/common/location_picker.dart';
 import 'package:maplibre_gl/maplibre_gl.dart' as maplibre;
@@ -176,17 +175,9 @@ class ActionService {
       }
 
       final exifData = await _remoteAssetRepository.getExif(assetId);
-
+      initialDate = asset.createdAt.toLocal();
-      // Use EXIF timezone information if available (matching web app and display behavior)
+      offset = initialDate.timeZoneOffset;
-      DateTime dt = asset.createdAt.toLocal();
+      timeZone = exifData?.timeZone;
-      offset = dt.timeZoneOffset;
-
-      if (exifData?.dateTimeOriginal != null) {
-        timeZone = exifData!.timeZone;
-        (dt, offset) = applyTimezoneOffset(dateTime: exifData.dateTimeOriginal!, timeZone: exifData.timeZone);
-      }
-
-      initialDate = dt;
     }
 
     final dateTime = await showDateTimePicker(

mobile/lib/services/oauth.service.dart

@@ -1,11 +1,5 @@
-import 'dart:convert';
-import 'dart:math';
-
-import 'package:crypto/crypto.dart';
 import 'package:flutter_web_auth_2/flutter_web_auth_2.dart';
-import 'package:immich_mobile/models/auth/oauth_login_data.model.dart';
 import 'package:immich_mobile/services/api.service.dart';
-import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
 
@@ -17,50 +11,6 @@ class OAuthService {
   final log = Logger('OAuthService');
   OAuthService(this._apiService);
 
-  String _generateRandomString(int length) {
-    const chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
-    final random = Random.secure();
-    return String.fromCharCodes(Iterable.generate(length, (_) => chars.codeUnitAt(random.nextInt(chars.length))));
-  }
-
-  List<int> _randomBytes(int length) {
-    final random = Random.secure();
-    return List<int>.generate(length, (i) => random.nextInt(256));
-  }
-
-  /// Per specification, the code verifier must be 43-128 characters long
-  /// and consist of characters [A-Z, a-z, 0-9, "-", ".", "_", "~"]
-  /// https://datatracker.ietf.org/doc/html/rfc7636#section-4.1
-  String _randomCodeVerifier() {
-    return base64Url.encode(_randomBytes(42));
-  }
-
-  String _generatePKCECodeChallenge(String codeVerifier) {
-    final bytes = utf8.encode(codeVerifier);
-    final digest = sha256.convert(bytes);
-    return base64Url.encode(digest.bytes).replaceAll('=', '');
-  }
-
-  /// Initiates OAuth login flow.
-  /// Returns the OAuth server URL to redirect to, along with PKCE parameters.
-  Future<OAuthLoginData?> getOAuthLoginData(String serverUrl) async {
-    final state = _generateRandomString(32);
-    final codeVerifier = _randomCodeVerifier();
-    final codeChallenge = _generatePKCECodeChallenge(codeVerifier);
-
-    final oAuthServerUrl = await getOAuthServerUrl(sanitizeUrl(serverUrl), state, codeChallenge);
-
-    if (oAuthServerUrl == null) {
-      return null;
-    }
-
-    return OAuthLoginData(serverUrl: oAuthServerUrl, state: state, codeVerifier: codeVerifier);
-  }
-
-  Future<LoginResponseDto?> completeOAuthLogin(OAuthLoginData oAuthData) {
-    return oAuthLogin(oAuthData.serverUrl, oAuthData.state, oAuthData.codeVerifier);
-  }
-
   Future<String?> getOAuthServerUrl(String serverUrl, String state, String codeChallenge) async {
     // Resolve API server endpoint from user provided serverUrl
     await _apiService.resolveAndSetEndpoint(serverUrl);

mobile/lib/utils/timezone.dart

@@ -1,35 +0,0 @@
-import 'package:timezone/timezone.dart';
-
-/// Applies timezone conversion to a DateTime using EXIF timezone information.
-///
-/// This function handles two timezone formats:
-/// 1. Named timezone locations (e.g., "Asia/Hong_Kong")
-/// 2. UTC offset format (e.g., "UTC+08:00", "UTC-05:00")
-///
-/// Returns a tuple of (adjusted DateTime, timezone offset Duration)
-(DateTime, Duration) applyTimezoneOffset({required DateTime dateTime, required String? timeZone}) {
-  DateTime dt = dateTime.toUtc();
-
-  if (timeZone == null) {
-    return (dt, dt.timeZoneOffset);
-  }
-
-  try {
-    // Try to get timezone location from database
-    final location = getLocation(timeZone);
-    dt = TZDateTime.from(dt, location);
-    return (dt, dt.timeZoneOffset);
-  } on LocationNotFoundException {
-    // Handle UTC offset format (e.g., "UTC+08:00")
-    RegExp re = RegExp(r'^utc(?:([+-]\d{1,2})(?::(\d{2}))?)?$', caseSensitive: false);
-    final m = re.firstMatch(timeZone);
-    if (m != null) {
-      final duration = Duration(hours: int.parse(m.group(1) ?? '0'), minutes: int.parse(m.group(2) ?? '0'));
-      dt = dt.add(duration);
-      return (dt, duration);
-    }
-  }
-
-  // If timezone is invalid, return UTC
-  return (dt, dt.timeZoneOffset);
-}

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

@@ -1,13 +1,14 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 
-class LoginButton extends StatelessWidget {
+class LoginButton extends ConsumerWidget {
-  final VoidCallback onPressed;
+  final Function() onPressed;
 
   const LoginButton({super.key, required this.onPressed});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     return ElevatedButton.icon(
       style: ElevatedButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 12)),
       onPressed: onPressed,

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

@@ -1,95 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/utils/url_helper.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/version_compatibility_warning.dart';
-
-class LoginCredentialsForm extends StatelessWidget {
-  final TextEditingController emailController;
-  final TextEditingController passwordController;
-  final TextEditingController serverEndpointController;
-  final FocusNode emailFocusNode;
-  final FocusNode passwordFocusNode;
-  final bool isLoading;
-  final bool isOAuthEnabled;
-  final bool isPasswordLoginEnabled;
-  final String oAuthButtonLabel;
-  final String? warningMessage;
-  final VoidCallback onLogin;
-  final VoidCallback onOAuthLogin;
-  final VoidCallback onBack;
-
-  const LoginCredentialsForm({
-    super.key,
-    required this.emailController,
-    required this.passwordController,
-    required this.serverEndpointController,
-    required this.emailFocusNode,
-    required this.passwordFocusNode,
-    required this.isLoading,
-    required this.isOAuthEnabled,
-    required this.isPasswordLoginEnabled,
-    required this.oAuthButtonLabel,
-    required this.warningMessage,
-    required this.onLogin,
-    required this.onOAuthLogin,
-    required this.onBack,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return AutofillGroup(
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          if (warningMessage != null) VersionCompatibilityWarning(message: warningMessage!),
-          Text(
-            sanitizeUrl(serverEndpointController.text),
-            style: context.textTheme.displaySmall,
-            textAlign: TextAlign.center,
-          ),
-          if (isPasswordLoginEnabled) ...[
-            const SizedBox(height: 18),
-            EmailInput(
-              controller: emailController,
-              focusNode: emailFocusNode,
-              onSubmit: passwordFocusNode.requestFocus,
-            ),
-            const SizedBox(height: 8),
-            PasswordInput(controller: passwordController, focusNode: passwordFocusNode, onSubmit: onLogin),
-          ],
-          isLoading
-              ? const LoadingIcon()
-              : Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    const SizedBox(height: 18),
-                    if (isPasswordLoginEnabled) LoginButton(onPressed: onLogin),
-                    if (isOAuthEnabled) ...[
-                      if (isPasswordLoginEnabled)
-                        Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-                          child: Divider(color: context.isDarkTheme ? Colors.white : Colors.black),
-                        ),
-                      OAuthLoginButton(
-                        serverEndpointController: serverEndpointController,
-                        buttonLabel: oAuthButtonLabel,
-                        onPressed: onOAuthLogin,
-                      ),
-                    ],
-                  ],
-                ),
-          if (!isOAuthEnabled && !isPasswordLoginEnabled) Center(child: const Text('login_disabled').tr()),
-          const SizedBox(height: 12),
-          TextButton.icon(icon: const Icon(Icons.arrow_back), onPressed: onBack, label: const Text('back').tr()),
-        ],
-      ),
-    );
-  }
-}

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

@@ -1,10 +1,14 @@
 import 'dart:async';
+import 'dart:convert';
 import 'dart:io';
+import 'dart:math';
 
 import 'package:auto_route/auto_route.dart';
+import 'package:crypto/crypto.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
@@ -25,382 +29,492 @@ 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/login_credentials_form.dart';
+import 'package:immich_mobile/widgets/forms/login/email_input.dart';
-import 'package:immich_mobile/widgets/forms/login/server_selection_form.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:logging/logging.dart';
 import 'package:openapi/api.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:permission_handler/permission_handler.dart';
 
-class LoginForm extends ConsumerStatefulWidget {
+class LoginForm extends HookConsumerWidget {
-  const LoginForm({super.key});
+  LoginForm({super.key});
+
+  final log = Logger('LoginForm');
 
   @override
-  ConsumerState<LoginForm> createState() => _LoginFormState();
+  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');
+    final logoAnimationController = useAnimationController(duration: const Duration(seconds: 60))..repeat();
+    final serverInfo = ref.watch(serverInfoProvider);
+    final warningMessage = useState<String?>(null);
+    final loginFormKey = GlobalKey<FormState>();
+    final ValueNotifier<String?> serverEndpoint = useState<String?>(null);
 
-class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProviderStateMixin {
+    checkVersionMismatch() async {
-  final _log = Logger('LoginForm');
+      try {
-  final _loginFormKey = GlobalKey<FormState>();
+        final packageInfo = await PackageInfo.fromPlatform();
+        final appVersion = packageInfo.version;
+        final appMajorVersion = int.parse(appVersion.split('.')[0]);
+        final appMinorVersion = int.parse(appVersion.split('.')[1]);
+        final serverMajorVersion = serverInfo.serverVersion.major;
+        final serverMinorVersion = serverInfo.serverVersion.minor;
 
-  late final TextEditingController _emailController;
+        warningMessage.value = getVersionCompatibilityMessage(
-  late final TextEditingController _passwordController;
-  late final TextEditingController _serverEndpointController;
-  late final FocusNode _emailFocusNode;
-  late final FocusNode _passwordFocusNode;
-  late final FocusNode _serverEndpointFocusNode;
-  late final AnimationController _logoAnimationController;
-
-  bool _isLoading = false;
-  bool _isLoadingServer = false;
-  bool _isOAuthEnabled = false;
-  bool _isPasswordLoginEnabled = false;
-  String _oAuthButtonLabel = 'OAuth';
-  String? _serverEndpoint;
-  String? _warningMessage;
-
-  @override
-  void initState() {
-    super.initState();
-    _emailController = TextEditingController();
-    _passwordController = TextEditingController();
-    _serverEndpointController = TextEditingController();
-    _emailFocusNode = FocusNode();
-    _passwordFocusNode = FocusNode();
-    _serverEndpointFocusNode = FocusNode();
-    _logoAnimationController = AnimationController(vsync: this, duration: const Duration(seconds: 60))..repeat();
-
-    // Load saved server URL if available
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      final serverUrl = getServerUrl();
-      if (serverUrl != null) {
-        _serverEndpointController.text = serverUrl;
-      }
-    });
-  }
-
-  @override
-  void dispose() {
-    _emailController.dispose();
-    _passwordController.dispose();
-    _serverEndpointController.dispose();
-    _emailFocusNode.dispose();
-    _passwordFocusNode.dispose();
-    _serverEndpointFocusNode.dispose();
-    _logoAnimationController.dispose();
-    super.dispose();
-  }
-
-  Future<void> _checkVersionMismatch() async {
-    try {
-      final serverInfo = ref.read(serverInfoProvider);
-      final packageInfo = await PackageInfo.fromPlatform();
-      final appVersion = packageInfo.version;
-      final appMajorVersion = int.parse(appVersion.split('.')[0]);
-      final appMinorVersion = int.parse(appVersion.split('.')[1]);
-      final serverMajorVersion = serverInfo.serverVersion.major;
-      final serverMinorVersion = serverInfo.serverVersion.minor;
-
-      setState(() {
-        _warningMessage = getVersionCompatibilityMessage(
           appMajorVersion,
           appMinorVersion,
           serverMajorVersion,
           serverMinorVersion,
         );
-      });
+      } catch (error) {
-    } catch (error) {
+        warningMessage.value = 'Error checking version compatibility';
-      setState(() {
+      }
-        _warningMessage = 'Error checking version compatibility';
-      });
-    }
-  }
-
-  Future<void> _getServerAuthSettings() async {
-    final serverUrl = _serverEndpointController.text;
-
-    if (serverUrl.isEmpty) {
-      ImmichToast.show(context: context, msg: "login_form_server_empty".tr(), toastType: ToastType.error);
-      return;
     }
 
-    try {
+    /// Fetch the server login credential and enables oAuth login if necessary
-      setState(() {
+    /// Returns true if successful, false otherwise
-        _isLoadingServer = true;
+    Future<void> getServerAuthSettings() async {
-      });
+      final sanitizeServerUrl = sanitizeUrl(serverEndpointController.text);
+      final serverUrl = punycodeEncodeUrl(sanitizeServerUrl);
 
-      final settings = await ref.read(authProvider.notifier).getServerAuthSettings(serverUrl);
+      // Guard empty URL
-      if (settings == null) {
+      if (serverUrl.isEmpty) {
+        ImmichToast.show(context: context, msg: "login_form_server_empty".tr(), toastType: ToastType.error);
+      }
+
+      try {
+        isLoadingServer.value = true;
+        final endpoint = await ref.read(authProvider.notifier).validateServerUrl(serverUrl);
+
+        // Fetch and load server config and features
+        await ref.read(serverInfoProvider.notifier).getServerInfo();
+
+        final serverInfo = ref.read(serverInfoProvider);
+        final features = serverInfo.serverFeatures;
+        final config = serverInfo.serverConfig;
+
+        isOauthEnable.value = features.oauthEnabled;
+        isPasswordLoginEnable.value = features.passwordLogin;
+        oAuthButtonLabel.value = config.oauthButtonText.isNotEmpty ? config.oauthButtonText : 'OAuth';
+
+        serverEndpoint.value = endpoint;
+      } on ApiException catch (e) {
+        ImmichToast.show(
+          context: context,
+          msg: e.message ?? 'login_form_api_exception'.tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+        isLoadingServer.value = false;
+      } on HandshakeException {
+        ImmichToast.show(
+          context: context,
+          msg: 'login_form_handshake_exception'.tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+        isLoadingServer.value = false;
+      } catch (e) {
         ImmichToast.show(
           context: context,
           msg: 'login_form_server_error'.tr(),
           toastType: ToastType.error,
           gravity: ToastGravity.TOP,
         );
-        _resetServerState();
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+        isLoadingServer.value = false;
+      }
+
+      isLoadingServer.value = false;
+    }
+
+    useEffect(() {
+      final serverUrl = getServerUrl();
+      if (serverUrl != null) {
+        serverEndpointController.text = serverUrl;
+      }
+      return null;
+    }, []);
+
+    populateTestLoginInfo() {
+      emailController.text = 'demo@immich.app';
+      passwordController.text = 'demo';
+      serverEndpointController.text = 'https://demo.immich.app';
+    }
+
+    populateTestLoginInfo1() {
+      emailController.text = 'testuser@email.com';
+      passwordController.text = 'password';
+      serverEndpointController.text = 'http://10.1.15.216:2283/api';
+    }
+
+    Future<void> handleSyncFlow() async {
+      final backgroundManager = ref.read(backgroundSyncProvider);
+
+      await backgroundManager.syncLocal(full: true);
+      await backgroundManager.syncRemote();
+      await backgroundManager.hashAssets();
+
+      if (Store.get(StoreKey.syncAlbums, false)) {
+        await backgroundManager.syncLinkedAlbum();
+      }
+    }
+
+    getManageMediaPermission() async {
+      final hasPermission = await ref.read(localFilesManagerRepositoryProvider).hasManageMediaPermission();
+      if (!hasPermission) {
+        await showDialog(
+          context: context,
+          builder: (BuildContext context) {
+            return AlertDialog(
+              shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
+              elevation: 5,
+              title: Text(
+                'manage_media_access_title',
+                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: context.primaryColor),
+              ).tr(),
+              content: SingleChildScrollView(
+                child: ListBody(
+                  children: [
+                    const Text('manage_media_access_subtitle', style: TextStyle(fontSize: 14)).tr(),
+                    const SizedBox(height: 4),
+                    const Text('manage_media_access_rationale', style: TextStyle(fontSize: 12)).tr(),
+                  ],
+                ),
+              ),
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.of(context).pop(),
+                  child: Text(
+                    'cancel'.tr(),
+                    style: TextStyle(fontWeight: FontWeight.w600, color: context.primaryColor),
+                  ),
+                ),
+                TextButton(
+                  onPressed: () {
+                    ref.read(localFilesManagerRepositoryProvider).requestManageMediaPermission();
+                    Navigator.of(context).pop();
+                  },
+                  child: Text(
+                    'manage_media_access_settings'.tr(),
+                    style: TextStyle(fontWeight: FontWeight.w600, color: context.primaryColor),
+                  ),
+                ),
+              ],
+            );
+          },
+        );
+      }
+    }
+
+    bool isSyncRemoteDeletionsMode() => Platform.isAndroid && Store.get(StoreKey.manageLocalMediaAndroid, false);
+
+    login() async {
+      TextInput.finishAutofillContext();
+
+      isLoading.value = true;
+
+      // Invalidate all api repository provider instance to take into account new access token
+      invalidateAllApiRepositoryProviders(ref);
+
+      try {
+        final result = await ref.read(authProvider.notifier).login(emailController.text, passwordController.text);
+
+        if (result.shouldChangePassword && !result.isAdmin) {
+          unawaited(context.pushRoute(const ChangePasswordRoute()));
+        } else {
+          final isBeta = Store.isBetaTimelineEnabled;
+          if (isBeta) {
+            await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
+            if (isSyncRemoteDeletionsMode()) {
+              await getManageMediaPermission();
+            }
+            unawaited(handleSyncFlow());
+            ref.read(websocketProvider.notifier).connect();
+            unawaited(context.replaceRoute(const TabShellRoute()));
+            return;
+          }
+          unawaited(context.replaceRoute(const TabControllerRoute()));
+        }
+      } catch (error) {
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_login".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+      } finally {
+        isLoading.value = false;
+      }
+    }
+
+    String generateRandomString(int length) {
+      const chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
+      final random = Random.secure();
+      return String.fromCharCodes(Iterable.generate(length, (_) => chars.codeUnitAt(random.nextInt(chars.length))));
+    }
+
+    List<int> randomBytes(int length) {
+      final random = Random.secure();
+      return List<int>.generate(length, (i) => random.nextInt(256));
+    }
+
+    /// Per specification, the code verifier must be 43-128 characters long
+    /// and consist of characters [A-Z, a-z, 0-9, "-", ".", "_", "~"]
+    /// https://datatracker.ietf.org/doc/html/rfc7636#section-4.1
+    String randomCodeVerifier() {
+      return base64Url.encode(randomBytes(42));
+    }
+
+    Future<String> generatePKCECodeChallenge(String codeVerifier) async {
+      var bytes = utf8.encode(codeVerifier);
+      var digest = sha256.convert(bytes);
+      return base64Url.encode(digest.bytes).replaceAll('=', '');
+    }
+
+    oAuthLogin() async {
+      var oAuthService = ref.watch(oAuthServiceProvider);
+      String? oAuthServerUrl;
+
+      final state = generateRandomString(32);
+
+      final codeVerifier = randomCodeVerifier();
+      final codeChallenge = await generatePKCECodeChallenge(codeVerifier);
+
+      try {
+        oAuthServerUrl = await oAuthService.getOAuthServerUrl(
+          sanitizeUrl(serverEndpointController.text),
+          state,
+          codeChallenge,
+        );
+
+        isLoading.value = true;
+
+        // Invalidate all api repository provider instance to take into account new access token
+        invalidateAllApiRepositoryProviders(ref);
+      } catch (error, stack) {
+        log.severe('Error getting OAuth server Url: $error', stack);
+
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_get_oauth_server_config".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+        isLoading.value = false;
         return;
       }
 
-      setState(() {
+      if (oAuthServerUrl != null) {
-        _isOAuthEnabled = settings.isOAuthEnabled;
+        try {
-        _isPasswordLoginEnabled = settings.isPasswordLoginEnabled;
+          final loginResponseDto = await oAuthService.oAuthLogin(oAuthServerUrl, state, codeVerifier);
-        _oAuthButtonLabel = settings.oAuthButtonText;
-        _serverEndpoint = settings.endpoint;
-        _isLoadingServer = false;
-      });
 
-      await _checkVersionMismatch();
+          if (loginResponseDto == null) {
-    } on ApiException catch (e) {
+            return;
-      ImmichToast.show(
-        context: context,
-        msg: e.message ?? 'login_form_api_exception'.tr(),
-        toastType: ToastType.error,
-        gravity: ToastGravity.TOP,
-      );
-      _resetServerState();
-    } on HandshakeException {
-      ImmichToast.show(
-        context: context,
-        msg: 'login_form_handshake_exception'.tr(),
-        toastType: ToastType.error,
-        gravity: ToastGravity.TOP,
-      );
-      _resetServerState();
-    } catch (e) {
-      ImmichToast.show(
-        context: context,
-        msg: 'login_form_server_error'.tr(),
-        toastType: ToastType.error,
-        gravity: ToastGravity.TOP,
-      );
-      _resetServerState();
-    }
-  }
-
-  void _resetServerState() {
-    setState(() {
-      _isOAuthEnabled = false;
-      _isPasswordLoginEnabled = true;
-      _isLoadingServer = false;
-    });
-  }
-
-  void _populateTestLoginInfo() {
-    _emailController.text = 'demo@immich.app';
-    _passwordController.text = 'demo';
-    _serverEndpointController.text = 'https://demo.immich.app';
-  }
-
-  void _populateTestLoginInfo1() {
-    _emailController.text = 'testuser@email.com';
-    _passwordController.text = 'password';
-    _serverEndpointController.text = 'http://10.1.15.216:2283/api';
-  }
-
-  Future<void> _handleSyncFlow() async {
-    final backgroundManager = ref.read(backgroundSyncProvider);
-
-    await backgroundManager.syncLocal(full: true);
-    await backgroundManager.syncRemote();
-    await backgroundManager.hashAssets();
-
-    if (Store.get(StoreKey.syncAlbums, false)) {
-      await backgroundManager.syncLinkedAlbum();
-    }
-  }
-
-  Future<void> _getManageMediaPermission() async {
-    final hasPermission = await ref.read(localFilesManagerRepositoryProvider).hasManageMediaPermission();
-    if (!hasPermission) {
-      await showDialog(
-        context: context,
-        builder: (BuildContext context) {
-          return AlertDialog(
-            shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
-            elevation: 5,
-            title: Text(
-              'manage_media_access_title',
-              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: context.primaryColor),
-            ).tr(),
-            content: SingleChildScrollView(
-              child: ListBody(
-                children: [
-                  const Text('manage_media_access_subtitle', style: TextStyle(fontSize: 14)).tr(),
-                  const SizedBox(height: 4),
-                  const Text('manage_media_access_rationale', style: TextStyle(fontSize: 12)).tr(),
-                ],
-              ),
-            ),
-            actions: [
-              TextButton(
-                onPressed: () => Navigator.of(context).pop(),
-                child: Text(
-                  'cancel'.tr(),
-                  style: TextStyle(fontWeight: FontWeight.w600, color: context.primaryColor),
-                ),
-              ),
-              TextButton(
-                onPressed: () {
-                  ref.read(localFilesManagerRepositoryProvider).requestManageMediaPermission();
-                  Navigator.of(context).pop();
-                },
-                child: Text(
-                  'manage_media_access_settings'.tr(),
-                  style: TextStyle(fontWeight: FontWeight.w600, color: context.primaryColor),
-                ),
-              ),
-            ],
-          );
-        },
-      );
-    }
-  }
-
-  bool _isSyncRemoteDeletionsMode() => Platform.isAndroid && Store.get(StoreKey.manageLocalMediaAndroid, false);
-
-  Future<void> _login() async {
-    TextInput.finishAutofillContext();
-
-    setState(() {
-      _isLoading = true;
-    });
-
-    // Invalidate all api repository provider instance to take into account new access token
-    invalidateAllApiRepositoryProviders(ref);
-
-    try {
-      final result = await ref.read(authProvider.notifier).login(_emailController.text, _passwordController.text);
-
-      if (result.shouldChangePassword && !result.isAdmin) {
-        unawaited(context.pushRoute(const ChangePasswordRoute()));
-      } else {
-        final isBeta = Store.isBetaTimelineEnabled;
-        if (isBeta) {
-          await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
-          if (_isSyncRemoteDeletionsMode()) {
-            await _getManageMediaPermission();
           }
-          unawaited(_handleSyncFlow());
+
-          ref.read(websocketProvider.notifier).connect();
+          log.info("Finished OAuth login with response: ${loginResponseDto.userEmail}");
-          unawaited(context.replaceRoute(const TabShellRoute()));
+
-          return;
+          final isSuccess = await ref
+              .watch(authProvider.notifier)
+              .saveAuthInfo(accessToken: loginResponseDto.accessToken);
+
+          if (isSuccess) {
+            isLoading.value = false;
+            final permission = ref.watch(galleryPermissionNotifier);
+            final isBeta = Store.isBetaTimelineEnabled;
+            if (!isBeta && (permission.isGranted || permission.isLimited)) {
+              unawaited(ref.watch(backupProvider.notifier).resumeBackup());
+            }
+            if (isBeta) {
+              await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
+              if (isSyncRemoteDeletionsMode()) {
+                await getManageMediaPermission();
+              }
+              unawaited(handleSyncFlow());
+              unawaited(context.replaceRoute(const TabShellRoute()));
+              return;
+            }
+            unawaited(context.replaceRoute(const TabControllerRoute()));
+          }
+        } catch (error, stack) {
+          log.severe('Error logging in with OAuth: $error', stack);
+
+          ImmichToast.show(
+            context: context,
+            msg: error.toString(),
+            toastType: ToastType.error,
+            gravity: ToastGravity.TOP,
+          );
+        } finally {
+          isLoading.value = false;
         }
-        unawaited(context.replaceRoute(const TabControllerRoute()));
+      } else {
-      }
-    } catch (error) {
-      ImmichToast.show(
-        context: context,
-        msg: "login_form_failed_login".tr(),
-        toastType: ToastType.error,
-        gravity: ToastGravity.TOP,
-      );
-    } finally {
-      setState(() {
-        _isLoading = false;
-      });
-    }
-  }
-
-  Future<void> _oAuthLogin() async {
-    setState(() {
-      _isLoading = true;
-    });
-
-    // Invalidate all api repository provider instance to take into account new access token
-    invalidateAllApiRepositoryProviders(ref);
-
-    try {
-      final oAuthData = await ref
-          .read(oAuthProvider.notifier)
-          .getOAuthLoginData(sanitizeUrl(_serverEndpointController.text));
-
-      if (oAuthData == null) {
         ImmichToast.show(
           context: context,
           msg: "login_form_failed_get_oauth_server_disable".tr(),
           toastType: ToastType.info,
           gravity: ToastGravity.TOP,
         );
-        setState(() {
+        isLoading.value = false;
-          _isLoading = false;
-        });
         return;
       }
-
-      final loginResponseDto = await ref.read(oAuthProvider.notifier).completeOAuthLogin(oAuthData);
-
-      if (loginResponseDto == null) {
-        setState(() {
-          _isLoading = false;
-        });
-        return;
-      }
-
-      _log.info("Finished OAuth login with response: ${loginResponseDto.userEmail}");
-
-      final isSuccess = await ref.read(authProvider.notifier).saveAuthInfo(accessToken: loginResponseDto.accessToken);
-
-      if (isSuccess) {
-        setState(() {
-          _isLoading = false;
-        });
-        final permission = ref.read(galleryPermissionNotifier);
-        final isBeta = Store.isBetaTimelineEnabled;
-        if (!isBeta && (permission.isGranted || permission.isLimited)) {
-          unawaited(ref.read(backupProvider.notifier).resumeBackup());
-        }
-        if (isBeta) {
-          await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
-          if (_isSyncRemoteDeletionsMode()) {
-            await _getManageMediaPermission();
-          }
-          unawaited(_handleSyncFlow());
-          unawaited(context.replaceRoute(const TabShellRoute()));
-          return;
-        }
-        unawaited(context.replaceRoute(const TabControllerRoute()));
-      }
-    } catch (error, stack) {
-      _log.severe('Error logging in with OAuth: $error', stack);
-
-      ImmichToast.show(context: context, msg: error.toString(), toastType: ToastType.error, gravity: ToastGravity.TOP);
-    } finally {
-      setState(() {
-        _isLoading = false;
-      });
     }
-  }
 
-  void _goBack() {
+    buildSelectServer() {
-    setState(() {
+      const buttonRadius = 25.0;
-      _serverEndpoint = null;
+      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(),
+        ],
+      );
+    }
 
-  @override
+    buildVersionCompatWarning() {
-  Widget build(BuildContext context) {
+      checkVersionMismatch();
-    final serverSelectionOrLogin = _serverEndpoint == null
+
-        ? ServerSelectionForm(
+      if (warningMessage.value == null) {
-            serverEndpointController: _serverEndpointController,
+        return const SizedBox.shrink();
-            serverEndpointFocusNode: _serverEndpointFocusNode,
+      }
-            isLoading: _isLoadingServer,
+
-            onSubmit: _getServerAuthSettings,
+      return Padding(
-          )
+        padding: const EdgeInsets.only(bottom: 8.0),
-        : LoginCredentialsForm(
+        child: Container(
-            emailController: _emailController,
+          padding: const EdgeInsets.all(16),
-            passwordController: _passwordController,
+          decoration: BoxDecoration(
-            serverEndpointController: _serverEndpointController,
+            color: context.isDarkTheme ? Colors.red.shade700 : Colors.red.shade100,
-            emailFocusNode: _emailFocusNode,
+            borderRadius: const BorderRadius.all(Radius.circular(8)),
-            passwordFocusNode: _passwordFocusNode,
+            border: Border.all(color: context.isDarkTheme ? Colors.red.shade900 : Colors.red[200]!),
-            isLoading: _isLoading,
+          ),
-            isOAuthEnabled: _isOAuthEnabled,
+          child: Text(warningMessage.value!, textAlign: TextAlign.center),
-            isPasswordLoginEnabled: _isPasswordLoginEnabled,
+        ),
-            oAuthButtonLabel: _oAuthButtonLabel,
+      );
-            warningMessage: _warningMessage,
+    }
-            onLogin: _login,
+
-            onOAuthLogin: _oAuthLogin,
+    buildLogin() {
-            onBack: _goBack,
+      return AutofillGroup(
-          );
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            buildVersionCompatWarning(),
+            Text(
+              sanitizeUrl(serverEndpointController.text),
+              style: context.textTheme.displaySmall,
+              textAlign: TextAlign.center,
+            ),
+            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,
+                        ),
+                      ],
+                    ],
+                  ),
+            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(),
+            ),
+          ],
+        ),
+      );
+    }
+
+    final serverSelectionOrLogin = serverEndpoint.value == null ? buildSelectServer() : buildLogin();
 
     return LayoutBuilder(
       builder: (context, constraints) {
@@ -418,19 +532,20 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
                     mainAxisAlignment: MainAxisAlignment.end,
                     children: [
                       GestureDetector(
-                        onDoubleTap: _populateTestLoginInfo,
+                        onDoubleTap: () => populateTestLoginInfo(),
-                        onLongPress: _populateTestLoginInfo1,
+                        onLongPress: () => populateTestLoginInfo1(),
                         child: RotationTransition(
-                          turns: _logoAnimationController,
+                          turns: logoAnimationController,
                           child: const ImmichLogo(heroTag: 'logo'),
                         ),
                       ),
                       const Padding(padding: EdgeInsets.only(top: 8.0, bottom: 16), child: ImmichTitleText()),
                     ],
                   ),
+
                   // Note: This used to have an AnimatedSwitcher, but was removed
                   // because of https://github.com/flutter/flutter/issues/120874
-                  Form(key: _loginFormKey, child: serverSelectionOrLogin),
+                  Form(key: loginFormKey, child: serverSelectionOrLogin),
                 ],
               ),
             ),

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

@@ -1,20 +1,23 @@
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 
-class OAuthLoginButton extends StatelessWidget {
+class OAuthLoginButton extends ConsumerWidget {
   final TextEditingController serverEndpointController;
+  final ValueNotifier<bool> isLoading;
   final String buttonLabel;
-  final VoidCallback onPressed;
+  final Function() onPressed;
 
   const OAuthLoginButton({
     super.key,
     required this.serverEndpointController,
+    required this.isLoading,
     required this.buttonLabel,
     required this.onPressed,
   });
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     return ElevatedButton.icon(
       style: ElevatedButton.styleFrom(
         backgroundColor: context.primaryColor.withAlpha(230),

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

@@ -1,45 +1,36 @@
 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 StatefulWidget {
+class PasswordInput extends HookConsumerWidget {
   final TextEditingController controller;
   final FocusNode? focusNode;
-  final VoidCallback? onSubmit;
+  final Function()? onSubmit;
 
   const PasswordInput({super.key, required this.controller, this.focusNode, this.onSubmit});
 
   @override
-  State<PasswordInput> createState() => _PasswordInputState();
+  Widget build(BuildContext context, WidgetRef ref) {
-}
+    final isPasswordVisible = useState<bool>(false);
 
-class _PasswordInputState extends State<PasswordInput> {
-  bool _isPasswordVisible = false;
-
-  void _togglePasswordVisibility() {
-    setState(() {
-      _isPasswordVisible = !_isPasswordVisible;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
     return TextFormField(
-      obscureText: !_isPasswordVisible,
+      obscureText: !isPasswordVisible.value,
-      controller: widget.controller,
+      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: _togglePasswordVisibility,
+          onPressed: () => isPasswordVisible.value = !isPasswordVisible.value,
-          icon: Icon(_isPasswordVisible ? Icons.visibility_off_sharp : Icons.visibility_sharp),
+          icon: Icon(isPasswordVisible.value ? Icons.visibility_off_sharp : Icons.visibility_sharp),
         ),
       ),
       autofillHints: const [AutofillHints.password],
       keyboardType: TextInputType.text,
-      onFieldSubmitted: (_) => widget.onSubmit?.call(),
+      onFieldSubmitted: (_) => onSubmit?.call(),
-      focusNode: widget.focusNode,
+      focusNode: focusNode,
       textInputAction: TextInputAction.go,
     );
   }

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

@@ -1,78 +0,0 @@
-import 'package:auto_route/auto_route.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/widgets/forms/login/loading_icon.dart';
-import 'package:immich_mobile/widgets/forms/login/server_endpoint_input.dart';
-
-class ServerSelectionForm extends StatelessWidget {
-  final TextEditingController serverEndpointController;
-  final FocusNode serverEndpointFocusNode;
-  final bool isLoading;
-  final VoidCallback onSubmit;
-
-  const ServerSelectionForm({
-    super.key,
-    required this.serverEndpointController,
-    required this.serverEndpointFocusNode,
-    required this.isLoading,
-    required this.onSubmit,
-  });
-
-  static const double _buttonRadius = 25.0;
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        ServerEndpointInput(
-          controller: serverEndpointController,
-          focusNode: serverEndpointFocusNode,
-          onSubmit: onSubmit,
-        ),
-        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: isLoading ? null : onSubmit,
-                icon: const Icon(Icons.arrow_forward_rounded),
-                label: const Text('next', style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)).tr(),
-              ),
-            ),
-          ],
-        ),
-        const SizedBox(height: 18),
-        if (isLoading) const LoadingIcon(),
-      ],
-    );
-  }
-}

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

@@ -1,24 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-
-class VersionCompatibilityWarning extends StatelessWidget {
-  final String message;
-
-  const VersionCompatibilityWarning({super.key, required this.message});
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8.0),
-      child: Container(
-        padding: const EdgeInsets.all(16),
-        decoration: BoxDecoration(
-          color: context.isDarkTheme ? Colors.red.shade700 : Colors.red.shade100,
-          borderRadius: const BorderRadius.all(Radius.circular(8)),
-          border: Border.all(color: context.isDarkTheme ? Colors.red.shade900 : Colors.red[200]!),
-        ),
-        child: Text(message, textAlign: TextAlign.center),
-      ),
-    );
-  }
-}

mobile/test/utils/timezone_test.dart

@@ -1,278 +0,0 @@
-import 'package:flutter_test/flutter_test.dart';
-import 'package:immich_mobile/utils/timezone.dart';
-import 'package:timezone/data/latest.dart' as tz;
-
-void main() {
-  setUpAll(() {
-    tz.initializeTimeZones();
-  });
-
-  group('applyTimezoneOffset', () {
-    group('with named timezone locations', () {
-      test('should convert UTC to Asia/Hong_Kong (+08:00)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Hong_Kong',
-        );
-
-        expect(adjustedTime.hour, 20); // 12:00 UTC + 8 hours = 20:00
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should convert UTC to America/New_York (handles DST)', () {
-        // Summer time (EDT = UTC-4)
-        final summerUtc = DateTime.utc(2024, 6, 15, 12, 0, 0);
-        final (summerTime, summerOffset) = applyTimezoneOffset(
-          dateTime: summerUtc,
-          timeZone: 'America/New_York',
-        );
-
-        expect(summerTime.hour, 8); // 12:00 UTC - 4 hours = 08:00
-        expect(summerOffset, const Duration(hours: -4));
-
-        // Winter time (EST = UTC-5)
-        final winterUtc = DateTime.utc(2024, 1, 15, 12, 0, 0);
-        final (winterTime, winterOffset) = applyTimezoneOffset(
-          dateTime: winterUtc,
-          timeZone: 'America/New_York',
-        );
-
-        expect(winterTime.hour, 7); // 12:00 UTC - 5 hours = 07:00
-        expect(winterOffset, const Duration(hours: -5));
-      });
-
-      test('should convert UTC to Europe/London', () {
-        // Winter (GMT = UTC+0)
-        final winterUtc = DateTime.utc(2024, 1, 15, 12, 0, 0);
-        final (winterTime, winterOffset) = applyTimezoneOffset(
-          dateTime: winterUtc,
-          timeZone: 'Europe/London',
-        );
-
-        expect(winterTime.hour, 12);
-        expect(winterOffset, Duration.zero);
-
-        // Summer (BST = UTC+1)
-        final summerUtc = DateTime.utc(2024, 6, 15, 12, 0, 0);
-        final (summerTime, summerOffset) = applyTimezoneOffset(
-          dateTime: summerUtc,
-          timeZone: 'Europe/London',
-        );
-
-        expect(summerTime.hour, 13);
-        expect(summerOffset, const Duration(hours: 1));
-      });
-
-      test('should handle timezone with 30-minute offset (Asia/Kolkata)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Kolkata',
-        );
-
-        expect(adjustedTime.hour, 17);
-        expect(adjustedTime.minute, 30); // 12:00 UTC + 5:30 = 17:30
-        expect(offset, const Duration(hours: 5, minutes: 30));
-      });
-
-      test('should handle timezone with 45-minute offset (Asia/Kathmandu)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Kathmandu',
-        );
-
-        expect(adjustedTime.hour, 17);
-        expect(adjustedTime.minute, 45); // 12:00 UTC + 5:45 = 17:45
-        expect(offset, const Duration(hours: 5, minutes: 45));
-      });
-    });
-
-    group('with UTC offset format', () {
-      test('should handle UTC+08:00 format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC+08:00',
-        );
-
-        expect(adjustedTime.hour, 20);
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should handle UTC-05:00 format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC-05:00',
-        );
-
-        expect(adjustedTime.hour, 7);
-        expect(offset, const Duration(hours: -5));
-      });
-
-      test('should handle UTC+8 format (without minutes)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC+8',
-        );
-
-        expect(adjustedTime.hour, 20);
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should handle UTC-5 format (without minutes)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC-5',
-        );
-
-        expect(adjustedTime.hour, 7);
-        expect(offset, const Duration(hours: -5));
-      });
-
-      test('should handle plain UTC format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC',
-        );
-
-        expect(adjustedTime.hour, 12);
-        expect(offset, Duration.zero);
-      });
-
-      test('should handle lowercase utc format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'utc+08:00',
-        );
-
-        expect(adjustedTime.hour, 20);
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should handle UTC+05:30 format (with minutes)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC+05:30',
-        );
-
-        expect(adjustedTime.hour, 17);
-        expect(adjustedTime.minute, 30);
-        expect(offset, const Duration(hours: 5, minutes: 30));
-      });
-    });
-
-    group('with null or invalid timezone', () {
-      test('should return UTC time when timezone is null', () {
-        final localTime = DateTime(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: localTime,
-          timeZone: null,
-        );
-
-        expect(adjustedTime.isUtc, true);
-        expect(offset, adjustedTime.timeZoneOffset);
-      });
-
-      test('should return UTC time when timezone is invalid', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Invalid/Timezone',
-        );
-
-        expect(adjustedTime.isUtc, true);
-        expect(adjustedTime.hour, 12);
-        expect(offset, adjustedTime.timeZoneOffset);
-      });
-
-      test('should return UTC time when UTC offset format is malformed', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC++08',
-        );
-
-        expect(adjustedTime.isUtc, true);
-        expect(adjustedTime.hour, 12);
-      });
-    });
-
-    group('edge cases', () {
-      test('should handle date crossing midnight forward', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 20, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Tokyo', // UTC+9
-        );
-
-        expect(adjustedTime.day, 16); // Crosses to next day
-        expect(adjustedTime.hour, 5); // 20:00 UTC + 9 = 05:00 next day
-        expect(offset, const Duration(hours: 9));
-      });
-
-      test('should handle date crossing midnight backward', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 3, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'America/Los_Angeles', // UTC-7 in summer
-        );
-
-        expect(adjustedTime.day, 14); // Crosses to previous day
-        expect(adjustedTime.hour, 20); // 03:00 UTC - 7 = 20:00 previous day
-        expect(offset, const Duration(hours: -7));
-      });
-
-      test('should handle year boundary crossing', () {
-        final utcTime = DateTime.utc(2024, 1, 1, 2, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'America/New_York', // UTC-5 in winter
-        );
-
-        expect(adjustedTime.year, 2023);
-        expect(adjustedTime.month, 12);
-        expect(adjustedTime.day, 31);
-        expect(adjustedTime.hour, 21); // 02:00 UTC - 5 = 21:00 Dec 31
-      });
-
-      test('should convert local time to UTC before applying timezone', () {
-        // Create a local time (not UTC)
-        final localTime = DateTime(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, _) = applyTimezoneOffset(
-          dateTime: localTime,
-          timeZone: 'Asia/Hong_Kong',
-        );
-
-        // The function converts to UTC first, then applies timezone
-        // So local 12:00 -> UTC (depends on local timezone) -> HK time
-        // We can verify it's working by checking it's a TZDateTime
-        expect(adjustedTime, isNotNull);
-      });
-    });
-  });
-}

web/src/lib/utils/tree-utils.ts

@@ -62,16 +62,8 @@ export class TreeNode extends Map<string, TreeNode> {
       const child = this.values().next().value!;
       child.value = joinPaths(this.value, child.value);
       child.parent = this.parent;
-
+      this.parent.delete(this.value);
-      const entries = Array.from(this.parent.entries());
+      this.parent.set(child.value, child);
-      this.parent.clear();
-      for (const [key, value] of entries) {
-        if (key === this.value) {
-          this.parent.set(child.value, child);
-        } else {
-          this.parent.set(key, value);
-        }
-      }
     }
 
     for (const child of this.values()) {