Add oidc provider name and icon to login page

backend/config/__init__.py

@@ -78,6 +78,7 @@ DISABLE_DOWNLOAD_ENDPOINT_AUTH = str_to_bool(
 
 # OIDC
 OIDC_ENABLED: Final = str_to_bool(os.environ.get("OIDC_ENABLED", "false"))
+OICD_PROVIDER: Final = os.environ.get("OICD_PROVIDER", "")
 OIDC_CLIENT_ID: Final = os.environ.get("OIDC_CLIENT_ID", "")
 OIDC_CLIENT_SECRET: Final = os.environ.get("OIDC_CLIENT_SECRET", "")
 OIDC_REDIRECT_URI: Final = os.environ.get("OIDC_REDIRECT_URI", "")

backend/decorators/auth.py

@@ -2,6 +2,7 @@ from typing import Any
 
 from authlib.integrations.starlette_client import OAuth
 from config import (
+    OICD_PROVIDER,
     OIDC_CLIENT_ID,
     OIDC_CLIENT_SECRET,
     OIDC_ENABLED,
@@ -36,6 +37,7 @@ oauth2_password_bearer = OAuth2PasswordBearer(
 config = Config(
     environ={
         "OIDC_ENABLED": str(OIDC_ENABLED),
+        "OICD_PROVIDER": OICD_PROVIDER,
         "OIDC_CLIENT_ID": OIDC_CLIENT_ID,
         "OIDC_CLIENT_SECRET": OIDC_CLIENT_SECRET,
         "OIDC_REDIRECT_URI": OIDC_REDIRECT_URI,

backend/endpoints/heartbeat.py

@@ -4,6 +4,7 @@ from config import (
     ENABLE_RESCAN_ON_FILESYSTEM_CHANGE,
     ENABLE_SCHEDULED_RESCAN,
     ENABLE_SCHEDULED_UPDATE_SWITCH_TITLEDB,
+    OICD_PROVIDER,
     OIDC_ENABLED,
     RESCAN_ON_FILESYSTEM_CHANGE_DELAY,
     SCHEDULED_RESCAN_CRON,
@@ -64,5 +65,8 @@ def heartbeat() -> HeartbeatResponse:
             "DISABLE_RUFFLE_RS": DISABLE_RUFFLE_RS,
         },
         "FRONTEND": {"UPLOAD_TIMEOUT": UPLOAD_TIMEOUT},
-        "OIDC": {"ENABLED": OIDC_ENABLED},
+        "OIDC": {
+            "ENABLED": OIDC_ENABLED,
+            "PROVIDER": OICD_PROVIDER,
+        },
     }

backend/endpoints/responses/heartbeat.py

@@ -33,6 +33,7 @@ class FrontendDict(TypedDict):
 
 class OIDCDict(TypedDict):
     ENABLED: bool
+    PROVIDER: str
 
 
 class HeartbeatResponse(TypedDict):

env.template

@@ -36,6 +36,7 @@ AUTHENTIK_BOOTSTRAP_PASSWORD=
 # Authentication
 ROMM_AUTH_SECRET_KEY=
 OIDC_ENABLED=
+OICD_PROVIDER=
 OIDC_CLIENT_ID=
 OIDC_CLIENT_SECRET=
 OIDC_REDIRECT_URI=

frontend/src/__generated__/models/OIDCDict.ts

@@ -5,5 +5,6 @@
 
 export type OIDCDict = {
     ENABLED: boolean;
+    PROVIDER: string;
 };
 

frontend/src/views/Auth/Login.vue

@@ -111,10 +111,21 @@ async function loginOIDC() {
             v-if="heartbeatStore.value.OIDC.ENABLED"
             :loading="loggingIn"
             :variant="'text'"
-            class="bg-terciary"
+            class="bg-terciary mt-2"
             @click="loginOIDC()"
           >
-            <span>Login with OIDC</span>
+            <span class="pt-1">
+              <v-avatar size="20" class="mr-1">
+                <v-img
+                  v-if="heartbeatStore.value.OIDC.PROVIDER"
+                  :src="`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${heartbeatStore.value.OIDC.PROVIDER}.png`"
+                  class="fill-height"
+                >
+                  <template #error> </template>
+                </v-img>
+              </v-avatar>
+              Login with {{ heartbeatStore.value.OIDC.PROVIDER || "OIDC" }}
+            </span>
             <template #append>
               <v-icon class="text-romm-accent-1"
                 >mdi-chevron-right-circle-outline</v-icon