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 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);
}

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

@ -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);
}

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

@ -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);
}

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

@ -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);
}

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

@ -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);
}

1
filcnaplo/pubspec.yaml
View File

@ -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/

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';
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,
);
}
}

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_feather_icons/flutter_feather_icons.dart';
@ -48,22 +49,40 @@ class _LoginInputState extends State<LoginInput> {
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<LoginInput> {
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),
),
);
}

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_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<LoginScreen> {
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<LoginScreen> {
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<LoginScreen> {
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<LoginScreen> {
"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<LoginScreen> {
),
),
// Password
// password
Padding(
padding: const EdgeInsets.only(bottom: 6.0),
child: Row(
@ -191,10 +210,10 @@ class LoginScreenState extends State<LoginScreen> {
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<LoginScreen> {
"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<LoginScreen> {
),
),
// 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<LoginScreen> {
),
),
// 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<LoginScreen> {
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<LoginScreen> {
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!",
"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",
},
};