Merge pull request #9 from DuendeSoftware/mb/redesign

Redesign landing page for demo server

Author: maartenba

src/Pages/DemoServerUtilities.cs

@@ -0,0 +1,74 @@
+using Duende.IdentityServer.Models;
+
+namespace Duende.IdentityServer.Demo.Pages;
+
+public static class DemoServerUtilities
+{
+    public static string HumanizeAllowedGrantTypes(ICollection<string> grantTypes)
+    {
+        if (grantTypes.SequenceEqual(GrantTypes.Implicit))
+            return "implicit";
+
+        if (grantTypes.SequenceEqual(GrantTypes.ImplicitAndClientCredentials))
+            return "implicit and client credentials";
+
+        if (grantTypes.SequenceEqual(GrantTypes.Code))
+            return "authorization code";
+
+        if (grantTypes.SequenceEqual(GrantTypes.CodeAndClientCredentials))
+            return "authorization code and client credentials";
+
+        if (grantTypes.SequenceEqual(GrantTypes.Hybrid))
+            return "hybrid";
+
+        if (grantTypes.SequenceEqual(GrantTypes.HybridAndClientCredentials))
+            return "hybrid and client credentials";
+
+        if (grantTypes.SequenceEqual(GrantTypes.ClientCredentials))
+            return "client credentials";
+
+        if (grantTypes.SequenceEqual(GrantTypes.ResourceOwnerPassword))
+            return "resource owner password";
+
+        if (grantTypes.SequenceEqual(GrantTypes.ResourceOwnerPasswordAndClientCredentials))
+            return "resource owner password and client credentials";
+
+        if (grantTypes.SequenceEqual(GrantTypes.DeviceFlow))
+            return "device flow";
+
+        if (grantTypes.SequenceEqual(GrantTypes.Ciba))
+            return "ciba";
+
+        return string.Join(" ", grantTypes);
+    }
+
+    public static string HumanizeLifetime(TimeSpan lifetime)
+    {
+        var components = new List<string>();
+        if (lifetime.TotalHours > 0)
+        {
+            components.Add(Math.Floor(lifetime.TotalHours) + "h");
+        }
+        if (Math.Floor(lifetime.TotalMinutes % 60) > 0)
+        {
+            components.Add(Math.Floor(lifetime.TotalMinutes % 60) + "m");
+        }
+        if (Math.Floor(lifetime.TotalSeconds % 60) > 0)
+        {
+            components.Add(Math.Floor(lifetime.TotalSeconds % 60) + "s");
+        }
+
+        return string.Join(" ", components);
+    }
+
+    public static string? HumanizeClientIdPrefix(string clientIdPrefix) =>
+        clientIdPrefix switch
+        {
+            "m2m" => "Machine-to-Machine",
+            "interactive" => "Interactive clients",
+            "native" => "Native clients",
+            "device" => "Device flow",
+            "login" => "Login",
+            _ => clientIdPrefix
+        };
+}

src/Pages/Index.cshtml

@@ -1,7 +1,40 @@
-.welcome-page .logo {
+.welcome-page .logo {
   width: 64px;
 }
 
+/* Accordion styles */
+.collapsible-link::before {
+  content: "";
+  width: 14px;
+  height: 2px;
+  background: #333;
+  position: absolute;
+  top: calc(50% - 1px);
+  right: 1rem;
+  display: block;
+  transition: all 0.3s;
+}
+
+.collapsible-link::after {
+  content: "";
+  width: 2px;
+  height: 14px;
+  background: #333;
+  position: absolute;
+  top: calc(50% - 7px);
+  right: calc(1rem + 6px);
+  display: block;
+  transition: all 0.3s;
+}
+
+.collapsible-link[aria-expanded=true]::after {
+  transform: rotate(90deg) translateX(-1px);
+}
+
+.collapsible-link[aria-expanded=true]::before {
+  transform: rotate(180deg);
+}
+
 .icon-banner {
   width: 32px;
 }
@@ -11,11 +44,6 @@
   padding-bottom: 40px;
 }
 
-.welcome-page li {
-  list-style: none;
-  padding: 4px;
-}
-
 .logged-out-page iframe {
   display: none;
   width: 0;

src/wwwroot/css/site.css

@@ -4,6 +4,39 @@
   }
 }
 
+/* Accordion styles */
+.collapsible-link::before {
+  content: '';
+  width: 14px;
+  height: 2px;
+  background: #333;
+  position: absolute;
+  top: calc(50% - 1px);
+  right: 1rem;
+  display: block;
+  transition: all 0.3s;
+}
+
+.collapsible-link::after {
+  content: '';
+  width: 2px;
+  height: 14px;
+  background: #333;
+  position: absolute;
+  top: calc(50% - 7px);
+  right: calc(1rem + 6px);
+  display: block;
+  transition: all 0.3s;
+}
+
+.collapsible-link[aria-expanded='true']::after {
+  transform: rotate(90deg) translateX(-1px);
+}
+
+.collapsible-link[aria-expanded='true']::before {
+  transform: rotate(180deg);
+}
+
 .icon-banner {
   width: 32px;
 }
@@ -13,13 +46,6 @@
   padding-bottom: 40px;
 }
 
-.welcome-page {
-  li {
-    list-style: none;
-    padding: 4px;
-  }
-}
-
 .logged-out-page {
   iframe {
     display: none;
@@ -47,4 +73,4 @@
       font-weight: bold;
     }
   }
-}
+}