[providers] Add Discord

README.md

@@ -31,6 +31,7 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 ### Identity Provider Icons
 
 - Bitbucket
+- Discord
 - Facebook
 - GitHub
 - GitLab

tailwind.config.js

@@ -17,6 +17,7 @@ module.exports = {
 
         provider: {
           bitbucket: '#0052CC',
+          discord: '#5865F2',
           facebook: '#1877F2',
           github: '#181717',
           gitlab: '#FC6D26',

theme/keywind/login/assets/providers/discord.ftl

@@ -0,0 +1,7 @@
+<#-- https://discord.com/branding -->
+<#macro kw name="Discord">
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>${name}</title>
+    <path d="M20.3303 4.42852C18.7535 3.70661 17.0888 3.19446 15.3789 2.90516C15.1449 3.32345 14.9332 3.75381 14.7446 4.19445C12.9232 3.91998 11.071 3.91998 9.24961 4.19445C9.06095 3.75386 8.84924 3.3235 8.61535 2.90516C6.90433 3.19691 5.2386 3.71027 3.66019 4.43229C0.526644 9.06843 -0.322811 13.5894 0.101917 18.0462C1.937 19.4021 3.99098 20.4332 6.17458 21.0948C6.66626 20.4335 7.10134 19.732 7.47519 18.9976C6.76511 18.7324 6.07975 18.4052 5.42706 18.0198C5.59884 17.8952 5.76684 17.7669 5.92918 17.6423C7.82837 18.5354 9.90124 18.9985 12 18.9985C14.0987 18.9985 16.1715 18.5354 18.0707 17.6423C18.235 17.7763 18.403 17.9047 18.5729 18.0198C17.9189 18.4058 17.2323 18.7337 16.5209 18.9995C16.8943 19.7335 17.3294 20.4345 17.8216 21.0948C20.007 20.4359 22.0626 19.4052 23.898 18.0481C24.3963 12.8797 23.0467 8.4002 20.3303 4.42852ZM8.01318 15.3053C6.82961 15.3053 5.85179 14.2312 5.85179 12.9099C5.85179 11.5885 6.79563 10.505 8.0094 10.505C9.22318 10.505 10.1934 11.5885 10.1727 12.9099C10.1519 14.2312 9.21941 15.3053 8.01318 15.3053ZM15.9867 15.3053C14.8013 15.3053 13.8272 14.2312 13.8272 12.9099C13.8272 11.5885 14.7711 10.505 15.9867 10.505C17.2024 10.505 18.1651 11.5885 18.1444 12.9099C18.1236 14.2312 17.193 15.3053 15.9867 15.3053Z" fill="#5865F2" />
+  </svg>
+</#macro>

theme/keywind/login/assets/providers/providers.ftl

@@ -1,4 +1,5 @@
 <#import "./bitbucket.ftl" as bitbucketIcon>
+<#import "./discord.ftl" as discordIcon>
 <#import "./facebook.ftl" as facebookIcon>
 <#import "./github.ftl" as githubIcon>
 <#import "./gitlab.ftl" as gitlabIcon>
@@ -17,6 +18,10 @@
   <@bitbucketIcon.kw />
 </#macro>
 
+<#macro discord>
+  <@discordIcon.kw />
+</#macro>
+
 <#macro facebook>
   <@facebookIcon.kw />
 </#macro>

theme/keywind/login/components/molecules/identity-provider.ftl

@@ -10,6 +10,9 @@
         <#case "bitbucket">
           <#assign colorClass="hover:bg-provider-bitbucket/10">
           <#break>
+        <#case "discord">
+          <#assign colorClass="hover:bg-provider-discord/10">
+          <#break>
         <#case "facebook">
           <#assign colorClass="hover:bg-provider-facebook/10">
           <#break>