itsscb/df
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ft/adds drawer and refactors navigation

Browse Source
This commit is contained in:
itsscb 2023-10-28 23:27:51 +02:00
parent 6aeda6ea34
commit 5bd03eab7c
7 changed files with 577 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/lib/gapi/client.dart
View File

@ -5,7 +5,7 @@ import 'package:app/pb/rpc_login.pb.dart';
import 'package:app/pb/service_df.pbgrpc.dart'; import 'package:app/pb/service_df.pbgrpc.dart';
import 'package:grpc/grpc.dart'; import 'package:grpc/grpc.dart';
class Client { class GClient {
String baseUrl = 'localhost'; String baseUrl = 'localhost';
int port = 9090; int port = 9090;
@ -39,7 +39,7 @@ class Client {
Future<LoginResponse> login( Future<LoginResponse> login(
{required String email, {required String email,
required String password, required String password,
required Function onError, required Function({GrpcError? error}) onError,
required Function onSuccess}) async { required Function onSuccess}) async {
LoginResponse response = LoginResponse(); LoginResponse response = LoginResponse();
try { try {
@ -56,9 +56,9 @@ class Client {
} on GrpcError catch (e) { } on GrpcError catch (e) {
print('caught error: ${e.message}'); print('caught error: ${e.message}');
metadata['Authorization'] = ''; metadata['Authorization'] = '';
onError(); onError(error: e);
} catch (e) { } catch (e) {
print('caught error: ${e}'); print('caught error: $e');
metadata['Authorization'] = ''; metadata['Authorization'] = '';
onError(); onError();
} }

6
frontend/app/lib/main.dart
View File

@ -1,5 +1,5 @@
import 'package:app/pages/home_page.dart'; import 'package:app/pages/home_page.dart';
import 'package:app/pages/login_page.dart'; import 'package:app/pages/start_page.dart';
import 'package:app/widgets/background.dart'; import 'package:app/widgets/background.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -43,8 +43,8 @@ void main() async {
backgroundColor: Colors.black, backgroundColor: Colors.black,
foregroundColor: Colors.white, foregroundColor: Colors.white,
)), )),
home: const Background( home: Background(
child: HomePage(), child: StartPage(),
), ),
), ),
); );

126
frontend/app/lib/pages/dashboard_page.dart
View File

@ -5,10 +5,31 @@ import 'package:app/widgets/background.dart';
import 'package:app/widgets/loading_widget.dart'; import 'package:app/widgets/loading_widget.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
GlobalKey<ScaffoldState> scaffolKey = GlobalKey<ScaffoldState>();
List<BottomNavigationBarItem> bottomBarButtons = const [
BottomNavigationBarItem(
label: 'Zurueck',
backgroundColor: Colors.white,
icon: Icon(
Icons.arrow_back,
color: Colors.white,
),
),
BottomNavigationBarItem(
backgroundColor: Colors.white,
label: 'AccountInf',
icon: Icon(
Icons.person,
color: Colors.white,
),
),
];
class DashboardPage extends StatefulWidget { class DashboardPage extends StatefulWidget {
DashboardPage({super.key, required this.client}); DashboardPage({super.key, required this.client});
final Client client; final GClient client;
@override @override
State<DashboardPage> createState() => _DashboardPageState(); State<DashboardPage> createState() => _DashboardPageState();
@ -50,83 +71,40 @@ class _DashboardPageState extends State<DashboardPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
print(widget.client.accessToken); return Background(
return Scaffold( child: Scaffold(
bottomNavigationBar: BottomNavigationBar( key: scaffolKey,
items: const [ appBar: AppBar(
BottomNavigationBarItem( automaticallyImplyLeading: false,
label: '', flexibleSpace: Image.asset(
backgroundColor: Colors.white, 'lib/assets/logo_300x200.png',
icon: Icon( height: 80,
Icons.arrow_back,
color: Colors.white,
),
), ),
BottomNavigationBarItem(
backgroundColor: Colors.white,
label: '',
icon: Icon(
Icons.person,
color: Colors.white,
),
),
BottomNavigationBarItem(
backgroundColor: Colors.white,
label: '',
icon: Icon(
Icons.group,
color: Colors.white,
),
),
BottomNavigationBarItem(
backgroundColor: Colors.white,
label: '',
icon: Icon(
Icons.file_copy,
color: Colors.white,
),
),
],
backgroundColor: Colors.transparent,
),
appBar: AppBar(
automaticallyImplyLeading: false,
flexibleSpace: Image.asset(
'lib/assets/logo_300x200.png',
height: 80,
), ),
// actions: [ bottomNavigationBar: BottomNavigationBar(
// IconButton( items: bottomBarButtons,
// onPressed: () {}, backgroundColor: Colors.black,
// icon: const Icon(Icons.menu), ),
// tooltip: 'Menu', body: !_loading
// ), ? Background(
// IconButton( child: Center(
// onPressed: () {}, child: Column(
// icon: const Icon(Icons.login_sharp), children: [
// tooltip: 'Login', const SizedBox(
// ), height: 48,
// ],
),
body: !_loading
? Background(
child: Center(
child: Column(
children: [
const SizedBox(
height: 48,
),
Text(
'Willkommen ${accountInfo.firstname} ${accountInfo.lastname}!',
style: const TextStyle(
fontSize: 24,
), ),
), Text(
], 'Willkommen ${accountInfo.firstname} ${accountInfo.lastname}!',
style: const TextStyle(
fontSize: 24,
),
),
],
),
), ),
), )
) : const LoadingWidget(),
: const LoadingWidget(), ),
); );
} }
} }

14
frontend/app/lib/pages/home_page.dart
View File

@ -94,9 +94,13 @@ class _HomePageState extends State<HomePage> {
Widget _selectPage(Pages page) { Widget _selectPage(Pages page) {
switch (page) { switch (page) {
case Pages.login: case Pages.login:
return const LoginPage(); return LoginPage(
// onChangePage: changePage,
);
default: default:
return StartPage(onChangePage: changePage); return StartPage(
// onChangePage: changePage,
);
} }
} }
@ -120,12 +124,12 @@ class _HomePageState extends State<HomePage> {
}); });
} }
final Client client = Client(); final GClient client = GClient();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: _selectedPage == 'start' appBar: _selectedPage == Pages.start
? AppBar( ? AppBar(
automaticallyImplyLeading: false, automaticallyImplyLeading: false,
) )
@ -138,7 +142,7 @@ class _HomePageState extends State<HomePage> {
), ),
bottomNavigationBar: BottomNavigationBar( bottomNavigationBar: BottomNavigationBar(
items: bottomBarButtons[_selectedPage]!.toList(), items: bottomBarButtons[_selectedPage]!.toList(),
backgroundColor: Colors.transparent, backgroundColor: Colors.black,
), ),
body: Container( body: Container(
padding: const EdgeInsets.fromLTRB(16, 32, 16, 32), padding: const EdgeInsets.fromLTRB(16, 32, 16, 32),

377
frontend/app/lib/pages/login_page.dart
View File

@ -1,10 +1,41 @@
import 'package:app/gapi/client.dart'; import 'package:app/gapi/client.dart';
import 'package:app/pages/dashboard_page.dart'; import 'package:app/pages/start_page.dart';
import 'package:app/widgets/background.dart';
import 'package:app/widgets/loading_widget.dart'; import 'package:app/widgets/loading_widget.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:grpc/grpc.dart';
GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
List<BottomNavigationBarItem> bottomBarButtons = [
const BottomNavigationBarItem(
label: 'back',
backgroundColor: Colors.white,
icon: Icon(
Icons.arrow_back,
color: Colors.white,
),
),
BottomNavigationBarItem(
backgroundColor: Colors.white,
label: 'Menu',
icon: IconButton(
onPressed: () => scaffoldKey.currentState!.openDrawer(),
icon: const Icon(
Icons.menu,
color: Colors.white,
),
),
),
];
class LoginPage extends StatefulWidget { class LoginPage extends StatefulWidget {
const LoginPage({super.key}); LoginPage({
super.key,
// required this.onChangePage,
});
// void Function(Pages page) onChangePage;
@override @override
State<LoginPage> createState() => _LoginPageState(); State<LoginPage> createState() => _LoginPageState();
@ -13,13 +44,22 @@ class LoginPage extends StatefulWidget {
class _LoginPageState extends State<LoginPage> { class _LoginPageState extends State<LoginPage> {
bool _loading = false; bool _loading = false;
List<BottomNavigationBarItem> _selectedBottomBarButtons = bottomBarButtons;
void _bottomBarAction(int index) {
switch (_selectedBottomBarButtons[index].label?.toLowerCase()) {
case 'back':
Navigator.of(context).pop();
}
}
void _setLoading(bool loading) { void _setLoading(bool loading) {
setState(() { setState(() {
_loading = loading; _loading = loading;
}); });
} }
final Client client = Client(); final GClient client = GClient();
final _formKey = GlobalKey<FormState>(); final _formKey = GlobalKey<FormState>();
final mailController = TextEditingController(); final mailController = TextEditingController();
@ -27,101 +67,258 @@ class _LoginPageState extends State<LoginPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return !_loading return Background(
? Form( child: Scaffold(
key: _formKey, key: scaffoldKey,
appBar: AppBar(
automaticallyImplyLeading: false,
// flexibleSpace: Image.asset(
// 'lib/assets/logo_300x200.png',
// height: 80,
// ),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomBarButtons,
backgroundColor: Colors.black,
fixedColor: Colors.black,
onTap: (value) => _bottomBarAction(value),
),
drawer: Drawer(
backgroundColor: Colors.black,
child: Padding(
padding: const EdgeInsets.all(40.0),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
TextFormField( const Spacer(),
// style: TextStyle( TextButton(
// color: Theme.of(context).colorScheme.primary, onPressed: () {
// ), scaffoldKey.currentState!.closeDrawer();
controller: mailController,
decoration: const InputDecoration(
fillColor: Color.fromARGB(30, 255, 255, 255),
filled: true,
hintStyle: TextStyle(
color: Colors.white38,
),
hintText: 'E-Mail Adresse',
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bitte eine gültige E-Mail Adresse eingeben';
}
return null;
}, },
child: const Row(
children: [
Text(
'About',
style: TextStyle(fontSize: 20),
),
Spacer(),
Icon(
Icons.question_answer,
color: Colors.white,
),
],
),
), ),
TextFormField( TextButton(
style: const TextStyle( onPressed: () {
color: Colors.white, scaffoldKey.currentState!.closeDrawer();
),
controller: passwordController,
decoration: const InputDecoration(
fillColor: Color.fromARGB(30, 255, 255, 255),
filled: true,
hintStyle: TextStyle(
color: Colors.white38,
),
hintText: 'Passwort',
),
keyboardType: TextInputType.visiblePassword,
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bitte geben Sie Ihr Passwort ein';
}
return null;
}, },
child: const Row(
children: [
Text(
'Datenschutz',
style: TextStyle(fontSize: 20),
),
Spacer(),
Icon(
Icons.privacy_tip,
color: Colors.white,
),
],
),
), ),
ElevatedButton( TextButton(
onPressed: () { onPressed: () {
if (_formKey.currentState!.validate()) { scaffoldKey.currentState!.closeDrawer();
// final navigator = Navigator.of(context); },
_setLoading(true); child: const Row(
client children: [
.login( Text(
email: mailController.text, 'Impressum',
password: passwordController.text, style: TextStyle(fontSize: 20),
onError: () { ),
_setLoading(false); Spacer(),
ScaffoldMessenger.of(context) Icon(
.showSnackBar(const SnackBar( Icons.apartment,
content: Text('Login fehlgeschlagen'), color: Colors.white,
)); ),
}, ],
onSuccess: () { ),
// _setLoading(false); ),
ScaffoldMessenger.of(context) const SizedBox(
.showSnackBar(const SnackBar( height: 250,
content: Text('Login erfolgreich'), )
));
},
)
.then(
(r) {
if (r.accessToken != '') {
Navigator.push(
context,
MaterialPageRoute(
builder: (ctx) => DashboardPage(
client: client,
),
),
);
}
// _setLoading(false);
},
);
}
},
child: const Icon(Icons.arrow_forward))
], ],
), ),
) ),
: const LoadingWidget(); ),
body: !_loading
? Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 100, 16, 16),
child: SingleChildScrollView(
child: Column(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Image(
width: 180,
image: AssetImage(
'lib/assets/logo_300x200.png',
),
),
const SizedBox(
height: 30,
),
const Text(
'Login',
style: TextStyle(
fontFamily: 'sans-serif',
fontSize: 24,
height: 1.6,
fontWeight: FontWeight.normal,
letterSpacing: 6,
),
),
const SizedBox(
height: 20,
),
TextFormField(
// style: TextStyle(
// color: Theme.of(context).colorScheme.primary,
// ),
controller: mailController,
decoration: const InputDecoration(
fillColor: Color.fromARGB(30, 255, 255, 255),
filled: true,
hintStyle: TextStyle(
color: Colors.white38,
),
hintText: 'E-Mail Adresse',
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bitte eine gültige E-Mail Adresse eingeben';
}
return null;
},
),
TextFormField(
style: const TextStyle(
color: Colors.white,
),
controller: passwordController,
decoration: const InputDecoration(
fillColor: Color.fromARGB(30, 255, 255, 255),
filled: true,
hintStyle: TextStyle(
color: Colors.white38,
),
hintText: 'Passwort',
),
keyboardType: TextInputType.visiblePassword,
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bitte geben Sie Ihr Passwort ein';
}
return null;
},
),
SizedBox(
height: 15,
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// final navigator = Navigator.of(context);
_setLoading(true);
client
.login(
email: mailController.text,
password: passwordController.text,
onError: ({GrpcError? error}) {
_setLoading(false);
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
content: const Text(
'Login fehlgeschlagen',
),
action: SnackBarAction(
textColor: Colors.grey,
label: 'Details',
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: error != null
? Text(
'Fehler: ${error.message}',
textAlign:
TextAlign.center,
style:
const TextStyle(
color: Colors
.black),
)
: const Text(
'Interner Fehler',
textAlign:
TextAlign.center,
style: TextStyle(
color:
Colors.black),
),
icon: const Icon(
Icons.error,
color: Colors.black,
),
);
},
);
}),
));
},
onSuccess: () {
// _setLoading(false);
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(
content: Text('Login erfolgreich'),
));
},
)
.then(
(r) {
if (r.accessToken != '') {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (ctx) => StartPage(
client: client,
),
),
(ctx) => false,
);
// widget.onChangePage(
// Pages.dashboard,
// );
}
// _setLoading(false);
},
);
}
},
child: const Icon(Icons.login))
],
),
),
),
)
: const LoadingWidget(),
),
);
} }
} }

2
frontend/app/lib/pages/pages.dart
View File

@ -1 +1 @@
enum Pages { start, login, about, persons } enum Pages { start, login, about, persons, dashboard }

289
frontend/app/lib/pages/start_page.dart
View File

@ -1,87 +1,240 @@
import 'package:app/pages/pages.dart'; import 'package:app/gapi/client.dart';
import 'package:app/pages/login_page.dart';
import 'package:app/widgets/background.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'dart:core'; import 'dart:core';
class StartPage extends StatelessWidget { GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
List<BottomNavigationBarItem> bottomBarButtons = [
const BottomNavigationBarItem(
label: 'register',
backgroundColor: Colors.white,
icon: Column(
children: [
Icon(
Icons.person_add,
color: Colors.white,
),
Text(
'Registrieren',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
)
],
),
),
const BottomNavigationBarItem(
label: 'login',
backgroundColor: Colors.white,
icon: Column(
children: [
Icon(
Icons.login,
color: Colors.white,
),
Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
)
],
),
),
BottomNavigationBarItem(
backgroundColor: Colors.white,
label: 'Menu',
icon: IconButton(
onPressed: () => scaffoldKey.currentState!.openDrawer(),
icon: const Icon(
Icons.menu,
color: Colors.white,
),
),
),
];
class StartPage extends StatefulWidget {
StartPage({ StartPage({
super.key, super.key,
required this.onChangePage, this.client,
}); });
void Function(Pages page) onChangePage; final GClient? client;
@override
State<StartPage> createState() => _StartPageState();
}
class _StartPageState extends State<StartPage> {
List<BottomNavigationBarItem> _selectedBottomBarButtons = bottomBarButtons;
void _bottomBarAction(int index) {
switch (_selectedBottomBarButtons[index].label?.toLowerCase()) {
case 'login':
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => LoginPage()));
}
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Background(
mainAxisAlignment: MainAxisAlignment.center, child: Scaffold(
children: [ key: scaffoldKey,
const Image( appBar: AppBar(
image: AssetImage( automaticallyImplyLeading: false,
'lib/assets/logo_300x200.png', // flexibleSpace: Image.asset(
// 'lib/assets/logo_300x200.png',
// height: 80,
// ),
),
drawer: Drawer(
backgroundColor: Colors.black,
child: Padding(
padding: const EdgeInsets.all(40.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
TextButton(
onPressed: () {
scaffoldKey.currentState!.closeDrawer();
},
child: const Row(
children: [
Text(
'About',
style: TextStyle(fontSize: 20),
),
Spacer(),
Icon(
Icons.question_answer,
color: Colors.white,
),
],
),
),
TextButton(
onPressed: () {
scaffoldKey.currentState!.closeDrawer();
},
child: const Row(
children: [
Text(
'Datenschutz',
style: TextStyle(fontSize: 20),
),
Spacer(),
Icon(
Icons.privacy_tip,
color: Colors.white,
),
],
),
),
TextButton(
onPressed: () {
scaffoldKey.currentState!.closeDrawer();
},
child: const Row(
children: [
Text(
'Impressum',
style: TextStyle(fontSize: 20),
),
Spacer(),
Icon(
Icons.apartment,
color: Colors.white,
),
],
),
),
const SizedBox(
height: 250,
)
],
),
), ),
), ),
// Text( bottomNavigationBar: BottomNavigationBar(
// 'Peace of Mind \nin the\nAfterlife', onTap: (value) => _bottomBarAction(value),
// textAlign: TextAlign.center, items: bottomBarButtons,
// style: TextStyle( backgroundColor: Colors.black,
// fontFamily: 'JosefinSans', fixedColor: Colors.black,
// height: 1.7,
// letterSpacing: 8,
// wordSpacing: 2,
// fontWeight: FontWeight.bold,
// fontSize: 32,
// color: Colors.white,
// decoration: TextDecoration.none,
// decorationColor: Colors.white,
// ),
// ),
const SizedBox(
height: 40,
), ),
Text( body: Padding(
'Digitale Spuren auf Knopfdruck entfernen'.toUpperCase(), padding: const EdgeInsets.all(16.0),
textAlign: TextAlign.center, child: Column(
style: const TextStyle( mainAxisAlignment: MainAxisAlignment.center,
fontFamily: 'sans-serif', children: [
fontSize: 24, const Image(
height: 1.6, image: AssetImage(
fontWeight: FontWeight.normal, 'lib/assets/logo_300x200.png',
letterSpacing: 6, ),
),
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton.icon(
label: const Text('Login'),
onPressed: () {
onChangePage(Pages.login);
},
icon: const Icon(
Icons.login,
semanticLabel: 'Login',
size: 16,
), ),
), const SizedBox(
ElevatedButton.icon( height: 40,
label: const Text('Registrieren'),
onPressed: () {},
icon: const Icon(
Icons.person_add,
semanticLabel: 'Register',
size: 16,
), ),
), Text(
], 'Digitale Spuren auf Knopfdruck entfernen'.toUpperCase(),
), textAlign: TextAlign.center,
// const SizedBox( style: const TextStyle(
// height: 32, fontFamily: 'sans-serif',
// ), fontSize: 24,
height: 1.6,
fontWeight: FontWeight.normal,
letterSpacing: 6,
),
),
// const Spacer(),
// Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.center,
// children: widget.client?.accessToken == null
// ? [
// ElevatedButton.icon(
// label: const Text('Login'),
// onPressed: () {
// // onChangePage(Pages.login);
// Navigator.of(context).push(
// MaterialPageRoute(
// builder: ((context) => LoginPage()),
// ),
// );
// },
// icon: const Icon(
// Icons.login,
// semanticLabel: 'Login',
// size: 16,
// ),
// ),
// ElevatedButton.icon(
// label: const Text('Registrieren'),
// onPressed: () {},
// icon: const Icon(
// Icons.person_add,
// semanticLabel: 'Register',
// size: 16,
// ),
// ),
// ]
// : [],
// ),
// const SizedBox(
// height: 38,
// ),
// const Text('data'), // const Text('data'),
], ],
),
),
),
); );
} }
} }