From bd5ac307d365f99628e41cb7355cee570e8dd16d Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 9 Jul 2019 10:26:33 +0100 Subject: [PATCH] Login screen now looks very sexy --- To Do List.txt | 7 +- lib/pages/home_page.dart | 2 +- lib/pages/login_page.dart | 165 ++++++++++++--------------- lib/pages/login_page_new.dart | 209 ++++++++++++++++++++++++++++++++++ lib/pages/spash_screen.dart | 6 +- 5 files changed, 289 insertions(+), 100 deletions(-) create mode 100644 lib/pages/login_page_new.dart diff --git a/To Do List.txt b/To Do List.txt index 8f1560f..6617c34 100644 --- a/To Do List.txt +++ b/To Do List.txt @@ -6,8 +6,6 @@ TODO ⁃ Splash screen transition - fade Login - ⁃ Full page/ popover - ⁃ Colours ⁃ save login details option (checkbox or something) Navigation @@ -16,7 +14,4 @@ TODO Submit Receipt ⁃ Categories ⁃ Recurring - ⁃ ‘find’ button displays relevant dialog - -Done - ⁃ submit receipt API implemented more fully so now all transaction options can be submitted + ⁃ 'organisation name' dialog works diff --git a/lib/pages/home_page.dart b/lib/pages/home_page.dart index 6b9ae64..35dc251 100644 --- a/lib/pages/home_page.dart +++ b/lib/pages/home_page.dart @@ -39,6 +39,7 @@ class _HomePageState extends State { ), drawer: BasicDrawer(), body: Container( + padding: EdgeInsets.fromLTRB(0, 15, 0, 0), child: FadeIn( duration: Duration(milliseconds: 500), curve: Curves.easeIn, @@ -47,7 +48,6 @@ class _HomePageState extends State { children: [ ListTile( - contentPadding: EdgeInsets.fromLTRB(0, 15, 0, 0), title: new Center( child: new Text( "Submit Receipt", diff --git a/lib/pages/login_page.dart b/lib/pages/login_page.dart index d102639..351ed25 100644 --- a/lib/pages/login_page.dart +++ b/lib/pages/login_page.dart @@ -18,8 +18,8 @@ class LoginPage extends StatefulWidget { } class LoginPageState extends State { - final TextEditingController _emailController = TextEditingController(text: 'test@example.com'); // remove - final TextEditingController _passwordController = TextEditingController(text: 'abc123'); // remove + final TextEditingController _emailController = TextEditingController(/*text: 'test@example.com'*/); // remove + final TextEditingController _passwordController = TextEditingController(/*text: 'abc123'*/); // remove FocusNode focusNode; // added so focus can move automatically @@ -73,70 +73,39 @@ class LoginPageState extends State { }, child: PlatformScaffold( // drawer: BasicDrawer(), - appBar: AppBar( - title: Text( - "LOGIN", - style: TextStyle( - fontSize: 30.0, - color: Colors.black, - ), - ), - centerTitle: true, - iconTheme: IconThemeData(color: Colors.black), - ), +// body: Container( +// decoration: BoxDecoration(color: Colors.white), +// margin: const EdgeInsets.all(20), +// child: Padding( +// padding: EdgeInsets.fromLTRB(30.0, 170.0, 30.0, 0.0), +// child: ListView( +// children: [ body: Container( - child: Padding( - padding: EdgeInsets.fromLTRB(30.0, 0.0, 30.0, 0.0), - child: ListView( + decoration: BoxDecoration(color: Colors.white), + child: Container( + margin: EdgeInsets.fromLTRB(60,0,60,0), + child: Column( children: [ - Container( - alignment: Alignment.topCenter, - child: Padding( - padding: EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 15.0), - child: Text( - "Local Loop", - style: TextStyle(fontSize: 40.0, color: Colors.black), + Expanded( + child: Container( + margin: EdgeInsets.fromLTRB(15,0,15,0), +// alignment: FractionalOffset(0.5, 0.3), // not sure what this does ngl :/ + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage('assets/images/launch_image.png') ), - )), - Padding( - padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 78.0), - child: RichText( - text: TextSpan( - children: [ - TextSpan( - text: - 'This is the logon page.', - style: new TextStyle( - fontSize: 20.0, - color: Colors.black, - ), - ), - TextSpan( - text: - ' It is currently in development.', - style: new TextStyle( - fontSize: 20.0, - color: Colors.black, - ), - ), - ], ), ), ), - Text( - "Email", - style: TextStyle( - fontSize: 18.0, - color: Colors.black, - fontWeight: FontWeight.bold, - ), - ), Padding( - padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0), + padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0), child: TextField( + autocorrect: false, + textAlign: TextAlign.center, controller: _emailController, decoration: InputDecoration( - hintText: "Use your login email", + hintText: "EMAIL", + hintStyle: TextStyle(fontSize: 15), ), style: TextStyle( fontSize: 18.0, @@ -149,23 +118,15 @@ class LoginPageState extends State { ), ), Padding( - padding: EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0), - child: Text( - "Password", - style: TextStyle( - fontSize: 18.0, - color: Colors.black, - fontWeight: FontWeight.bold, - ), - ), - ), - Padding( - padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0), + padding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0), child: TextField( + autocorrect: false, + textAlign: TextAlign.center, controller: _passwordController, focusNode: focusNode, decoration: InputDecoration( - hintText: 'Your password, keep it secret, keep it safe.', + hintText: 'PASSWORD', + hintStyle: TextStyle(fontSize: 15), ), obscureText: true, style: TextStyle( @@ -173,30 +134,54 @@ class LoginPageState extends State { color: Colors.grey[800], fontWeight: FontWeight.bold, ), - onSubmitted: (_) { - login( _emailController.text, - _passwordController.text); - }, + onSubmitted: (_) { + login( _emailController.text, + _passwordController.text); + }, ), ), - Padding( - padding: EdgeInsets.fromLTRB(0.0, 70.0, 0.0, 0.0), - child: Container( - height: 65.0, - child: RaisedButton( - onPressed: () { - login( _emailController.text, - _passwordController.text); -// showDialog( -// barrierDismissible: false, -// ); -// print("pressed"); - }, - child: Text("LOGIN", - style: - TextStyle(color: Colors.white, fontSize: 22.0)), - color: Colors.blue, +// Padding( +// padding: EdgeInsets.fromLTRB(0.0, 25.0, 0.0, 100.0), +// child: Container( +// height: 45.0, +// child: RaisedButton( +// +// onPressed: () { +// login( _emailController.text, +// _passwordController.text); +// // showDialog( +// // barrierDismissible: false, +// // ); +// // print("pressed"); +// }, +// child: Text("GO", +// style: +// TextStyle(color: Colors.white, fontSize: 20.0)), +// color: Colors.blue, +// ), +// ), +// ), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 100.0), + + child : Material( + child : InkWell( + onTap: () => login( _emailController.text, _passwordController.text), + child: new Container( + width: 100, + height: 50, + decoration: new BoxDecoration( +// color: Colors.lightBlueAccent, + borderRadius: new BorderRadius.circular(0.0), + ), + child: new Center( + child: new Text( + 'GO', style: new TextStyle(fontSize: 18, color: Colors.white),), + ), + ), + splashColor: Colors.lightBlueAccent, ), + color: Colors.blueAccent, ), ), ], diff --git a/lib/pages/login_page_new.dart b/lib/pages/login_page_new.dart new file mode 100644 index 0000000..612fe72 --- /dev/null +++ b/lib/pages/login_page_new.dart @@ -0,0 +1,209 @@ +import 'dart:async'; +import 'package:flutter/gestures.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:local_spend/common/apifunctions/request_login_api.dart'; +import 'package:local_spend/common/functions/show_dialog_single_button.dart'; +import 'package:local_spend/common/platform/platform_scaffold.dart'; +import 'package:shared_preferences/shared_preferences.dart'; +import 'package:url_launcher/url_launcher.dart'; + +const URL = "https://flutter.io/"; + +class LoginPage extends StatefulWidget { + @override + State createState() { + return new LoginPageState(); + } +} + +class LoginPageState extends State { + final TextEditingController _emailController = TextEditingController(text: 'test@example.com'); // remove + final TextEditingController _passwordController = TextEditingController(text: 'abc123'); // remove + + FocusNode focusNode; // added so focus can move automatically + + Future launchURL(String url) async { + if (await canLaunch(url)) { + await launch(url, forceSafariVC: true, forceWebView: true); + } else { + showDialogSingleButton( + context, + "Unable to reach your website.", + "Currently unable to reach the website $URL. Please try again at a later time.", + "OK"); + } + } + + @override + void initState() { + super.initState(); + _saveCurrentRoute("/LoginPage"); + + focusNode = FocusNode(); + } + + @override + void dispose() { + focusNode.dispose(); //disposes focus node when form disposed + super.dispose(); + } + + _saveCurrentRoute(String lastRoute) async { + SharedPreferences preferences = await SharedPreferences.getInstance(); + await preferences.setString('LastPageRoute', lastRoute); + } + + void login(String username, String password) { + SystemChannels.textInput.invokeMethod('TextInput.hide'); + requestLoginAPI(context, username, + password); + } + + @override + Widget build(BuildContext context) { + return WillPopScope( + onWillPop: () { + if (Navigator.canPop(context)) { + Navigator.of(context).pushNamedAndRemoveUntil( + '/HomePage', (Route route) => false); + } else { + Navigator.of(context).pushReplacementNamed('/HomePage'); + } + }, + child: PlatformScaffold( +// drawer: BasicDrawer(), + appBar: AppBar( + title: Text( + "LOGIN", + style: TextStyle( + fontSize: 30.0, + color: Colors.black, + ), + ), + centerTitle: true, + iconTheme: IconThemeData(color: Colors.black), + ), + body: Container( + child: Padding( + padding: EdgeInsets.fromLTRB(30.0, 0.0, 30.0, 0.0), + child: ListView( + children: [ + Container( + alignment: Alignment.topCenter, + child: Padding( + padding: EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 15.0), + child: Text( + "Local Loop", + style: TextStyle(fontSize: 40.0, color: Colors.black), + ), + )), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 78.0), + child: RichText( + text: TextSpan( + children: [ + TextSpan( + text: + 'This is the logon page.', + style: new TextStyle( + fontSize: 20.0, + color: Colors.black, + ), + ), + TextSpan( + text: + ' It is currently in development.', + style: new TextStyle( + fontSize: 20.0, + color: Colors.black, + ), + ), + ], + ), + ), + ), + Text( + "EMAIL", + style: TextStyle( + fontSize: 16.0, + color: Colors.black, + fontWeight: FontWeight.bold, + ), + ), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0), + child: TextField( + controller: _emailController, + decoration: InputDecoration( + hintText: "Use your login email", + ), + style: TextStyle( + fontSize: 18.0, + color: Colors.grey[800], + fontWeight: FontWeight.bold, + ), + onSubmitted: (_) { + FocusScope.of(context).requestFocus(focusNode); + }, + ), + ), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0), + child: Text( + "PASSWORD", + style: TextStyle( + fontSize: 16.0, + color: Colors.black, + fontWeight: FontWeight.bold, + ), + ), + ), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0), + child: TextField( + controller: _passwordController, + focusNode: focusNode, + decoration: InputDecoration( + hintText: 'Your password, keep it secret, keep it safe.', + ), + obscureText: true, + style: TextStyle( + fontSize: 18.0, + color: Colors.grey[800], + fontWeight: FontWeight.bold, + ), + onSubmitted: (_) { + login( _emailController.text, + _passwordController.text); + }, + ), + ), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 70.0, 0.0, 0.0), + child: Container( + height: 65.0, + child: RaisedButton( + onPressed: () { + login( _emailController.text, + _passwordController.text); +// showDialog( +// barrierDismissible: false, +// ); +// print("pressed"); + }, + child: Text("LOGIN", + style: + TextStyle(color: Colors.white, fontSize: 22.0)), + color: Colors.blue, + ), + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/lib/pages/spash_screen.dart b/lib/pages/spash_screen.dart index 3b7c4c6..f3944f2 100644 --- a/lib/pages/spash_screen.dart +++ b/lib/pages/spash_screen.dart @@ -40,9 +40,9 @@ class _SplashScreenState extends State { margin: EdgeInsets.all(15), alignment: FractionalOffset(0.5, 0.3), decoration: BoxDecoration( - image: DecorationImage( - image: AssetImage('assets/images/launch_image.png') - ), + image: DecorationImage( + image: AssetImage('assets/images/launch_image.png') + ), ), ), ),