diff --git a/filcnaplo/assets/icons/ic_rounded.png b/filcnaplo/assets/icons/ic_rounded.png new file mode 100644 index 0000000..aced29b Binary files /dev/null and b/filcnaplo/assets/icons/ic_rounded.png differ diff --git a/filcnaplo/lib/theme/colors/colors.dart b/filcnaplo/lib/theme/colors/colors.dart index e28ff48..590fbd3 100644 --- a/filcnaplo/lib/theme/colors/colors.dart +++ b/filcnaplo/lib/theme/colors/colors.dart @@ -50,4 +50,10 @@ abstract class ThemeAppColors { final Color gradeThree = const Color(0x00000000); final Color gradeTwo = const Color(0x00000000); final Color gradeOne = const Color(0x00000000); + // v5 ui login + final loginPrimary = const Color(0x00000000); + final loginSecondary = const Color(0x00000000); + final inputBorder = const Color(0x00000000); + final loginBackground = const Color(0x00000000); + final buttonBackground = const Color(0x00000000); } diff --git a/filcnaplo/lib/theme/colors/dark_desktop.dart b/filcnaplo/lib/theme/colors/dark_desktop.dart index 6857f5b..00fcc00 100644 --- a/filcnaplo/lib/theme/colors/dark_desktop.dart +++ b/filcnaplo/lib/theme/colors/dark_desktop.dart @@ -41,4 +41,15 @@ class DarkDesktopAppColors implements ThemeAppColors { final gradeTwo = const Color(0xFFAE3DF4); @override final gradeOne = const Color(0xFFF43DAB); + // v5 ui login + @override + final loginPrimary = const Color(0xFF0A1C41); + @override + final loginSecondary = const Color(0xFF0A1C41); + @override + final inputBorder = const Color(0xFF586A8E); + @override + final loginBackground = const Color(0xFFEFF4FE); + @override + final buttonBackground = const Color(0xFF0A1C41); } diff --git a/filcnaplo/lib/theme/colors/dark_mobile.dart b/filcnaplo/lib/theme/colors/dark_mobile.dart index c2c9479..ceb2187 100644 --- a/filcnaplo/lib/theme/colors/dark_mobile.dart +++ b/filcnaplo/lib/theme/colors/dark_mobile.dart @@ -42,4 +42,15 @@ class DarkMobileAppColors implements ThemeAppColors { final purple = const Color(0xffBF5AF2); @override final pink = const Color(0xffFF375F); + // v5 ui login + @override + final loginPrimary = const Color(0xFFD4DAE7); + @override + final loginSecondary = const Color(0xFFA4B1CC); + @override + final inputBorder = const Color(0xFF586A8E); + @override + final loginBackground = const Color(0xFF0F131D); + @override + final buttonBackground = const Color(0xFF3D7BF4); } diff --git a/filcnaplo/lib/theme/colors/light_desktop.dart b/filcnaplo/lib/theme/colors/light_desktop.dart index a7236fa..6dd5d71 100644 --- a/filcnaplo/lib/theme/colors/light_desktop.dart +++ b/filcnaplo/lib/theme/colors/light_desktop.dart @@ -41,4 +41,15 @@ class LightDesktopAppColors implements ThemeAppColors { final gradeTwo = const Color(0xFFAE3DF4); @override final gradeOne = const Color(0xFFF43DAB); + // v5 ui login + @override + final loginPrimary = const Color(0xFF0A1C41); + @override + final loginSecondary = const Color(0xFF0A1C41); + @override + final inputBorder = const Color(0xFF586A8E); + @override + final loginBackground = const Color(0xFFEFF4FE); + @override + final buttonBackground = const Color(0xFF0A1C41); } diff --git a/filcnaplo/lib/theme/colors/light_mobile.dart b/filcnaplo/lib/theme/colors/light_mobile.dart index db3baf6..c887158 100644 --- a/filcnaplo/lib/theme/colors/light_mobile.dart +++ b/filcnaplo/lib/theme/colors/light_mobile.dart @@ -41,4 +41,15 @@ class LightMobileAppColors implements ThemeAppColors { final gradeTwo = const Color(0xFFAE3DF4); @override final gradeOne = const Color(0xFFF43DAB); + // ui v5 login + @override + final loginPrimary = const Color(0xFF0A1C41); + @override + final loginSecondary = const Color(0xFF0A1C41); + @override + final inputBorder = const Color(0xFF586A8E); + @override + final loginBackground = const Color(0xFFEFF4FE); + @override + final buttonBackground = const Color(0xFF0A1C41); } diff --git a/filcnaplo/pubspec.yaml b/filcnaplo/pubspec.yaml index 3b5f147..2bd8d2e 100644 --- a/filcnaplo/pubspec.yaml +++ b/filcnaplo/pubspec.yaml @@ -85,6 +85,7 @@ flutter: assets: - assets/icons/ic_launcher.png - assets/icons/ic_splash.png + - assets/icons/ic_rounded.png - assets/animations/ - assets/images/ - assets/images/subject_covers/ diff --git a/filcnaplo_mobile_ui/lib/screens/login/login_button.dart b/filcnaplo_mobile_ui/lib/screens/login/login_button.dart index 4990124..deee9b4 100755 --- a/filcnaplo_mobile_ui/lib/screens/login/login_button.dart +++ b/filcnaplo_mobile_ui/lib/screens/login/login_button.dart @@ -1,3 +1,4 @@ +import 'package:filcnaplo/theme/colors/colors.dart'; import 'package:flutter/material.dart'; class LoginButton extends StatelessWidget { @@ -9,21 +10,21 @@ class LoginButton extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialButton( + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 6.0, + ), + child: child, + ), elevation: 0, focusElevation: 0, hoverElevation: 0, highlightElevation: 0, - minWidth: MediaQuery.of(context).size.width - 64.0, + minWidth: double.infinity, onPressed: onPressed, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), - color: Colors.white, - textColor: Colors.black, - child: Padding( - padding: const EdgeInsets.symmetric( - vertical: 15.0, - ), - child: child, - ), + color: AppColors.of(context).buttonBackground, + textColor: Colors.white, ); } } diff --git a/filcnaplo_mobile_ui/lib/screens/login/login_input.dart b/filcnaplo_mobile_ui/lib/screens/login/login_input.dart index c18c04c..cdc375c 100755 --- a/filcnaplo_mobile_ui/lib/screens/login/login_input.dart +++ b/filcnaplo_mobile_ui/lib/screens/login/login_input.dart @@ -1,3 +1,4 @@ +import 'package:filcnaplo/theme/colors/colors.dart'; import 'package:flutter/material.dart'; import 'package:flutter_feather_icons/flutter_feather_icons.dart'; @@ -48,22 +49,40 @@ class _LoginInputState extends State { return TextField( focusNode: widget.focusNode, controller: widget.controller, - cursorColor: const Color(0xff20AC9B), + cursorColor: AppColors.of(context).filc, textInputAction: TextInputAction.next, autofillHints: [autofill], obscureText: obscure, scrollPhysics: const BouncingScrollPhysics(), decoration: InputDecoration( - fillColor: Colors.black.withOpacity(0.15), - filled: true, - enabledBorder: UnderlineInputBorder( + // fillColor: Colors.black.withOpacity(0.15), + filled: false, + enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12.0), - borderSide: const BorderSide(width: 0, color: Colors.transparent), + borderSide: BorderSide( + width: 1, + color: AppColors.of(context).inputBorder, + ), ), - focusedBorder: UnderlineInputBorder( + // focusedBorder: UnderlineInputBorder( + // borderRadius: BorderRadius.circular(12.0), + // borderSide: const BorderSide(width: 0, color: Colors.transparent), + // ), + focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12.0), - borderSide: const BorderSide(width: 0, color: Colors.transparent), + borderSide: BorderSide( + width: 1, + color: AppColors.of(context).filc, + ), ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12.0), + borderSide: const BorderSide( + width: 1, + color: Color(0xFFFF0000), + ), + ), + contentPadding: const EdgeInsets.symmetric(horizontal: 16.0), suffixIconConstraints: const BoxConstraints(maxHeight: 42.0, maxWidth: 48.0), suffixIcon: widget.style == LoginInputStyle.password || @@ -82,22 +101,28 @@ class _LoginInputState extends State { if (widget.onClear != null) widget.onClear!(); } }, - icon: Icon( - widget.style == LoginInputStyle.password - ? obscure - ? FeatherIcons.eye - : FeatherIcons.eyeOff - : FeatherIcons.x, - color: Colors.white), + icon: widget.style == LoginInputStyle.password + ? Icon( + obscure ? FeatherIcons.eye : FeatherIcons.eyeOff, + color: AppColors.of(context).text.withOpacity(0.8), + weight: 0.1, + size: 18.0, + ) + : Icon( + FeatherIcons.x, + color: AppColors.of(context).text.withOpacity(0.8), + weight: 0.1, + size: 20.0, + ), ), ), ) : null, ), - style: const TextStyle( + style: TextStyle( fontSize: 14.0, fontWeight: FontWeight.w500, - color: Colors.white, + color: AppColors.of(context).text.withOpacity(0.8), ), ); } diff --git a/filcnaplo_mobile_ui/lib/screens/login/login_screen.dart b/filcnaplo_mobile_ui/lib/screens/login/login_screen.dart index e5248e5..be773f4 100755 --- a/filcnaplo_mobile_ui/lib/screens/login/login_screen.dart +++ b/filcnaplo_mobile_ui/lib/screens/login/login_screen.dart @@ -9,6 +9,7 @@ import 'package:filcnaplo_mobile_ui/common/system_chrome.dart'; import 'package:filcnaplo_mobile_ui/screens/login/login_button.dart'; import 'package:filcnaplo_mobile_ui/screens/login/login_input.dart'; import 'package:filcnaplo_mobile_ui/screens/login/school_input/school_input.dart'; +import 'package:filcnaplo_mobile_ui/screens/settings/privacy_view.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'login_screen.i18n.dart'; @@ -32,16 +33,16 @@ class LoginScreenState extends State { bool showBack = false; // Scaffold Gradient background - final LinearGradient _backgroundGradient = const LinearGradient( - colors: [ - Color.fromARGB(255, 61, 122, 244), - Color.fromARGB(255, 23, 77, 185), - Color.fromARGB(255, 7, 42, 112), - ], - begin: Alignment(-0.8, -1.0), - end: Alignment(0.8, 1.0), - stops: [-1.0, 0.0, 1.0], - ); + // final LinearGradient _backgroundGradient = const LinearGradient( + // colors: [ + // Color.fromARGB(255, 61, 122, 244), + // Color.fromARGB(255, 23, 77, 185), + // Color.fromARGB(255, 7, 42, 112), + // ], + // begin: Alignment(-0.8, -1.0), + // end: Alignment(0.8, 1.0), + // stops: [-1.0, 0.0, 1.0], + // ); late String tempUsername = ''; @@ -77,71 +78,88 @@ class LoginScreenState extends State { Widget build(BuildContext context) { return Scaffold( body: Container( - decoration: BoxDecoration(gradient: _backgroundGradient), + decoration: BoxDecoration(color: AppColors.of(context).loginBackground), child: SingleChildScrollView( physics: const ClampingScrollPhysics(), controller: _scrollController, child: Container( - decoration: BoxDecoration(gradient: _backgroundGradient), + decoration: + BoxDecoration(color: AppColors.of(context).loginBackground), width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: SafeArea( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - if (showBack) - Container( - alignment: Alignment.topLeft, - padding: const EdgeInsets.only(left: 16.0, top: 12.0), - child: const ClipOval( - child: Material( - type: MaterialType.transparency, - child: BackButton(color: Colors.white), - ), + Container( + alignment: Alignment.topLeft, + padding: const EdgeInsets.only(left: 16.0, top: 12.0), + child: ClipOval( + child: Material( + type: MaterialType.transparency, + child: showBack + ? BackButton( + color: AppColors.of(context).loginPrimary) + : const SizedBox(height: 48.0), ), ), + ), + const SizedBox( + height: 50.0, + ), - const Spacer(), - - // App logo + // app icon Padding( - padding: const EdgeInsets.only(bottom: 24.0), - child: ClipRect( - child: Container( - // Png shadow *hack* - width: MediaQuery.of(context).size.width / 4, - margin: const EdgeInsets.only( - left: 12.0, right: 12.0, bottom: 12.0), - // Png shadow *hack* - child: Stack( - children: [ - Padding( - padding: const EdgeInsets.only(top: 8.0), - child: Opacity( - opacity: 0.3, - child: Image.asset( - "assets/icons/ic_splash.png", - color: Colors.black)), - ), - BackdropFilter( - filter: - ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0), - child: Image.asset("assets/icons/ic_splash.png"), - ) - ], - ), + padding: EdgeInsets.zero, + child: Image.asset( + 'assets/icons/ic_rounded.png', + width: 50.0, + ), + ), + + // texts + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 10.0, + vertical: 12.0, + ), + child: Text( + 'reFilc', + style: TextStyle( + color: AppColors.of(context).loginPrimary, + fontSize: 28.0, + fontWeight: FontWeight.bold, + ), + ), + ), + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 10.0, + ), + child: Text( + 'login_w_kreten'.i18n, + textAlign: TextAlign.center, + style: TextStyle( + color: AppColors.of(context).loginPrimary, + fontSize: 18.0, + fontWeight: FontWeight.w500, + height: 1.2, ), ), ), - // Inputs + // inputs Padding( - padding: const EdgeInsets.symmetric(horizontal: 32.0), + padding: const EdgeInsets.only( + left: 22.0, + right: 22.0, + top: 150.0, + ), child: AutofillGroup( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - // Username + // username Padding( padding: const EdgeInsets.only(bottom: 6.0), child: Row( @@ -151,10 +169,10 @@ class LoginScreenState extends State { child: Text( "username".i18n, maxLines: 1, - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 14.0, + style: TextStyle( + color: AppColors.of(context).loginPrimary, + fontWeight: FontWeight.w500, + fontSize: 12.0, ), ), ), @@ -163,8 +181,9 @@ class LoginScreenState extends State { "usernameHint".i18n, maxLines: 1, textAlign: TextAlign.right, - style: const TextStyle( - color: Colors.white54, + style: TextStyle( + color: + AppColors.of(context).loginSecondary, fontWeight: FontWeight.w500, fontSize: 12.0, ), @@ -181,7 +200,7 @@ class LoginScreenState extends State { ), ), - // Password + // password Padding( padding: const EdgeInsets.only(bottom: 6.0), child: Row( @@ -191,10 +210,10 @@ class LoginScreenState extends State { child: Text( "password".i18n, maxLines: 1, - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 14.0, + style: TextStyle( + color: AppColors.of(context).loginPrimary, + fontWeight: FontWeight.w500, + fontSize: 12.0, ), ), ), @@ -203,8 +222,9 @@ class LoginScreenState extends State { "passwordHint".i18n, maxLines: 1, textAlign: TextAlign.right, - style: const TextStyle( - color: Colors.white54, + style: TextStyle( + color: + AppColors.of(context).loginSecondary, fontWeight: FontWeight.w500, fontSize: 12.0, ), @@ -221,16 +241,16 @@ class LoginScreenState extends State { ), ), - // School + // school Padding( padding: const EdgeInsets.only(bottom: 6.0), child: Text( "school".i18n, maxLines: 1, - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 14.0, + style: TextStyle( + color: AppColors.of(context).loginPrimary, + fontWeight: FontWeight.w500, + fontSize: 12.0, ), ), ), @@ -243,9 +263,13 @@ class LoginScreenState extends State { ), ), - // Log in button + // login button Padding( - padding: const EdgeInsets.only(top: 42.0), + padding: const EdgeInsets.only( + top: 35.0, + left: 22.0, + right: 22.0, + ), child: Visibility( visible: _loginState != LoginState.inProgress, replacement: const Padding( @@ -259,18 +283,21 @@ class LoginScreenState extends State { child: Text("login".i18n, maxLines: 1, style: const TextStyle( - fontWeight: FontWeight.w600, - fontSize: 15.0, + fontWeight: FontWeight.bold, + fontSize: 20.0, )), onPressed: () => _loginAPI(context: context), ), ), ), + + // error messages if (_loginState == LoginState.missingFields || _loginState == LoginState.invalidGrant || _loginState == LoginState.failed) Padding( - padding: const EdgeInsets.only(top: 8.0), + padding: const EdgeInsets.only( + top: 8.0, left: 12.0, right: 12.0), child: Text( [ "missing_fields", @@ -285,7 +312,22 @@ class LoginScreenState extends State { textAlign: TextAlign.center, ), ), - const Spacer() + const SizedBox(height: 22.0), + + // privacy policy + GestureDetector( + onTap: () => PrivacyView.show(context), + child: Text( + 'privacy'.i18n, + style: TextStyle( + color: AppColors.of(context).loginSecondary, + fontWeight: FontWeight.w500, + fontSize: 14.0, + ), + ), + ), + + const Spacer(), ], ), ), diff --git a/filcnaplo_mobile_ui/lib/screens/login/login_screen.i18n.dart b/filcnaplo_mobile_ui/lib/screens/login/login_screen.i18n.dart index c73dff0..5926125 100755 --- a/filcnaplo_mobile_ui/lib/screens/login/login_screen.i18n.dart +++ b/filcnaplo_mobile_ui/lib/screens/login/login_screen.i18n.dart @@ -16,7 +16,9 @@ extension Localization on String { // "Invalid Username/Password! (Try adding spaces after Username)", "Invalid Username/Password!", "error": "Failed to log in.", - "schools_error": "Failed to get schools." + "schools_error": "Failed to get schools.", + "login_w_kreten": "Log in with your e-KRÉTA account to continue!", + "privacy": "Privacy Policy", }, "hu_hu": { "username": "Felhasználónév", @@ -31,7 +33,10 @@ extension Localization on String { // "Helytelen Felhasználónév/Jelszó! (Próbálj szóközöket írni a Felhasználónév után)", "Helytelen Felhasználónév/Jelszó!", "error": "Sikertelen bejelentkezés.", - "schools_error": "Nem sikerült lekérni az iskolákat." + "schools_error": "Nem sikerült lekérni az iskolákat.", + "login_w_kreten": + "Jelentkezz be az e-KRÉTA fiókoddal a folytatáshoz!", + "privacy": "Adatkezelési tájékoztató", }, "de_de": { "username": "Benutzername", @@ -44,7 +49,10 @@ extension Localization on String { "missing_fields": "Fehlende Felder!", "invalid_grant": "Ungültiger Benutzername/Passwort!", "error": "Anmeldung fehlgeschlagen.", - "schools_error": "Keine Schulen gefunden." + "schools_error": "Keine Schulen gefunden.", + "login_w_kreten": + "Melden Sie sich mit Ihrem e-KRÉTA-Konto an, um fortzufahren!", + "privacy": "Datenschutzrichtlinie", }, };