Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved 2fa and password ui

Browse Source
This commit is contained in:
Marcel Baumgartner
2024-01-16 16:12:36 +01:00
parent a11569a737
commit c1216ea708
1 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
Moonlight/Shared/Views/Account/Security.razor
View File

@@ -1,6 +1,5 @@
@page "/account/security" @page "/account/security"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Services @using Moonlight.App.Services
@using Moonlight.App.Services.Users @using Moonlight.App.Services.Users
@using OtpNet @using OtpNet
@@ -17,6 +16,9 @@
<div class="row mt-5"> <div class="row mt-5">
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div class="card"> <div class="card">
<div class="card-header">
<span class="card-title">Change password</span>
</div>
<SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit"> <SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@@ -45,44 +47,49 @@
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
@if (IdentityService.Flags[UserFlag.TotpEnabled]) @if (IdentityService.Flags[UserFlag.TotpEnabled])
{ {
<div class="card card-body fs-6"> <div class="card h-100">
<span class="card-title text-success">Your account is secured with 2fa</span> <div class="card-header">
<div class="text-center"> <span class="card-title text-success">Your account is secured with 2fa</span>
<ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/> </div>
<div class="card-body"></div>
<div class="card-footer">
<div class="text-end">
<ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/>
</div>
</div> </div>
</div> </div>
} }
else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null) else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null)
{ {
<div class="card"> <div class="card h-100">
<div class="card-body fs-6"> <div class="card-header">
<p> <span class="card-title">Scan the qr code and enter the code generated by the app you have scanned it in</span>
Scan the qr code and enter the code generated by the app you have scanned it in </div>
</p> <div class="card-body fs-5">
@{ @{
QRCodeGenerator qrGenerator = new QRCodeGenerator(); QRCodeGenerator qrGenerator = new QRCodeGenerator();
var qrCodeData = qrGenerator.CreateQrCode var qrCodeData = qrGenerator.CreateQrCode
( (
$"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}", $"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}",
QRCodeGenerator.ECCLevel.Q QRCodeGenerator.ECCLevel.Q
); );
PngByteQRCode qrCode = new PngByteQRCode(qrCodeData); PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(5); byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(5);
var base64 = Convert.ToBase64String(qrCodeAsPngByteArr); var base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
} }
<div class="text-center"> <div class="text-center">
<img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid"> <img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid rounded" style="max-height: 25vh">
</div> </div>
<div class="mt-3 text-center"> <div class="mt-5 text-center">
<span class="h3">@(IdentityService.CurrentUser.TotpKey)</span> <span class="fs-4 fw-semibold">@(IdentityService.CurrentUser.TotpKey)</span>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit"> <SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit">
<div class="input-group"> <div class="input-group">
<input @bind="CodeForm.Code" type="number" class="form-control"/> <input @bind="CodeForm.Code" type="number" placeholder="Enter generated code..." class="form-control"/>
<button type="submit" class="btn btn-primary">Enable 2fa</button> <button type="submit" class="btn btn-primary">Enable 2fa</button>
</div> </div>
</SmartForm> </SmartForm>
@@ -91,22 +98,28 @@
} }
else else
{ {
<div class="card card-body fs-6"> <div class="card h-100">
<span class="card-title">Secure your account using 2fa</span> <div class="card-header">
<p> <span class="card-title">Secure your account using 2fa</span>
Make sure you have installed one of the following apps on your smartphone and continue </div>
</p> <div class="card-body fs-5">
<p>
Make sure you have installed one of the following apps on your smartphone and continue
</p>
<a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a> <a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a>
<br/> <br/>
<a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a> <a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>
<br/> <br/>
<a href="https://authy.com/download/" target="_blank">Authy</a> <a href="https://authy.com/download/" target="_blank">Authy</a>
<br/> <br/>
<a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a> <a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
<br/> <br/>
<div class="text-center"> </div>
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/> <div class="card-footer">
<div class="text-end">
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
</div>
</div> </div>
</div> </div>
} }