From c59cc5d1f70daa62e7ff998d8d4c4afcf19b2c5e Mon Sep 17 00:00:00 2001 From: ssbg04 Date: Wed, 5 Aug 2026 18:38:59 +0800 Subject: [PATCH] fix(frontend): implement server IP modal activation via 3 logo taps and dark mode support on login screen --- frontend/AGENTS.md | 9 +-- .../lib/ui/screens/login/login_screen.dart | 80 ++++++++++--------- 2 files changed, 46 insertions(+), 43 deletions(-) diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md index f000f1f..1c4b581 100644 --- a/frontend/AGENTS.md +++ b/frontend/AGENTS.md @@ -88,12 +88,9 @@ Files backup/restore - mirror mode or zip --> -# WINDOWS AND ANDROID LAYOUT -- make the navigation bar and screen header dark color theme lighter than the backdrop - -# DASHBOARD SCREEN -- section of search icon, notification icon, profile icon blur effect top and bottom - - fix that blur effect sharp edges of border +# LOGIN SCREEN +- hide the server ip modal in icon logo tap 3 times to activate the modal +- apply dark theme --- diff --git a/frontend/lib/ui/screens/login/login_screen.dart b/frontend/lib/ui/screens/login/login_screen.dart index 4bc2772..77e5003 100644 --- a/frontend/lib/ui/screens/login/login_screen.dart +++ b/frontend/lib/ui/screens/login/login_screen.dart @@ -34,6 +34,7 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv final TextEditingController _passwordController = TextEditingController(); bool _obscurePassword = true; bool _rememberMe = false; + int _logoTapCount = 0; final FocusNode _usernameFocus = FocusNode(); final FocusNode _passwordFocus = FocusNode(); @@ -41,6 +42,14 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv late AnimationController _animController; late Animation _revealAnimation; + void _handleLogoTap() { + _logoTapCount++; + if (_logoTapCount >= 3) { + _logoTapCount = 0; + _showServerConfigDialog(); + } + } + @override void initState() { super.initState(); @@ -201,26 +210,30 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv @override Widget build(BuildContext context) { + final isDark = Theme.of(context).brightness == Brightness.dark; return GestureDetector( onTap: () { FocusScope.of(context).unfocus(); }, child: Scaffold( - backgroundColor: AppColors.pageBackground, + backgroundColor: Theme.of(context).scaffoldBackgroundColor, body: Column( children: [ if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) - const SizedBox( + SizedBox( height: 32, - child: WindowCaption( - brightness: Brightness.dark, - backgroundColor: AppColors.primaryGreen, + brightness: Theme.of(context).brightness, + backgroundColor: isDark + ? Theme.of(context).colorScheme.surface + : AppColors.primaryGreen, title: Text( 'Talisay Integrated School', style: TextStyle( - color: Colors.white, + color: isDark + ? Theme.of(context).colorScheme.onSurface + : Colors.white, fontSize: 13, fontWeight: FontWeight.w500, ), @@ -237,7 +250,9 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv animation: _revealAnimation, builder: (context, child) { return Container( - color: AppColors.primaryGreen, + color: isDark + ? Theme.of(context).colorScheme.surface + : AppColors.primaryGreen, child: Row( children: [ if (_revealAnimation.value > 0) @@ -251,10 +266,13 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Image.asset( - 'assets/images/logo.png', - width: 220, - height: 220, + GestureDetector( + onTap: _handleLogoTap, + child: Image.asset( + 'assets/images/logo.png', + width: 220, + height: 220, + ), ), const SizedBox(height: AppSizes.p24), const Text( @@ -303,7 +321,7 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv flex: 4000, child: Container( decoration: BoxDecoration( - color: AppColors.pageBackground, + color: isDark ? AppColors.darkSurfaceCard : AppColors.pageBackground, borderRadius: BorderRadius.only( topLeft: Radius.circular(24.0 * _revealAnimation.value), bottomLeft: Radius.circular(24.0 * _revealAnimation.value), @@ -330,7 +348,7 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv animation: _revealAnimation, builder: (context, child) { return Container( - color: AppColors.primaryGreen, + color: isDark ? Theme.of(context).colorScheme.surface : AppColors.primaryGreen, child: Column( children: [ if (_revealAnimation.value > 0) @@ -351,10 +369,13 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Image.asset( - 'assets/images/logo.png', - width: 100, - height: 100, + GestureDetector( + onTap: _handleLogoTap, + child: Image.asset( + 'assets/images/logo.png', + width: 100, + height: 100, + ), ), const SizedBox(height: AppSizes.p16), const Text( @@ -406,7 +427,7 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv bottom: true, child: Container( decoration: BoxDecoration( - color: AppColors.pageBackground, + color: isDark ? AppColors.darkSurfaceCard : AppColors.pageBackground, borderRadius: BorderRadius.only( topLeft: Radius.circular(24.0 * _revealAnimation.value), topRight: Radius.circular(24.0 * _revealAnimation.value), @@ -528,10 +549,10 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv _revealAnimation.value < 0.5 ? 'Login to TIS Record Management System' : 'Login', - style: const TextStyle( + style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, - color: Colors.black, + color: Theme.of(context).colorScheme.onSurface, ), textAlign: TextAlign.center, ), @@ -571,11 +592,11 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv onChanged: (val) => setState(() => _rememberMe = val ?? false), ), - const Text( + Text( 'Remember Me', style: TextStyle( fontSize: 13, - color: AppColors.textSecondary, + color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6), ), ), ], @@ -599,21 +620,6 @@ class _LoginScreenState extends ConsumerState with SingleTickerProv isLoading: isLoading, onPressed: _handleLogin, ), - const SizedBox(height: AppSizes.p24), - Center( - child: ActionChip( - label: Text( - 'Server: ${ApiConstants.baseUrl} ยท Change', - style: const TextStyle( - fontSize: 11, - color: AppColors.textSecondary, - ), - ), - backgroundColor: Colors.transparent, - side: BorderSide(color: Colors.grey.shade300), - onPressed: _showServerConfigDialog, - ), - ), ], ), );