feat(mobile): allow self-signed certificate on the mobile app (#4051)

* WIP: self-signed certs accept * WIP: format * WIP: pushing up adding settings menu * Add serverEndpointURL check * Add translation update * Handle errors properly * format * typo * cleanup * styling and permission * remove deadcode * put pack condition * styling * remove hiding settings options * format + match drop shadow * match color * remove deadcode --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-10-29 17:40:28 +00:00 · 2023-09-12 10:51:43 -04:00
parent a678590ccd
commit fb20381f98
10 changed files with 157 additions and 42 deletions
--- a/mobile/lib/modules/login/ui/login_form.dart
+++ b/mobile/lib/modules/login/ui/login_form.dart
@@ -1,3 +1,4 @@
+import 'dart:io';
 import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -88,6 +89,16 @@ class LoginForm extends HookConsumerWidget {
        isPasswordLoginEnable.value = true;
        isLoadingServer.value = false;
        return false;
+      } on HandshakeException {
+        ImmichToast.show(
+          context: context,
+          msg: 'login_form_handshake_exception'.tr(),
+          toastType: ToastType.error,
+        );
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+        isLoadingServer.value = false;
+        return false;
      } catch (e) {
        ImmichToast.show(
          context: context,
@@ -226,6 +237,7 @@ class LoginForm extends HookConsumerWidget {
    }

    buildSelectServer() {
+      const buttonRadius = 25.0;
      return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
@@ -235,24 +247,51 @@ class LoginForm extends HookConsumerWidget {
            onSubmit: getServerLoginCredential,
          ),
          const SizedBox(height: 18),
-          ElevatedButton.icon(
-            style: ElevatedButton.styleFrom(
-              padding: const EdgeInsets.symmetric(vertical: 12),
-            ),
-            onPressed: isLoadingServer.value ? null : getServerLoginCredential,
-            icon: const Icon(Icons.arrow_forward_rounded),
-            label: const Text(
-              'login_form_next_button',
-              style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
-            ).tr(),
-          ),
-          if (isLoadingServer.value)
-            const Padding(
-              padding: EdgeInsets.only(top: 18.0),
-              child: Center(
-                child: CircularProgressIndicator(),
+          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: () =>
+                      AutoRouter.of(context).push(const SettingsRoute()),
+                  icon: const Icon(Icons.settings_rounded),
+                  label: const SizedBox.shrink(),
+                ),
              ),
-            ),
+              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 : getServerLoginCredential,
+                  icon: const Icon(Icons.arrow_forward_rounded),
+                  label: const Text(
+                    'login_form_next_button',
+                    style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+                  ).tr(),
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 18),
+          if (isLoadingServer.value) const LoadingIcon(),
        ],
      );
    }
@@ -285,18 +324,7 @@ class LoginForm extends HookConsumerWidget {
            // Note: This used to have an AnimatedSwitcher, but was removed
            // because of https://github.com/flutter/flutter/issues/120874
            isLoading.value
-                ? const Padding(
-                    padding: EdgeInsets.only(top: 18.0),
-                    child: SizedBox(
-                      width: 24,
-                      height: 24,
-                      child: FittedBox(
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                        ),
-                      ),
-                    ),
-                  )
+                ? const LoadingIcon()
                : Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.center,
@@ -572,3 +600,23 @@ class OAuthLoginButton extends ConsumerWidget {
    );
  }
 }
+
+class LoadingIcon extends StatelessWidget {
+  const LoadingIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Padding(
+      padding: EdgeInsets.only(top: 18.0),
+      child: SizedBox(
+        width: 24,
+        height: 24,
+        child: FittedBox(
+          child: CircularProgressIndicator(
+            strokeWidth: 2,
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/settings/services/app_settings.service.dart
+++ b/mobile/lib/modules/settings/services/app_settings.service.dart
@@ -49,6 +49,7 @@ enum AppSettingsEnum<T> {
  mapThemeMode<bool>(StoreKey.mapThemeMode, null, false),
  mapShowFavoriteOnly<bool>(StoreKey.mapShowFavoriteOnly, null, false),
  mapRelativeDate<int>(StoreKey.mapRelativeDate, null, 0),
+  allowSelfSignedSSLCert<bool>(StoreKey.selfSignedCert, null, false),
  ;

  const AppSettingsEnum(this.storeKey, this.hiveKey, this.defaultValue);
--- a/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
+++ b/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
@@ -1,23 +1,29 @@
+import 'dart:io';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_hooks/flutter_hooks.dart' show useEffect, useState;
+import 'package:immich_mobile/shared/models/store.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 import 'package:immich_mobile/modules/settings/ui/settings_switch_list_tile.dart';
 import 'package:immich_mobile/shared/services/immich_logger.service.dart';
+import 'package:immich_mobile/utils/http_ssl_cert_override.dart';
 import 'package:logging/logging.dart';

 class AdvancedSettings extends HookConsumerWidget {
  const AdvancedSettings({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
+    bool isLoggedIn = Store.tryGet(StoreKey.currentUser) != null;
    final appSettingService = ref.watch(appSettingsServiceProvider);
    final isEnabled =
        useState(AppSettingsEnum.advancedTroubleshooting.defaultValue);
    final levelId = useState(AppSettingsEnum.logLevel.defaultValue);
    final preferRemote =
        useState(AppSettingsEnum.preferRemoteImage.defaultValue);
+    final allowSelfSignedSSLCert =
+        useState(AppSettingsEnum.allowSelfSignedSSLCert.defaultValue);

    useEffect(
      () {
@@ -27,6 +33,8 @@ class AdvancedSettings extends HookConsumerWidget {
        levelId.value = appSettingService.getSetting(AppSettingsEnum.logLevel);
        preferRemote.value =
            appSettingService.getSetting(AppSettingsEnum.preferRemoteImage);
+        allowSelfSignedSSLCert.value = appSettingService
+            .getSetting(AppSettingsEnum.allowSelfSignedSSLCert);
        return null;
      },
      [],
@@ -88,6 +96,17 @@ class AdvancedSettings extends HookConsumerWidget {
          title: "advanced_settings_prefer_remote_title".tr(),
          subtitle: "advanced_settings_prefer_remote_subtitle".tr(),
        ),
+        SettingsSwitchListTile(
+          enabled: !isLoggedIn,
+          appSettingService: appSettingService,
+          valueNotifier: allowSelfSignedSSLCert,
+          settingsEnum: AppSettingsEnum.allowSelfSignedSSLCert,
+          title: "advanced_settings_self_signed_ssl_title".tr(),
+          subtitle: "advanced_settings_self_signed_ssl_subtitle".tr(),
+          onChanged: (value) {
+            HttpOverrides.global = HttpSSLCertOverride();
+          },
+        ),
      ],
    );
  }
--- a/mobile/lib/modules/settings/ui/settings_switch_list_tile.dart
+++ b/mobile/lib/modules/settings/ui/settings_switch_list_tile.dart
@@ -8,6 +8,7 @@ class SettingsSwitchListTile extends StatelessWidget {
  final String title;
  final bool enabled;
  final String? subtitle;
+  final Function(bool)? onChanged;

  SettingsSwitchListTile({
    required this.appSettingService,
@@ -16,19 +17,26 @@ class SettingsSwitchListTile extends StatelessWidget {
    required this.title,
    this.subtitle,
    this.enabled = true,
+    this.onChanged,
  }) : super(key: Key(settingsEnum.name));

  @override
  Widget build(BuildContext context) {
    return SwitchListTile.adaptive(
+      selectedTileColor: enabled ? null : Theme.of(context).disabledColor,
      value: valueNotifier.value,
-      onChanged: !enabled
-          ? null
-          : (value) {
-              valueNotifier.value = value;
-              appSettingService.setSetting(settingsEnum, value);
-            },
-      activeColor: Theme.of(context).primaryColor,
+      onChanged: (bool value) {
+        if (enabled) {
+          valueNotifier.value = value;
+          appSettingService.setSetting(settingsEnum, value);
+        }
+        if (onChanged != null) {
+          onChanged!(value);
+        }
+      },
+      activeColor: enabled
+          ? Theme.of(context).primaryColor
+          : Theme.of(context).disabledColor,
      dense: true,
      title: Text(
        title,