beenull/Moonlight
1
0
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
Show stats 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"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Services
@using Moonlight.App.Services.Users
@using OtpNet
@ -17,6 +16,9 @@
<div class="row mt-5">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<span class="card-title">Change password</span>
</div>
<SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit">
<div class="card-body">
<div class="row">
@ -45,44 +47,49 @@
<div class="col-md-6 col-12">
@if (IdentityService.Flags[UserFlag.TotpEnabled])
{
<div class="card card-body fs-6">
<span class="card-title text-success">Your account is secured with 2fa</span>
<div class="text-center">
<ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/>
<div class="card h-100">
<div class="card-header">
<span class="card-title text-success">Your account is secured with 2fa</span>
</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>
}
else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null)
{
<div class="card">
<div class="card-body fs-6">
<p>
Scan the qr code and enter the code generated by the app you have scanned it in
</p>
<div class="card h-100">
<div class="card-header">
<span class="card-title">Scan the qr code and enter the code generated by the app you have scanned it in</span>
</div>
<div class="card-body fs-5">
@{
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);
}
<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 class="mt-3 text-center">
<span class="h3">@(IdentityService.CurrentUser.TotpKey)</span>
<div class="mt-5 text-center">
<span class="fs-4 fw-semibold">@(IdentityService.CurrentUser.TotpKey)</span>
</div>
</div>
<div class="card-footer">
<SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit">
<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>
</div>
</SmartForm>
@ -91,22 +98,28 @@
}
else
{
<div class="card card-body fs-6">
<span class="card-title">Secure your account using 2fa</span>
<p>
Make sure you have installed one of the following apps on your smartphone and continue
</p>
<div class="card h-100">
<div class="card-header">
<span class="card-title">Secure your account using 2fa</span>
</div>
<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>
<br/>
<a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>
<br/>
<a href="https://authy.com/download/" target="_blank">Authy</a>
<br/>
<a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
<br/>
<div class="text-center">
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
<a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a>
<br/>
<a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>
<br/>
<a href="https://authy.com/download/" target="_blank">Authy</a>
<br/>
<a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
<br/>
</div>
<div class="card-footer">
<div class="text-end">
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
</div>
</div>
</div>
}