Merge pull request #30 from vshn/social-providers

Improve the design of the social provider buttons

docker-compose.yml

@@ -1,14 +1,18 @@
 version: '3.8'
 services:
   keycloak:
-    image: quay.io/keycloak/keycloak:15.0.2
+    image: quay.io/keycloak/keycloak:21.0
     ports:
       - "8080:8080"
     environment:
-      KEYCLOAK_USER: admin
-      KEYCLOAK_PASSWORD: admin
-      KEYCLOAK_DEFAULT_THEME: vshn
-      KEYCLOAK_WELCOME_THEME: vshn
+      KEYCLOAK_ADMIN: admin
+      KEYCLOAK_ADMIN_PASSWORD: admin
+    command:
+      - start-dev
+      - --debug
+      - --spi-theme-static-max-age=-1
+      - --spi-theme-cache-themes=false
+      - --spi-theme-cache-templates=false
+      - --spi-theme-login-theme=vshn
     volumes:
-      - ./theme:/opt/jboss/keycloak/themes/vshn:ro
-      - ./disable-theme-cache.cli:/opt/jboss/startup-scripts/disable-theme-cache.cli:ro
+      - ./theme:/opt/keycloak/themes/vshn:ro

theme/login/messages/messages_en.properties

@@ -0,0 +1,2 @@
+loginAccountTitle=Sign in with VSHN Account or external provider.
+identity-provider-login-label=First time here? Just login with an external provider of your choice. For more details see https://kb.vshn.net/kb/vshn-login.

theme/login/resources/css/styles.css

@@ -45,7 +45,7 @@
     padding-top: 1px;
 }
 
-.social-providers h4{
+.social-providers h4 {
     text-align: center;
 }
 
@@ -54,7 +54,7 @@
 }
 
 .splash-container {
-    max-width: 500px;
+    max-width: 700px;
 }
 
 #kc-totp-settings {
@@ -104,3 +104,96 @@
     font-size: 1.3rem;
     padding-right: 0.25rem;
 }
+
+#kc-page-title {
+    padding: 0 1rem;
+    font-size: 2rem;
+}
+
+#kc-content-wrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+#kc-form {
+    width: calc(50% - 1.5rem);
+}
+
+#kc-social-providers {
+    border-left: 2px solid #666666;
+    padding-left: 3rem;
+    margin-left: 3rem;
+    width: calc(50% + 1.5rem);
+    flex-direction: column-reverse;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+#kc-social-providers::before {
+    content: 'or';
+    position: absolute;
+    left: -0.625rem;
+    top: calc(50% - 0.625rem);
+    font-size: 1.25rem;
+    background-color: white;
+    color: #666666;
+}
+
+#kc-social-providers hr {
+    display: none;
+}
+
+#kc-social-providers h4 {
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: #666666;
+    text-align: left;
+    width: 100%;
+}
+
+.social-account-list {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+}
+
+@media all and (max-width: 700px) {
+    .splash-container {
+        max-width: 500px;
+    }
+
+    #kc-content-wrapper {
+        flex-direction: column;
+    }
+
+    #kc-form {
+        width: 100%;
+    }
+
+    #kc-social-providers {
+        border: none;
+        border-top: 2px solid #666666;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        padding-top: 2rem;
+        margin-top: 1.3rem;
+        flex-direction: column-reverse;
+        display: flex;
+        align-items: center;
+    }
+
+    #kc-social-providers::before {
+        content: 'or';
+        position: absolute;
+        left: calc(50% - 1rem);
+        top: -1rem;
+        padding: 0 0.5rem;
+        font-size: 1.25rem;
+        background-color: white;
+        color: #666666;
+    }
+}

theme/login/resources/js/script.js

@@ -29,12 +29,14 @@ window.onload = function () {
     if (beLogin) {
         beLogin.style.visibility = 'visible';
         const input = document.querySelector('input');
-        if(input){
+        if (input) {
             input.focus();
-  	    input.select();
+            input.select();
         }
     }
 
+    replaceLinkWithHref(document.querySelector('#kc-social-providers h4'));
+
     setTimeout(lookAround, 10000);
 }
 
@@ -137,3 +139,9 @@ function lookAround() {
 function reset() {
     TweenMax.to('.vshnEye', 1, {x: 0, y: 0, scaleY: 1, scaleX: 1, ease: Expo.easeOut})
 }
+function replaceLinkWithHref(element) {
+    const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
+    const text = element.innerText;
+    element.innerHTML = text.replace(urlRegex, '<a href="$&">$&</a>');
+}
+

theme/login/theme.properties

@@ -46,8 +46,8 @@ kcWebAuthnKeyIcon=mdi mdi-key
 
 ## Social
 kcFormSocialAccountSectionClass=social-providers
-kcFormSocialAccountListClass=mt-3 mb-3
-kcFormSocialAccountListButtonClass=btn btn-space btn-secondary
+kcFormSocialAccountListClass=social-account-list
+kcFormSocialAccountListButtonClass=btn btn-xl btn-secondary
 
 ## Social Icons
 kcLogoIdP-facebook=mdi mdi-facebook