Merge pull request #3267 from dennisreimann/store-centric-account

Account menu improvement

BTCPayServer.Tests/SeleniumTester.cs

@@ -337,7 +337,8 @@ namespace BTCPayServer.Tests
 
         public void Logout()
         {
-            Driver.FindElement(By.Id("Logout")).Click();
+            Driver.FindElement(By.Id("Nav-Account")).Click();
+            Driver.FindElement(By.Id("Nav-Logout")).Click();
         }
 
         public void Login(string user, string password)
@@ -424,6 +425,7 @@ namespace BTCPayServer.Tests
         public void GoToProfile(ManageNavPages navPages = ManageNavPages.Index)
         {
             Driver.FindElement(By.Id("Nav-Account")).Click();
+            Driver.FindElement(By.Id("Nav-ManageAccount")).Click();
             if (navPages != ManageNavPages.Index)
             {
                 Driver.FindElement(By.Id($"SectionNav-{navPages.ToString()}")).Click();

BTCPayServer.Tests/SeleniumTests.cs

@@ -150,7 +150,7 @@ namespace BTCPayServer.Tests
                 s.Driver.AssertNoError();
                 Assert.Contains("/login", s.Driver.Url);
 
-                s.Driver.Navigate().GoToUrl(s.Link("/invoices"));
+                s.GoToUrl("/invoices");
                 Assert.Contains("ReturnUrl=%2Finvoices", s.Driver.Url);
 
                 // We should be redirected to login
@@ -163,18 +163,17 @@ namespace BTCPayServer.Tests
                 Assert.EndsWith("/invoices", s.Driver.Url);
 
                 // Should not be able to reach server settings
-                s.Driver.Navigate().GoToUrl(s.Link("/server/users"));
+                s.GoToUrl("/server/users");
                 Assert.Contains("ReturnUrl=%2Fserver%2Fusers", s.Driver.Url);
+                s.GoToHome();
 
                 //Change Password & Log Out
-                s.GoToHome();
-                s.Driver.FindElement(By.Id("Nav-Account")).Click();
-                s.Driver.FindElement(By.Id("SectionNav-ChangePassword")).Click();
+                s.GoToProfile(ManageNavPages.ChangePassword);
                 s.Driver.FindElement(By.Id("OldPassword")).SendKeys("123456");
                 s.Driver.FindElement(By.Id("NewPassword")).SendKeys("abc???");
                 s.Driver.FindElement(By.Id("ConfirmPassword")).SendKeys("abc???");
                 s.Driver.FindElement(By.Id("UpdatePassword")).Click();
-                s.Driver.FindElement(By.Id("Logout")).Click();
+                s.Logout();
                 s.Driver.AssertNoError();
 
                 //Log In With New Password
@@ -183,7 +182,7 @@ namespace BTCPayServer.Tests
                 s.Driver.FindElement(By.Id("LoginButton")).Click();
                 Assert.True(s.Driver.PageSource.Contains("Stores"), "Can't Access Stores");
 
-                s.Driver.FindElement(By.Id("Nav-Account")).Click();
+                s.GoToProfile();
                 s.ClickOnAllSectionLinks();
 
                 //let's test invite link
@@ -417,7 +416,7 @@ namespace BTCPayServer.Tests
                 Assert.Contains(invoiceId, s.Driver.PageSource);
 
                 // When logout out we should not be able to access store and invoice details
-                s.Driver.FindElement(By.Id("Logout")).Click();
+                s.Logout();
                 s.Driver.Navigate().GoToUrl(storeUrl);
                 Assert.Contains("ReturnUrl", s.Driver.Url);
                 s.Driver.Navigate().GoToUrl(invoiceUrl);

BTCPayServer/Components/MainNav/Default.cshtml

@@ -217,30 +217,48 @@
             </ul>
         }
     </div>
-    <ul id="mainNavSettings" class="navbar-nav border-top p-3 px-lg-4">
-        <li class="nav-item" permission="@Policies.CanModifyServerSettings">
-            <a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger  @ViewData.IsActivePage(ServerNavPages.Users) @ViewData.IsActivePage(ServerNavPages.Emails) @ViewData.IsActivePage(ServerNavPages.Policies) @ViewData.IsActivePage(ServerNavPages.Services) @ViewData.IsActivePage(ServerNavPages.Theme) @ViewData.IsActivePage(ServerNavPages.Maintenance) @ViewData.IsActivePage(ServerNavPages.Logs) @ViewData.IsActivePage(ServerNavPages.Files)" id="Nav-ServerSettings">
-                <vc:icon symbol="server-settings"/>
-                <span>Server Settings</span>
-            </a>
-        </li>
-        <li class="nav-item">
-            <a asp-area="" asp-controller="Manage" asp-action="Index" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="Nav-Account">
-                <vc:icon symbol="account"/>
-                <span class="text-truncate" style="max-width:195px">@User.Identity.Name</span>
-            </a>
-        </li>
-        @if (!theme.CustomTheme)
-        {
-            <li class="nav-item">
-                <vc:theme-switch css-class="nav-link"/>
+    @if (SignInManager.IsSignedIn(User))
+    {
+        <ul id="mainNavSettings" class="navbar-nav border-top p-3 px-lg-4">
+            <li class="nav-item" permission="@Policies.CanModifyServerSettings">
+                <a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger @ViewData.IsActivePage(ServerNavPages.Users) @ViewData.IsActivePage(ServerNavPages.Emails) @ViewData.IsActivePage(ServerNavPages.Policies) @ViewData.IsActivePage(ServerNavPages.Services) @ViewData.IsActivePage(ServerNavPages.Theme) @ViewData.IsActivePage(ServerNavPages.Maintenance) @ViewData.IsActivePage(ServerNavPages.Logs) @ViewData.IsActivePage(ServerNavPages.Files)" id="Nav-ServerSettings">
+                    <vc:icon symbol="server-settings"/>
+                    <span>Server Settings</span>
+                </a>
             </li>
-        }
-        <li class="nav-item">
-            <a asp-area="" asp-controller="Account" asp- asp-action="Logout" class="nav-link js-scroll-trigger" id="Logout">
-                <i class="fa fa-sign-out"></i>
-                <span>Logout</span>
-            </a>
-        </li>
-    </ul>
+            <li class="nav-item dropup">
+                <a class="nav-link js-scroll-trigger" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="Nav-Account">
+                    <vc:icon symbol="account"/>
+                    <span>Account</span>
+                </a>   
+                <ul class="dropdown-menu py-0 w-100" aria-labelledby="Nav-Account">
+                    <li class="p-3">
+                        <strong class="d-block text-truncate" style="max-width:195px">@User.Identity.Name</strong>
+                        @if (User.IsInRole(Roles.ServerAdmin))
+                        {
+                            <div class="text-secondary">Administrator</div>
+                        }
+                    </li>
+                    @if (!theme.CustomTheme)
+                    {
+                        <li class="border-top py-1 px-3">
+                            <vc:theme-switch css-class="nav-link"/>
+                        </li>
+                    }
+                    <li class="border-top py-1 px-3">
+                        <a asp-area="" asp-controller="Manage" asp-action="Index" class="nav-link @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="Nav-ManageAccount">
+                            <vc:icon symbol="account"/>
+                            <span class="text-truncate" style="max-width:195px">Manage Account</span>
+                        </a>
+                    </li>
+                    <li class="border-top py-1 px-3">
+                        <a asp-area="" asp-controller="Account" asp-action="Logout" class="nav-link text-danger" id="Nav-Logout">
+                            <i class="fa fa-sign-out"></i>
+                            <span>Logout</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    }
 </nav>

BTCPayServer/wwwroot/main/layout.css

@@ -65,7 +65,7 @@
     border: none !important;
 }
 
-#mainNav .navbar-nav > li.nav-item > .nav-link {
+#mainNav .navbar-nav > li.nav-item .nav-link {
     display: inline-flex;
     align-items: center;
     font-weight: var(--btcpay-font-weight-semibold);
@@ -74,14 +74,14 @@
     transition-duration: var(--btcpay-transition-duration-fast);
 }
 
-#mainNav .navbar-nav > li.nav-item > .nav-link:focus,
-#mainNav .navbar-nav > li.nav-item > .nav-link:hover {
+#mainNav .navbar-nav > li.nav-item .nav-link:focus,
+#mainNav .navbar-nav > li.nav-item .nav-link:hover {
     color: var(--btcpay-header-link-accent);
 }
 
-#mainNav .navbar-nav > li.nav-item > .nav-link.active,
-#mainNav .navbar-nav > li.nav-item > .nav-link.active:focus,
-#mainNav .navbar-nav > li.nav-item > .nav-link.active:hover {
+#mainNav .navbar-nav > li.nav-item .nav-link.active,
+#mainNav .navbar-nav > li.nav-item .nav-link.active:focus,
+#mainNav .navbar-nav > li.nav-item .nav-link.active:hover {
     color: var(--btcpay-header-link-active);
 }