297 lines
11 KiB
Dart
297 lines
11 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/buttons/elevated_button.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/dialogs/error_dialog.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/progress_button.dart';
|
|
import 'package:invoiceninja_flutter/ui/auth/login_vm.dart';
|
|
import 'package:invoiceninja_flutter/utils/formatting.dart';
|
|
import 'package:invoiceninja_flutter/utils/localization.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/form_card.dart';
|
|
|
|
import 'package:invoiceninja_flutter/utils/keys.dart';
|
|
|
|
class LoginView extends StatefulWidget {
|
|
final LoginVM viewModel;
|
|
|
|
const LoginView({
|
|
Key key,
|
|
@required this.viewModel,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
_LoginState createState() => _LoginState();
|
|
}
|
|
|
|
class _LoginState extends State<LoginView> {
|
|
static final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
|
|
|
|
final _emailController = TextEditingController();
|
|
final _passwordController = TextEditingController();
|
|
final _urlController = TextEditingController();
|
|
final _secretController = TextEditingController();
|
|
final _oneTimePasswordController = TextEditingController();
|
|
|
|
static const String OTP_ERROR = 'OTP_REQUIRED';
|
|
|
|
static final ValueKey _emailKey = Key(LoginKeys.emailKeyString);
|
|
static final ValueKey _passwordKey = Key(LoginKeys.passwordKeyString);
|
|
static final ValueKey _urlKey = Key(LoginKeys.urlKeyString);
|
|
static final ValueKey _secretKey = Key(LoginKeys.secretKeyString);
|
|
static final ValueKey _oneTimePasswordKey =
|
|
Key(LoginKeys.oneTimePasswordKeyString);
|
|
|
|
final FocusNode _focusNode1 = new FocusNode();
|
|
|
|
bool _isSelfHosted = false;
|
|
bool _autoValidate = false;
|
|
|
|
@override
|
|
void didChangeDependencies() {
|
|
final state = widget.viewModel.authState;
|
|
_emailController.text = state.email;
|
|
_passwordController.text = state.password;
|
|
_urlController.text = formatApiUrlReadable(state.url);
|
|
_secretController.text = state.secret;
|
|
|
|
super.didChangeDependencies();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_emailController.dispose();
|
|
_passwordController.dispose();
|
|
_urlController.dispose();
|
|
_secretController.dispose();
|
|
|
|
super.dispose();
|
|
}
|
|
|
|
void _submitForm() {
|
|
|
|
final bool isValid = _formKey.currentState.validate();
|
|
|
|
setState(() {
|
|
_autoValidate = !isValid;
|
|
});
|
|
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
|
|
widget.viewModel.onLoginPressed(context,
|
|
email: _emailController.text,
|
|
password: _passwordController.text,
|
|
url: _urlController.text,
|
|
secret: _secretController.text,
|
|
oneTimePassword: _oneTimePasswordController.text);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final localization = AppLocalization.of(context);
|
|
final viewModel = widget.viewModel;
|
|
final error = viewModel.authState.error;
|
|
final isOneTimePassword =
|
|
error == OTP_ERROR || _oneTimePasswordController.text.isNotEmpty;
|
|
|
|
if (!viewModel.authState.isInitialized) {
|
|
return Container();
|
|
}
|
|
|
|
return Stack(
|
|
children: <Widget>[
|
|
SizedBox(
|
|
height: 250.0,
|
|
child: ClipPath(
|
|
clipper: ArcClipper(),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
//Colors.grey.shade800,
|
|
//Colors.black87,
|
|
Theme.of(context).buttonColor,
|
|
Theme.of(context).buttonColor.withOpacity(.7),
|
|
],
|
|
)),
|
|
),
|
|
),
|
|
),
|
|
ListView(
|
|
shrinkWrap: true,
|
|
children: <Widget>[
|
|
Padding(
|
|
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
|
|
child: Image.asset('assets/images/logo.png',
|
|
width: 100.0, height: 100.0),
|
|
),
|
|
Form(
|
|
key: _formKey,
|
|
child: FormCard(
|
|
children: <Widget>[
|
|
isOneTimePassword
|
|
? TextFormField(
|
|
controller: _oneTimePasswordController,
|
|
key: _oneTimePasswordKey,
|
|
autocorrect: false,
|
|
decoration: InputDecoration(
|
|
labelText: localization.oneTimePassword),
|
|
)
|
|
: Column(
|
|
children: <Widget>[
|
|
TextFormField(
|
|
controller: _emailController,
|
|
key: _emailKey,
|
|
autocorrect: false,
|
|
textInputAction: TextInputAction.next,
|
|
decoration: InputDecoration(
|
|
labelText: localization.email),
|
|
keyboardType: TextInputType.emailAddress,
|
|
autovalidate: _autoValidate,
|
|
validator: (val) =>
|
|
val.isEmpty || val.trim().isEmpty
|
|
? localization.pleaseEnterYourEmail
|
|
: null,
|
|
onFieldSubmitted: (String value) =>
|
|
FocusScope.of(context)
|
|
.requestFocus(_focusNode1),
|
|
),
|
|
TextFormField(
|
|
controller: _passwordController,
|
|
key: _passwordKey,
|
|
autocorrect: false,
|
|
autovalidate: _autoValidate,
|
|
decoration: InputDecoration(
|
|
labelText: localization.password),
|
|
validator: (val) =>
|
|
val.isEmpty || val.trim().isEmpty
|
|
? localization.pleaseEnterYourPassword
|
|
: null,
|
|
obscureText: true,
|
|
focusNode: _focusNode1,
|
|
onFieldSubmitted: (value) => _submitForm(),
|
|
),
|
|
_isSelfHosted
|
|
? TextFormField(
|
|
controller: _urlController,
|
|
key: _urlKey,
|
|
autocorrect: false,
|
|
autovalidate: _autoValidate,
|
|
decoration: InputDecoration(
|
|
labelText: localization.url),
|
|
validator: (val) =>
|
|
val.isEmpty || val.trim().isEmpty
|
|
? localization.pleaseEnterYourUrl
|
|
: null,
|
|
keyboardType: TextInputType.url,
|
|
)
|
|
: Container(),
|
|
_isSelfHosted
|
|
? TextFormField(
|
|
controller: _secretController,
|
|
key: _secretKey,
|
|
autocorrect: false,
|
|
decoration: InputDecoration(
|
|
labelText: localization.secret),
|
|
obscureText: true,
|
|
)
|
|
: Container(),
|
|
],
|
|
),
|
|
viewModel.authState.error == null || error == OTP_ERROR
|
|
? Container()
|
|
: Container(
|
|
padding: EdgeInsets.only(top: 26.0),
|
|
child: Center(
|
|
child: Text(
|
|
viewModel.authState.error,
|
|
style: TextStyle(
|
|
color: Colors.red,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(height: 24.0),
|
|
ProgressButton(
|
|
padding: EdgeInsets.only(top: 4.0, bottom: 8.0),
|
|
isLoading: viewModel.isLoading,
|
|
label: localization.login.toUpperCase(),
|
|
onPressed: () => _submitForm(),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: <Widget>[
|
|
_isSelfHosted
|
|
? FlatButton(
|
|
onPressed: () =>
|
|
setState(() => _isSelfHosted = false),
|
|
child: Text(localization.hostedLogin))
|
|
: FlatButton(
|
|
onPressed: () =>
|
|
setState(() => _isSelfHosted = true),
|
|
child: Text(localization.selfhostLogin)),
|
|
FlatButton(
|
|
onPressed: () => setState(() => _isSelfHosted = true),
|
|
child: Text(localization.googleLogin)),
|
|
],
|
|
),
|
|
isOneTimePassword && !viewModel.isLoading
|
|
? ElevatedButton(
|
|
label: localization.cancel.toUpperCase(),
|
|
color: Colors.grey,
|
|
onPressed: () {
|
|
setState(() {
|
|
_oneTimePasswordController.text = '';
|
|
});
|
|
viewModel.onCancel2FAPressed();
|
|
},
|
|
)
|
|
: Container(),
|
|
/*
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
|
child: ElevatedButton(
|
|
label: 'Google ${localization.login}'.toUpperCase(),
|
|
onPressed: () => viewModel.onGoogleLoginPressed(
|
|
context, _urlController.text, _secretController.text),
|
|
),
|
|
),
|
|
*/
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
// https://github.com/iampawan/Flutter-UI-Kit
|
|
class ArcClipper extends CustomClipper<Path> {
|
|
@override
|
|
Path getClip(Size size) {
|
|
final path = Path();
|
|
path.lineTo(0.0, size.height - 30);
|
|
|
|
final firstControlPoint = Offset(size.width / 4, size.height);
|
|
final firstPoint = Offset(size.width / 2, size.height);
|
|
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
|
|
firstPoint.dx, firstPoint.dy);
|
|
|
|
final secondControlPoint =
|
|
Offset(size.width - (size.width / 4), size.height);
|
|
final secondPoint = Offset(size.width, size.height - 30);
|
|
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
|
|
secondPoint.dx, secondPoint.dy);
|
|
|
|
path.lineTo(size.width, 0.0);
|
|
path.close();
|
|
|
|
return path;
|
|
}
|
|
|
|
@override
|
|
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
|
|
}
|