Skip to content

Commit 7f42c9d

Browse files
khalidabuhakmehkhalidabuhakmeh
committed
Enhance UI and branding for Duende demo pages
Updated the navigation bar, homepage, and feature pages with improved styling, redesigned layout, and updated branding elements. Added new SVG logo, updated the homepage with better feature cards, and ensured a consistent visual theme with Duende's primary colors.
1 parent 89b0905 commit 7f42c9d

File tree

3 files changed

+206
-55
lines changed

3 files changed

+206
-55
lines changed

‎src/Pages/Index.cshtml

Lines changed: 163 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,168 @@
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 mb-3">
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">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="/diagnostics/" 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-paperclip"></i>
98+
Server Side Sessions
99+
</h5>
100+
<p class="card-text">View your current server side sessions.</p>
101+
</div>
102+
<div class="card-footer p-0">
103+
<a href="/serversidesessions/" 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 class="card m-2" style="width: 18rem;">
110+
<div class="card-body">
111+
<h5 class="card-title">
112+
<i class="glyphicon glyphicon-phone"></i>
113+
CIBA
114+
</h5>
115+
<p class="card-text">View your pending Client-Initiated Backchannel Authentication (CIBA) login requests.</p>
116+
</div>
117+
<div class="card-footer p-0">
118+
<a href="/ciba/all/" class="btn btn-primary w-100 rounded-bottom">
119+
Go
120+
<i class="glyphicon glyphicon-chevron-right"></i>
121+
</a>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<h2 id="references">References</h2>
127+
<p>To learn more about Duende products and how to implement them, check out our source repositories and samples.</p>
128+
<div class="d-flex align-content-between flex-wrap mb-3">
129+
<div class="card m-2" style="width: 18rem;">
130+
<div class="card-body">
131+
<h5 class="card-title">
132+
<i class="glyphicon glyphicon-floppy-disk"></i>
133+
Duende IdentityServer Source Code
134+
</h5>
135+
<p class="card-text">
136+
The source code for the Duende IdentityServer and other Duende Products.
137+
</p>
138+
</div>
139+
<div class="card-footer p-0">
140+
<a href="https://github.com/duendesoftware/products" 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-book"></i>
150+
Ready-to-use Samples
151+
</h5>
152+
<p class="card-text">Ready-to-use IdentityServer samples for .NET and ASP.NET Core</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 class="card m-2" style="width: 18rem;">
162+
<div class="card-body">
163+
<h5 class="card-title">
164+
<i class="glyphicon glyphicon-cloud"></i>
165+
Demo Server Source Code
166+
</h5>
167+
<p class="card-text">The source code for this demo server.</p>
168+
</div>
169+
<div class="card-footer p-0">
170+
<a href="/diagnostics/" class="btn btn-primary w-100 rounded-bottom">
171+
Source Code
172+
<i class="glyphicon glyphicon-download-alt"></i>
173+
</a>
174+
</div>
175+
</div>
176+
</div>
50177

51178
<h2 id="demo-clients">Demo clients</h2>
52179
<p>
@@ -58,7 +185,7 @@
58185
<div id="accordion" class="mb-3">
59186
@foreach (var clients in Config.Clients.GroupBy(it => it.ClientId.Split('.', StringSplitOptions.TrimEntries).First()))
60187
{
61-
<div class="card">
188+
<div class="card mb-2">
62189
<div id="[email protected]" class="card-header bg-light shadow-sm border-0">
63190
<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>
64191
</div>
@@ -90,10 +217,10 @@
90217
@foreach (var client in clients)
91218
{
92219
<div class="col-12 col-lg-6">
93-
<div class="card border-light m-3">
94-
<div class="card-body bg-light">
220+
<div class="card border-light m-2">
221+
<div class="card-header bg-light">
95222
<h5 class="card-title">@client.ClientId</h5>
96-
<h6 class="card-subtitle mb-2 text-muted">@client.ClientName</h6>
223+
<h6 class="card-subtitle mb-1 text-muted">@client.ClientName</h6>
97224
</div>
98225
<div class="card-body">
99226
<div class="card-text">

‎src/Pages/Shared/_Nav.cshtml

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

1111
<div class="nav-page">
12-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
12+
<nav class="navbar navbar-light bg-primary">
1313

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>
17-
</a>
14+
<div class="container">
15+
<div class="row">
16+
<a href="~/" class="navbar-brand">
17+
<img src="~/duende-white.svg" class="icon-banner" alt="Duende IdentityServer"/>
18+
<span class="text-white">IdentityServer</span>
19+
<small class="text-white-50 font-italic">(demo.duendesoftware.com)</small>
20+
</a>
1821

19-
@if (!string.IsNullOrWhiteSpace(name))
20-
{
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>
30-
}
31-
22+
@if (!string.IsNullOrWhiteSpace(name))
23+
{
24+
<ul class="navbar-nav mr-auto">
25+
<li class="nav-item dropdown">
26+
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">@name <b
27+
class="caret"></b></a>
28+
29+
<div class="dropdown-menu">
30+
<a class="dropdown-item" asp-page="/Account/Logout/Index">Logout</a>
31+
</div>
32+
</li>
33+
</ul>
34+
}
35+
</div>
36+
</div>
3237
</nav>
3338
</div>

0 commit comments

Comments
 (0)