diff --git a/deployment/docker-compose-dev.yaml b/deployment/docker-compose-dev.yaml index 3fe36a5..735e7b0 100644 --- a/deployment/docker-compose-dev.yaml +++ b/deployment/docker-compose-dev.yaml @@ -26,10 +26,13 @@ services: KC_HOSTNAME: ${KEYCLOAK_HOSTNAME} KC_HTTP_ENABLED: true KC_HEALTH_ENABLED: true + KC_SPI_THEME_CACHE_THEMES: false env_file: - .env.dev ports: - "7080:8080" + volumes: + - ./keycloak-theme:/opt/keycloak/themes depends_on: keycloak-db: condition: service_healthy diff --git a/deployment/docker-compose-prod.yaml b/deployment/docker-compose-prod.yaml index 6192f7a..ca9f661 100755 --- a/deployment/docker-compose-prod.yaml +++ b/deployment/docker-compose-prod.yaml @@ -26,6 +26,7 @@ services: - "8080:8080" volumes: - legalconsenthub_pdf_cache:/var/lib/legalconsenthub/pdfs + - ./keycloak-theme:/opt/keycloak/themes depends_on: legalconsenthub-db: condition: service_started diff --git a/deployment/keycloak-theme/legalconsenthub/login/login-username.ftl b/deployment/keycloak-theme/legalconsenthub/login/login-username.ftl new file mode 100644 index 0000000..e2576d4 --- /dev/null +++ b/deployment/keycloak-theme/legalconsenthub/login/login-username.ftl @@ -0,0 +1,58 @@ +<#import "template.ftl" as layout> +<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section> + <#if section = "header"> +

${msg("loginAccountTitle")}

+ <#elseif section = "form"> +
+
+ <#if realm.password> +
+
+ + + <#if messagesPerField.existsError('username')> + + ${kcSanitize(messagesPerField.getFirstError('username'))?no_esc} + + +
+ +
+ +
+
+ +
+
+ <#elseif section = "info"> + <#if realm.password && realm.registrationAllowed && !registrationDisabled??> +
+ ${msg("noAccount")} ${msg("doRegister")} +
+ + <#elseif section = "socialProviders"> + <#if realm.password && social?? && social.providers?has_content> +
+
+

${msg("identity-provider-login-label")}

+ +
+ + + + diff --git a/deployment/keycloak-theme/legalconsenthub/login/login.ftl b/deployment/keycloak-theme/legalconsenthub/login/login.ftl new file mode 100644 index 0000000..b151ee9 --- /dev/null +++ b/deployment/keycloak-theme/legalconsenthub/login/login.ftl @@ -0,0 +1,123 @@ +<#import "template.ftl" as layout> +<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section> + <#if section = "header"> + <#-- Logo is added via CSS ::before pseudo-element --> + <#if auth.attemptedUsername?has_content> + <#-- Password step: show username in disabled field with back arrow --> + <#else> +

${msg("loginAccountTitle")}

+ + <#elseif section = "form"> +
+
+ <#if realm.password> +
+ <#if auth.attemptedUsername?has_content> + <#-- Password step: show username as disabled input with back link in label --> +
+
+ + + + + + + ${msg("doChange")} + +
+ +
+ <#else> + <#-- Username step --> + <#if !usernameHidden??> +
+ + + <#if messagesPerField.existsError('username','password')> + + ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc} + + +
+ + + + <#if auth.attemptedUsername?has_content || !usernameHidden??> + <#-- Show password field if we're on password step OR if username is visible (combined form) --> + + + <#if auth.attemptedUsername?has_content> + <#-- Password step --> +
+ + + <#if messagesPerField.existsError('password')> + + ${kcSanitize(messagesPerField.getFirstError('password'))?no_esc} + + +
+ + + <#if (realm.rememberMe && !usernameHidden??) || realm.resetPasswordAllowed> + + + +
+ value="${auth.selectedCredential}"/> + +
+
+ +
+
+ <#elseif section = "info"> + <#if realm.password && realm.registrationAllowed && !registrationDisabled??> +
+ ${msg("noAccount")} ${msg("doRegister")} +
+ + <#elseif section = "socialProviders"> + <#if realm.password && social?? && social.providers?has_content> +
+
+

${msg("identity-provider-login-label")}

+ +
+ + + diff --git a/deployment/keycloak-theme/legalconsenthub/login/messages/messages_de.properties b/deployment/keycloak-theme/legalconsenthub/login/messages/messages_de.properties new file mode 100644 index 0000000..edd93a9 --- /dev/null +++ b/deployment/keycloak-theme/legalconsenthub/login/messages/messages_de.properties @@ -0,0 +1,30 @@ +# LegalConsentHub Keycloak Theme - German translations +# Override default Keycloak messages here + +# Login page +loginAccountTitle=Anmelden +usernameOrEmail=Benutzername oder E-Mail +username=Benutzername +email=E-Mail +password=Passwort +doLogIn=Anmelden + +# Remember me / Forgot password +rememberMe=Angemeldet bleiben +doForgotPassword=Passwort vergessen? + +# Registration +noAccount=Noch kein Konto? +doRegister=Registrieren + +# Restart login (change username) +restartLoginTooltip=Benutzername \u00e4ndern +doChange=\u00c4ndern + +# Errors +invalidUserMessage=Ung\u00fcltiger Benutzername oder Passwort. +invalidPasswordMessage=Ung\u00fcltiger Benutzername oder Passwort. + +# Social providers +identity-provider-login-label=Oder anmelden mit + diff --git a/deployment/keycloak-theme/legalconsenthub/login/messages/messages_en.properties b/deployment/keycloak-theme/legalconsenthub/login/messages/messages_en.properties new file mode 100644 index 0000000..309dec5 --- /dev/null +++ b/deployment/keycloak-theme/legalconsenthub/login/messages/messages_en.properties @@ -0,0 +1,30 @@ +# LegalConsentHub Keycloak Theme - English translations +# Override default Keycloak messages here + +# Login page +loginAccountTitle=Sign in +usernameOrEmail=Username or email +username=Username +email=Email +password=Password +doLogIn=Sign In + +# Remember me / Forgot password +rememberMe=Remember me +doForgotPassword=Forgot password? + +# Registration +noAccount=Don\u0027t have an account? +doRegister=Register + +# Restart login (change username) +restartLoginTooltip=Change username +doChange=Change + +# Errors +invalidUserMessage=Invalid username or password. +invalidPasswordMessage=Invalid username or password. + +# Social providers +identity-provider-login-label=Or sign in with + diff --git a/deployment/keycloak-theme/legalconsenthub/login/resources/css/styles.css b/deployment/keycloak-theme/legalconsenthub/login/resources/css/styles.css new file mode 100644 index 0000000..8edf3dd --- /dev/null +++ b/deployment/keycloak-theme/legalconsenthub/login/resources/css/styles.css @@ -0,0 +1,577 @@ +/* LegalConsentHub Keycloak Theme - Matching Nuxt UI 4 Styling */ +/* Compatible with Keycloak 26+ PatternFly-based themes */ + +/* CSS Variables matching Nuxt UI green/zinc theme */ +:root { + /* Green palette (primary) */ + --lch-green-50: #effdf5; + --lch-green-100: #d9fbe8; + --lch-green-200: #b3f5d1; + --lch-green-300: #75edae; + --lch-green-400: #00dc82; + --lch-green-500: #00c16a; + --lch-green-600: #00a155; + --lch-green-700: #007f45; + --lch-green-800: #016538; + --lch-green-900: #0a5331; + --lch-green-950: #052e16; + + /* Zinc palette (neutral) */ + --lch-zinc-50: #fafafa; + --lch-zinc-100: #f4f4f5; + --lch-zinc-200: #e4e4e7; + --lch-zinc-300: #d4d4d8; + --lch-zinc-400: #a1a1aa; + --lch-zinc-500: #71717a; + --lch-zinc-600: #52525b; + --lch-zinc-700: #3f3f46; + --lch-zinc-800: #27272a; + --lch-zinc-900: #18181b; + --lch-zinc-950: #09090b; +} + +/* ======================================== + LIGHT THEME (Default) + ======================================== */ + +/* Full page layout - center the card */ +html.login-pf, +html.login-pf body { + height: 100%; + margin: 0; + padding: 0; + background: linear-gradient(135deg, var(--lch-zinc-100) 0%, var(--lch-zinc-200) 100%) !important; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; +} + +.login-pf-page { + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + align-items: center !important; + min-height: 100vh !important; + padding: 1rem !important; + box-sizing: border-box !important; +} + +/* Hide the default header with realm name */ +#kc-header, +.login-pf-page-header { + display: none !important; +} + +/* Card container */ +.card-pf { + background: white !important; + border-radius: 0.75rem !important; + box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; + border: 1px solid var(--lch-zinc-200) !important; + padding: 2.5rem !important; + width: 100% !important; + max-width: 24rem !important; + box-sizing: border-box !important; +} + +/* Logo - Add before the header */ +.login-pf-header::before { + content: ""; + display: block; + width: 100%; + height: 3rem; + margin-bottom: 1.5rem; + background-image: url("../img/logo.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +/* Page title */ +.login-pf-header { + text-align: center !important; + margin-bottom: 1.5rem !important; +} + +#kc-page-title { + font-size: 1.5rem !important; + font-weight: 700 !important; + color: var(--lch-zinc-900) !important; + margin: 0 !important; + line-height: 1.3 !important; +} + +/* Form groups */ +.form-group { + margin-bottom: 1.25rem !important; +} + +/* Labels */ +.pf-c-form__label, +.pf-c-form__label-text, +.control-label, +label { + display: block !important; + font-size: 0.875rem !important; + font-weight: 500 !important; + color: var(--lch-zinc-700) !important; + margin-bottom: 0.5rem !important; +} + +/* Form inputs - PatternFly override */ +.pf-c-form-control, +input[type="text"], +input[type="password"], +input[type="email"] { + width: 100% !important; + padding: 0.75rem 1rem !important; + font-size: 0.9375rem !important; + line-height: 1.5 !important; + color: var(--lch-zinc-900) !important; + background-color: white !important; + border: 1px solid var(--lch-zinc-300) !important; + border-radius: 0.5rem !important; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; + box-sizing: border-box !important; + outline: none !important; +} + +.pf-c-form-control:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus { + border-color: var(--lch-green-400) !important; + box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.2) !important; +} + +.pf-c-form-control:hover, +input[type="text"]:hover, +input[type="password"]:hover, +input[type="email"]:hover { + border-color: var(--lch-zinc-400) !important; +} + +/* Primary button - Sign In (using ID for consistency across all login pages) */ +#kc-login { + display: block !important; + width: 100% !important; + padding: 0.5rem 0.75rem !important; + font-size: 1rem !important; + font-weight: 500 !important; + line-height: 1.5 !important; + color: white !important; + background-color: var(--lch-green-500) !important; + border: none !important; + border-radius: 0.5rem !important; + cursor: pointer !important; + transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.15s ease-in-out !important; + text-align: center !important; + box-sizing: border-box !important; +} + +#kc-login:hover { + background-color: var(--lch-green-400) !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; +} + +#kc-login:active { + background-color: var(--lch-green-700) !important; + transform: scale(0.98) !important; +} + +#kc-login:focus { + outline: none !important; + box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.3) !important; +} + +/* Secondary/link buttons */ +.pf-c-button.pf-m-link { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + padding: 0.5rem 1rem !important; + font-size: 0.875rem !important; + font-weight: 500 !important; + color: var(--lch-green-600) !important; + background-color: transparent !important; + border: none !important; + cursor: pointer !important; + transition: color 0.15s ease-in-out !important; +} + +.pf-c-button.pf-m-link:hover { + color: var(--lch-green-700) !important; + text-decoration: underline !important; +} + +/* Links */ +a { + color: var(--lch-green-600) !important; + text-decoration: none !important; + transition: color 0.15s ease-in-out !important; +} + +a:hover { + color: var(--lch-green-700) !important; + text-decoration: underline !important; +} + +/* Alert/Error messages */ +.alert, +.pf-c-alert { + padding: 1rem !important; + border-radius: 0.5rem !important; + margin-bottom: 1rem !important; + font-size: 0.875rem !important; +} + +.alert-error, +.alert-danger, +.pf-m-danger { + background-color: #fef2f2 !important; + border: 1px solid #fecaca !important; + color: #dc2626 !important; +} + +.alert-warning, +.pf-m-warning { + background-color: #fffbeb !important; + border: 1px solid #fde68a !important; + color: #d97706 !important; +} + +.alert-success, +.pf-m-success { + background-color: var(--lch-green-50) !important; + border: 1px solid var(--lch-green-200) !important; + color: var(--lch-green-700) !important; +} + +.alert-info, +.pf-m-info { + background-color: #eff6ff !important; + border: 1px solid #bfdbfe !important; + color: #2563eb !important; +} + +/* Checkbox styling */ +input[type="checkbox"] { + width: 1rem !important; + height: 1rem !important; + accent-color: var(--lch-green-500) !important; + border-radius: 0.25rem !important; + margin-right: 0.5rem !important; +} + +/* Remember me / form options */ +#kc-form-options { + margin-top: 0.5rem !important; +} + +#kc-form-options label { + display: flex !important; + align-items: center !important; + font-size: 0.875rem !important; + color: var(--lch-zinc-600) !important; + font-weight: 400 !important; +} + +/* Forgot password link */ +.login-pf-settings { + display: flex !important; + justify-content: space-between !important; + align-items: center !important; +} + +/* Social login section */ +#kc-social-providers { + margin-top: 1.5rem !important; + padding-top: 1.5rem !important; + border-top: 1px solid var(--lch-zinc-200) !important; +} + +#kc-social-providers ul { + list-style: none !important; + padding: 0 !important; + margin: 0 !important; + display: flex !important; + flex-direction: column !important; + gap: 0.75rem !important; +} + +#kc-social-providers a { + display: flex !important; + align-items: center !important; + justify-content: center !important; + padding: 0.75rem 1rem !important; + border: 1px solid var(--lch-zinc-300) !important; + border-radius: 0.5rem !important; + background: white !important; + color: var(--lch-zinc-700) !important; + font-weight: 500 !important; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important; +} + +#kc-social-providers a:hover { + background-color: var(--lch-zinc-100) !important; + border-color: var(--lch-zinc-400) !important; + text-decoration: none !important; +} + +/* Registration link */ +#kc-registration { + margin-top: 1.5rem !important; + text-align: center !important; + font-size: 0.875rem !important; + color: var(--lch-zinc-600) !important; +} + +/* Info section */ +#kc-info { + margin-top: 1rem !important; + text-align: center !important; + font-size: 0.875rem !important; + color: var(--lch-zinc-500) !important; +} + +/* Password visibility toggle button */ +.pf-c-button.pf-m-control { + background: transparent !important; + border: none !important; + color: var(--lch-zinc-500) !important; + cursor: pointer !important; + padding: 0.5rem !important; +} + +.pf-c-button.pf-m-control:hover { + color: var(--lch-zinc-700) !important; +} + +/* Username display with change link (password step) */ +.label-with-action { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + margin-bottom: 0.5rem !important; +} + +.label-with-action label { + margin-bottom: 0 !important; +} + +.change-username-link { + display: inline-flex !important; + align-items: center !important; + gap: 0.25rem !important; + font-size: 0.75rem !important; + font-weight: 500 !important; + color: var(--lch-zinc-500) !important; + background: none !important; + border: none !important; + padding: 0 !important; + transition: color 0.15s ease-in-out !important; +} + +.change-username-link:hover { + color: var(--lch-green-600) !important; + text-decoration: none !important; +} + +.change-username-link svg { + width: 0.875rem !important; + height: 0.875rem !important; +} + +.change-username-link span { + line-height: 1 !important; +} + +/* Disabled username input styling */ +input[disabled], +input[readonly] { + background-color: var(--lch-zinc-100) !important; + color: var(--lch-zinc-600) !important; + cursor: not-allowed !important; + border-color: var(--lch-zinc-200) !important; +} + +input[disabled]:hover, +input[readonly]:hover { + border-color: var(--lch-zinc-200) !important; +} + +/* Hide the default username display in header */ +#kc-username { + display: none !important; +} + +/* Input error styling */ +.input-error { + display: block !important; + margin-top: 0.5rem !important; + font-size: 0.8125rem !important; + color: #dc2626 !important; +} + +/* ======================================== + DARK THEME (System preference) + ======================================== */ + +@media (prefers-color-scheme: dark) { + html.login-pf, + html.login-pf body { + background: linear-gradient(135deg, var(--lch-zinc-900) 0%, var(--lch-zinc-950) 100%) !important; + } + + .card-pf { + background: var(--lch-zinc-800) !important; + border-color: var(--lch-zinc-700) !important; + } + + #kc-page-title { + color: var(--lch-zinc-50) !important; + } + + .pf-c-form__label, + .pf-c-form__label-text, + .control-label, + label { + color: var(--lch-zinc-300) !important; + } + + .pf-c-form-control, + input[type="text"], + input[type="password"], + input[type="email"] { + background-color: var(--lch-zinc-900) !important; + border-color: var(--lch-zinc-600) !important; + color: var(--lch-zinc-100) !important; + } + + .pf-c-form-control:hover, + input[type="text"]:hover, + input[type="password"]:hover, + input[type="email"]:hover { + border-color: var(--lch-zinc-500) !important; + } + + .pf-c-form-control:focus, + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus { + border-color: var(--lch-green-400) !important; + box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.25) !important; + } + + a { + color: var(--lch-green-400) !important; + } + + a:hover { + color: var(--lch-green-300) !important; + } + + #kc-form-options label, + #kc-registration { + color: var(--lch-zinc-400) !important; + } + + #kc-info { + color: var(--lch-zinc-500) !important; + } + + .alert-error, + .alert-danger, + .pf-m-danger { + background-color: #450a0a !important; + border-color: #7f1d1d !important; + color: #fca5a5 !important; + } + + .alert-warning, + .pf-m-warning { + background-color: #451a03 !important; + border-color: #78350f !important; + color: #fcd34d !important; + } + + .alert-success, + .pf-m-success { + background-color: var(--lch-green-950) !important; + border-color: var(--lch-green-800) !important; + color: var(--lch-green-300) !important; + } + + .alert-info, + .pf-m-info { + background-color: #1e3a5f !important; + border-color: #1e40af !important; + color: #93c5fd !important; + } + + #kc-social-providers { + border-top-color: var(--lch-zinc-700) !important; + } + + #kc-social-providers a { + background: var(--lch-zinc-800) !important; + border-color: var(--lch-zinc-600) !important; + color: var(--lch-zinc-200) !important; + } + + #kc-social-providers a:hover { + background-color: var(--lch-zinc-700) !important; + border-color: var(--lch-zinc-500) !important; + } + + .pf-c-button.pf-m-control { + color: var(--lch-zinc-400) !important; + } + + .pf-c-button.pf-m-control:hover { + color: var(--lch-zinc-200) !important; + } + + /* Username display - dark mode */ + input[disabled], + input[readonly] { + background-color: var(--lch-zinc-900) !important; + color: var(--lch-zinc-400) !important; + border-color: var(--lch-zinc-700) !important; + } + + input[disabled]:hover, + input[readonly]:hover { + border-color: var(--lch-zinc-700) !important; + } + + .change-username-link { + color: var(--lch-zinc-400) !important; + } + + .change-username-link:hover { + color: var(--lch-green-400) !important; + } + + .input-error { + color: #fca5a5 !important; + } +} + +/* ======================================== + RESPONSIVE ADJUSTMENTS + ======================================== */ + +@media (max-width: 480px) { + .card-pf { + margin: 0.5rem !important; + padding: 1.5rem !important; + } + + #kc-page-title { + font-size: 1.25rem !important; + } + + .login-pf-header::before { + height: 2.5rem !important; + } +} diff --git a/deployment/keycloak-theme/legalconsenthub/login/resources/img/logo.svg b/deployment/keycloak-theme/legalconsenthub/login/resources/img/logo.svg new file mode 100644 index 0000000..9ffef21 --- /dev/null +++ b/deployment/keycloak-theme/legalconsenthub/login/resources/img/logo.svg @@ -0,0 +1,38 @@ + + + + + + + + + diff --git a/deployment/keycloak-theme/legalconsenthub/login/theme.properties b/deployment/keycloak-theme/legalconsenthub/login/theme.properties new file mode 100644 index 0000000..ba2d63b --- /dev/null +++ b/deployment/keycloak-theme/legalconsenthub/login/theme.properties @@ -0,0 +1,5 @@ +parent=keycloak +import=common/keycloak +styles=css/login.css css/styles.css +locales=en,de + diff --git a/legalconsenthub/app/pages/callback.vue b/legalconsenthub/app/pages/callback.vue index 28ae9c0..bf39d5f 100644 --- a/legalconsenthub/app/pages/callback.vue +++ b/legalconsenthub/app/pages/callback.vue @@ -1,11 +1,30 @@ diff --git a/legalconsenthub/i18n/locales/de.json b/legalconsenthub/i18n/locales/de.json index bbbf569..050acdc 100644 --- a/legalconsenthub/i18n/locales/de.json +++ b/legalconsenthub/i18n/locales/de.json @@ -175,7 +175,8 @@ "redirectMessage": "Sie werden zur Authentifizierung zu Keycloak weitergeleitet", "signIn": "Mit Keycloak anmelden", "termsAgreement": "Mit der Anmeldung stimmen Sie unseren Nutzungsbedingungen zu", - "login": "Anmelden" + "login": "Anmelden", + "redirecting": "Sie werden weitergeleitet" }, "error": { "pageNotFound": "Seite nicht gefunden", diff --git a/legalconsenthub/i18n/locales/en.json b/legalconsenthub/i18n/locales/en.json index c5b8872..17897c5 100644 --- a/legalconsenthub/i18n/locales/en.json +++ b/legalconsenthub/i18n/locales/en.json @@ -175,7 +175,8 @@ "redirectMessage": "You will be redirected to Keycloak to authenticate", "signIn": "Sign in with Keycloak", "termsAgreement": "By signing in, you agree to our terms of service", - "login": "Login" + "login": "Login", + "redirecting": "You are being redirected" }, "error": { "pageNotFound": "Page not found", diff --git a/legalconsenthub/server/routes/auth/keycloak.get.ts b/legalconsenthub/server/routes/auth/keycloak.get.ts index 4f9f304..be94dd7 100644 --- a/legalconsenthub/server/routes/auth/keycloak.get.ts +++ b/legalconsenthub/server/routes/auth/keycloak.get.ts @@ -38,7 +38,7 @@ export default defineOAuthKeycloakEventHandler({ loggedInAt: Date.now() }) - return sendRedirect(event, '/') + return sendRedirect(event, '/callback') }, onError(event) {