btcpayserver/BTCPayServer/Views/Shared/_Layout.cshtml
d11n f8e6b51e9d
Store-centric UI (#3091)
* Update layout structure and header

* Implement store selector

* Simplify homepage

* Update layout

* Use dropdown for store selector

* Hide global nav in store context

* Horizontal section nav

* Remove outer section and container from content views

* Update nav

* Set store context for invoice and payment request lists

* Test fixes

* Persist menu collapse state on client-side

* MainNav as view component

* Update app routes to incorporate store context

* Test fixes

* Display ticker for altcoins build only

* Plugins nav

* Incorporate category for active page as well

* Update invoice icon

* Add apps list to nav

* Add store context to app type controllers

* Incorporate id for active page as well

* Test fixes

* AppsController cleanup

* Nav: Display only apps for the current store

* Remove leftover from merge

* Nav styles optimization

* Left-align content container

* Increase sidebar padding on desktop

* Use min-width for store selector menu

* Store settings nav update

* Update app and payment request routes

* Test fixes

* Refactor MainNav component to use StoresController

* Set store context for invoice actions

* Cleanups

* Remove CurrentStore checks

The response will be "Access denied" in case the CookieAuthorizationHandler cannot resolve the store.

* Remove unnecessary store context setters

* Test fix
2021-12-11 12:32:23 +09:00

129 lines
6.3 KiB
Text

@using BTCPayServer.Abstractions.Contracts
@inject BTCPayServer.Services.BTCPayServerEnvironment _env
@inject UserManager<ApplicationUser> _userManager
@inject ISettingsRepository _settingsRepository
@inject LinkGenerator _linkGenerator
@{
var logoSrc = $"{ViewContext.HttpContext.Request.PathBase}/img/logo.svg";
var notificationDisabled = (await _settingsRepository.GetPolicies()).DisableInstantNotifications;
if (!notificationDisabled)
{
var user = await _userManager.GetUserAsync(User);
notificationDisabled = user?.DisabledNotifications == "all";
}
}
<!DOCTYPE html>
<html lang="en"@(_env.IsDeveloping ? " data-devenv" : "")>
<head>
<partial name="LayoutHead" />
@await RenderSectionAsync("PageHeadContent", false)
</head>
<body class="d-flex flex-column flex-lg-row min-vh-100">
<header id="mainMenu" class="btcpay-header d-flex flex-column">
<div id="mainMenuHead" class="d-flex flex-lg-wrap align-items-center justify-content-between py-2 px-3 py-lg-3 px-lg-4">
<a href="~/" class="navbar-brand py-2 js-scroll-trigger">
<svg xmlns="http://www.w3.org/2000/svg" role="img" alt="BTCPay Server" class="logo"><use href="@logoSrc#small" class="logo-small" /><use href="@logoSrc#large" class="logo-large" /></svg>
@if (_env.NetworkType != NBitcoin.ChainName.Mainnet)
{
<span class="badge bg-warning ms-1 ms-sm-0" style="font-size:10px;">@_env.NetworkType.ToString()</span>
}
</a>
<vc:store-selector />
<vc:notifications-dropdown />
<button id="mainMenuToggle" class="mainMenuButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span>Menu</span>
</button>
</div>
<vc:main-nav />
</header>
<main id="mainContent">
@if (_env.Context.Request.Host.ToString() != _env.ExpectedHost || _env.Context.Request.Scheme != _env.ExpectedProtocol)
{
<div id="badUrl" class="alert alert-danger alert-dismissible m-3" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<vc:icon symbol="close"/>
</button>
<span>
BTCPay is expecting you to access this website from <strong>@(_env.ExpectedProtocol)://@(_env.ExpectedHost)/</strong>.
If you use a reverse proxy, please set the <strong>X-Forwarded-Proto</strong> header to <strong id="browserScheme">@(_env.ExpectedProtocol)</strong>
(<a href="https://docs.btcpayserver.org/FAQ/Deployment/#cause-3-btcpay-is-expecting-you-to-access-this-website-from" target="_blank" class="alert-link" rel="noreferrer noopener">More information</a>)
</span>
</div>
}
@if (!_env.IsSecure)
{
<div id="insecureEnv" class="alert alert-danger alert-dismissible" style="position:absolute; top:75px;" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<vc:icon symbol="close"/>
</button>
<span>
Your access to BTCPay Server is over an unsecured network. If you are using the docker deployment method with NGINX and HTTPS is not available, you probably did not configure your DNS settings correctly. <br/>
We disabled the register and login link so you don't leak your credentials.
</span>
</div>
}
<section>
<div class="container">
@RenderBody()
</div>
</section>
@if (User.Identity.IsAuthenticated)
{
<footer class="btcpay-footer">
<div class="container">
<div class="d-flex flex-column justify-content-between flex-xl-row py-1">
<div class="d-flex justify-content-center justify-content-xl-start mb-2 mb-xl-0">
<a href="https://github.com/btcpayserver/btcpayserver" class="d-flex align-items-center me-4" target="_blank" rel="noreferrer noopener">
<vc:icon symbol="github"/>
<span style="margin-left:.4rem">Github</span>
</a>
<a href="https://chat.btcpayserver.org/" class="d-flex align-items-center me-4" target="_blank" rel="noreferrer noopener">
<vc:icon symbol="mattermost"/>
<span style="margin-left:.4rem">Mattermost</span>
</a>
<a href="https://twitter.com/BtcpayServer" class="d-flex align-items-center" target="_blank" rel="noreferrer noopener">
<vc:icon symbol="twitter"/>
<span style="margin-left:.4rem">Twitter</span>
</a>
</div>
<div class="text-center text-xl-start">@_env.ToString()</div>
</div>
</div>
</footer>
}
<partial name="LayoutFoot"/>
@await RenderSectionAsync("PageFootContent", false)
<partial name="LayoutPartials/SyncModal"/>
@if (!notificationDisabled)
{
<script>
if ('WebSocket' in window && window.WebSocket.CLOSING === 2) {
const { host, protocol } = window.location;
const wsUri = `${protocol === "https:" ? "wss:" : "ws:"}//${host}@_linkGenerator.GetPathByAction("SubscribeUpdates", "Notifications")`;
const newDataEndpoint = "@_linkGenerator.GetPathByAction("GetNotificationDropdownUI", "Notifications")";
try {
socket = new WebSocket(wsUri);
socket.onmessage = e => {
if (e.data === "ping") return;
$.get(newDataEndpoint, data => {
$("#Notifications").replaceWith($(data));
});
};
socket.onerror = e => {
console.error("Error while connecting to websocket for notifications (callback)", e);
};
}
catch (e) {
console.error("Error while connecting to websocket for notifications", e);
}
}
</script>
}
</main>
</body>
</html>