lemmur-app-android/lib/pages/add_account.dart

208 lines
6.8 KiB
Dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:lemmy_api_client/lemmy_api_client.dart';
import 'package:url_launcher/url_launcher.dart' as ul;
import '../hooks/delayed_loading.dart';
import '../hooks/stores.dart';
import '../widgets/bottom_modal.dart';
import '../widgets/fullscreenable_image.dart';
import 'add_instance.dart';
/// A modal where an account can be added for a given instance
class AddAccountPage extends HookWidget {
final String instanceHost;
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
AddAccountPage({@required this.instanceHost}) : assert(instanceHost != null);
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final usernameController = useTextEditingController();
final passwordController = useTextEditingController();
useValueListenable(usernameController);
useValueListenable(passwordController);
final accountsStore = useAccountsStore();
final loading = useDelayedLoading();
final selectedInstance = useState(instanceHost);
final icon = useState<String>(null);
useEffect(() {
LemmyApi(selectedInstance.value)
.v1
.getSite()
.then((site) => icon.value = site.site.icon);
return null;
}, [selectedInstance.value]);
/// show a modal with a list of instance checkboxes
selectInstance() async {
final val = await showModalBottomSheet<String>(
backgroundColor: Colors.transparent,
isScrollControlled: true,
context: context,
builder: (context) => BottomModal(
title: 'select instance',
child: Column(children: [
for (final i in accountsStore.instances)
RadioListTile<String>(
value: i,
groupValue: selectedInstance.value,
onChanged: (val) {
Navigator.of(context).pop(val);
},
title: Text(i),
),
ListTile(
leading: const Padding(
padding: EdgeInsets.all(8),
child: Icon(Icons.add),
),
title: const Text('Add instance'),
onTap: () async {
final val = await showCupertinoModalPopup<String>(
context: context,
builder: (context) => AddInstancePage(),
);
Navigator.of(context).pop(val);
},
),
]),
),
);
if (val != null) {
selectedInstance.value = val;
}
}
handleOnAdd() async {
try {
loading.start();
await accountsStore.addAccount(
selectedInstance.value,
usernameController.text,
passwordController.text,
);
Navigator.of(context).pop();
} on Exception catch (err) {
scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text(err.toString()),
));
}
loading.cancel();
}
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
leading: const CloseButton(),
actionsIconTheme: theme.iconTheme,
iconTheme: theme.iconTheme,
textTheme: theme.textTheme,
brightness: theme.brightness,
centerTitle: true,
title: const Text('Add account'),
backgroundColor: theme.canvasColor,
shadowColor: Colors.transparent,
),
body: Padding(
padding: const EdgeInsets.all(15),
child: ListView(
children: [
if (icon.value == null)
const SizedBox(height: 150)
else
SizedBox(
height: 150,
child: FullscreenableImage(
url: icon.value,
child: CachedNetworkImage(
imageUrl: icon.value,
errorWidget: (_, __, ___) => const SizedBox.shrink(),
),
),
),
FlatButton(
onPressed: selectInstance,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(selectedInstance.value),
const Icon(Icons.arrow_drop_down),
],
),
),
// TODO: add support for password managers
TextField(
autofocus: true,
controller: usernameController,
decoration: InputDecoration(
isDense: true,
contentPadding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
labelText: 'Username or email',
),
),
const SizedBox(height: 5),
TextField(
controller: passwordController,
obscureText: true,
decoration: InputDecoration(
isDense: true,
contentPadding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
labelText: 'Password',
),
),
RaisedButton(
color: theme.accentColor,
padding: const EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onPressed: usernameController.text.isEmpty ||
passwordController.text.isEmpty
? null
: loading.pending
? () {}
: handleOnAdd,
child: !loading.loading
? const Text('Sign in')
: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(theme.canvasColor),
),
),
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onPressed: () {
ul.launch('https://${selectedInstance.value}/login');
},
child: const Text('Register'),
),
],
),
),
);
}
}