ft/adds drawer and refactors navigation

frontend/app/lib/gapi/client.dart

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

frontend/app/lib/main.dart

@@ -1,5 +1,5 @@
 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:flutter/material.dart';
 
@@ -43,8 +43,8 @@ void main() async {
             backgroundColor: Colors.black,
             foregroundColor: Colors.white,
           )),
-      home: const Background(
+      home: Background(
-        child: HomePage(),
+        child: StartPage(),
       ),
     ),
   );

frontend/app/lib/pages/dashboard_page.dart

@@ -5,10 +5,31 @@ import 'package:app/widgets/background.dart';
 import 'package:app/widgets/loading_widget.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 {
   DashboardPage({super.key, required this.client});
 
-  final Client client;
+  final GClient client;
 
   @override
   State<DashboardPage> createState() => _DashboardPageState();
@@ -50,63 +71,19 @@ class _DashboardPageState extends State<DashboardPage> {
 
   @override
   Widget build(BuildContext context) {
-    print(widget.client.accessToken);
+    return Background(
-    return Scaffold(
+      child: Scaffold(
-      bottomNavigationBar: BottomNavigationBar(
+        key: scaffolKey,
-        items: const [
-          BottomNavigationBarItem(
-            label: '',
-            backgroundColor: Colors.white,
-            icon: Icon(
-              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: [
+        ),
-        //   IconButton(
+        bottomNavigationBar: BottomNavigationBar(
-        //     onPressed: () {},
+          items: bottomBarButtons,
-        //     icon: const Icon(Icons.menu),
+          backgroundColor: Colors.black,
-        //     tooltip: 'Menu',
-        //   ),
-        // IconButton(
-        //   onPressed: () {},
-        //   icon: const Icon(Icons.login_sharp),
-        //   tooltip: 'Login',
-        // ),
-        // ],
         ),
         body: !_loading
             ? Background(
@@ -127,6 +104,7 @@ class _DashboardPageState extends State<DashboardPage> {
                 ),
               )
             : const LoadingWidget(),
+      ),
     );
   }
 }

frontend/app/lib/pages/home_page.dart

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

frontend/app/lib/pages/login_page.dart

@@ -1,10 +1,41 @@
 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: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 {
-  const LoginPage({super.key});
+  LoginPage({
+    super.key,
+    // required this.onChangePage,
+  });
+
+  // void Function(Pages page) onChangePage;
 
   @override
   State<LoginPage> createState() => _LoginPageState();
@@ -13,13 +44,22 @@ class LoginPage extends StatefulWidget {
 class _LoginPageState extends State<LoginPage> {
   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) {
     setState(() {
       _loading = loading;
     });
   }
 
-  final Client client = Client();
+  final GClient client = GClient();
 
   final _formKey = GlobalKey<FormState>();
   final mailController = TextEditingController();
@@ -27,13 +67,123 @@ class _LoginPageState extends State<LoginPage> {
 
   @override
   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(
               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,
+                )
+              ],
+            ),
+          ),
+        ),
+        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,
@@ -77,6 +227,9 @@ class _LoginPageState extends State<LoginPage> {
                             return null;
                           },
                         ),
+                        SizedBox(
+                          height: 15,
+                        ),
                         ElevatedButton(
                             onPressed: () {
                               if (_formKey.currentState!.validate()) {
@@ -86,11 +239,47 @@ class _LoginPageState extends State<LoginPage> {
                                     .login(
                                   email: mailController.text,
                                   password: passwordController.text,
-                          onError: () {
+                                  onError: ({GrpcError? error}) {
                                     _setLoading(false);
                                     ScaffoldMessenger.of(context)
-                                .showSnackBar(const SnackBar(
+                                        .showSnackBar(SnackBar(
-                              content: Text('Login fehlgeschlagen'),
+                                      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: () {
@@ -104,24 +293,32 @@ class _LoginPageState extends State<LoginPage> {
                                     .then(
                                   (r) {
                                     if (r.accessToken != '') {
-                              Navigator.push(
+                                      Navigator.pushAndRemoveUntil(
                                         context,
                                         MaterialPageRoute(
-                                  builder: (ctx) => DashboardPage(
+                                          builder: (ctx) => StartPage(
                                             client: client,
                                           ),
                                         ),
+                                        (ctx) => false,
                                       );
+                                      // widget.onChangePage(
+                                      //   Pages.dashboard,
+                                      // );
                                     }
                                     // _setLoading(false);
                                   },
                                 );
                               }
                             },
-                    child: const Icon(Icons.arrow_forward))
+                            child: const Icon(Icons.login))
                       ],
                     ),
+                  ),
+                ),
               )
-        : const LoadingWidget();
+            : const LoadingWidget(),
+      ),
+    );
   }
 }

frontend/app/lib/pages/pages.dart

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

frontend/app/lib/pages/start_page.dart

@@ -1,18 +1,176 @@
-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 '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({
     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
   Widget build(BuildContext context) {
-    return Column(
+    return Background(
+      child: Scaffold(
+        key: scaffoldKey,
+        appBar: AppBar(
+          automaticallyImplyLeading: false,
+          // 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,
+                )
+              ],
+            ),
+          ),
+        ),
+        bottomNavigationBar: BottomNavigationBar(
+          onTap: (value) => _bottomBarAction(value),
+          items: bottomBarButtons,
+          backgroundColor: Colors.black,
+          fixedColor: Colors.black,
+        ),
+        body: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               const Image(
@@ -20,21 +178,6 @@ class StartPage extends StatelessWidget {
                   'lib/assets/logo_300x200.png',
                 ),
               ),
-        // Text(
-        //   'Peace of Mind \nin the\nAfterlife',
-        //   textAlign: TextAlign.center,
-        //   style: TextStyle(
-        //     fontFamily: 'JosefinSans',
-        //     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,
               ),
@@ -49,39 +192,49 @@ class StartPage extends StatelessWidget {
                   letterSpacing: 6,
                 ),
               ),
-        const Spacer(),
+              // const Spacer(),
-        Row(
+              // Row(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              //   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          crossAxisAlignment: CrossAxisAlignment.center,
+              //   crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
+              //   children: widget.client?.accessToken == null
-            ElevatedButton.icon(
+              //       ? [
-              label: const Text('Login'),
+              // ElevatedButton.icon(
-              onPressed: () {
+              //   label: const Text('Login'),
-                onChangePage(Pages.login);
+              //   onPressed: () {
-              },
+              //     // onChangePage(Pages.login);
-              icon: const Icon(
+              //     Navigator.of(context).push(
-                Icons.login,
+              //       MaterialPageRoute(
-                semanticLabel: 'Login',
+              //         builder: ((context) => LoginPage()),
-                size: 16,
+              //       ),
-              ),
+              //     );
-            ),
+              //   },
-            ElevatedButton.icon(
+              //   icon: const Icon(
-              label: const Text('Registrieren'),
+              //     Icons.login,
-              onPressed: () {},
+              //     semanticLabel: 'Login',
-              icon: const Icon(
+              //     size: 16,
-                Icons.person_add,
+              //   ),
-                semanticLabel: 'Register',
+              // ),
-                size: 16,
+              //   ElevatedButton.icon(
-              ),
+              //     label: const Text('Registrieren'),
-            ),
+              //     onPressed: () {},
-          ],
+              //     icon: const Icon(
-        ),
+              //       Icons.person_add,
+              //       semanticLabel: 'Register',
+              //       size: 16,
+              //     ),
+              //   ),
+              // ]
+              // : [],
+              // ),
               // const SizedBox(
-        //   height: 32,
+              //   height: 38,
               // ),
 
               // const Text('data'),
             ],
+          ),
+        ),
+      ),
     );
   }
 }