diff --git a/frontend/memoree_client/lib/app_scaffold.dart b/frontend/memoree_client/lib/app_scaffold.dart index aabca10..2b85946 100755 --- a/frontend/memoree_client/lib/app_scaffold.dart +++ b/frontend/memoree_client/lib/app_scaffold.dart @@ -1,7 +1,8 @@ import 'package:flutter/material.dart'; + +import 'package:memoree_client/drawer.dart'; import 'package:memoree_client/widgets/app_bar.dart'; import 'package:memoree_client/widgets/grid_results.dart'; -import 'drawer.dart'; class AppScaffold extends StatelessWidget { final String page; diff --git a/frontend/memoree_client/lib/pages/login.dart b/frontend/memoree_client/lib/pages/login.dart new file mode 100755 index 0000000..51eec41 --- /dev/null +++ b/frontend/memoree_client/lib/pages/login.dart @@ -0,0 +1,62 @@ +import 'package:flutter/material.dart'; +import 'package:memoree_client/app/services/firebase_auth.dart'; +import 'package:memoree_client/app_scaffold.dart'; + +class LoginPage extends StatefulWidget { + @override + _LoginPageState createState() => _LoginPageState(); +} + +class _LoginPageState extends State { + @override + Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: Container( + child: Center( + child: Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FlutterLogo(size: 150), + SizedBox(height: 50,), + OutlineButton( + splashColor: Colors.grey, + onPressed: () { + FirebaseAuthService().signInWithGoogle().then((user) { + if (user != null) { + Navigator.of(context).pop(); + Navigator.of(context).push(MaterialPageRoute( + builder: (context) { + return AppScaffold(page: 'videos'); + }, + ),); + } + }); + }, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)), + highlightElevation: 0, + borderSide: BorderSide(color: Colors.grey), + child: Padding( + padding: const EdgeInsets.only(top: 10.0, bottom: 10.0), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image(image: AssetImage("logos/google_logo.png"), height: 30.0), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: Text("Sign in with Google") + ), + ], + ), + ), + ), + ] + ), + ), + ), + ), + ); + } +} diff --git a/frontend/memoree_client/lib/widgets/account_info.dart b/frontend/memoree_client/lib/widgets/account_info.dart new file mode 100755 index 0000000..f39c133 --- /dev/null +++ b/frontend/memoree_client/lib/widgets/account_info.dart @@ -0,0 +1,103 @@ +import 'package:flutter/material.dart'; + +import 'package:memoree_client/app/services/firebase_auth.dart'; +import 'package:memoree_client/app_scaffold.dart'; +import 'package:memoree_client/pages/login.dart'; + +class AccountInfo extends StatefulWidget { + @override + _AccountInfoState createState() => _AccountInfoState(); +} + +class _AccountInfoState extends State { + @override + Widget build(BuildContext context) { + // return Container( + // child: Center( + // child: Column( + // mainAxisSize: MainAxisSize.min, + // children: [ + // CircleAvatar( + // radius: 30, + // child: ClipOval( + // child: Image.network(widget.photoUrl, fit: BoxFit.cover), + // ), + // ) + // ], + // ) + // ), + // ); + + return FutureBuilder( + future: FirebaseAuthService().currentUser(), + builder: (context, snapshot) { + switch (snapshot.connectionState) { + case ConnectionState.none: + case ConnectionState.waiting: + return Padding( + padding: const EdgeInsets.all(20.0), + child: Center(child: CircularProgressIndicator()), + ); + break; + case ConnectionState.active: + case ConnectionState.done: + return Padding( + padding: const EdgeInsets.all(20.0), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + CircleAvatar( + radius: 35, + child: ClipOval( + child: Image.network(snapshot.data.photoUrl, fit: BoxFit.cover) + ), + ), + SizedBox(height: 20,), + Text(snapshot.data.displayName, textScaleFactor: 1.25), + Text(snapshot.data.email, style: TextStyle(color: Colors.black54,)), + SizedBox(height: 20,), + Divider(thickness: 1,), + SizedBox(height: 15,), + OutlineButton( + // padding: const EdgeInsets.only(top: 20.0), + splashColor: Colors.grey, + onPressed: () async { + await FirebaseAuthService().signOut(); + Navigator.of(context).pop(); + Navigator.of(context).push(MaterialPageRoute( + builder: (context) { + return LoginPage(); + })); + }, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)), + highlightElevation: 0, + borderSide: BorderSide(color: Colors.grey), + child: Padding( + padding: const EdgeInsets.all(10), + child: Text("Sign out", textScaleFactor: 1.1,) + ), + // child: Padding( + // padding: const EdgeInsets.only(top: 10.0, bottom: 10.0), + // child: Row( + // mainAxisSize: MainAxisSize.min, + // mainAxisAlignment: MainAxisAlignment.center, + // children: [ + // Image(image: AssetImage("logos/google_logo.png"), height: 30.0), + // Padding( + // padding: const EdgeInsets.only(left: 10.0), + // child: Text("Sign in with Google") + // ), + // ], + // ), + // ), + ), + ], + ), + ); + break; + } + return Center(); + } + ); + } +} \ No newline at end of file diff --git a/frontend/memoree_client/lib/widgets/app_bar.dart b/frontend/memoree_client/lib/widgets/app_bar.dart index 93a843f..ac2f6e0 100755 --- a/frontend/memoree_client/lib/widgets/app_bar.dart +++ b/frontend/memoree_client/lib/widgets/app_bar.dart @@ -1,75 +1,139 @@ -import 'package:flutter/material.dart'; -import 'package:memoree_client/constants.dart'; -import 'package:memoree_client/search.dart'; - -class CustomAppBar extends StatefulWidget with PreferredSizeWidget { - final bool isMobile, isTablet; - - CustomAppBar({Key key, @required this.isMobile, @required this.isTablet}) : super(key : key); - - @override - _CustomAppBarState createState() => _CustomAppBarState(); - - @override - Size get preferredSize => Size.fromHeight(kToolbarHeight); -} - -class _CustomAppBarState extends State { - @override - Widget build(BuildContext context) { - return AppBar( - toolbarHeight: 65, - elevation: 1, - // automaticallyImplyLeading: false, - flexibleSpace: Container(), - centerTitle: true, - title: Row( - children: [ - Text(PageTitles.appName), - if(!widget.isTablet) - Flexible( - flex: 5, - child: Container( - constraints: BoxConstraints(minWidth: 100, maxWidth: 900), - padding: const EdgeInsets.all(100.0), - child: SearchWidget(), - ) - ), - // Expanded(flex: 2, child: Container()) - ], - ), - actions: [ - if(widget.isTablet) - Container( - padding: const EdgeInsets.only(right: 10.0, left: 10.0), - child: IconButton( - icon: const Icon(Icons.search_outlined), - tooltip: ActionNames.search, - splashRadius: 25, - onPressed: () => {}, - ) - ), - Container( - padding: const EdgeInsets.only(right: 10.0, left: 10.0), - child: IconButton( - icon: const Icon(Icons.cloud_upload_outlined), - tooltip: ActionNames.upload, - splashRadius: 25, - onPressed: () => {} - ), - ), - if(!widget.isMobile) - Container( - padding: const EdgeInsets.only(right: 10.0, left: 10.0), - child: IconButton( - icon: const Icon(Icons.settings_outlined), - tooltip: ActionNames.settings, - splashRadius: 25, - onPressed: () => {} - ), - ), - Container(padding: const EdgeInsets.all(5.0)), - ] - ); - } -} \ No newline at end of file +import 'package:flutter/material.dart'; +import 'package:memoree_client/app/services/firebase_auth.dart'; +import 'package:memoree_client/constants.dart'; +import 'package:memoree_client/search.dart'; +import 'package:memoree_client/widgets/account_info.dart'; + +class CustomAppBar extends StatefulWidget with PreferredSizeWidget { + final bool isMobile, isTablet; + + CustomAppBar({Key key, @required this.isMobile, @required this.isTablet}) + : super(key: key); + + @override + _CustomAppBarState createState() => _CustomAppBarState(); + + @override + Size get preferredSize => Size.fromHeight(kToolbarHeight); +} + +class _CustomAppBarState extends State { + @override + Widget build(BuildContext context) { + return AppBar( + toolbarHeight: 65, + elevation: 1, + // automaticallyImplyLeading: false, + flexibleSpace: Container(), + centerTitle: true, + title: Row( + children: [ + Text(PageTitles.appName), + if (!widget.isTablet) + Flexible( + flex: 5, + child: Container( + constraints: BoxConstraints(minWidth: 100, maxWidth: 900), + padding: const EdgeInsets.all(100.0), + child: SearchWidget(), + )), + // Expanded(flex: 2, child: Container()) + ], + ), + actions: [ + if (widget.isTablet) + Container( + padding: const EdgeInsets.only(right: 10.0, left: 10.0), + child: IconButton( + icon: const Icon(Icons.search_outlined), + tooltip: ActionNames.search, + splashRadius: 25, + onPressed: () => {}, + )), + Container( + padding: const EdgeInsets.only(right: 10.0, left: 10.0), + child: IconButton( + icon: const Icon(Icons.cloud_upload_outlined), + tooltip: ActionNames.upload, + splashRadius: 25, + onPressed: () => {}), + ), + if (!widget.isMobile) + Container( + padding: const EdgeInsets.only(right: 10.0, left: 10.0), + child: IconButton( + icon: const Icon(Icons.settings_outlined), + tooltip: ActionNames.settings, + splashRadius: 25, + onPressed: () => {}), + ), + if (!widget.isMobile) + Container( + padding: const EdgeInsets.only(right: 10.0, left: 10.0), + decoration: BoxDecoration( + shape: BoxShape.circle, + ), + child: FutureBuilder( + future: FirebaseAuthService().currentUser(), + builder: (context, snapshot) { + switch (snapshot.connectionState) { + case ConnectionState.none: + case ConnectionState.waiting: + return Center(child: CircularProgressIndicator()); + break; + case ConnectionState.active: + case ConnectionState.done: + return Material( + color: Colors.transparent, + child: InkWell( + onTap: () { + showDialog( + context: context, + barrierColor: Colors.transparent, + barrierDismissible: true, + builder: (context) { + return Align( + alignment: Alignment(0.98, -0.84), + child: Material( + shape: + RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)), + child: Container( + width: 300, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(5.0), + boxShadow: [ + BoxShadow(blurRadius: 1.0), + ] + ), + child: AccountInfo(), + ), + ), + ); + } + ); + }, + splashColor: Colors.grey, + customBorder: CircleBorder(), + child: Tooltip( + message: "Google Account\n" + snapshot.data.displayName + "\n" + snapshot.data.email, + padding: const EdgeInsets.all(2.0), + child: CircleAvatar( + radius: 15, + child: ClipOval( + child: Image.network(snapshot.data.photoUrl, fit: BoxFit.cover), + ), + ), + ), + ) + ); + break; + } + return Container(); + }, + ), + ), + Container(padding: const EdgeInsets.all(5.0)), + ]); + } +}