UI: Integrate passcode page

btcpayserver · Feb 20, 2025 · 69fedc0 · 69fedc0
1 parent a9da978
commit 69fedc0
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 27 deletions.
diff --git a/BTCPayApp.Core/BTCPayAppConfig.cs b/BTCPayApp.Core/BTCPayAppConfig.cs
@@ -4,6 +4,7 @@ public class BTCPayAppConfig
 {
     public const string Key = "appconfig";
     public bool RecoveryPhraseVerified { get; set; }
+    public bool UseBiometricAuth { get; set; }
     public string? Passcode { get; set; }
     public string? CurrentStoreId { get; set; }
 }
diff --git a/BTCPayApp.UI/Pages/Settings/ChangePasscodePage.razor b/BTCPayApp.UI/Pages/Settings/ChangePasscodePage.razor
@@ -5,6 +5,8 @@
 @using BTCPayApp.Core.Contracts
 @using BTCPayApp.UI.Components.Layout
 @using BTCPayApp.UI.Util
+@using Plugin.Fingerprint.Abstractions
+@inject IFingerprint Fingerprint
 @inject ConfigProvider ConfigProvider
 @inject NavigationManager NavigationManager
 @inherits Fluxor.Blazor.Web.Components.FluxorComponent
@@ -43,9 +45,15 @@
                 <Passcode OnPasscodeEntered="HandlePasscodeEntered" />
                 @if (HasPasscode)
                 {
-                    <button class="btn btn-outline-danger" type="button" @onclick="RemovePasscode">
-                        Remove passcode
-                    </button>
+                    <div class="buttons">
+                        @if (true || _biometricAuthAvailable is true)
+                        {
+                            <button class="btn btn-secondary" type="button" @onclick="ToggleBiometricAuth">@(Config.UseBiometricAuth ? "Disable" : "Enable") biometric authentication</button>
+                        }
+                        <button class="btn btn-outline-danger" type="button" @onclick="RemovePasscode">
+                            Remove passcode
+                        </button>
+                    </div>
                 }
             </ValidationEditContext>
         </Authorized>
@@ -57,15 +65,17 @@
 
 @code {
     private PasscodeModel Model { get; set; } = new();
-    private BTCPayAppConfig? _config;
+    private BTCPayAppConfig Config { get; set; } = null!;
     private ValidationEditContext? _validationEditContext;
-    private bool HasPasscode => !string.IsNullOrEmpty(_config?.Passcode);
+    private bool _biometricAuthAvailable;
+    private bool HasPasscode => !string.IsNullOrEmpty(Config?.Passcode);
 
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
 
-        _config = await ConfigProvider.Get<BTCPayAppConfig>(BTCPayAppConfig.Key) ?? new BTCPayAppConfig();
+        Config = await ConfigProvider.Get<BTCPayAppConfig>(BTCPayAppConfig.Key) ?? new BTCPayAppConfig();
+        _biometricAuthAvailable = await Fingerprint.IsAvailableAsync();
     }
 
     private class PasscodeModel
@@ -91,8 +101,8 @@
 
     public async Task HandleValidSubmit()
     {
-        _config!.Passcode = Model.NewPasscode;
-        await ConfigProvider.Set(BTCPayAppConfig.Key, _config, true);
+        Config.Passcode = Model.NewPasscode;
+        await ConfigProvider.Set(BTCPayAppConfig.Key, Config, true);
         NavigationManager.NavigateTo(Routes.Settings);
     }
 
@@ -110,19 +120,26 @@
         }
     }
 
+    // TODO: Guard with biometric auth
+    private async Task ToggleBiometricAuth()
+    {
+        if (!HasPasscode) return;
+        Config.UseBiometricAuth = _biometricAuthAvailable && !Config.UseBiometricAuth;
+        await ConfigProvider.Set(BTCPayAppConfig.Key, Config, true);
+    }
+
     // TODO: Guard with passcode entering
     private async Task RemovePasscode()
     {
-        if (HasPasscode)
-        {
-            _config!.Passcode = null;
-            await ConfigProvider.Set(BTCPayAppConfig.Key, _config, true);
-        }
+        if (!HasPasscode) return;
+        Config.Passcode = null;
+        Config.UseBiometricAuth = false;
+        await ConfigProvider.Set(BTCPayAppConfig.Key, Config, true);
     }
 
     private string GetTitle() => Model.Mode switch
     {
-        PasscodeMode.Set => $"{(HasPasscode ? "Set" : "Change")} Passcode",
+        PasscodeMode.Set => $"{(HasPasscode ? "Change" : "Set")} Passcode",
         PasscodeMode.Confirm => "Confirm Passcode",
         _ => throw new ArgumentOutOfRangeException()
     };

diff --git a/BTCPayApp.UI/Pages/Settings/ChangePasscodePage.razor.css b/BTCPayApp.UI/Pages/Settings/ChangePasscodePage.razor.css
@@ -9,15 +9,13 @@
 
 .container ::deep form {
   gap: var(--btcpay-space-l);
-  padding-bottom: var(--btcpay-space-l);
 }
 
-.container ::deep form > div {
-  min-height: 8rem;
-}
-
-.container .btn-outline-danger {
+.container .buttons {
   width: 100%;
   max-width: 28rem;
-  margin-top: var(--btcpay-space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--btcpay-space-l);
+  margin: var(--btcpay-space-l) 0;
 }
diff --git a/BTCPayApp.UI/Pages/Settings/IndexPage.razor b/BTCPayApp.UI/Pages/Settings/IndexPage.razor
@@ -8,13 +8,11 @@
 @using BTCPayApp.UI.Features
 @using BTCPayApp.UI.Util
 @using BTCPayServer.Client
-@using Plugin.Fingerprint.Abstractions
 @inject IState<RootState> State
 @inject IState<UIState> UiState
 @inject IDispatcher Dispatcher
 @inject ConfigProvider ConfigProvider
 @inject IAccountManager AccountManager
-@inject IFingerprint Fingerprint
 @inject IState<UserState> UserState
 @inject BTCPayConnectionManager ConnectionManager
 @inject LightningNodeManager LightningNodeManager
@@ -261,15 +259,13 @@
                             <Icon Symbol="caret-right"/>
                         </a>
                     </li>
-                    @*
                     <li class="list-group-item">
                         <a href="@Routes.ChangePasscode">
                             <Icon Symbol="key"/>
                             <span>@(HasPasscode ? "Change" : "Set") Passcode</span>
                             <Icon Symbol="caret-right"/>
                         </a>
                     </li>
-                    *@
                     <li class="list-group-item">
                         <a href="@Routes.ChangePassword">
                             <Icon Symbol="dots" class="p-2"/>
@@ -361,7 +357,6 @@
     private static string[] ThemeList => [Themes.System, Themes.Light, Themes.Dark];
     private BTCPayAccount? _account;
     private BTCPayAppConfig? _config;
-    private bool? _biometricAuthAvailable;
     private SettingsModel Model { get; set; } = new();
     private SigninModel SignInModel { get; set; } = new();
     private bool HasPasscode => !string.IsNullOrEmpty(_config?.Passcode);
@@ -396,7 +391,6 @@
         Model.Theme = UiState.Value.SelectedTheme;
         _account = AccountManager.Account;
         _config = await ConfigProvider.Get<BTCPayAppConfig>(BTCPayAppConfig.Key);
-        _biometricAuthAvailable = await Fingerprint.IsAvailableAsync();
     }
 
     private void SetTheme(string theme)