Improved 2fa and password ui
This commit is contained in:
Marcel Baumgartner
parent
a11569a737
commit
c1216ea708
1 changed files with 46 additions and 33 deletions
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue