Merge pull request #24 from tidepool-org/fix-email-templates

Fix email templates
tidepool-org · May 24, 2023 · cc0d248 · cc0d248
2 parents 06daa1b + 7e0a42c
commit cc0d248
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 40 deletions.
diff --git 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/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/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}
-    </#if>
+    <#elseif section = "actionLink">${kcSanitize(link)?no_esc}</#if>
 </@layout.emailLayout>
diff --git 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}
-    </#if>
+    <#elseif section = "actionLink">${kcSanitize(link)?no_esc}</#if>
 </@layout.emailLayout>
diff --git 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}
-    </#if>
+    <#elseif section = "actionLink">${kcSanitize(link)?no_esc}</#if>
 </@layout.emailLayout>
diff --git 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.<br /><br />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}
-    </#if>
+    <#elseif section = "actionLink">${kcSanitize(link)?no_esc}</#if>
 </@layout.emailLayout>
diff --git a/tidepool-theme/login/login-idp-link-email.ftl b/tidepool-theme/login/login-idp-link-email.ftl
@@ -1,16 +1,26 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout; section>
+<@layout.registrationLayout displayMessage=false; section>
     <#if section = "header">
         ${msg("emailLinkIdpTitle", idpDisplayName)}
     <#elseif section = "form">
-        <p id="instruction1" class="instruction">
-            ${msg("emailLinkIdp1", idpDisplayName, brokerContext.username, realm.displayName)}
-        </p>
-        <p id="instruction2" class="instruction">
-            <a href="${url.loginAction}">${msg("emailLinkIdpResendVerificationCode")}</a>
-        </p>
-        <p id="instruction3" class="instruction">
-            ${msg("emailLinkIdp4")} <a href="${url.loginAction}">${msg("doClickHere")}</a> ${msg("emailLinkIdp5")}
-        </p>
+            <div class="${properties.kcFormGroupClass!}">
+                <p id="instruction1" class="instruction">
+                    ${msg("emailLinkIdp1", idpDisplayName, brokerContext.username, realm.displayName)}
+                </p>
+                <div class="attempted-username instruction">
+                    <input disabled
+                           id="username"
+                           class="${properties.kcInputClass!}"
+                           type="text" autocomplete="off"
+                           value="${brokerContext.username}"
+                    />
+                </div>
+                <p id="instruction2" class="instruction">
+                    <a class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!} tp-btn-fw"  href="${url.loginAction}">${msg("emailLinkIdpResendVerificationCode")}</a>
+                </p>
+                <p id="instruction3" class="instruction">
+                    ${msg("emailLinkIdp4")} <a href="${url.loginAction}">${msg("doClickHere")}</a> ${msg("emailLinkIdp5")}
+                </p>
+            </div>
     </#if>
 </@layout.registrationLayout>
diff --git a/tidepool-theme/login/messages/messages_en.properties b/tidepool-theme/login/messages/messages_en.properties
@@ -1,22 +1,26 @@
 doRegister=Sign up
-doLogIn=Login
+doLogIn=Sign in
 doForgotPassword=Forgot your password?
 registerTitle=Create Tidepool Account
 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
 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.
+emailLinkIdpConfirmEmailMessage=Confirm your email address to connect your {0} account with your current {1} account.
+
+emailBoundToIdp=This account is SSO enabled. Please sign in.
diff --git 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">
         <div class="${properties.kcRegisterTitleClass!}">
             ${msg("registerTitle")}
@@ -100,5 +100,9 @@
                 </div>
             </div>
         </form>
+    <#elseif section = "info" >
+        <div id="kc-registration">
+            <span>${msg("alreadyHaveAnAccount")} <a tabindex="6" href="${url.loginRestartFlowUrl}">${msg("doLogIn")}</a></span>
+        </div>
     </#if>
 </@layout.registrationLayout>
diff --git 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,13 +211,18 @@ 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 {
   color: #281946;
   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
@@ -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