Skip to content

Feature/#549 improve invite emails #600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oharsta merged 8 commits into from
Jan 10, 2026
Merged

Feature/#549 improve invite emails #600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6fc3fdb
#549 Improve invite email
Liemine Jan 3, 2026
666558c
#549 Improve invite email add url
Liemine Jan 3, 2026
e5ee0e8
#549 Improve invite email fix EN version
Liemine Jan 3, 2026
1bfbdb1
#549 Restyle invitation email footer
Liemine Jan 8, 2026
cf9a608
#549 Restyle invitation email
Liemine Jan 8, 2026
5fd80b6
#549 Restyle invitation email
Liemine Jan 9, 2026
06667a5
#549 Restyle invitation email
Liemine Jan 9, 2026
08274a6
#549 Restyle invitation email
Liemine Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions server/src/main/java/invite/mail/MailBox.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package invite.mail;

import invite.cron.IdPMetaDataResolver;
import invite.cron.IdentityProvider;
import invite.model.*;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
Expand Down Expand Up @@ -69,12 +70,17 @@ public void sendInviteMail(Provisionable provisionable, Invitation invitation,
variables.put("groupedProviders", groupedProviders);
variables.put("title", title);
if (provisionable instanceof User user) {
variables.put("institutionName", idPMetaDataResolver
.getIdentityProvider(user.getSchacHomeOrganization())
Optional<IdentityProvider> identityProvider = idPMetaDataResolver
.getIdentityProvider(user.getSchacHomeOrganization());
variables.put("institutionName", identityProvider
.map(idp -> idp.getName())
.orElse(user.getSchacHomeOrganization()));
variables.put("institutionLogoUrl", identityProvider
.map(idp -> idp.getLogoUrl())
.orElse(null));
} else {
variables.put("institutionName", "SURF");
variables.put("isInstitutionSurf", true);
}
optionalIdpName.ifPresent(idpName -> variables.put("idpName", idpName));
variables.put("roles", splitListSemantically(invitation.getRoles().stream()
Expand Down
8 changes: 8 additions & 0 deletions server/src/main/resources/templates/eduID-logo-square.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 42 additions & 46 deletions server/src/main/resources/templates/invitation_en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,88 +4,84 @@
<title>{{title}}</title>
</head>
<body>
<div class="main" style="font-family: Helvetica, Arial, sans-serif;line-height: 18px;font-size: 16px;color: #353535;">
<div class="header" style="background-color: #0077C8;padding:10px 40px;">
{{> logo-surf.svg}}
<span style="display: inline-block;color:white;margin-left: 10px;font-size: 18px;">Welcome</span>
<div class="main" style="width:617px;margin: 0 auto;display:flex;flex-direction:column; padding:24px 32px;font-family:Helvetica, Arial, sans-serif;line-height: 150%;font-size: 18px;color: #000;">
<div class="header">
{{#institutionLogoUrl}}
<img src="{{institutionLogoUrl}}" alt="logo" style="height: 48px;width: 48px;"/>
{{/institutionLogoUrl}}
{{#isInstitutionSurf}}
<img src="https://static.surfconext.nl/logos/org/8017e83f-bca7-e911-90f2-0050569571ea.png" alt="logo" style="height: 48px;width: 48px;"/>
{{/isInstitutionSurf}}
</div>
<div class="head" style="padding: 30px 40px 20px 40px;">
<div class="head">
{{#environment}}
<p style="font-weight: bold;margin: 0; padding: 20px 5px; background-color: #f1f19b;">
<p style="font-weight: bold;padding: 10px;margin:5px 0 15px 0;background-color: #f1f19b;">
This mail is from the {{environment}} environment
</p>
{{/environment}}
<p class="title" style="">Hello,</p>

{{#invitation.institutionAdminInvitation}}
<p><strong>{{displaySenderName}}</strong> (from <strong>{{institutionName}}</strong>) has invited you to become
<p>{{displaySenderName}} (from {{institutionName}}) has invited you to become
an institution admin for institution {{idpName}} to manage the applications of this institution.</p>
{{/invitation.institutionAdminInvitation}}

{{#invitation.anyRoles}}

<p><strong>{{displaySenderName}}</strong> (from <strong>{{institutionName}}</strong>) has invited you for one or
more
applications or systems that they use.</p>

<p>You have been invited for:</p>

<p>{{displaySenderName}} (from {{institutionName}}) would you like to grant access to:</p>
<ul>
{{#groupedProviders}}
<li style="margin-bottom: 4px;"><strong>{{name}}</strong> ({{organisation}}) - as
<strong>{{rolesDisplay}}</strong></li>
<li style="margin-bottom: 4px;font-weight: 600;">{{name}} - as {{rolesDisplay}}</li>
{{/groupedProviders}}
</ul>
{{/invitation.anyRoles}}
{{#message}}
<p style="margin: 20px 0 0 0;">Personal message from {{displaySenderName}}</p>
<div class="head" style="background-color: #f5f5f5;padding: 20px;margin:5px 0 15px 0;font-style: italic;">
<div class="head" style="background-color: #DFF4FF;padding: 10px;margin:5px 0 15px 0;">
<p style="margin: 0;">
{{{message}}}
</p>
</div>
{{/message}}
{{#useEduID}}
<p>For access to these applications eduID is used. Do you not have an eduID account yet?
No worries, you can create one in less than 30 seconds.</p>
<p>You accept the role(s) by logging in with eduID. If you don’t have one yet, you can create it right away.</p>
<div style="display: flex;">
<a class="button" href="{{{ url }}}"
style="border-radius: 4px;color: white;display: flex;width: 300px;background-color: #0077c8;text-decoration: none;margin: 15px auto;cursor:pointer;padding: 14px 26px;">
{{> eduid-logo.svg}}
<span style="color: white;margin: auto 0 auto 25px;">Accept invitation with eduID</span>
style="border-radius: 4px;color: white;display: flex;background-color: #0077c8;text-decoration: none;cursor:pointer;padding: 8px 20px 8px 10px;">
{{> eduID-logo-square.svg}}
<span style="color: white;margin: auto 0 auto 12px;">Continue with eduID</span>
</a>
</div>
<p style="word-break: break-word">or copy this link into your browser: {{{ url }}}</p>
{{/useEduID}}
{{^useEduID}}
<p>For access to these applications we use SURFconext.</p>
<p>You accept the role(s) by logging in with SURFconext.</p>
<div style="display: flex;">
<a class="button" href="{{{ url }}}"
style="border-radius: 4px;color: white;width: 300px;display:flex;background-color: #0077c8;text-decoration: none;margin: 15px auto;cursor:pointer;padding: 14px 56px;font-size: 18px;">
<span style="color: white;margin: auto;">Accept invitation</span>
style="border-radius: 4px;color: white;display: flex;background-color: #0077c8;text-decoration: none;cursor:pointer;padding: 8px 20px 8px 10px;">
<span style="color: white;margin: auto;">Continue</span>
</a>
</div>
<p style="word-break: break-word">or copy this link into your browser: {{{ url }}}</p>
{{/useEduID}}
</div>
{{#useEduID}}
<div class="eduid-info" style="background-color: #f3f2f2;padding: 20px 40px 20px 40px; color: #9b9b9b">
<p style="font-size: 18px;margin:20px 0 15px 0;">Why do I need an eduID account?</p>
<p>An eduID is an account for users within the Dutch educational and research community. It is yours and exists
independent of an educational institution.
With eduID you can log in to various applications. Even if you don't have an institutional account. You can
use
eduID for example
if you want to follow courses with different institutions. Or if you want to follow a course after you have
graduated.</p>
<p style="font-weight: bold;margin: 15px 0 0 0;">
Request eduID
</p>
<p style="margin: 5px 0 10px 0;">Requesting an eduID is free, and you can do it now. All you need is an
emailaddress.</p>
<div class="footer"
style="display:flex;align-items:center;justify-content:space-between;padding: 12px 0;line-height: 24px; color: #5E6873; border-top: 1px solid #888F99;font-size: 14px;">
<div class="links" style="text-align: left">
<span>This invitation is sent via</span>
<a class="external" href="https://support.surfconext.nl/invite"
style="color: #636363;">SURFconext Invite</a>
<span> • </span>
<a class="external" href="https://support.surfconext.nl/privacy"
style="color: #636363;">Privacy Policy</a>
<span> • </span>
<a class="external" href="https://support.surfconext.nl/terms-en"
style="color: #636363;">Terms of Use</a>
</div>
<div class="about" style="text-align: right">
<a class="external"
href="https://surf.nl/"
>{{> logo-surf-black.svg}}</a>
</div>
</div>
{{/useEduID}}

{{> footer_en.html}}

</div>

</body>
</html>
89 changes: 42 additions & 47 deletions server/src/main/resources/templates/invitation_nl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,89 +4,84 @@
<title>{{title}}</title>
</head>
<body>
<div class="main" style="font-family: Helvetica, Arial, sans-serif;line-height: 18px;font-size: 16px;color: #353535;">
<div class="header" style="background-color: #0077C8;padding:10px 40px;">
{{> logo-surf.svg}}
<span style="display: inline-block;color:white;margin-left: 10px;font-size: 18px;">Welkom</span>
<div class="main" style="width:617px;margin: 0 auto;display:flex;flex-direction:column; padding:24px 32px;font-family:Helvetica, Arial, sans-serif;line-height: 150%;font-size: 18px;color: #000;">
<div class="header">
{{#institutionLogoUrl}}
<img src="{{institutionLogoUrl}}" alt="logo" style="height: 48px;width: 48px;"/>
{{/institutionLogoUrl}}
{{#isInstitutionSurf}}
<img src="https://static.surfconext.nl/logos/org/8017e83f-bca7-e911-90f2-0050569571ea.png" alt="logo" style="height: 48px;width: 48px;"/>
{{/isInstitutionSurf}}
</div>
<div class="head" style="padding: 30px 40px 20px 40px;">
<div class="head">
{{#environment}}
<p style="font-weight: bold;margin: 0; padding: 20px 5px; background-color: #f1f19b;">
<p style="font-weight: bold;padding: 10px;margin:5px 0 15px 0;background-color: #f1f19b;">
Deze mail is van de {{environment}}-omgeving
</p>
{{/environment}}
<p class="title" style="">Hallo,</p>

{{#invitation.institutionAdminInvitation}}
<p><strong>{{displaySenderName}}</strong> (van <strong>{{institutionName}}</strong>) heeft je uitgenodigd om
<p>{{displaySenderName}} (van {{institutionName}}) heeft je uitgenodigd om
een instellings-admin te worden van instelling {{idpName}} om de applicaties van deze instelling te beheren.</p>
{{/invitation.institutionAdminInvitation}}

{{#invitation.anyRoles}}

<p><strong>{{displaySenderName}}</strong> (van <strong>{{institutionName}}</strong>) heeft je uitgenodigd voor
één of meer
applicaties en systemen die zij gebruiken.</p>

<p>Je bent uitgenodigd voor:</p>

<p>{{displaySenderName}} (van {{institutionName}}) wil je toegang geven tot:</p>
<ul>
{{#groupedProviders}}
<li style="margin-bottom: 4px;"><strong>{{name}}</strong> ({{organisation}}) - als
<strong>{{rolesDisplay}}</strong></li>
<li style="margin-bottom: 4px;font-weight: 600;">{{name}} - als {{rolesDisplay}}</li>
{{/groupedProviders}}
</ul>
{{/invitation.anyRoles}}
{{#message}}
<p style="margin: 20px 0 0 0;">Persoonlijk bericht van {{displaySenderName}}</p>
<div class="head" style="background-color: #f5f5f5;padding: 20px;margin:5px 0 15px 0;font-style: italic;">
<div class="head" style="background-color: #DFF4FF;padding: 10px;margin:5px 0 15px 0;">
<p style="margin: 0;">
{{{message}}}
</p>
</div>
{{/message}}
{{#useEduID}}
<p>Voor de toegang tot deze applicatie(s) wordt gebruik gemaakt van eduID. Heb je nog geen eduID account? Geen
probleem,
een eduID account aanmaken kost minder dan 30 seconden.</p>
<p>De rol(len) accepteer je door in te loggen met eduID. Als je deze nog niet hebt, kun je hem gelijk aanmaken.</p>
<div style="display: flex;">
<a class="button" href="{{{ url }}}"
style="border-radius: 4px;color: white;display: flex;width: 300px;background-color: #0077c8;text-decoration: none;margin: 15px auto;cursor:pointer;padding: 14px 26px;">
{{> eduid-logo.svg}}
<span style="color: white;margin: auto 0 auto 25px;">Uitnodiging accepteren met eduID</span>
style="border-radius: 4px;color: white;display: flex;background-color: #0077c8;text-decoration: none;cursor:pointer;padding: 8px 20px 8px 10px;">
{{> eduID-logo-square.svg}}
<span style="color: white;margin: auto 0 auto 12px;">Ga door met eduID</span>
</a>
</div>
<p style="word-break: break-word">of kopieer deze link in je browser: {{{ url }}}</p>
{{/useEduID}}
{{^useEduID}}
<p>Voor de toegang tot deze applicaties wordt gebruik gemaakt van SURFconext.</p>
<p>De rol(len) accepteer je door in te loggen met SURFconext.</p>
<div style="display: flex;">
<a class="button" href="{{{ url }}}"
style="border-radius: 4px;color: white;width: 300px;display:flex;background-color: #0077c8;text-decoration: none;margin: 15px auto;cursor:pointer;padding: 14px 56px;font-size: 18px;">
<span style="color: white;margin: auto;">Uitnodiging accepteren</span>
style="border-radius: 4px;color: white;display: flex;background-color: #0077c8;text-decoration: none;cursor:pointer;padding: 8px 20px 8px 10px;">
<span style="color: white;margin: auto;">Ga door</span>
</a>
</div>
<p style="word-break: break-word">of kopieer deze link in je browser: {{{ url }}}</p>
{{/useEduID}}
</div>
{{#useEduID}}
<div class="eduid-info" style="background-color: #f3f2f2;padding: 20px 40px 20px 40px; color: #9b9b9b">
<p style="font-size: 18px;margin:20px 0 15px 0;">Waarom heb ik een eduID account nodig?</p>
<p>
Een eduID is een account voor gebruikers binnen het Nederlandse onderwijs en onderzoek. Het
is van jou, en bestaat onafhankelijk van een onderwijsinstelling. Met eduID kan je inloggen op
verschillende applicaties. Ook als je geen account van je instelling hebt, kan je met eduID inloggen.
Je kunt eduID bijvoorbeeld gebruiken als je bij meerdere instellingen tegelijk onnderwijs wilt volgen.
Of na je studie als je naast je werk een opleiding of cursus wilt volgen.
</p>
<p style="font-weight: bold;margin: 15px 0 0 0;">
Aanvragen eduID
</p>
<p style="margin: 5px 0 10px 0;">Het aanvragen van een eduID is kosteloos en kan direct. Je hebt alleen een
e-mailadres nodig.</p>
<div class="footer"
style="display:flex;align-items:center;justify-content:space-between;padding: 12px 0;line-height: 24px; color: #5E6873; border-top: 1px solid #888F99;font-size: 14px;">
<div class="links" style="text-align: left">
<span>Deze uitnoding verloopt via</span>
<a class="external" href="https://support.surfconext.nl/invite"
style="color: #636363;">SURFconext Invite</a>
<span> • </span>
<a class="external" href="https://support.surfconext.nl/privacy-nl"
style="color: #636363;">Privacy Policy</a>
<span> • </span>
<a class="external" href="https://support.surfconext.nl/terms-nl"
style="color: #636363;">Voorwaarden</a>
</div>
<div class="about" style="text-align: right">
<a class="external"
href="https://surf.nl/"
>{{> logo-surf-black.svg}}</a>
</div>
</div>
{{/useEduID}}

{{> footer_nl.html}}

</div>

</body>
</html>
Loading
Loading