balint14/student-legacy
balint14/student-legacy
1
Fork 0
forked from firka/student-legacy
Code Pull Requests Activity

added new v5 style login screen

Browse Source
This commit is contained in:
Kima 2024-01-03 00:14:04 +01:00
parent 05e9ee97ca
commit fd603d8c9e
11 changed files with 231 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
filcnaplo/assets/icons/ic_rounded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

6
filcnaplo/lib/theme/colors/colors.dart
View File

@ -50,4 +50,10 @@ abstract class ThemeAppColors {
final Color gradeThree = const Color(0x00000000); final Color gradeThree = const Color(0x00000000);
final Color gradeTwo = const Color(0x00000000); final Color gradeTwo = const Color(0x00000000);
final Color gradeOne = 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);
} }

11
filcnaplo/lib/theme/colors/dark_desktop.dart
View File

@ -41,4 +41,15 @@ class DarkDesktopAppColors implements ThemeAppColors {
final gradeTwo = const Color(0xFFAE3DF4); final gradeTwo = const Color(0xFFAE3DF4);
@override @override
final gradeOne = const Color(0xFFF43DAB); 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);
} }

11
filcnaplo/lib/theme/colors/dark_mobile.dart
View File

@ -42,4 +42,15 @@ class DarkMobileAppColors implements ThemeAppColors {
final purple = const Color(0xffBF5AF2); final purple = const Color(0xffBF5AF2);
@override @override
final pink = const Color(0xffFF375F); 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);
} }

11
filcnaplo/lib/theme/colors/light_desktop.dart
View File

@ -41,4 +41,15 @@ class LightDesktopAppColors implements ThemeAppColors {
final gradeTwo = const Color(0xFFAE3DF4); final gradeTwo = const Color(0xFFAE3DF4);
@override @override
final gradeOne = const Color(0xFFF43DAB); 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);
} }

11
filcnaplo/lib/theme/colors/light_mobile.dart
View File

@ -41,4 +41,15 @@ class LightMobileAppColors implements ThemeAppColors {
final gradeTwo = const Color(0xFFAE3DF4); final gradeTwo = const Color(0xFFAE3DF4);
@override @override
final gradeOne = const Color(0xFFF43DAB); 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);
} }

1
filcnaplo/pubspec.yaml
View File

@ -85,6 +85,7 @@ flutter:
assets: assets:
- assets/icons/ic_launcher.png - assets/icons/ic_launcher.png
- assets/icons/ic_splash.png - assets/icons/ic_splash.png
- assets/icons/ic_rounded.png
- assets/animations/ - assets/animations/
- assets/images/ - assets/images/
- assets/images/subject_covers/ - assets/images/subject_covers/

19
filcnaplo_mobile_ui/lib/screens/login/login_button.dart
View File

@ -1,3 +1,4 @@
import 'package:filcnaplo/theme/colors/colors.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class LoginButton extends StatelessWidget { class LoginButton extends StatelessWidget {
@ -9,21 +10,21 @@ class LoginButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialButton( return MaterialButton(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 6.0,
),
child: child,
),
elevation: 0, elevation: 0,
focusElevation: 0, focusElevation: 0,
hoverElevation: 0, hoverElevation: 0,
highlightElevation: 0, highlightElevation: 0,
minWidth: MediaQuery.of(context).size.width - 64.0, minWidth: double.infinity,
onPressed: onPressed, onPressed: onPressed,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
color: Colors.white, color: AppColors.of(context).buttonBackground,
textColor: Colors.black, textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 15.0,
),
child: child,
),
); );
} }
} }

57
filcnaplo_mobile_ui/lib/screens/login/login_input.dart
View File

@ -1,3 +1,4 @@
import 'package:filcnaplo/theme/colors/colors.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart'; import 'package:flutter_feather_icons/flutter_feather_icons.dart';
@ -48,22 +49,40 @@ class _LoginInputState extends State<LoginInput> {
return TextField( return TextField(
focusNode: widget.focusNode, focusNode: widget.focusNode,
controller: widget.controller, controller: widget.controller,
cursorColor: const Color(0xff20AC9B), cursorColor: AppColors.of(context).filc,
textInputAction: TextInputAction.next, textInputAction: TextInputAction.next,
autofillHints: [autofill], autofillHints: [autofill],
obscureText: obscure, obscureText: obscure,
scrollPhysics: const BouncingScrollPhysics(), scrollPhysics: const BouncingScrollPhysics(),
decoration: InputDecoration( decoration: InputDecoration(
fillColor: Colors.black.withOpacity(0.15), // fillColor: Colors.black.withOpacity(0.15),
filled: true, filled: false,
enabledBorder: UnderlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0), 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), 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: suffixIconConstraints:
const BoxConstraints(maxHeight: 42.0, maxWidth: 48.0), const BoxConstraints(maxHeight: 42.0, maxWidth: 48.0),
suffixIcon: widget.style == LoginInputStyle.password || suffixIcon: widget.style == LoginInputStyle.password ||
@ -82,22 +101,28 @@ class _LoginInputState extends State<LoginInput> {
if (widget.onClear != null) widget.onClear!(); if (widget.onClear != null) widget.onClear!();
} }
}, },
icon: Icon( icon: widget.style == LoginInputStyle.password
widget.style == LoginInputStyle.password ? Icon(
? obscure obscure ? FeatherIcons.eye : FeatherIcons.eyeOff,
? FeatherIcons.eye color: AppColors.of(context).text.withOpacity(0.8),
: FeatherIcons.eyeOff weight: 0.1,
: FeatherIcons.x, size: 18.0,
color: Colors.white), )
: Icon(
FeatherIcons.x,
color: AppColors.of(context).text.withOpacity(0.8),
weight: 0.1,
size: 20.0,
),
), ),
), ),
) )
: null, : null,
), ),
style: const TextStyle( style: TextStyle(
fontSize: 14.0, fontSize: 14.0,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Colors.white, color: AppColors.of(context).text.withOpacity(0.8),
), ),
); );
} }

194
filcnaplo_mobile_ui/lib/screens/login/login_screen.dart
View File

@ -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_button.dart';
import 'package:filcnaplo_mobile_ui/screens/login/login_input.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/login/school_input/school_input.dart';
import 'package:filcnaplo_mobile_ui/screens/settings/privacy_view.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'login_screen.i18n.dart'; import 'login_screen.i18n.dart';
@ -32,16 +33,16 @@ class LoginScreenState extends State<LoginScreen> {
bool showBack = false; bool showBack = false;
// Scaffold Gradient background // Scaffold Gradient background
final LinearGradient _backgroundGradient = const LinearGradient( // final LinearGradient _backgroundGradient = const LinearGradient(
colors: [ // colors: [
Color.fromARGB(255, 61, 122, 244), // Color.fromARGB(255, 61, 122, 244),
Color.fromARGB(255, 23, 77, 185), // Color.fromARGB(255, 23, 77, 185),
Color.fromARGB(255, 7, 42, 112), // Color.fromARGB(255, 7, 42, 112),
], // ],
begin: Alignment(-0.8, -1.0), // begin: Alignment(-0.8, -1.0),
end: Alignment(0.8, 1.0), // end: Alignment(0.8, 1.0),
stops: [-1.0, 0.0, 1.0], // stops: [-1.0, 0.0, 1.0],
); // );
late String tempUsername = ''; late String tempUsername = '';
@ -77,71 +78,88 @@ class LoginScreenState extends State<LoginScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: Container( body: Container(
decoration: BoxDecoration(gradient: _backgroundGradient), decoration: BoxDecoration(color: AppColors.of(context).loginBackground),
child: SingleChildScrollView( child: SingleChildScrollView(
physics: const ClampingScrollPhysics(), physics: const ClampingScrollPhysics(),
controller: _scrollController, controller: _scrollController,
child: Container( child: Container(
decoration: BoxDecoration(gradient: _backgroundGradient), decoration:
BoxDecoration(color: AppColors.of(context).loginBackground),
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height, height: MediaQuery.of(context).size.height,
child: SafeArea( child: SafeArea(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
if (showBack) Container(
Container( alignment: Alignment.topLeft,
alignment: Alignment.topLeft, padding: const EdgeInsets.only(left: 16.0, top: 12.0),
padding: const EdgeInsets.only(left: 16.0, top: 12.0), child: ClipOval(
child: const ClipOval( child: Material(
child: Material( type: MaterialType.transparency,
type: MaterialType.transparency, child: showBack
child: BackButton(color: Colors.white), ? BackButton(
), color: AppColors.of(context).loginPrimary)
: const SizedBox(height: 48.0),
), ),
), ),
),
const SizedBox(
height: 50.0,
),
const Spacer(), // app icon
// App logo
Padding( Padding(
padding: const EdgeInsets.only(bottom: 24.0), padding: EdgeInsets.zero,
child: ClipRect( child: Image.asset(
child: Container( 'assets/icons/ic_rounded.png',
// Png shadow *hack* width: 50.0,
width: MediaQuery.of(context).size.width / 4, ),
margin: const EdgeInsets.only( ),
left: 12.0, right: 12.0, bottom: 12.0),
// Png shadow *hack* // texts
child: Stack( Padding(
children: [ padding: const EdgeInsets.symmetric(
Padding( horizontal: 10.0,
padding: const EdgeInsets.only(top: 8.0), vertical: 12.0,
child: Opacity( ),
opacity: 0.3, child: Text(
child: Image.asset( 'reFilc',
"assets/icons/ic_splash.png", style: TextStyle(
color: Colors.black)), color: AppColors.of(context).loginPrimary,
), fontSize: 28.0,
BackdropFilter( fontWeight: FontWeight.bold,
filter: ),
ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0), ),
child: Image.asset("assets/icons/ic_splash.png"), ),
) 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(
padding: const EdgeInsets.symmetric(horizontal: 32.0), padding: const EdgeInsets.only(
left: 22.0,
right: 22.0,
top: 150.0,
),
child: AutofillGroup( child: AutofillGroup(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Username // username
Padding( Padding(
padding: const EdgeInsets.only(bottom: 6.0), padding: const EdgeInsets.only(bottom: 6.0),
child: Row( child: Row(
@ -151,10 +169,10 @@ class LoginScreenState extends State<LoginScreen> {
child: Text( child: Text(
"username".i18n, "username".i18n,
maxLines: 1, maxLines: 1,
style: const TextStyle( style: TextStyle(
color: Colors.white, color: AppColors.of(context).loginPrimary,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w500,
fontSize: 14.0, fontSize: 12.0,
), ),
), ),
), ),
@ -163,8 +181,9 @@ class LoginScreenState extends State<LoginScreen> {
"usernameHint".i18n, "usernameHint".i18n,
maxLines: 1, maxLines: 1,
textAlign: TextAlign.right, textAlign: TextAlign.right,
style: const TextStyle( style: TextStyle(
color: Colors.white54, color:
AppColors.of(context).loginSecondary,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12.0, fontSize: 12.0,
), ),
@ -181,7 +200,7 @@ class LoginScreenState extends State<LoginScreen> {
), ),
), ),
// Password // password
Padding( Padding(
padding: const EdgeInsets.only(bottom: 6.0), padding: const EdgeInsets.only(bottom: 6.0),
child: Row( child: Row(
@ -191,10 +210,10 @@ class LoginScreenState extends State<LoginScreen> {
child: Text( child: Text(
"password".i18n, "password".i18n,
maxLines: 1, maxLines: 1,
style: const TextStyle( style: TextStyle(
color: Colors.white, color: AppColors.of(context).loginPrimary,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w500,
fontSize: 14.0, fontSize: 12.0,
), ),
), ),
), ),
@ -203,8 +222,9 @@ class LoginScreenState extends State<LoginScreen> {
"passwordHint".i18n, "passwordHint".i18n,
maxLines: 1, maxLines: 1,
textAlign: TextAlign.right, textAlign: TextAlign.right,
style: const TextStyle( style: TextStyle(
color: Colors.white54, color:
AppColors.of(context).loginSecondary,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12.0, fontSize: 12.0,
), ),
@ -221,16 +241,16 @@ class LoginScreenState extends State<LoginScreen> {
), ),
), ),
// School // school
Padding( Padding(
padding: const EdgeInsets.only(bottom: 6.0), padding: const EdgeInsets.only(bottom: 6.0),
child: Text( child: Text(
"school".i18n, "school".i18n,
maxLines: 1, maxLines: 1,
style: const TextStyle( style: TextStyle(
color: Colors.white, color: AppColors.of(context).loginPrimary,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w500,
fontSize: 14.0, fontSize: 12.0,
), ),
), ),
), ),
@ -243,9 +263,13 @@ class LoginScreenState extends State<LoginScreen> {
), ),
), ),
// Log in button // login button
Padding( Padding(
padding: const EdgeInsets.only(top: 42.0), padding: const EdgeInsets.only(
top: 35.0,
left: 22.0,
right: 22.0,
),
child: Visibility( child: Visibility(
visible: _loginState != LoginState.inProgress, visible: _loginState != LoginState.inProgress,
replacement: const Padding( replacement: const Padding(
@ -259,18 +283,21 @@ class LoginScreenState extends State<LoginScreen> {
child: Text("login".i18n, child: Text("login".i18n,
maxLines: 1, maxLines: 1,
style: const TextStyle( style: const TextStyle(
fontWeight: FontWeight.w600, fontWeight: FontWeight.bold,
fontSize: 15.0, fontSize: 20.0,
)), )),
onPressed: () => _loginAPI(context: context), onPressed: () => _loginAPI(context: context),
), ),
), ),
), ),
// error messages
if (_loginState == LoginState.missingFields || if (_loginState == LoginState.missingFields ||
_loginState == LoginState.invalidGrant || _loginState == LoginState.invalidGrant ||
_loginState == LoginState.failed) _loginState == LoginState.failed)
Padding( Padding(
padding: const EdgeInsets.only(top: 8.0), padding: const EdgeInsets.only(
top: 8.0, left: 12.0, right: 12.0),
child: Text( child: Text(
[ [
"missing_fields", "missing_fields",
@ -285,7 +312,22 @@ class LoginScreenState extends State<LoginScreen> {
textAlign: TextAlign.center, 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(),
], ],
), ),
), ),

14
filcnaplo_mobile_ui/lib/screens/login/login_screen.i18n.dart
View File

@ -16,7 +16,9 @@ extension Localization on String {
// "Invalid Username/Password! (Try adding spaces after Username)", // "Invalid Username/Password! (Try adding spaces after Username)",
"Invalid Username/Password!", "Invalid Username/Password!",
"error": "Failed to log in.", "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": { "hu_hu": {
"username": "Felhasználónév", "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ó! (Próbálj szóközöket írni a Felhasználónév után)",
"Helytelen Felhasználónév/Jelszó!", "Helytelen Felhasználónév/Jelszó!",
"error": "Sikertelen bejelentkezés.", "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": { "de_de": {
"username": "Benutzername", "username": "Benutzername",
@ -44,7 +49,10 @@ extension Localization on String {
"missing_fields": "Fehlende Felder!", "missing_fields": "Fehlende Felder!",
"invalid_grant": "Ungültiger Benutzername/Passwort!", "invalid_grant": "Ungültiger Benutzername/Passwort!",
"error": "Anmeldung fehlgeschlagen.", "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",
}, },
}; };