Skip to content

Commit

Permalink
feat(app): added loading overlay for the OTP screen
Browse files Browse the repository at this point in the history 
Signed-off-by: Anton Biriukov <[email protected]>
  • Loading branch information
@birtony
birtony committed Sep 13, 2023
1 parent 2ffa912 commit 3bade21
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 158 deletions.
329 changes: 171 additions & 158 deletions demo/app/lib/views/otp.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import 'package:shared_preferences/shared_preferences.dart';
import 'package:app/widgets/primary_button.dart';
import 'package:app/widgets/primary_input_field.dart';
import 'package:app/wallet_sdk/wallet_sdk.dart';
import '../widgets/loading_overlay.dart';
import 'credential_preview.dart';
import 'package:app/views/dashboard.dart';

Expand Down Expand Up @@ -55,6 +56,7 @@ class _OTPPage extends State<OTP> {
late double topPadding;
bool show = false;
bool showDetail = false;
bool _isLoading = false;

void detailToggle() {
setState(() {
Expand All @@ -65,7 +67,6 @@ class _OTPPage extends State<OTP> {
@override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
Expand All @@ -77,175 +78,187 @@ class _OTPPage extends State<OTP> {
height: 60,
),
backgroundColor: const Color(0xffF4F1F5),
body: Center(
child: Column(
children: [
Container(
padding: const EdgeInsets.fromLTRB(14, 4, 14, 16),
),
Container(
padding: const EdgeInsets.fromLTRB(14, 4, 14, 16),
child: PrimaryInputField(
textController: otpController,
maxLength: 6,
labelText: 'Enter OTP Code',
textInputFormatter: FilteringTextInputFormatter.digitsOnly),
),
Column(
children: <Widget>[
body: Stack(
children: [
if (!_isLoading) Center(
child: Column(
children: [
Container(
padding: const EdgeInsets.fromLTRB(14, 4, 14, 16),
),
Container(
padding: const EdgeInsets.fromLTRB(14, 4, 14, 16),
child: PrimaryInputField(
textController: otpController,
maxLength: 6,
labelText: 'Enter OTP Code',
textInputFormatter: FilteringTextInputFormatter.digitsOnly),
),
Column(
children: <Widget>[
Visibility(
visible: show,
child: Container(
padding: const EdgeInsets.all(12),
alignment: Alignment.center,
child: ListTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
tileColor: const Color(0xffFBF8FC),
title: SelectableText(
_requestErrorTitleMsg ?? '',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xff190C21),
Column(
children: <Widget>[
Visibility(
visible: show,
child: Container(
padding: const EdgeInsets.all(12),
alignment: Alignment.center,
child: ListTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
tileColor: const Color(0xffFBF8FC),
title: SelectableText(
_requestErrorTitleMsg ?? '',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xff190C21),
),
textAlign: TextAlign.start,
),
subtitle: SelectableText(
_requestErrorSubTitleMsg ?? '',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Color(0xff6C6D7C),
),
textAlign: TextAlign.start,
),
trailing: IconButton(
icon: const Icon(
Icons.more_vert,
size: 20.0,
),
onPressed: () {
detailToggle();
},
),
//TODO need to add fallback and network image url
leading: const SizedBox(
height: 24,
width: 24,
child: Image(
image: AssetImage('lib/assets/images/errorVector.png'),
width: 24,
height: 24,
fit: BoxFit.cover,
)),
),
textAlign: TextAlign.start,
),
subtitle: SelectableText(
_requestErrorSubTitleMsg ?? '',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Color(0xff6C6D7C),
),
textAlign: TextAlign.start,
),
trailing: IconButton(
icon: const Icon(
Icons.more_vert,
size: 20.0,
),
onPressed: () {
detailToggle();
},
),
//TODO need to add fallback and network image url
leading: const SizedBox(
height: 24,
width: 24,
child: Image(
image: AssetImage('lib/assets/images/errorVector.png'),
width: 24,
height: 24,
fit: BoxFit.cover,
)),
),
),
Visibility(
visible: showDetail,
child: Padding(
padding: const EdgeInsets.all(16),
child: SelectableText(
_requestErrorDetailMsg ?? '',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Color(0xff6C6D7C),
),
textAlign: TextAlign.start,
),
)),
],
),
Visibility(
visible: showDetail,
child: Padding(
padding: const EdgeInsets.all(16),
child: SelectableText(
_requestErrorDetailMsg ?? '',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Color(0xff6C6D7C),
),
textAlign: TextAlign.start,
),
)),
],
),
],
),
const Spacer(),
Padding(
padding: const EdgeInsets.only(left: 16.0, top: 0, right: 16.0, bottom: 32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
PrimaryButton(
onPressed: () async {
setState(() {
_otp = otpController.text;
});
const Spacer(),
Padding(
padding: const EdgeInsets.only(left: 16.0, top: 0, right: 16.0, bottom: 32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
PrimaryButton(
onPressed: () async {
setState(() {
_otp = otpController.text;
_isLoading = true;
});

String? credentials;
String? serializeDisplayData;
try {
final SharedPreferences pref = await prefs;
await _createDid();
pref.setString('userDID', userDIDId);
pref.setString('userDIDDoc', userDIDDoc);
credentials = await WalletSDKPlugin.requestCredential(_otp!);
String? issuerURI = await WalletSDKPlugin.issuerURI();
serializeDisplayData =
await WalletSDKPlugin.serializeDisplayData([credentials], issuerURI!);
log("serializeDisplayData -> $serializeDisplayData");
var activities = await WalletSDKPlugin.storeActivityLogger();
var credID = await WalletSDKPlugin.getCredID([credentials]);
log("activities and credID -$activities and $credID");
_storageService.addActivities(ActivityDataObj(credID!, activities));
pref.setString("credID", credID);
_navigateToCredPreviewScreen(
credentials, issuerURI, serializeDisplayData!, userDIDId, credID);
} catch (err) {
String errorMessage = err.toString();
log("errorMessage-> $errorMessage");
if (err is PlatformException && err.message != null && err.message!.isNotEmpty) {
log("err.details-> ${err.details}");
var resp =
await WalletSDKPlugin.parseWalletSDKError(localizedErrorMessage: err.details);
log("resp-> $resp");
(resp.category == "INVALID_GRANT")
? {
errorMessage = "Try re-entering the PIN or scan a new QR code",
_requestErrorDetailMsg = resp.details
String? credentials;
String? serializeDisplayData;
try {
final SharedPreferences pref = await prefs;
await _createDid();
pref.setString('userDID', userDIDId);
pref.setString('userDIDDoc', userDIDDoc);
credentials = await WalletSDKPlugin.requestCredential(_otp!);
String? issuerURI = await WalletSDKPlugin.issuerURI();
serializeDisplayData =
await WalletSDKPlugin.serializeDisplayData([credentials], issuerURI!);
log("serializeDisplayData -> $serializeDisplayData");
var activities = await WalletSDKPlugin.storeActivityLogger();
var credID = await WalletSDKPlugin.getCredID([credentials]);
log("activities and credID -$activities and $credID");
_storageService.addActivities(ActivityDataObj(credID!, activities));
pref.setString("credID", credID);
setState(() {
_isLoading = false;
});
_navigateToCredPreviewScreen(
credentials, issuerURI, serializeDisplayData!, userDIDId, credID);
} catch (err) {
String errorMessage = err.toString();
log("errorMessage-> $errorMessage");
if (err is PlatformException && err.message != null && err.message!.isNotEmpty) {
log("err.details-> ${err.details}");
var resp =
await WalletSDKPlugin.parseWalletSDKError(localizedErrorMessage: err.details);
log("resp-> $resp");
(resp.category == "INVALID_GRANT")
? {
errorMessage = "Try re-entering the PIN or scan a new QR code",
_requestErrorDetailMsg = resp.details
}
: (resp.category == "INVALID_TOKEN")
? {
errorMessage = "Try scanning a new QR code",
_requestErrorDetailMsg = resp.details
}
: {errorMessage = resp.details, _requestErrorDetailMsg = resp.traceID};
}
setState(() {
_requestErrorSubTitleMsg = errorMessage;
_requestErrorTitleMsg = 'Oops! Something went wrong!';
actionText = 'Re-enter';
show = true;
topPadding = height * 0.20;
_clearOTPInput();
_isLoading = false;
});
}
: (resp.category == "INVALID_TOKEN")
? {
errorMessage = "Try scanning a new QR code",
_requestErrorDetailMsg = resp.details
}
: {errorMessage = resp.details, _requestErrorDetailMsg = resp.traceID};
}
setState(() {
_requestErrorSubTitleMsg = errorMessage;
_requestErrorTitleMsg = 'Oops! Something went wrong!';
actionText = 'Re-enter';
show = true;
topPadding = height * 0.20;
_clearOTPInput();
});
}
},
width: MediaQuery.of(context).size.width,
child: Text(actionText!, style: const TextStyle(fontSize: 16, color: Colors.white))),
const Padding(
padding: EdgeInsets.only(top: 8),
),
PrimaryButton(
onPressed: () {
_navigateToDashboard();
},
width: double.infinity,
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xffFFFFFF), Color(0xffFFFFFF)]),
child: const Text('Cancel', style: TextStyle(fontSize: 16, color: Color(0xff6C6D7C))),
},
width: MediaQuery.of(context).size.width,
child: Text(actionText!, style: const TextStyle(fontSize: 16, color: Colors.white))),
const Padding(
padding: EdgeInsets.only(top: 8),
),
PrimaryButton(
onPressed: () {
_navigateToDashboard();
},
width: double.infinity,
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xffFFFFFF), Color(0xffFFFFFF)]),
child: const Text('Cancel', style: TextStyle(fontSize: 16, color: Color(0xff6C6D7C))),
),
],
),
],
),
),
],
),
],
),
)));
),
// Loading overlay
if (_isLoading) const LoadingOverlay(),
],
),
));
}

_navigateToCredPreviewScreen(
Expand Down
Loading

0 comments on commit 3bade21

Please sign in to comment.