First designs for ui

This commit is contained in:
verboomp
2026-01-23 15:09:34 +01:00
parent b3de3eec8c
commit f48bfe2107
41 changed files with 1727 additions and 412 deletions

View File

@@ -6,9 +6,7 @@ import 'package:go_router/go_router.dart';
import 'package:fotodocumentation/controller/login_controller.dart';
import 'package:fotodocumentation/dto/jwt_token_pair_dto.dart';
import 'package:fotodocumentation/l10n/app_localizations.dart';
import 'package:fotodocumentation/pages/ui_utils/component/general_submit_widget.dart';
import 'package:fotodocumentation/pages/ui_utils/header_utils.dart';
import 'package:fotodocumentation/pages/ui_utils/modern_app_bar.dart';
import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
import 'package:fotodocumentation/utils/di_container.dart';
import 'package:fotodocumentation/utils/login_credentials.dart';
@@ -20,9 +18,9 @@ class LoginWidget extends StatefulWidget {
}
class _LoginWidgetState extends State<LoginWidget> {
HeaderUtils get _headerUtils => DiContainer.get();
LoginController get _loginController => DiContainer.get();
LoginCredentials get _loginCredentials => DiContainer.get();
GeneralStyle get _generalStyle => DiContainer.get();
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@@ -43,26 +41,13 @@ class _LoginWidgetState extends State<LoginWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ModernAppBar(
title: _headerUtils.titleWidget("Login title"),
actions: [],
),
body: _body(context),
);
}
Widget _body(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.grey[50]!,
Colors.white,
],
),
),
color: _generalStyle.pageBackgroundColor,
child: _content(context),
);
}
@@ -81,49 +66,116 @@ class _LoginWidgetState extends State<LoginWidget> {
},
child: ListView(
children: [
Card(
elevation: 4,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
Center(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
key: Key("username"),
controller: _usernameController,
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: AppLocalizations.of(context)!.loginUsernameTFLabel,
),
padding: const EdgeInsets.symmetric(vertical: 40.0),
child: Image.asset(
'assets/images/logo.png',
height: 120,
),
),
),
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 500),
child: Card(
elevation: 0,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(70.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
AppLocalizations.of(context)!.loginTitle,
style: TextStyle(
fontWeight: FontWeight.bold,
color: _generalStyle.primaryTextLabelColor,
fontFamily: _generalStyle.fontFamily,
fontSize: 50,
),
),
),
const SizedBox(height: 40),
if (_error != null) ...[
Center(
child: Text(
_error!,
style: TextStyle(
color: _generalStyle.errorColor,
fontWeight: FontWeight.bold,
fontSize: 16,
fontFamily: _generalStyle.fontFamily,
),
),
),
const SizedBox(height: 40),
],
TextFormField(
key: Key("username"),
controller: _usernameController,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: _error != null ? BorderSide(color: _generalStyle.errorColor) : BorderSide(),
),
enabledBorder: _error != null
? OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: _generalStyle.errorColor),
)
: null,
labelText: AppLocalizations.of(context)!.loginUsernameTFLabel.toUpperCase(),
labelStyle: TextStyle(color: _generalStyle.primaryTextLabelColor, fontFamily: _generalStyle.fontFamily),
floatingLabelBehavior: FloatingLabelBehavior.always,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
),
const SizedBox(height: 25),
TextFormField(
key: Key("password"),
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: _error != null ? BorderSide(color: _generalStyle.errorColor) : BorderSide(),
),
enabledBorder: _error != null
? OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: _generalStyle.errorColor),
)
: null,
labelText: AppLocalizations.of(context)!.loginPasswordTFLabel.toUpperCase(),
labelStyle: TextStyle(color: _generalStyle.primaryTextLabelColor, fontFamily: _generalStyle.fontFamily),
floatingLabelBehavior: FloatingLabelBehavior.always,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
),
const SizedBox(height: 25),
Center(
child: ElevatedButton(
key: Key("SubmitWidgetButton"),
style: ElevatedButton.styleFrom(
backgroundColor: _generalStyle.primaryButtonBackgroundColor,
foregroundColor: _generalStyle.primaryButtonTextColor,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
),
onPressed: () async => await _actionSubmit(context),
child: Text(
AppLocalizations.of(context)!.loginLoginButtonLabel,
style: TextStyle(fontWeight: FontWeight.bold, fontFamily: _generalStyle.fontFamily),
),
),
),
const SizedBox(height: 30),
],
),
const SizedBox(height: 10),
TextFormField(
key: Key("password"),
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: AppLocalizations.of(context)!.loginPasswordTFLabel,
),
),
const SizedBox(height: 10),
if (_error != null) ...[
Text(
_error!,
style: const TextStyle(color: Colors.red),
),
const SizedBox(height: 10),
],
GeneralSubmitWidget(
key: const Key("submit"),
onSelect: () async => await _actionSubmit(context),
title: AppLocalizations.of(context)!.loginLoginButtonLabel,
),
const SizedBox(height: 30),
],
),
),
),
),
@@ -142,7 +194,7 @@ class _LoginWidgetState extends State<LoginWidget> {
JwtTokenPairDto? jwtTokenPairDto = authenticateReply.jwtTokenPairDto;
if (jwtTokenPairDto == null) {
setState(() => _error = "Error message");
setState(() => _error = AppLocalizations.of(context)!.loginErrorMessage);
return;
}