From 452c59cc8f77bd04a0c3b1f353a00bd6516f489a Mon Sep 17 00:00:00 2001 From: Todd Kazakov Date: Wed, 22 Mar 2023 13:31:11 +0200 Subject: [PATCH 1/2] Additional SSO improvements --- docker-compose.yml | 2 +- tidepool-theme/login/login-idp-link-email.ftl | 33 +++++++++++----- .../login/messages/messages_en.properties | 14 ++++--- tidepool-theme/login/register.ftl | 6 ++- tidepool-theme/login/resources/css/styles.css | 38 +++++++++++++++---- tidepool-theme/login/theme.properties | 1 - 6 files changed, 68 insertions(+), 26 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 5f5e001..c2b0584 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -21,7 +21,7 @@ services: providers: image: busybox - command: ["/bin/sh", "-c", "cp /local/admin.jar /providers && wget -O /providers/keycloak-home-idp-discovery.jar https://github.com/toddkazakov/keycloak-home-idp-discovery/releases/download/0.2.0/keycloak-home-idp-discovery.jar"] + command: ["/bin/sh", "-c", "cp /local/admin.jar /providers && wget -O /providers/keycloak-home-idp-discovery.jar https://github.com/toddkazakov/keycloak-home-idp-discovery/releases/download/0.3.0/keycloak-home-idp-discovery.jar"] volumes: - ./admin/target/admin-LATEST.jar:/local/admin.jar - providers:/providers diff --git a/tidepool-theme/login/login-idp-link-email.ftl b/tidepool-theme/login/login-idp-link-email.ftl index 804af02..45dabe0 100644 --- a/tidepool-theme/login/login-idp-link-email.ftl +++ b/tidepool-theme/login/login-idp-link-email.ftl @@ -1,16 +1,29 @@ <#import "template.ftl" as layout> -<@layout.registrationLayout; section> +<@layout.registrationLayout displayMessage=false; section> <#if section = "header"> ${msg("emailLinkIdpTitle", idpDisplayName)} <#elseif section = "form"> -

- ${msg("emailLinkIdp1", idpDisplayName, brokerContext.username, realm.displayName)} -

-

- ${msg("emailLinkIdpResendVerificationCode")} -

-

- ${msg("emailLinkIdp4")} ${msg("doClickHere")} ${msg("emailLinkIdp5")} -

+
+

+ ${msg("emailLinkIdp1", idpDisplayName, brokerContext.username, realm.displayName)} +

+
+ +
+

+ ${msg("emailLinkIdpResendVerificationCode")} +

+

+ ${msg("emailLinkIdpResendVerificationCode")} +

+

+ ${msg("emailLinkIdp4")} ${msg("doClickHere")} ${msg("emailLinkIdp5")} +

+
\ No newline at end of file diff --git a/tidepool-theme/login/messages/messages_en.properties b/tidepool-theme/login/messages/messages_en.properties index 1ef4282..63329e0 100644 --- a/tidepool-theme/login/messages/messages_en.properties +++ b/tidepool-theme/login/messages/messages_en.properties @@ -1,5 +1,5 @@ doRegister=Sign up -doLogIn=Login +doLogIn=Sign in doForgotPassword=Forgot your password? registerTitle=Create Tidepool Account doCreateAccount=Create Account @@ -11,12 +11,16 @@ enterYourEmail=Enter your email address enterYourUsername=Enter your username enterYourUsernameOrEmail=Enter your username or email address notYou=Not you? +noAccount=Don''t have an account? +alreadyHaveAnAccount=Already have an account? saml.post-form.title=Redirecting, please wait... saml.post-form.message=Your browser will automatically redirect you to a login screen. -emailLinkIdpTitle=Account already exists -emailLinkIdp1=An email with instructions has been sent to you for linking your {0} account {1} with your {2} account. -emailLinkIdpResendVerificationCode=Resend Verification Code +emailLinkIdpTitle=Verify your email to continue +emailLinkIdp1=Verify your email address by clicking the verification link in the email we just sent you. +emailLinkIdpResendVerificationCode=Resend Verification Link emailLinkIdpConfirm=Confirm -emailLinkIdpConfirmEmailMessage=Confirm your email address to connect your {0} account with your current {1} account. \ No newline at end of file +emailLinkIdpConfirmEmailMessage=Confirm your email address to connect your {0} account with your current {1} account. + +emailBoundToIdp=This account is SSO enabled. Please sign in. \ No newline at end of file diff --git a/tidepool-theme/login/register.ftl b/tidepool-theme/login/register.ftl index 0c58620..2d7e1ad 100644 --- a/tidepool-theme/login/register.ftl +++ b/tidepool-theme/login/register.ftl @@ -1,5 +1,5 @@ <#import "template.ftl" as layout> -<@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm'); section> +<@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm') displayInfo=true; section> <#if section = "header">
${msg("registerTitle")} @@ -100,5 +100,9 @@
+ <#elseif section = "info" > +
+ ${msg("alreadyHaveAnAccount")} ${msg("doLogIn")} +
\ No newline at end of file diff --git a/tidepool-theme/login/resources/css/styles.css b/tidepool-theme/login/resources/css/styles.css index 960d8ae..c852869 100644 --- a/tidepool-theme/login/resources/css/styles.css +++ b/tidepool-theme/login/resources/css/styles.css @@ -102,6 +102,11 @@ a { font-weight: inherit; } +.login-pf-page a:focus, .login-pf-page a:hover { + color: #12d3d8; + text-decoration: underline; +} + h1, .login-pf-page .login-pf-header h1 { font-size: 20px; font-weight: 600; @@ -137,8 +142,10 @@ h2, .login-pf-page .login-pf-header h1 { opacity: .65; } -.tp-btn-primary:hover:enabled { +a.tp-btn-primary:hover, .tp-btn-primary:hover:enabled { background-color: #281946; + color: #fff; + text-decoration: none; } .tp-btn-default { @@ -154,6 +161,10 @@ h2, .login-pf-page .login-pf-header h1 { color: #fff; } +.tp-btn-fw { + width: 100%; +} + .tp-form-error { color: #de514b; font-size: 16px; @@ -188,7 +199,8 @@ h2, .login-pf-page .login-pf-header h1 { /* Sign Up Link */ .login-pf-page #kc-registration { font-size: 16px; - font-weight: 700; + font-weight: 500; + text-align: center; } .login-pf-page #kc-registration i { @@ -199,6 +211,7 @@ h2, .login-pf-page .login-pf-header h1 { .login-pf-page #kc-registration a { color: #627cff; + margin-left: 0; } .login-pf-page #kc-registration a:hover { @@ -206,6 +219,10 @@ h2, .login-pf-page .login-pf-header h1 { text-decoration: none; } +#kc-info-wrapper { + background-color: inherit; +} + /* Login Card */ .login-pf-page .card-pf { border: 0; @@ -369,6 +386,7 @@ h2, .login-pf-page .login-pf-header h1 { text-decoration: none; } + /* Forgot password */ .login-pf-page .tp-form-options-wrapper { font-size: 12px; @@ -378,11 +396,6 @@ h2, .login-pf-page .login-pf-header h1 { font-weight: normal; } -.login-pf-page a:focus, .login-pf-page a:hover { - color: #12d3d8; - text-decoration: underline; -} - .login-pf-page #kc-form-buttons { display: flex; align-items: center; @@ -594,8 +607,9 @@ svg { height: 350px; } +/* Link accounts */ p.instruction, .instruction { - margin-top: 20px; + margin-top: 0; margin-left: auto; margin-right: auto; max-width: 600px; @@ -604,3 +618,11 @@ p.instruction, .instruction { color: #281946; vertical-align: center; } + +.form-group > .instruction { + margin-top: 0; + margin-bottom: 20px; + font-size: 16px; + text-align: left; + color: inherit; +} diff --git a/tidepool-theme/login/theme.properties b/tidepool-theme/login/theme.properties index d18829a..e075c6b 100644 --- a/tidepool-theme/login/theme.properties +++ b/tidepool-theme/login/theme.properties @@ -17,7 +17,6 @@ kcButtonDefaultClass=tp-btn-default kcButtonPrimaryClass=tp-btn-primary kcFooterClass=tp-footer kcFooterWrapperClass=tp-footer-wrapper -kcSignUpClass=hidden kcHeaderClass=hidden kcRegisterTitleClass=tp-register-title kcLabelWrapperClass=tp-label-wrapper From 7e0a42c0c0249585f6e7f7ad43e56a7a6ea23db0 Mon Sep 17 00:00:00 2001 From: Todd Kazakov Date: Tue, 9 May 2023 21:05:57 +0300 Subject: [PATCH 2/2] Remove blank spaces in email links --- Dockerfile | 2 +- tidepool-theme/email/html/email-verification.ftl | 4 +--- tidepool-theme/email/html/executeActions.ftl | 4 +--- tidepool-theme/email/html/identity-provider-link.ftl | 4 +--- tidepool-theme/email/html/password-reset.ftl | 4 +--- tidepool-theme/login/login-idp-link-email.ftl | 3 --- tidepool-theme/login/messages/messages_en.properties | 2 +- 7 files changed, 6 insertions(+), 17 deletions(-) diff --git a/Dockerfile b/Dockerfile index 95841c7..782bb3d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,7 +9,7 @@ RUN unset MAVEN_CONFIG && \ ./mvnw clean compile package && \ wget -O keycloak-rest-provider.jar https://github.com/toddkazakov/keycloak-user-migration/releases/download/v1.1/keycloak-rest-provider.jar && \ wget -O keycloak-metrics-spi.jar https://github.com/toddkazakov/keycloak-metrics-spi/releases/download/2.5.4-20.0.1/keycloak-metrics-spi-2.5.4.jar && \ - wget -O keycloak-home-idp-discovery.jar https://github.com/toddkazakov/keycloak-home-idp-discovery/releases/download/0.2.0/keycloak-home-idp-discovery.jar + wget -O keycloak-home-idp-discovery.jar https://github.com/toddkazakov/keycloak-home-idp-discovery/releases/download/0.3.0/keycloak-home-idp-discovery.jar FROM alpine:3.15 as release diff --git a/tidepool-theme/email/html/email-verification.ftl b/tidepool-theme/email/html/email-verification.ftl index 277c95c..4a0a3d6 100644 --- a/tidepool-theme/email/html/email-verification.ftl +++ b/tidepool-theme/email/html/email-verification.ftl @@ -6,7 +6,5 @@ Please verify your Tidepool account! The verification link will expire in ${kcSanitize(linkExpirationFormatter(linkExpiration))?no_esc}. <#elseif section = "actionText"> Verify Your Account - <#elseif section = "actionLink"> - ${kcSanitize(link)?no_esc} - + <#elseif section = "actionLink">${kcSanitize(link)?no_esc} diff --git a/tidepool-theme/email/html/executeActions.ftl b/tidepool-theme/email/html/executeActions.ftl index 89ddff3..5c9afbc 100644 --- a/tidepool-theme/email/html/executeActions.ftl +++ b/tidepool-theme/email/html/executeActions.ftl @@ -10,7 +10,5 @@ ${kcSanitize(msg("executeActionsBodyHtml",link, linkExpiration, realmName, requiredActionsText, linkExpirationFormatter(linkExpiration)))?no_esc} <#elseif section = "actionText"> Update Your Account - <#elseif section = "actionLink"> - ${kcSanitize(link)?no_esc} - + <#elseif section = "actionLink">${kcSanitize(link)?no_esc} diff --git a/tidepool-theme/email/html/identity-provider-link.ftl b/tidepool-theme/email/html/identity-provider-link.ftl index e6030e0..88178b3 100644 --- a/tidepool-theme/email/html/identity-provider-link.ftl +++ b/tidepool-theme/email/html/identity-provider-link.ftl @@ -6,7 +6,5 @@ ${kcSanitize(msg("identityProviderLinkBodyHtml", identityProviderAlias, realmName, identityProviderContext.username, link, linkExpiration, linkExpirationFormatter(linkExpiration)))?no_esc} <#elseif section = "actionText"> Confirm Account Linking - <#elseif section = "actionLink"> - ${kcSanitize(link)?no_esc} - + <#elseif section = "actionLink">${kcSanitize(link)?no_esc} diff --git a/tidepool-theme/email/html/password-reset.ftl b/tidepool-theme/email/html/password-reset.ftl index 164b178..144e570 100644 --- a/tidepool-theme/email/html/password-reset.ftl +++ b/tidepool-theme/email/html/password-reset.ftl @@ -6,7 +6,5 @@ You requested a password reset. If you didn't request this, please ignore this email.

Otherwise, click the link below. The link will expire in ${kcSanitize(linkExpirationFormatter(linkExpiration))?no_esc}. <#elseif section = "actionText"> Reset Password - <#elseif section = "actionLink"> - ${kcSanitize(link)?no_esc} - + <#elseif section = "actionLink">${kcSanitize(link)?no_esc} diff --git a/tidepool-theme/login/login-idp-link-email.ftl b/tidepool-theme/login/login-idp-link-email.ftl index 45dabe0..815615f 100644 --- a/tidepool-theme/login/login-idp-link-email.ftl +++ b/tidepool-theme/login/login-idp-link-email.ftl @@ -18,9 +18,6 @@

${msg("emailLinkIdpResendVerificationCode")}

-

- ${msg("emailLinkIdpResendVerificationCode")} -

${msg("emailLinkIdp4")} ${msg("doClickHere")} ${msg("emailLinkIdp5")}

diff --git a/tidepool-theme/login/messages/messages_en.properties b/tidepool-theme/login/messages/messages_en.properties index 63329e0..bb67f44 100644 --- a/tidepool-theme/login/messages/messages_en.properties +++ b/tidepool-theme/login/messages/messages_en.properties @@ -6,7 +6,7 @@ doCreateAccount=Create Account continue=Continue keepingYourDataSecure=Keeping your data private and secure is important to us! next=Next -letsGetStarted=Let''s Get Started +letsGetStarted=Sign in to Tidepool enterYourEmail=Enter your email address enterYourUsername=Enter your username enterYourUsernameOrEmail=Enter your username or email address