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

ft/adds landing page and refactors navigation

Browse Source
This commit is contained in:
itsscb 2023-10-27 23:02:28 +02:00
parent 42dd9613d4
commit 6aeda6ea34
8 changed files with 345 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/app/lib/assets/fonts/JosefinSans-Italic-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
frontend/app/lib/assets/fonts/JosefinSans-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

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

@ -1,3 +1,4 @@
import 'package:app/pages/home_page.dart';
import 'package:app/pages/login_page.dart'; import 'package:app/pages/login_page.dart';
import 'package:app/widgets/background.dart'; import 'package:app/widgets/background.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -42,7 +43,9 @@ void main() async {
backgroundColor: Colors.black, backgroundColor: Colors.black,
foregroundColor: Colors.white, foregroundColor: Colors.white,
)), )),
home: const Background(child: LoginPage()), home: const Background(
child: HomePage(),
),
), ),
); );
} }

154
frontend/app/lib/pages/home_page.dart Normal file
View File

@ -0,0 +1,154 @@
import 'package:app/gapi/client.dart';
import 'package:app/pages/login_page.dart';
import 'package:app/pages/start_page.dart';
import 'package:flutter/material.dart';
import 'package:app/pages/pages.dart';
Map<Pages, List<BottomNavigationBarItem>> bottomBarButtons = {
Pages.start: 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,
),
),
],
Pages.persons: 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,
),
),
],
Pages.about: 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,
),
),
],
Pages.login: 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 HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _loading = false;
Pages _selectedPage = Pages.start;
Widget _selectPage(Pages page) {
switch (page) {
case Pages.login:
return const LoginPage();
default:
return StartPage(onChangePage: changePage);
}
}
Future<bool> _onWillPop() async {
changePage(Pages.start);
return false;
}
void changePage(Pages page) {
if (!Pages.values.contains(page)) {
page = _selectedPage;
}
setState(() {
_selectedPage = page;
});
}
void _setLoading(bool loading) {
setState(() {
_loading = loading;
});
}
final Client client = Client();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _selectedPage == 'start'
? AppBar(
automaticallyImplyLeading: false,
)
: AppBar(
automaticallyImplyLeading: false,
flexibleSpace: Image.asset(
'lib/assets/logo_300x200.png',
height: 80,
),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomBarButtons[_selectedPage]!.toList(),
backgroundColor: Colors.transparent,
),
body: Container(
padding: const EdgeInsets.fromLTRB(16, 32, 16, 32),
child: Center(
child: WillPopScope(
child: _selectPage(_selectedPage),
onWillPop: () => _onWillPop(),
),
),
),
);
}
}

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

@ -27,131 +27,101 @@ class _LoginPageState extends State<LoginPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return !_loading
appBar: AppBar( ? Form(
automaticallyImplyLeading: false, key: _formKey,
flexibleSpace: Image.asset( child: Column(
'lib/assets/logo_300x200.png', mainAxisAlignment: MainAxisAlignment.center,
height: 80, crossAxisAlignment: CrossAxisAlignment.center,
), children: [
), TextFormField(
bottomNavigationBar: BottomNavigationBar( // style: TextStyle(
items: const [ // color: Theme.of(context).colorScheme.primary,
BottomNavigationBarItem( // ),
label: 'Zurueck', controller: mailController,
backgroundColor: Colors.white, decoration: const InputDecoration(
icon: Icon( fillColor: Color.fromARGB(30, 255, 255, 255),
Icons.arrow_back, filled: true,
color: Colors.white, hintStyle: TextStyle(
), color: Colors.white38,
),
BottomNavigationBarItem(
backgroundColor: Colors.white,
label: 'AccountInf',
icon: Icon(
Icons.person,
color: Colors.white,
),
),
],
backgroundColor: Colors.transparent,
),
body: !_loading
? Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
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, hintText: 'E-Mail Adresse',
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bitte eine gültige E-Mail Adresse eingeben';
}
return null;
},
), ),
TextFormField( keyboardType: TextInputType.emailAddress,
style: const TextStyle( validator: (value) {
color: Colors.white, if (value == null || value.isEmpty) {
), return 'Bitte eine gültige E-Mail Adresse eingeben';
controller: passwordController, }
decoration: const InputDecoration( return null;
fillColor: Color.fromARGB(30, 255, 255, 255), },
filled: true, ),
hintStyle: TextStyle( TextFormField(
color: Colors.white38, style: const TextStyle(
), color: Colors.white,
hintText: 'Passwort',
),
keyboardType: TextInputType.visiblePassword,
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bitte geben Sie Ihr Passwort ein';
}
return null;
},
), ),
ElevatedButton( controller: passwordController,
onPressed: () { decoration: const InputDecoration(
if (_formKey.currentState!.validate()) { fillColor: Color.fromARGB(30, 255, 255, 255),
// final navigator = Navigator.of(context); filled: true,
_setLoading(true); hintStyle: TextStyle(
client color: Colors.white38,
.login( ),
email: mailController.text, hintText: 'Passwort',
password: passwordController.text, ),
onError: () { keyboardType: TextInputType.visiblePassword,
_setLoading(false); obscureText: true,
ScaffoldMessenger.of(context) validator: (value) {
.showSnackBar(const SnackBar( if (value == null || value.isEmpty) {
content: Text('Login fehlgeschlagen'), return 'Bitte geben Sie Ihr Passwort ein';
)); }
}, return null;
onSuccess: () { },
// _setLoading(false); ),
ScaffoldMessenger.of(context) ElevatedButton(
.showSnackBar(const SnackBar( onPressed: () {
content: Text('Login erfolgreich'), if (_formKey.currentState!.validate()) {
)); // final navigator = Navigator.of(context);
}, _setLoading(true);
) client
.then( .login(
(r) { email: mailController.text,
if (r.accessToken != '') { password: passwordController.text,
Navigator.pushAndRemoveUntil( onError: () {
context, _setLoading(false);
MaterialPageRoute( ScaffoldMessenger.of(context)
builder: (ctx) => DashboardPage( .showSnackBar(const SnackBar(
client: client, content: Text('Login fehlgeschlagen'),
), ));
), },
(route) => false); onSuccess: () {
} // _setLoading(false);
// _setLoading(false); ScaffoldMessenger.of(context)
}, .showSnackBar(const SnackBar(
); content: Text('Login erfolgreich'),
} ));
}, },
child: const Icon(Icons.arrow_forward)) )
], .then(
), (r) {
) if (r.accessToken != '') {
: const LoadingWidget(), Navigator.push(
); context,
MaterialPageRoute(
builder: (ctx) => DashboardPage(
client: client,
),
),
);
}
// _setLoading(false);
},
);
}
},
child: const Icon(Icons.arrow_forward))
],
),
)
: const LoadingWidget();
} }
} }

1
frontend/app/lib/pages/pages.dart Normal file
View File

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

87
frontend/app/lib/pages/start_page.dart Normal file
View File

@ -0,0 +1,87 @@
import 'package:app/pages/pages.dart';
import 'package:flutter/material.dart';
import 'dart:core';
class StartPage extends StatelessWidget {
StartPage({
super.key,
required this.onChangePage,
});
void Function(Pages page) onChangePage;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Image(
image: AssetImage(
'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,
),
Text(
'Digitale Spuren auf Knopfdruck entfernen'.toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'sans-serif',
fontSize: 24,
height: 1.6,
fontWeight: FontWeight.normal,
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,
),
),
ElevatedButton.icon(
label: const Text('Registrieren'),
onPressed: () {},
icon: const Icon(
Icons.person_add,
semanticLabel: 'Register',
size: 16,
),
),
],
),
// const SizedBox(
// height: 32,
// ),
// const Text('data'),
],
);
}
}

8
frontend/app/pubspec.yaml
View File

@ -81,8 +81,12 @@ flutter:
# "family" key with the font family name, and a "fonts" key with a # "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For # list giving the asset and other descriptors for the font. For
# example: # example:
# fonts: fonts:
# - family: Schyler - family: JosefinSans
fonts:
- asset: lib/assets/fonts/JosefinSans-Italic-VariableFont_wght.ttf
style: italic
- asset: lib/assets/fonts/JosefinSans-VariableFont_wght.ttf
# fonts: # fonts:
# - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf # - asset: fonts/Schyler-Italic.ttf