From 3ce513a29ba5caeb86e0b919f9fd4e42e898308b Mon Sep 17 00:00:00 2001 From: danfunk Date: Wed, 4 Oct 2023 14:31:08 -0400 Subject: [PATCH] Enabled copy in the docker file Added a spiffworkflow logo, colors, fonts, styling to login page based off the styles used on our website. Maybe someday these can bleed through to the app itself. --- spiffworkflow-backend/keycloak/Dockerfile | 2 +- .../keycloak/bin/start_keycloak | 10 +++ .../spifftheme/login/resources/css/styles.css | 77 ++++++++++++++++++ .../resources/images/spiffworkflow_logo.png | Bin 0 -> 6210 bytes .../spifftheme/login/theme.properties | 2 +- .../spifftheme/resources/css/styles.css | 3 - 6 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 spiffworkflow-backend/keycloak/spifftheme/login/resources/css/styles.css create mode 100644 spiffworkflow-backend/keycloak/spifftheme/login/resources/images/spiffworkflow_logo.png delete mode 100644 spiffworkflow-backend/keycloak/spifftheme/resources/css/styles.css diff --git a/spiffworkflow-backend/keycloak/Dockerfile b/spiffworkflow-backend/keycloak/Dockerfile index 6b835ef43..76d042055 100644 --- a/spiffworkflow-backend/keycloak/Dockerfile +++ b/spiffworkflow-backend/keycloak/Dockerfile @@ -17,7 +17,7 @@ FROM quay.io/keycloak/keycloak:22.0.4 COPY --from=builder /opt/keycloak/ /opt/keycloak/ WORKDIR /opt/keycloak -# COPY spifftheme keycloak:/opt/keycloak/themes/ +COPY spifftheme keycloak:/opt/keycloak/themes/ # for demonstration purposes only, please make sure to use proper certificates in production instead # RUN keytool -genkeypair -storepass password -storetype PKCS12 -keyalg RSA -keysize 2048 -dname "CN=server" -alias server -ext "SAN:c=DNS:localhost,IP:127.0.0.1" -keystore conf/server.keystore diff --git a/spiffworkflow-backend/keycloak/bin/start_keycloak b/spiffworkflow-backend/keycloak/bin/start_keycloak index 033f58d7d..f5e7dda63 100755 --- a/spiffworkflow-backend/keycloak/bin/start_keycloak +++ b/spiffworkflow-backend/keycloak/bin/start_keycloak @@ -50,6 +50,15 @@ docker run \ -Dkeycloak.profile.feature.token_exchange=enabled \ -Dkeycloak.profile.feature.admin_fine_grained_authz=enabled +# Add these lines if you want live reloading of changed theme files +# Theme files are stored in keycloak/spifftheme. From the keycloak +# directory run docker cp ./spifftheme keycloak:/opt/keycloak/themes to +# see changes. +# \ +# -D--spi-theme-static-max-age=-1 \ +# -D--spi-theme-cache-themes=false \ +# -D--spi-theme-cache-templates=false + script_dir="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )" cp "${script_dir}/../realm_exports/${realm_name}-realm.json" /tmp/${realm_name}-realm.json spiff_subdomain="for-local-dev.spiffworkflow.org" @@ -76,6 +85,7 @@ if [ "${TURN_OFF_SSL:-}" == "true" ]; then echo 'turned off SSL requirement' fi + docker stop keycloak docker start keycloak diff --git a/spiffworkflow-backend/keycloak/spifftheme/login/resources/css/styles.css b/spiffworkflow-backend/keycloak/spifftheme/login/resources/css/styles.css new file mode 100644 index 000000000..368628c7d --- /dev/null +++ b/spiffworkflow-backend/keycloak/spifftheme/login/resources/css/styles.css @@ -0,0 +1,77 @@ +:root { + --pf-global--link--Color: #126d82; + --pf-global--link--Color--hover: #004080; + --pf-global--link--Color--visited: #40199a; + --pf-global--primary-color--100: #126d82; + --pf-global--primary-color--200: #004080; + --pf-c-form__label--FontSize: 1.25rem; + --pf-c-form__label--LineHeight: 1.5rem; +} + +.login-pf body { + background:white; + font-family: open sans,sans-serif; +} + + +.login-pf-page .login-pf-header h1 { + font-size: 2rem; + line-height: 2.5rem; +} + +.login-pf-page-header { + background-repeat:no-repeat; + background-position: center center; + background-image: url(../images/spiffworkflow_logo.png); + min-height: 60px; +} + +#kc-header-wrapper { + display: none; +} + +#kc-social-providers:after { + content: 'You can also request a login link via email by sending a request to support@spiffworkflow.com'; +} + +.card-pf { + margin: 0 auto; + margin-bottom: 0px; + box-shadow: var(--pf-global--BoxShadow--lg); + padding: 0 20px; + max-width: 500px; + border-top: 4px solid; + border-top-color: currentcolor; + border-color: var(--pf-global--primary-color--100); +} + +.pf-c-button.pf-m-primary { + background: #FF7A59; + border-color: #FF7A59; + border-radius: 15px; + color: #FFFFFF; + font-size: 1.2rem; + line-height: 2.5rem; + font-weight: 700; +} + +.pf-c-button.kc-social-item { + background: #126d82; + border-color: #126d82; + border-radius: 15px; + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; + padding: 10px; + --pf-c-button--after--BorderColor: none; +} + + + +.pf-c-login__main-footer-links.kc-social-links { + display: block; +} + + + diff --git a/spiffworkflow-backend/keycloak/spifftheme/login/resources/images/spiffworkflow_logo.png b/spiffworkflow-backend/keycloak/spifftheme/login/resources/images/spiffworkflow_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e3aa0265d3a3cdb4a1d5cf24f101e927ca773d8d GIT binary patch literal 6210 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 g#BpWHlsO3bPY3XxF&1;5Bme*a07*qoM6N<$f{