From 1e50b7b6bc5202e2183237ea1e096d972693489a Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Tue, 22 Jul 2025 11:33:30 +0200 Subject: [PATCH] Tweak enable/disable 2FA flow in web app including translations (#1029) --- .../Components/ShowRecoveryCodes.razor | 42 +++---- .../Pages/Settings/Security/Disable2Fa.razor | 27 +++-- .../Pages/Settings/Security/Enable2Fa.razor | 44 +++---- .../Settings/Security/Disable2Fa.en.resx | 113 ++++++++++++++++++ .../wwwroot/css/tailwind.css | 13 ++ .../Alerts/AlertMessageError.razor | 8 +- 6 files changed, 193 insertions(+), 54 deletions(-) create mode 100644 apps/server/AliasVault.Client/Resources/Components/Main/Pages/Settings/Security/Disable2Fa.en.resx diff --git a/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor b/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor index f1805c7ad..9ba0c926b 100644 --- a/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor +++ b/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor @@ -1,27 +1,29 @@ @inject IStringLocalizerFactory LocalizerFactory @using Microsoft.Extensions.Localization -
-

@Localizer["Title"]

-
- @Localizer["Description"] -
-
-

- @Localizer["WarningTitle"] -

-

- @Localizer["WarningDescription"] -

-
+
+
+

@Localizer["Title"]

+
+ @Localizer["Description"] +
+
+

+ @Localizer["WarningTitle"] +

+

+ @Localizer["WarningDescription"] +

+
-
- @foreach (var recoveryCode in RecoveryCodes) - { -
- @recoveryCode -
- } +
+ @foreach (var recoveryCode in RecoveryCodes) + { +
+ @recoveryCode +
+ } +
diff --git a/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Disable2Fa.razor b/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Disable2Fa.razor index 21991adff..2655b367a 100644 --- a/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Disable2Fa.razor +++ b/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Disable2Fa.razor @@ -1,8 +1,9 @@ @page "/settings/security/disable-2fa" +@using Microsoft.Extensions.Localization @inherits MainBase @inject HttpClient Http -Disable two-factor authentication +@Localizer["PageTitle"] @if (IsLoading) { @@ -13,17 +14,17 @@ else
-

Disable two-factor authentication

-

Disabling two-factor authentication means you will be able to login with only your password.

+

@Localizer["PageTitle"]

+

@Localizer["PageDescription"]

-
- -
Two factor authentication is currently enabled. Disable it in order to be able to access your vault with your password only.
+
+ +
@Localizer["StatusMessage"]
} @@ -31,13 +32,15 @@ else @code { private bool IsLoading { get; set; } = true; + private IStringLocalizer Localizer => LocalizerFactory.Create("Components.Main.Pages.Settings.Security.Disable2Fa", "AliasVault.Client"); + /// protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); - BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = "Security settings", Url = "/settings/security" }); - BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = "Disable two-factor authentication" }); + BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = Localizer["BreadcrumbSecuritySettings"], Url = "/settings/security" }); + BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = Localizer["BreadcrumbDisable2Fa"] }); } /// @@ -51,7 +54,7 @@ else var response = await Http.GetFromJsonAsync("v1/TwoFactorAuth/status"); if (response is not null && !response.TwoFactorEnabled) { - GlobalNotificationService.AddErrorMessage("Two-factor authentication is not enabled."); + GlobalNotificationService.AddErrorMessage(Localizer["TwoFactorNotEnabled"]); NavigationManager.NavigateTo("/settings/security"); return; } @@ -66,13 +69,13 @@ else var response = await Http.PostAsync("v1/TwoFactorAuth/disable", null); if (response.IsSuccessStatusCode) { - GlobalNotificationService.AddSuccessMessage("Two-factor authentication is now successfully disabled."); + GlobalNotificationService.AddSuccessMessage(Localizer["TwoFactorDisabledSuccess"]); NavigationManager.NavigateTo("/settings/security"); return; } // Handle error - GlobalNotificationService.AddErrorMessage("Failed to disable two-factor authentication.", true); + GlobalNotificationService.AddErrorMessage(Localizer["FailedToDisable2Fa"], true); StateHasChanged(); } diff --git a/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Enable2Fa.razor b/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Enable2Fa.razor index b15e5dc9f..31cac5f8e 100644 --- a/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Enable2Fa.razor +++ b/apps/server/AliasVault.Client/Main/Pages/Settings/Security/Enable2Fa.razor @@ -24,28 +24,30 @@ else if (RecoveryCodes is not null) } else { -
-
-
- -
- -

- @Localizer["QrCodeInstructions"] -

-
@Secret
- - -
- +
+
+
+
+
- - + +

+ @Localizer["QrCodeInstructions"] +

+
@Secret
+ + +
+ +
+ + +
} diff --git a/apps/server/AliasVault.Client/Resources/Components/Main/Pages/Settings/Security/Disable2Fa.en.resx b/apps/server/AliasVault.Client/Resources/Components/Main/Pages/Settings/Security/Disable2Fa.en.resx new file mode 100644 index 000000000..c9891a350 --- /dev/null +++ b/apps/server/AliasVault.Client/Resources/Components/Main/Pages/Settings/Security/Disable2Fa.en.resx @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + + + Disable two-factor authentication + Page title for the disable 2FA page + + + Security settings + Breadcrumb text for security settings + + + Disable two-factor authentication + Breadcrumb text for disable 2FA + + + + + Disabling two-factor authentication means you will be able to login with only your password. + Description text explaining what disabling 2FA means + + + + + Please note: after disabling two-factor authentication any configured authenticator app(s) will stop working. When you want to re-enable two-factor authentication you will have to configure the authenticator app(s) again. + Warning message about the consequences of disabling 2FA + + + + + Two factor authentication is currently enabled. Disable it in order to be able to access your vault with your password only. + Status message explaining current 2FA state + + + + + Confirm Disable Two-Factor Authentication + Button text to confirm disabling 2FA + + + + + Two-factor authentication is now successfully disabled. + Success message when 2FA is disabled + + + Failed to disable two-factor authentication. + Error message when 2FA disable fails + + + Two-factor authentication is not enabled. + Error message when 2FA is not enabled + + \ No newline at end of file diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css index 2e39df856..025f53d47 100644 --- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css +++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css @@ -1122,6 +1122,10 @@ video { max-width: 36rem; } +.max-w-2xl { + max-width: 42rem; +} + .flex-1 { flex: 1 1 0%; } @@ -3207,6 +3211,11 @@ video { --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity)); } +.dark\:focus\:ring-blue-400:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity)); +} + .dark\:focus\:ring-offset-gray-800:focus:is(.dark *) { --tw-ring-offset-color: #1f2937; } @@ -3406,6 +3415,10 @@ video { margin-top: 4rem; } + .lg\:mt-8 { + margin-top: 2rem; + } + .lg\:block { display: block; } diff --git a/apps/server/Shared/AliasVault.RazorComponents/Alerts/AlertMessageError.razor b/apps/server/Shared/AliasVault.RazorComponents/Alerts/AlertMessageError.razor index c73dd2883..898104045 100644 --- a/apps/server/Shared/AliasVault.RazorComponents/Alerts/AlertMessageError.razor +++ b/apps/server/Shared/AliasVault.RazorComponents/Alerts/AlertMessageError.razor @@ -2,7 +2,7 @@ @if (!string.IsNullOrEmpty(Message)) { -