From c1216ea70893a85be4948780c40e30f1d3999a66 Mon Sep 17 00:00:00 2001 From: Marcel Baumgartner Date: Tue, 16 Jan 2024 16:12:36 +0100 Subject: [PATCH] Improved 2fa and password ui --- Moonlight/Shared/Views/Account/Security.razor | 79 +++++++++++-------- 1 file changed, 46 insertions(+), 33 deletions(-) diff --git a/Moonlight/Shared/Views/Account/Security.razor b/Moonlight/Shared/Views/Account/Security.razor index 98b6cc7..1f4f293 100644 --- a/Moonlight/Shared/Views/Account/Security.razor +++ b/Moonlight/Shared/Views/Account/Security.razor @@ -1,6 +1,5 @@ @page "/account/security" -@using Moonlight.App.Models.Forms @using Moonlight.App.Services @using Moonlight.App.Services.Users @using OtpNet @@ -17,6 +16,9 @@
+
+ Change password +
@@ -45,44 +47,49 @@
@if (IdentityService.Flags[UserFlag.TotpEnabled]) { -
- Your account is secured with 2fa -
- +
+
+ Your account is secured with 2fa +
+
+
+
+ +
} else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null) { -
-
-

- Scan the qr code and enter the code generated by the app you have scanned it in -

+
+
+ Scan the qr code and enter the code generated by the app you have scanned it in +
+
@{ QRCodeGenerator qrGenerator = new QRCodeGenerator(); var qrCodeData = qrGenerator.CreateQrCode - ( - $"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}", - QRCodeGenerator.ECCLevel.Q - ); + ( + $"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}", + QRCodeGenerator.ECCLevel.Q + ); PngByteQRCode qrCode = new PngByteQRCode(qrCodeData); byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(5); var base64 = Convert.ToBase64String(qrCodeAsPngByteArr); }
- QR Code + QR Code
-
- @(IdentityService.CurrentUser.TotpKey) +
+ @(IdentityService.CurrentUser.TotpKey)
- +
@@ -91,22 +98,28 @@ } else { -
- Secure your account using 2fa -

- Make sure you have installed one of the following apps on your smartphone and continue -

+
+
+ Secure your account using 2fa +
+
+

+ Make sure you have installed one of the following apps on your smartphone and continue +

- Google Authenticator -
- Microsoft Authenticator -
- Authy -
- 1Password -
-
- + Google Authenticator +
+ Microsoft Authenticator +
+ Authy +
+ 1Password +
+
+
+
+ +
}