Merge pull request #55 from cake-tech/CWA-207-update-pin-screen
CWA-207 | applied new design to pin code page; added pin alert dialog…
Before Width: | Height: | Size: 897 B After Width: | Height: | Size: 762 B |
BIN
assets/images/2.0x/face.png
Normal file
After Width: | Height: | Size: 836 B |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
BIN
assets/images/3.0x/face.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 505 B After Width: | Height: | Size: 431 B |
BIN
assets/images/face.png
Normal file
After Width: | Height: | Size: 497 B |
|
@ -8,6 +8,7 @@ import 'package:cake_wallet/src/stores/auth/auth_store.dart';
|
|||
import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
|
||||
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
|
||||
import 'package:cake_wallet/src/domain/common/biometric_auth.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
|
||||
typedef OnAuthenticationFinished = void Function(bool, AuthPageState);
|
||||
|
||||
|
@ -24,6 +25,8 @@ class AuthPage extends StatefulWidget {
|
|||
class AuthPageState extends State<AuthPage> {
|
||||
final _key = GlobalKey<ScaffoldState>();
|
||||
final _pinCodeKey = GlobalKey<PinCodeState>();
|
||||
final _backArrowImageDarkTheme =
|
||||
Image.asset('assets/images/back_arrow_dark_theme.png');
|
||||
|
||||
void changeProcessText(String text) {
|
||||
_key.currentState.showSnackBar(
|
||||
|
@ -121,8 +124,22 @@ class AuthPageState extends State<AuthPage> {
|
|||
return Scaffold(
|
||||
key: _key,
|
||||
appBar: CupertinoNavigationBar(
|
||||
leading: widget.closable ? CloseButton() : Container(),
|
||||
backgroundColor: Theme.of(context).backgroundColor,
|
||||
leading: widget.closable
|
||||
? SizedBox(
|
||||
height: 37,
|
||||
width: 20,
|
||||
child: ButtonTheme(
|
||||
minWidth: double.minPositive,
|
||||
child: FlatButton(
|
||||
highlightColor: Colors.transparent,
|
||||
splashColor: Colors.transparent,
|
||||
padding: EdgeInsets.all(0),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: _backArrowImageDarkTheme),
|
||||
),
|
||||
)
|
||||
: Container(),
|
||||
backgroundColor: PaletteDark.historyPanel,
|
||||
border: null,
|
||||
),
|
||||
resizeToAvoidBottomPadding: false,
|
||||
|
|
|
@ -30,7 +30,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
|
|||
static const sixPinLength = 6;
|
||||
static const fourPinLength = 4;
|
||||
static final deleteIconImage = Image.asset('assets/images/delete_icon.png');
|
||||
static final backArrowImage = Image.asset('assets/images/back_arrow.png');
|
||||
static final faceImage = Image.asset('assets/images/face.png');
|
||||
final _gridViewKey = GlobalKey();
|
||||
|
||||
int pinLength = defaultPinLength;
|
||||
|
@ -91,12 +91,15 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
|
|||
Widget body(BuildContext context) {
|
||||
return SafeArea(
|
||||
child: Container(
|
||||
color: Theme.of(context).backgroundColor,
|
||||
color: PaletteDark.historyPanel,
|
||||
padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
|
||||
child: Column(children: <Widget>[
|
||||
Spacer(flex: 2),
|
||||
Text(title,
|
||||
style: TextStyle(fontSize: 24, color: Palette.wildDarkBlue)),
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white)),
|
||||
Spacer(flex: 3),
|
||||
Container(
|
||||
width: 180,
|
||||
|
@ -111,8 +114,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
|
|||
height: size,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: isFilled ? Palette.deepPurple : Colors.transparent,
|
||||
border: Border.all(color: Palette.wildDarkBlue),
|
||||
color: isFilled ? Colors.white : PaletteDark.walletCardAddressField,
|
||||
));
|
||||
}),
|
||||
),
|
||||
|
@ -127,7 +129,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
|
|||
},
|
||||
child: Text(
|
||||
_changePinLengthText(),
|
||||
style: TextStyle(fontSize: 16.0, color: Palette.wildDarkBlue),
|
||||
style: TextStyle(fontSize: 14.0, color: PaletteDark.walletCardText),
|
||||
))
|
||||
],
|
||||
Spacer(flex: 1),
|
||||
|
@ -149,9 +151,11 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
|
|||
return Container(
|
||||
margin: EdgeInsets.only(
|
||||
left: marginLeft, right: marginRight),
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Theme.of(context).buttonColor,
|
||||
child: FlatButton(
|
||||
onPressed: () {},
|
||||
color: PaletteDark.historyPanel,
|
||||
shape: CircleBorder(),
|
||||
child: faceImage,
|
||||
),
|
||||
);
|
||||
} else if (index == 10) {
|
||||
|
@ -162,7 +166,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
|
|||
left: marginLeft, right: marginRight),
|
||||
child: FlatButton(
|
||||
onPressed: () => _pop(),
|
||||
color: Theme.of(context).buttonColor,
|
||||
color: PaletteDark.historyPanel,
|
||||
shape: CircleBorder(),
|
||||
child: deleteIconImage,
|
||||
),
|
||||
|
@ -176,14 +180,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
|
|||
left: marginLeft, right: marginRight),
|
||||
child: FlatButton(
|
||||
onPressed: () => _push(index),
|
||||
color: Theme.of(context)
|
||||
.accentTextTheme
|
||||
.title
|
||||
.backgroundColor,
|
||||
color: PaletteDark.historyPanel,
|
||||
shape: CircleBorder(),
|
||||
child: Text('$index',
|
||||
style: TextStyle(
|
||||
fontSize: 23.0, color: Palette.blueGrey)),
|
||||
fontSize: 30.0,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white)),
|
||||
),
|
||||
);
|
||||
}),
|
||||
|
|
|
@ -7,12 +7,17 @@ import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
|
|||
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
import 'package:cake_wallet/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart';
|
||||
|
||||
class SetupPinCodePage extends BasePage {
|
||||
SetupPinCodePage({this.onPinCodeSetup});
|
||||
|
||||
final Function(BuildContext, String) onPinCodeSetup;
|
||||
|
||||
@override
|
||||
Color get backgroundColor => PaletteDark.historyPanel;
|
||||
|
||||
@override
|
||||
String get title => S.current.setup_pin;
|
||||
|
||||
|
@ -58,37 +63,28 @@ class _SetupPinCodeFormState<WidgetType extends SetupPinCodeForm>
|
|||
|
||||
showDialog<void>(
|
||||
context: context,
|
||||
barrierDismissible: false,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
content: Text(S.of(context).setup_successful),
|
||||
actions: <Widget>[
|
||||
FlatButton(
|
||||
child: Text(S.of(context).ok),
|
||||
onPressed: () {
|
||||
return PinAlertDialog(
|
||||
pinTitleText: S.current.setup_pin,
|
||||
pinContentText: S.of(context).setup_successful,
|
||||
pinActionButtonText: S.of(context).ok,
|
||||
pinBarrierDismissible: false,
|
||||
pinAction: () {
|
||||
Navigator.of(context).pop();
|
||||
widget.onPinCodeSetup(context, pin);
|
||||
reset();
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
showDialog<void>(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
content: Text(S.of(context).pin_is_incorrect),
|
||||
actions: <Widget>[
|
||||
FlatButton(
|
||||
child: Text(S.of(context).ok),
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
return PinAlertDialog(
|
||||
pinTitleText: S.current.setup_pin,
|
||||
pinContentText: S.of(context).pin_is_incorrect,
|
||||
pinActionButtonText: S.of(context).ok,
|
||||
pinBarrierDismissible: true,
|
||||
pinAction: () => Navigator.of(context).pop());
|
||||
});
|
||||
|
||||
reset();
|
||||
|
|
60
lib/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart
Normal file
|
@ -0,0 +1,60 @@
|
|||
import 'dart:ui';
|
||||
import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class PinAlertDialog extends BaseAlertDialog {
|
||||
PinAlertDialog({
|
||||
@required this.pinTitleText,
|
||||
@required this.pinContentText,
|
||||
@required this.pinActionButtonText,
|
||||
@required this.pinAction,
|
||||
@required this.pinBarrierDismissible
|
||||
});
|
||||
|
||||
final String pinTitleText;
|
||||
final String pinContentText;
|
||||
final String pinActionButtonText;
|
||||
final VoidCallback pinAction;
|
||||
final bool pinBarrierDismissible;
|
||||
|
||||
@override
|
||||
String get titleText => pinTitleText;
|
||||
@override
|
||||
String get contentText => pinContentText;
|
||||
@override
|
||||
bool get barrierDismissible => pinBarrierDismissible;
|
||||
|
||||
@override
|
||||
Widget actionButtons(BuildContext context) {
|
||||
return Container(
|
||||
width: 300,
|
||||
height: 52,
|
||||
padding: EdgeInsets.only(left: 12, right: 12),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(24),
|
||||
bottomRight: Radius.circular(24)
|
||||
),
|
||||
color: Colors.white
|
||||
),
|
||||
child: ButtonTheme(
|
||||
minWidth: double.infinity,
|
||||
child: FlatButton(
|
||||
onPressed: pinAction,
|
||||
highlightColor: Colors.transparent,
|
||||
splashColor: Colors.transparent,
|
||||
child: Text(
|
||||
pinActionButtonText,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.blue,
|
||||
decoration: TextDecoration.none,
|
||||
),
|
||||
)),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -9,6 +9,7 @@ class BaseAlertDialog extends StatelessWidget {
|
|||
String get rightActionButtonText => '';
|
||||
VoidCallback get actionLeft => () {};
|
||||
VoidCallback get actionRight => () {};
|
||||
bool get barrierDismissible => true;
|
||||
|
||||
Widget title(BuildContext context) {
|
||||
return Text(
|
||||
|
@ -113,7 +114,9 @@ class BaseAlertDialog extends StatelessWidget {
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () => Navigator.of(context).pop(),
|
||||
onTap: () => barrierDismissible
|
||||
? Navigator.of(context).pop()
|
||||
: null,
|
||||
child: Container(
|
||||
color: Colors.transparent,
|
||||
child: BackdropFilter(
|
||||
|
|