Hydrogen/Solian
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️ Full screen signin and signup

Browse Source
This commit is contained in:
LittleSheep 2024-09-15 23:32:15 +08:00
parent 8e8be52658
commit 73456fcff6
9 changed files with 217 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/router.dart
View File

@ -8,6 +8,8 @@ import 'package:solian/screens/account/friend.dart';
import 'package:solian/screens/account/personalize.dart'; import 'package:solian/screens/account/personalize.dart';
import 'package:solian/screens/account/profile_page.dart'; import 'package:solian/screens/account/profile_page.dart';
import 'package:solian/screens/account/stickers.dart'; import 'package:solian/screens/account/stickers.dart';
import 'package:solian/screens/auth/signin.dart';
import 'package:solian/screens/auth/signup.dart';
import 'package:solian/screens/channel/channel_chat.dart'; import 'package:solian/screens/channel/channel_chat.dart';
import 'package:solian/screens/channel/channel_detail.dart'; import 'package:solian/screens/channel/channel_detail.dart';
import 'package:solian/screens/channel/channel_organize.dart'; import 'package:solian/screens/channel/channel_organize.dart';
@ -259,6 +261,24 @@ abstract class AppRouter {
name: state.pathParameters['name']!, name: state.pathParameters['name']!,
), ),
), ),
GoRoute(
path: '/auth/sign-in',
name: 'signin',
builder: (context, state) => TitleShell(
state: state,
isCenteredTitle: true,
child: const SignInScreen(),
),
),
GoRoute(
path: '/auth/sign-up',
name: 'signup',
builder: (context, state) => TitleShell(
state: state,
isCenteredTitle: true,
child: const SignUpScreen(),
),
),
], ],
); );
} }

18
lib/screens/account.dart
View File

@ -6,8 +6,6 @@ import 'package:solian/providers/auth.dart';
import 'package:solian/providers/account_status.dart'; import 'package:solian/providers/account_status.dart';
import 'package:solian/providers/relation.dart'; import 'package:solian/providers/relation.dart';
import 'package:solian/router.dart'; import 'package:solian/router.dart';
import 'package:solian/screens/auth/signin.dart';
import 'package:solian/screens/auth/signup.dart';
import 'package:solian/widgets/account/account_heading.dart'; import 'package:solian/widgets/account/account_heading.dart';
import 'package:solian/widgets/sized_container.dart'; import 'package:solian/widgets/sized_container.dart';
import 'package:badges/badges.dart' as badges; import 'package:badges/badges.dart' as badges;
@ -73,13 +71,7 @@ class _AccountScreenState extends State<AccountScreen> {
title: 'signin'.tr, title: 'signin'.tr,
caption: 'signinCaption'.tr, caption: 'signinCaption'.tr,
onTap: () { onTap: () {
showModalBottomSheet( AppRouter.instance.pushNamed('signin').then((val) async {
useRootNavigator: true,
isDismissible: false,
isScrollControlled: true,
context: context,
builder: (context) => const SignInPopup(),
).then((val) async {
if (val == true) { if (val == true) {
await auth.refreshUserProfile(); await auth.refreshUserProfile();
} }
@ -94,13 +86,7 @@ class _AccountScreenState extends State<AccountScreen> {
title: 'signup'.tr, title: 'signup'.tr,
caption: 'signupCaption'.tr, caption: 'signupCaption'.tr,
onTap: () { onTap: () {
showModalBottomSheet( AppRouter.instance.pushNamed('signup').then((_) {
useRootNavigator: true,
isDismissible: false,
isScrollControlled: true,
context: context,
builder: (context) => const SignUpPopup(),
).then((_) {
setState(() {}); setState(() {});
}); });
}, },

146
lib/screens/auth/signin.dart
View File

@ -7,17 +7,18 @@ import 'package:solian/exts.dart';
import 'package:solian/providers/websocket.dart'; import 'package:solian/providers/websocket.dart';
import 'package:solian/providers/auth.dart'; import 'package:solian/providers/auth.dart';
import 'package:solian/services.dart'; import 'package:solian/services.dart';
import 'package:solian/widgets/sized_container.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import 'package:url_launcher/url_launcher_string.dart'; import 'package:url_launcher/url_launcher_string.dart';
class SignInPopup extends StatefulWidget { class SignInScreen extends StatefulWidget {
const SignInPopup({super.key}); const SignInScreen({super.key});
@override @override
State<SignInPopup> createState() => _SignInPopupState(); State<SignInScreen> createState() => _SignInScreenState();
} }
class _SignInPopupState extends State<SignInPopup> with ProtocolListener { class _SignInScreenState extends State<SignInScreen> with ProtocolListener {
bool _isBusy = false; bool _isBusy = false;
final _usernameController = TextEditingController(); final _usernameController = TextEditingController();
@ -130,79 +131,76 @@ class _SignInPopupState extends State<SignInPopup> with ProtocolListener {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return Material(
height: MediaQuery.of(context).size.height * 0.9, color: Theme.of(context).colorScheme.surface,
child: Center( child: CenteredContainer(
child: Container( maxWidth: 360,
width: MediaQuery.of(context).size.width * 0.6, child: Column(
constraints: const BoxConstraints(maxWidth: 360), mainAxisSize: MainAxisSize.min,
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, children: [
crossAxisAlignment: CrossAxisAlignment.start, ClipRRect(
children: [ borderRadius: const BorderRadius.all(Radius.circular(8)),
ClipRRect( child: Image.asset('assets/logo.png', width: 64, height: 64),
borderRadius: const BorderRadius.all(Radius.circular(8)), ).paddingOnly(bottom: 4),
child: Image.asset('assets/logo.png', width: 64, height: 64), Text(
).paddingOnly(bottom: 4), 'signinGreeting'.tr,
Text( style: const TextStyle(
'signinGreeting'.tr, fontSize: 28,
style: const TextStyle( fontWeight: FontWeight.w900,
fontSize: 28,
fontWeight: FontWeight.w900,
),
).paddingOnly(left: 4, bottom: 16),
TextField(
autocorrect: false,
enableSuggestions: false,
controller: _usernameController,
autofillHints: const [AutofillHints.username],
decoration: InputDecoration(
isDense: true,
border: const OutlineInputBorder(),
labelText: 'username'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
), ),
const Gap(12), ).paddingOnly(left: 4, bottom: 16),
TextField( TextField(
obscureText: true, autocorrect: false,
autocorrect: false, enableSuggestions: false,
enableSuggestions: false, controller: _usernameController,
autofillHints: const [AutofillHints.password], autofillHints: const [AutofillHints.username],
controller: _passwordController, decoration: InputDecoration(
decoration: InputDecoration( isDense: true,
isDense: true, border: const OutlineInputBorder(),
border: const OutlineInputBorder(), labelText: 'username'.tr,
labelText: 'password'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: (_) => _performAction(),
), ),
const Gap(12), onTapOutside: (_) =>
Row( FocusManager.instance.primaryFocus?.unfocus(),
mainAxisAlignment: MainAxisAlignment.spaceBetween, ),
children: [ const Gap(12),
TextButton( TextField(
onPressed: _isBusy ? null : () => _requestResetPassword(), obscureText: true,
style: TextButton.styleFrom(foregroundColor: Colors.grey), autocorrect: false,
child: Text('forgotPassword'.tr), enableSuggestions: false,
autofillHints: const [AutofillHints.password],
controller: _passwordController,
decoration: InputDecoration(
isDense: true,
border: const OutlineInputBorder(),
labelText: 'password'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: (_) => _performAction(),
),
const Gap(12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: _isBusy ? null : () => _requestResetPassword(),
style: TextButton.styleFrom(foregroundColor: Colors.grey),
child: Text('forgotPassword'.tr),
),
TextButton(
onPressed: _isBusy ? null : () => _performAction(),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('next'.tr),
const Icon(Icons.chevron_right),
],
), ),
TextButton( ),
onPressed: _isBusy ? null : () => _performAction(), ],
child: Row( ),
mainAxisSize: MainAxisSize.min, ],
children: [
Text('next'.tr),
const Icon(Icons.chevron_right),
],
),
),
],
),
],
),
), ),
), ),
); );

184
lib/screens/auth/signup.dart
View File

@ -3,15 +3,16 @@ import 'package:gap/gap.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:solian/exts.dart'; import 'package:solian/exts.dart';
import 'package:solian/services.dart'; import 'package:solian/services.dart';
import 'package:solian/widgets/sized_container.dart';
class SignUpPopup extends StatefulWidget { class SignUpScreen extends StatefulWidget {
const SignUpPopup({super.key}); const SignUpScreen({super.key});
@override @override
State<SignUpPopup> createState() => _SignUpPopupState(); State<SignUpScreen> createState() => _SignUpScreenState();
} }
class _SignUpPopupState extends State<SignUpPopup> { class _SignUpScreenState extends State<SignUpScreen> {
final _emailController = TextEditingController(); final _emailController = TextEditingController();
final _usernameController = TextEditingController(); final _usernameController = TextEditingController();
final _nicknameController = TextEditingController(); final _nicknameController = TextEditingController();
@ -61,100 +62,97 @@ class _SignUpPopupState extends State<SignUpPopup> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return Material(
height: MediaQuery.of(context).size.height * 0.9, color: Theme.of(context).colorScheme.surface,
child: Center( child: CenteredContainer(
child: Container( maxWidth: 360,
width: MediaQuery.of(context).size.width * 0.6, child: Column(
constraints: const BoxConstraints(maxWidth: 360), mainAxisSize: MainAxisSize.min,
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, children: [
crossAxisAlignment: CrossAxisAlignment.start, ClipRRect(
children: [ borderRadius: const BorderRadius.all(Radius.circular(8)),
ClipRRect( child: Image.asset('assets/logo.png', width: 64, height: 64),
borderRadius: const BorderRadius.all(Radius.circular(8)), ).paddingOnly(bottom: 4),
child: Image.asset('assets/logo.png', width: 64, height: 64), Text(
).paddingOnly(bottom: 4), 'signupGreeting'.tr,
Text( style: const TextStyle(
'signupGreeting'.tr, fontSize: 28,
style: const TextStyle( fontWeight: FontWeight.w900,
fontSize: 28,
fontWeight: FontWeight.w900,
),
).paddingOnly(left: 4, bottom: 16),
TextField(
autocorrect: false,
enableSuggestions: false,
controller: _usernameController,
autofillHints: const [AutofillHints.username],
decoration: InputDecoration(
isDense: true,
border: const OutlineInputBorder(),
labelText: 'username'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
), ),
const Gap(12), ).paddingOnly(left: 4, bottom: 16),
TextField( TextField(
autocorrect: false, autocorrect: false,
enableSuggestions: false, enableSuggestions: false,
controller: _nicknameController, controller: _usernameController,
autofillHints: const [AutofillHints.nickname], autofillHints: const [AutofillHints.username],
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
border: const OutlineInputBorder(), border: const OutlineInputBorder(),
labelText: 'nickname'.tr, labelText: 'username'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
), ),
const Gap(12), onTapOutside: (_) =>
TextField( FocusManager.instance.primaryFocus?.unfocus(),
autocorrect: false, ),
enableSuggestions: false, const Gap(12),
controller: _emailController, TextField(
autofillHints: const [AutofillHints.email], autocorrect: false,
decoration: InputDecoration( enableSuggestions: false,
isDense: true, controller: _nicknameController,
border: const OutlineInputBorder(), autofillHints: const [AutofillHints.nickname],
labelText: 'email'.tr, decoration: InputDecoration(
), isDense: true,
onTapOutside: (_) => border: const OutlineInputBorder(),
FocusManager.instance.primaryFocus?.unfocus(), labelText: 'nickname'.tr,
), ),
const Gap(12), onTapOutside: (_) =>
TextField( FocusManager.instance.primaryFocus?.unfocus(),
obscureText: true, ),
autocorrect: false, const Gap(12),
enableSuggestions: false, TextField(
autofillHints: const [AutofillHints.password], autocorrect: false,
controller: _passwordController, enableSuggestions: false,
decoration: InputDecoration( controller: _emailController,
isDense: true, autofillHints: const [AutofillHints.email],
border: const OutlineInputBorder(), decoration: InputDecoration(
labelText: 'password'.tr, isDense: true,
), border: const OutlineInputBorder(),
onTapOutside: (_) => labelText: 'email'.tr,
FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: (_) => performAction(context),
), ),
const Gap(16), onTapOutside: (_) =>
Align( FocusManager.instance.primaryFocus?.unfocus(),
alignment: Alignment.centerRight, ),
child: TextButton( const Gap(12),
child: Row( TextField(
mainAxisSize: MainAxisSize.min, obscureText: true,
children: [ autocorrect: false,
Text('next'.tr), enableSuggestions: false,
const Icon(Icons.chevron_right), autofillHints: const [AutofillHints.password],
], controller: _passwordController,
), decoration: InputDecoration(
onPressed: () => performAction(context), isDense: true,
border: const OutlineInputBorder(),
labelText: 'password'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: (_) => performAction(context),
),
const Gap(16),
Align(
alignment: Alignment.centerRight,
child: TextButton(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('next'.tr),
const Icon(Icons.chevron_right),
],
), ),
) onPressed: () => performAction(context),
], ),
), )
],
), ),
), ),
); );

2
lib/screens/chat.dart
View File

@ -102,7 +102,7 @@ class _ChatScreenState extends State<ChatScreen> {
body: Obx(() { body: Obx(() {
if (auth.isAuthorized.isFalse) { if (auth.isAuthorized.isFalse) {
return SigninRequiredOverlay( return SigninRequiredOverlay(
onSignedIn: () => _channels.refreshAvailableChannel(), onDone: () => _channels.refreshAvailableChannel(),
); );
} }

2
lib/screens/feed.dart
View File

@ -151,7 +151,7 @@ class _FeedScreenState extends State<FeedScreen>
); );
} else { } else {
return SigninRequiredOverlay( return SigninRequiredOverlay(
onSignedIn: () => _postController.reloadAllOver(), onDone: () => _postController.reloadAllOver(),
); );
} }
}), }),

2
lib/screens/realms.dart
View File

@ -84,7 +84,7 @@ class _RealmListScreenState extends State<RealmListScreen> {
body: Obx(() { body: Obx(() {
if (auth.isAuthorized.isFalse) { if (auth.isAuthorized.isFalse) {
return SigninRequiredOverlay( return SigninRequiredOverlay(
onSignedIn: () => _getRealms(), onDone: () => _getRealms(),
); );
} }

2
lib/shells/title_shell.dart
View File

@ -24,6 +24,8 @@ class TitleShell extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
assert(state != null || title != null);
return Scaffold( return Scaffold(
appBar: showAppBar appBar: showAppBar
? AppBar( ? AppBar(

60
lib/widgets/account/signin_required_overlay.dart
View File

@ -1,49 +1,43 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:gap/gap.dart'; import 'package:gap/gap.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:solian/screens/auth/signin.dart'; import 'package:solian/router.dart';
import 'package:solian/widgets/sized_container.dart';
class SigninRequiredOverlay extends StatelessWidget { class SigninRequiredOverlay extends StatelessWidget {
final Function onSignedIn; final Function onDone;
const SigninRequiredOverlay({super.key, required this.onSignedIn}); const SigninRequiredOverlay({super.key, required this.onDone});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return GestureDetector( return GestureDetector(
child: Center( child: CenteredContainer(
child: Container( maxWidth: 280,
constraints: const BoxConstraints(maxWidth: 280), child: Column(
child: Column( mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min, children: [
children: [ const Icon(
const Icon( Icons.login,
Icons.login, size: 48,
size: 48, ),
), const Gap(8),
const Gap(8), Text(
Text( 'signinRequired'.tr,
'signinRequired'.tr, style: Theme.of(context).textTheme.titleLarge,
style: Theme.of(context).textTheme.titleLarge, textAlign: TextAlign.center,
textAlign: TextAlign.center, ),
), Text(
Text( 'signinRequiredHint'.tr,
'signinRequiredHint'.tr, style: Theme.of(context).textTheme.bodyMedium,
style: Theme.of(context).textTheme.bodyMedium, textAlign: TextAlign.center,
textAlign: TextAlign.center, ),
), ],
],
),
), ),
), ),
onTap: () { onTap: () {
showModalBottomSheet( AppRouter.instance.pushNamed('signin').then((value) {
useRootNavigator: true, if (value != null) onDone();
isScrollControlled: true,
context: context,
builder: (context) => const SignInPopup(),
).then((value) {
if (value != null) onSignedIn();
}); });
}, },
); );