Allow custom text and icon for Keycloak (#3181)

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

.env.example

@@ -167,6 +167,8 @@ GITHUB_CLIENT_SECRET=""
 KEYCLOAK_CLIENT_ID=""
 KEYCLOAK_CLIENT_SECRET=""
 KEYCLOAK_DISCOVERY_URL=""
+KEYCLOAK_CLIENT_CUSTOM_ORG=""
+KEYCLOAK_CLIENT_CUSTOM_ICON=""
 
 
 ######################################

lnbits/core/templates/admin/_tab_security.html

@@ -132,8 +132,8 @@
   >
     <strong class="q-my-none q-mb-sm">Keycloak Auth</strong>
 
-    <div class="row">
-      <div class="col-md-4 col-sm-12 q-pr-sm">
+    <div class="row q-col-gutter-sm q-col-gutter-y-md">
+      <div class="col-md-4 col-sm-12">
         <q-input
           filled
           v-model="formData.keycloak_discovery_url"
@@ -141,7 +141,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-4 col-sm-12 q-pr-sm">
+      <div class="col-md-4 col-sm-12">
         <q-input
           filled
           v-model="formData.keycloak_client_id"
@@ -159,6 +159,22 @@
         >
         </q-input>
       </div>
+      <div class="col-md-4 col-sm-12">
+        <q-input
+          filled
+          v-model="formData.keycloak_client_custom_org"
+          :label="$t('auth_keycloak_custom_org_label')"
+        >
+        </q-input>
+      </div>
+      <div class="col-md-8 col-sm-12">
+        <q-input
+          filled
+          v-model="formData.keycloak_client_custom_icon"
+          :label="$t('auth_keycloak_custom_icon_label')"
+        >
+        </q-input>
+      </div>
     </div>
   </q-card-section>
   <q-separator></q-separator>

lnbits/helpers.py

@@ -77,6 +77,8 @@ def template_renderer(additional_folders: Optional[list] = None) -> Jinja2Templa
         "LNBITS_ADMIN_UI": settings.lnbits_admin_ui,
         "LNBITS_AUDIT_ENABLED": settings.lnbits_audit_enabled,
         "LNBITS_AUTH_METHODS": settings.auth_allowed_methods,
+        "LNBITS_AUTH_KEYCLOAK_ORG": settings.keycloak_client_custom_org,
+        "LNBITS_AUTH_KEYCLOAK_ICON": settings.keycloak_client_custom_icon,
         "LNBITS_CUSTOM_IMAGE": settings.lnbits_custom_image,
         "LNBITS_CUSTOM_BADGE": settings.lnbits_custom_badge,
         "LNBITS_CUSTOM_BADGE_COLOR": settings.lnbits_custom_badge_color,

lnbits/settings.py

@@ -667,6 +667,8 @@ class KeycloakAuthSettings(LNbitsSettings):
     keycloak_discovery_url: str = Field(default="")
     keycloak_client_id: str = Field(default="")
     keycloak_client_secret: str = Field(default="")
+    keycloak_client_custom_org: str | None = Field(default=None)
+    keycloak_client_custom_icon: str | None = Field(default=None)
 
 
 class AuditSettings(LNbitsSettings):

lnbits/static/i18n/en.js

@@ -319,7 +319,7 @@ window.localisation.en = {
   signin_with_nostr: 'Continue with Nostr',
   signin_with_google: 'Sign in with Google',
   signin_with_github: 'Sign in with GitHub',
-  signin_with_keycloak: 'Sign in with Keycloak',
+  signin_with_custom_org: 'Sign in with {custom_org}',
   username_or_email: 'Username or Email',
   password: 'Password',
   password_config: 'Password Config',
@@ -482,6 +482,8 @@ window.localisation.en = {
   auth_keycloak_ci_hint:
     'Make sure thant the authorization callback URL is set to https://{domain}/api/v1/auth/keycloak/token',
   auth_keycloak_cs_label: 'Keycloak Client Secret',
+  auth_keycloak_custom_org_label: 'Keycloak Custom Organization',
+  auth_keycloak_custom_icon_label: 'Keycloak Custom Icon (URL)',
   currency_settings: 'Currency Settings',
   allowed_currencies: 'Allowed Currencies',
   allowed_currencies_hint: 'Limit the number of available fiat currencies',

lnbits/static/js/components.js

@@ -559,7 +559,9 @@ window.app.component('username-password', {
       username: this.userName,
       password: this.password_1,
       passwordRepeat: this.password_2,
-      reset_key: this.resetKey
+      reset_key: this.resetKey,
+      keycloakOrg: LNBITS_AUTH_KEYCLOAK_ORG || 'Keycloak',
+      keycloakIcon: LNBITS_AUTH_KEYCLOAK_ICON
     }
   },
   methods: {

lnbits/templates/components.vue

@@ -1472,10 +1472,22 @@
       >
         <q-avatar size="32px" class="q-mr-md">
           <q-img
-            :src="`{{ static_url_for('static', 'images/keycloak-logo.png') }}`"
+            :src="
+              keycloakIcon
+                ? keycloakIcon
+                : `{{ static_url_for('static', 'images/keycloak-logo.png') }}`
+            "
           ></q-img>
         </q-avatar>
-        <div><span v-text="$t('signin_with_keycloak')"></span></div>
+        <div>
+          <span
+            v-text="
+              $t('signin_with_custom_org', {
+                custom_org: keycloakOrg
+              })
+            "
+          ></span>
+        </div>
       </q-btn>
     </div>
   </q-card-section>