From 8c35edb6e837349647f7c10a52ae643f9f9086ca Mon Sep 17 00:00:00 2001 From: d11n Date: Thu, 3 Oct 2024 14:35:01 +0200 Subject: [PATCH] UI: Additional improvements to the User Invitation flow (#6233) * UI: Additional improvements to the User Invitation flow Closes #6224. * Clear invitation token only after the user can sign in Fixes "404 Error on Follow-Up Visits" of #6236. * Minor spacing fix * Update accordion button --- .../TruncateCenter/TruncateCenter.cs | 4 +- .../Controllers/UIAccountController.cs | 27 +++-- BTCPayServer/UserManagerExtensions.cs | 6 + BTCPayServer/Views/Shared/ShowQR.cshtml | 23 ++-- BTCPayServer/Views/UIServer/ListUsers.cshtml | 114 ++++++++++-------- BTCPayServer/Views/UIServer/User.cshtml | 2 +- BTCPayServer/wwwroot/img/icon-sprite.svg | 4 +- .../wwwroot/main/bootstrap/bootstrap.css | 10 ++ 8 files changed, 116 insertions(+), 74 deletions(-) diff --git a/BTCPayServer/Components/TruncateCenter/TruncateCenter.cs b/BTCPayServer/Components/TruncateCenter/TruncateCenter.cs index 934676690..ce35bb995 100644 --- a/BTCPayServer/Components/TruncateCenter/TruncateCenter.cs +++ b/BTCPayServer/Components/TruncateCenter/TruncateCenter.cs @@ -34,10 +34,8 @@ public class TruncateCenter : ViewComponent }; if (!vm.IsVue) { - vm.Start = vm.IsTruncated ? text[..padding] : text; + vm.Start = vm.IsTruncated && !vm.Elastic ? "{text[..padding]}…" : text; vm.End = vm.IsTruncated ? text[^padding..] : string.Empty; - if (!vm.Elastic && vm.IsTruncated) - vm.Start = $"{vm.Start}…"; } return View(vm); } diff --git a/BTCPayServer/Controllers/UIAccountController.cs b/BTCPayServer/Controllers/UIAccountController.cs index f068594a4..1909b6d6f 100644 --- a/BTCPayServer/Controllers/UIAccountController.cs +++ b/BTCPayServer/Controllers/UIAccountController.cs @@ -706,6 +706,7 @@ namespace BTCPayServer.Controllers Severity = StatusMessageModel.StatusSeverity.Success, Message = "Your email has been confirmed." }); + await FinalizeInvitationIfApplicable(user); return RedirectToAction(nameof(Login), new { email = user.Email }); } @@ -812,6 +813,7 @@ namespace BTCPayServer.Controllers Severity = StatusMessageModel.StatusSeverity.Success, Message = hasPassword ? "Password successfully set." : "Account successfully created." }); + if (!hasPassword) await FinalizeInvitationIfApplicable(user); return RedirectToAction(nameof(Login)); } @@ -837,16 +839,6 @@ namespace BTCPayServer.Controllers var requiresEmailConfirmation = user.RequiresEmailConfirmation && !user.EmailConfirmed; var requiresSetPassword = !await _userManager.HasPasswordAsync(user); - - _eventAggregator.Publish(new UserInviteAcceptedEvent - { - User = user, - RequestUri = Request.GetAbsoluteRootUri() - }); - - // unset used token - await _userManager.UnsetInvitationTokenAsync(user.Id); - if (requiresEmailConfirmation) { return await RedirectToConfirmEmail(user); @@ -868,9 +860,22 @@ namespace BTCPayServer.Controllers Message = "Your password has been set by the user who invited you." }); + await FinalizeInvitationIfApplicable(user); return RedirectToAction(nameof(Login), new { email = user.Email }); } - + + private async Task FinalizeInvitationIfApplicable(ApplicationUser user) + { + if (!_userManager.HasInvitationToken(user)) return; + _eventAggregator.Publish(new UserInviteAcceptedEvent + { + User = user, + RequestUri = Request.GetAbsoluteRootUri() + }); + // unset used token + await _userManager.UnsetInvitationTokenAsync(user.Id); + } + private async Task RedirectToConfirmEmail(ApplicationUser user) { var code = await _userManager.GenerateEmailConfirmationTokenAsync(user); diff --git a/BTCPayServer/UserManagerExtensions.cs b/BTCPayServer/UserManagerExtensions.cs index 08be237e1..967e911c4 100644 --- a/BTCPayServer/UserManagerExtensions.cs +++ b/BTCPayServer/UserManagerExtensions.cs @@ -32,6 +32,12 @@ namespace BTCPayServer return await userManager.SetInvitationTokenAsync(userId, null); } + public static bool HasInvitationToken(this UserManager userManager, ApplicationUser user, string? token = null) where TUser : class + { + var blob = user.GetBlob() ?? new UserBlob(); + return token == null ? !string.IsNullOrEmpty(blob.InvitationToken) : blob.InvitationToken == token; + } + private static async Task SetInvitationTokenAsync(this UserManager userManager, string userId, string? token) where TUser : class { var user = await userManager.FindByIdAsync(userId); diff --git a/BTCPayServer/Views/Shared/ShowQR.cshtml b/BTCPayServer/Views/Shared/ShowQR.cshtml index 4702adbba..6829ac185 100644 --- a/BTCPayServer/Views/Shared/ShowQR.cshtml +++ b/BTCPayServer/Views/Shared/ShowQR.cshtml @@ -8,11 +8,19 @@ -
-
- - - +
+
+
+ + + +
+
+
+ + +
+
  • @@ -107,8 +115,9 @@ function initQRShow(data) { } setTimeout(this.playNext, this.speed); }, - showData(data) { - this.modes = { default: { title: 'Default', fragments: [data] } }; + showData(data, title) { + if (title) this.title = title; + this.modes = { default: { title: title || 'Default', fragments: [data] } }; this.mode = "default"; this.show(); }, diff --git a/BTCPayServer/Views/UIServer/ListUsers.cshtml b/BTCPayServer/Views/UIServer/ListUsers.cshtml index 7d9c7b897..1936f3558 100644 --- a/BTCPayServer/Views/UIServer/ListUsers.cshtml +++ b/BTCPayServer/Views/UIServer/ListUsers.cshtml @@ -1,4 +1,5 @@ @using BTCPayServer.Abstractions.Models +@inject BTCPayServer.Security.ContentSecurityPolicies Csp @model UsersViewModel @{ ViewData.SetActivePage(ServerNavPages.Users); @@ -9,10 +10,24 @@ "desc" => "asc", _ => null }; - + Csp.UnsafeEval(); const string sortByDesc = "Sort by email descending..."; const string sortByAsc = "Sort by email ascending..."; } + +@section PageFootContent { + + + +} +

    @ViewData["Title"]

    @@ -44,7 +59,7 @@ Created Status - + @@ -58,7 +73,8 @@ { InvitationUrl: not null } => ("Pending Invitation", "warning"), _ => ("Active", "success") }; - var detailsId = $"user_details_{user.Id}"; + var pendingInvite = !string.IsNullOrEmpty(user.InvitationUrl); + var detailsId = user.Stores.Any() ? $"user_details_{user.Id}" : null;
    @@ -72,73 +88,68 @@ @user.Stores.Count() Store@(user.Stores.Count() == 1 ? "" : "s") @user.Created?.ToBrowserDate() - @status.Item1 + @status.Item1
    @if (user is { EmailConfirmed: false, Disabled: false }) { - Resend email + Resend email } @if (user is { Approved: false, Disabled: false }) { Approve } - Edit - @if (status.Item2 != "warning") + @if (pendingInvite) { - @(user.Disabled ? "Enable" : "Disable") + View Invite } - Password Reset + else if(status.Item2 != "warning") + { + @(user.Disabled ? "Enable" : "Disable") + } + Edit + Password Reset Remove
    -
    - -
    - - - - - @if (!string.IsNullOrEmpty(user.InvitationUrl)) - { -
    -
    - -
    -
    -
    - - -
    -
    -
    - } - else if (user.Stores.Any()) - { -
      - @foreach (var store in user.Stores) - { -
    • - @store.StoreData.StoreName - @store.StoreRoleId - @if (store.StoreData.Archived) - { - archived - } -
      • - } -
    - } - else - { - No stores } + @if (detailsId != null) + { + + + @if (user.Stores.Any()) + { +
      + @foreach (var store in user.Stores) + { +
    • + @store.StoreData.StoreName + @store.StoreRoleId + @if (store.StoreData.Archived) + { + archived + } +
      • + } +
    + } + else + { + No stores + } + + + } } @@ -147,3 +158,4 @@ + diff --git a/BTCPayServer/Views/UIServer/User.cshtml b/BTCPayServer/Views/UIServer/User.cshtml index 1365281c2..e651e7edd 100644 --- a/BTCPayServer/Views/UIServer/User.cshtml +++ b/BTCPayServer/Views/UIServer/User.cshtml @@ -24,7 +24,7 @@ @if (!string.IsNullOrEmpty(Model.InvitationUrl)) { -
    +
    diff --git a/BTCPayServer/wwwroot/img/icon-sprite.svg b/BTCPayServer/wwwroot/img/icon-sprite.svg index e36bcfed9..33f747f52 100644 --- a/BTCPayServer/wwwroot/img/icon-sprite.svg +++ b/BTCPayServer/wwwroot/img/icon-sprite.svg @@ -1,5 +1,5 @@ - + @@ -74,11 +74,13 @@ + + diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index 84dbcafc3..b775d2593 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css @@ -12267,10 +12267,20 @@ ul:not([class]) li { .accordion-button .icon { --icon-size: 1.5rem; + margin-top: -.0575em; + margin-bottom: -.0575em; margin-left: auto; transition: transform var(--btcpay-transition-duration-fast) ease-in-out; } +.accordion-button span { + color: rgba(var(--btcpay-body-link-rgb), var(--btcpay-link-opacity, 1)); +} + +.accordion-button:hover span { + --btcpay-body-link-rgb: var(--btcpay-body-link-accent-rgb); +} + .accordion-button:not(.collapsed) .icon { transform: rotate(-180deg); }