btcpayserver/BTCPayServer/Views/UIUserStores/CreateStore.cshtml
d11n 93f37b506b
UI: Improve Create First Store view (#5854)
Unifies the width and display with the login view.
2024-03-21 07:37:15 +01:00

64 lines
2.2 KiB
Text

@model BTCPayServer.Models.StoreViewModels.CreateStoreViewModel
@{
Layout = Model.IsFirstStore ? "_LayoutWizard" : "_Layout";
ViewData.SetActivePage(StoreNavPages.Create, Model.IsFirstStore ? "Create your first store" : "Create a new store");
}
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
<script>
const exchanges = @Safe.Json(StoreBlob.RecommendedExchanges);
const recommended = document.querySelector("#PreferredExchange option[value='']")
const updateRecommended = currency => {
const source = exchanges[currency] || 'coingecko'
const name = source.charAt(0).toUpperCase() + source.slice(1)
recommended.innerText = `${name} (Recommended)`
}
updateRecommended(@Safe.Json(Model.DefaultCurrency))
delegate('change', '#DefaultCurrency', e => updateRecommended(e.target.value))
</script>
}
@if (Model.IsFirstStore)
{
@section Navbar {
<a asp-route-skipWizard="true" class="cancel" id="SkipWizard">
<vc:icon symbol="close" />
</a>
}
@section PageHeadContent {
<style>
#FirstStore, .alert { max-width: 26.5rem; margin: var(--btcpay-space-l) auto; text-align: center; }
#FirstStore .main-logo { height: 4.5rem; max-width: 18rem; }
#FirstStore .main-logo-btcpay .main-logo-btcpay--large { display: none; }
#FirstStore .form-control, #FirstStore .form-select { width: 100%; }
#FirstStore .form-text { font-size: var(--btcpay-font-size-s); }
#FirstStore .form-group:last-of-type { text-align: center; }
</style>
}
<div id="FirstStore">
<a asp-controller="UIHome" asp-action="Index" tabindex="-1" class="d-inline-block mb-4">
<vc:main-logo />
</a>
<h1 class="h2 mb-3">@ViewData["Title"]</h1>
<p class="lead text-secondary">Create a store to begin accepting payments.</p>
<div class="text-start">
<partial name="_CreateStoreForm" model="Model" />
</div>
</div>
}
else
{
<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
<div class="row">
<div class="col-xl-8 col-xxl-constrain">
<partial name="_CreateStoreForm" model="Model" />
</div>
</div>
}