Skip to content

Commit a8d3b49

Browse files
maartenbamaartenba
authored
Merge pull request #16 from DuendeSoftware/main-page-refresh
Enhance UI and branding for Duende demo pages
2 parents c1587cc + 76dc00f commit a8d3b49

File tree

3 files changed

+189
-59
lines changed

3 files changed

+189
-59
lines changed

‎src/Pages/Index.cshtml

Lines changed: 151 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,43 +12,155 @@
1212
</noscript>
1313
<!-- End Google Tag Manager (noscript) -->
1414

15-
<div class="welcome-page">
16-
<h1>
17-
Welcome to Duende IdentityServer
18-
<small class="text-muted">(version @Model.Version)</small>
19-
</h1>
20-
21-
<ul>
22-
<li>
23-
IdentityServer publishes a
24-
<a href="~/.well-known/openid-configuration">discovery document</a>
25-
where you can find metadata and links to all the endpoints, key material, etc.
26-
</li>
27-
<li>
28-
Click <a href="~/diagnostics">here</a> to see the claims for your current session.
29-
</li>
30-
<li>
31-
Click <a href="~/grants">here</a> to manage your stored grants.
32-
</li>
33-
<li>
34-
Click <a href="~/serversidesessions">here</a> to view the server side sessions.
35-
</li>
36-
<li>
37-
Click <a href="~/ciba/all">here</a> to view your pending CIBA login requests.
38-
</li>
39-
</ul>
40-
41-
<hr/>
15+
<section class="text-center container border-bottom pb-3 mb-5">
16+
<div class="row py-lg-2">
17+
<div class="col-lg-6 col-md-8 mx-auto">
18+
<img src="duende-logo.svg" alt="Duende Software Logo" class="img-fluid w-75"/>
19+
<h1 class="fw-light">
20+
<a class="text-decoration-none" href="https://duendesoftware.com/products/identityserver">Welcome to Duende IdentityServer</a>
21+
</h1>
22+
<p class="lead text-muted">
23+
Meet Duende IdentityServer. A secure, flexible, and standards-compliant framework for OpenID Connect and OAuth 2.0. Use it as-is, or with full control of your UI, UX, business logic, and data. You decide.
24+
</p>
25+
<p class="display-4">
26+
<span class="badge badge-primary">@($"v{Model.Version}")</span>
27+
</p>
28+
<div>
29+
<a href="https://duendesoftware.com" class="btn btn-primary btn-lg">
30+
Get a License
31+
</a>
32+
<a href="https://docs.duendesoftware.com" class="btn btn-outline-primary btn-lg">
33+
Learn More
34+
</a>
35+
</div>
36+
</div>
37+
</div>
38+
</section>
4239

43-
<h2 id="references">References</h2>
40+
<div class="welcome-page">
41+
<h2 id="features" style="scroll-margin-top: 3em;">Features</h2>
4442
<p>
45-
Here are links to the
46-
<a href="https://github.com/duendesoftware/IdentityServer">IdentityServer source code repository</a>,
47-
<a href="https://github.com/duendesoftware/samples">ready-to-use samples</a>,
48-
and this <a href="https://github.com/DuendeSoftware/demo.duendesoftware.com">demo server</a>.
43+
This dashboard provides access to various IdentityServer functionalities for demo purposes only.
4944
</p>
45+
<div class="d-flex align-content-between flex-wrap mb-3">
46+
<div class="card m-2" style="width: 18rem;">
47+
<div class="card-body">
48+
<h5 class="card-title">
49+
<i class="glyphicon glyphicon-globe"></i>
50+
Discovery Document
51+
</h5>
52+
<p class="card-text">
53+
A discovery document
54+
where you can find metadata and links to all the endpoints, key material, etc.
55+
</p>
56+
</div>
57+
<div class="card-footer p-0">
58+
<a href="/.well-known/openid-configuration" class="btn btn-primary w-100 rounded-bottom">
59+
Go
60+
<i class="glyphicon glyphicon-chevron-right"></i>
61+
</a>
62+
</div>
63+
</div>
64+
<div class="card m-2" style="width: 18rem;">
65+
<div class="card-body">
66+
<h5 class="card-title">
67+
<i class="glyphicon glyphicon-user"></i>
68+
Claims
69+
</h5>
70+
<p class="card-text">See the claims for your current session.</p>
71+
</div>
72+
<div class="card-footer p-0">
73+
<a href="/diagnostics/" class="btn btn-primary w-100 rounded-bottom">
74+
Go
75+
<i class="glyphicon glyphicon-chevron-right"></i>
76+
</a>
77+
</div>
78+
</div>
79+
<div class="card m-2" style="width: 18rem;">
80+
<div class="card-body">
81+
<h5 class="card-title">
82+
<i class="glyphicon glyphicon-book"></i>
83+
Grants
84+
</h5>
85+
<p class="card-text">Manage your stored grants.</p>
86+
</div>
87+
<div class="card-footer p-0">
88+
<a href="/grants/" class="btn btn-primary w-100 rounded-bottom">
89+
Go
90+
<i class="glyphicon glyphicon-chevron-right"></i>
91+
</a>
92+
</div>
93+
</div>
94+
<div class="card m-2" style="width: 18rem;">
95+
<div class="card-body">
96+
<h5 class="card-title">
97+
<i class="glyphicon glyphicon-phone"></i>
98+
CIBA
99+
</h5>
100+
<p class="card-text">View your pending Client-Initiated Backchannel Authentication (CIBA) login requests.</p>
101+
</div>
102+
<div class="card-footer p-0">
103+
<a href="/ciba/all/" class="btn btn-primary w-100 rounded-bottom">
104+
Go
105+
<i class="glyphicon glyphicon-chevron-right"></i>
106+
</a>
107+
</div>
108+
</div>
109+
</div>
110+
111+
<h2 id="references" style="scroll-margin-top: 3em;">References</h2>
112+
<p>To learn more about Duende products and how to implement them, check out our source repositories and samples.</p>
113+
<div class="d-flex align-content-between flex-wrap mb-3">
114+
<div class="card m-2" style="width: 18rem;">
115+
<div class="card-body">
116+
<h5 class="card-title">
117+
<i class="glyphicon glyphicon-floppy-disk"></i>
118+
Duende IdentityServer Source Code
119+
</h5>
120+
<p class="card-text">
121+
The source code for the Duende IdentityServer and other Duende Products.
122+
</p>
123+
</div>
124+
<div class="card-footer p-0">
125+
<a href="https://github.com/duendesoftware/products" class="btn btn-primary w-100 rounded-bottom">
126+
Source Code
127+
<i class="glyphicon glyphicon-download-alt"></i>
128+
</a>
129+
</div>
130+
</div>
131+
<div class="card m-2" style="width: 18rem;">
132+
<div class="card-body">
133+
<h5 class="card-title">
134+
<i class="glyphicon glyphicon-book"></i>
135+
Ready-to-use Samples
136+
</h5>
137+
<p class="card-text">Ready-to-use IdentityServer samples for .NET and ASP.NET Core</p>
138+
</div>
139+
<div class="card-footer p-0">
140+
<a href="/diagnostics/" class="btn btn-primary w-100 rounded-bottom">
141+
Source Code
142+
<i class="glyphicon glyphicon-download-alt"></i>
143+
</a>
144+
</div>
145+
</div>
146+
<div class="card m-2" style="width: 18rem;">
147+
<div class="card-body">
148+
<h5 class="card-title">
149+
<i class="glyphicon glyphicon-cloud"></i>
150+
Demo Server Source Code
151+
</h5>
152+
<p class="card-text">The source code for this demo server.</p>
153+
</div>
154+
<div class="card-footer p-0">
155+
<a href="/diagnostics/" class="btn btn-primary w-100 rounded-bottom">
156+
Source Code
157+
<i class="glyphicon glyphicon-download-alt"></i>
158+
</a>
159+
</div>
160+
</div>
161+
</div>
50162

51-
<h2 id="demo-clients">Demo clients</h2>
163+
<h2 id="demo-clients" style="scroll-margin-top: 3em;">Demo clients</h2>
52164
<p>
53165
You can use this demo server for different types of clients.
54166
Use the below configurations to work with them in your own demo applications
@@ -58,7 +170,7 @@
58170
<div id="accordion" class="mb-3">
59171
@foreach (var clients in Config.Clients.GroupBy(it => it.ClientId.Split('.', StringSplitOptions.TrimEntries).First()))
60172
{
61-
<div class="card">
173+
<div class="card mb-2">
62174
<div id="[email protected]" class="card-header bg-light shadow-sm border-0">
63175
<h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#[email protected]" aria-controls="[email protected]" class="d-block position-relative text-dark text-uppercase collapsible-link py-2">@DemoServerUtilities.HumanizeClientIdPrefix(clients.Key)</a></h6>
64176
</div>
@@ -90,10 +202,10 @@
90202
@foreach (var client in clients)
91203
{
92204
<div class="col-12 col-lg-6">
93-
<div class="card border-light m-3">
94-
<div class="card-body bg-light">
205+
<div class="card border-light m-2">
206+
<div class="card-header bg-light">
95207
<h5 class="card-title">@client.ClientId</h5>
96-
<h6 class="card-subtitle mb-2 text-muted">@client.ClientName</h6>
208+
<h6 class="card-subtitle mb-1 text-muted">@client.ClientName</h6>
97209
</div>
98210
<div class="card-body">
99211
<div class="card-text">
@@ -170,7 +282,7 @@
170282
}
171283
</div>
172284

173-
<h2 id="sample-apis">Sample APIs</h2>
285+
<h2 id="sample-apis" style="scroll-margin-top: 3em;">Sample APIs</h2>
174286
<p>
175287
This demo server provides several sample API endpoints:
176288
</p>
@@ -185,7 +297,7 @@
185297
</li>
186298
</ul>
187299

188-
<h2 id="sample-keys">RSA key for JWT/JAR samples</h2>
300+
<h2 id="sample-keys" style="scroll-margin-top: 3em;">RSA key for JWT/JAR samples</h2>
189301
<p>
190302
You can use the below RSA key for all clients requiring private key JWT authentication or JAR:
191303
</p>

‎src/Pages/Shared/_Nav.cshtml

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
11
@using Duende.IdentityServer.Extensions
22
@{
3-
#nullable enable
3+
#nullable enable
44
string? name = null;
55
if (!true.Equals(ViewData["signed-out"]))
66
{
77
name = Context.User?.GetDisplayName();
88
}
99
}
1010

11-
<div class="nav-page">
12-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
13-
14-
<a href="~/" class="navbar-brand">
15-
<img src="~/duende-logo.svg" class="icon-banner" alt="Duende IdentityServer" />
16-
<span>IdentityServer (demo.duendesoftware.com)</span>
11+
<nav class="site-header sticky-top py-1 bg-primary">
12+
<div class="container d-flex flex-column flex-md-row justify-content-between">
13+
<a href="~/" class="navbar-brand py-2 d-md-inline-block">
14+
<img src="~/duende-white.svg" class="icon-banner" alt="Duende IdentityServer"/>
15+
<span class="text-white">IdentityServer</span>
16+
<span class="badge badge-dark">demo</span>
1717
</a>
18-
18+
<a class="text-white py-3 d-none d-md-inline-block" href="/#features">Features</a>
19+
<a class="text-white py-3 d-none d-md-inline-block" href="/#references">References</a>
20+
<a class="text-white py-3 d-none d-md-inline-block" href="/#demo-clients">Clients</a>
21+
<a class="text-white py-3 d-none d-md-inline-block" href="/#sample-apis">APIs</a>
22+
<a class="text-white py-3 d-none d-md-inline-block" href="/#sample-keys">Keys</a>
1923
@if (!string.IsNullOrWhiteSpace(name))
2024
{
21-
<ul class="navbar-nav mr-auto">
22-
<li class="nav-item dropdown">
23-
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">@name <b class="caret"></b></a>
24-
25-
<div class="dropdown-menu">
26-
<a class="dropdown-item" asp-page="/Account/Logout/Index">Logout</a>
27-
</div>
28-
</li>
29-
</ul>
25+
<a class="text-white py-3 d-md-inline-block" asp-page="/Account/Logout/Index">
26+
<span class="font-weight-bold">@name</span>
27+
<span class="text-white-50 font-italic">Logout</span>
28+
<i class="glyphicon glyphicon-log-out"></i>
29+
</a>
3030
}
31-
32-
</nav>
33-
</div>
31+
</div>
32+
</nav>

0 commit comments

Comments
 (0)