CODEWITHSUNDEEP
spring-bootemailbootstrap-4thymeleaf
Shahin
Shahin

Reputation: 283

Spring boot, JavaMailSender, Thymeleaf and Bootstrap: Recieved email is a plain HTML page

I'm trying to send a MimeMessage using Thymeleaf and Bootstrap 4 but when I check into my inbox, the email is only a plain HTML page. Here are code snippets:

@Configuration
public class ThymeleafConfig {

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.addTemplateResolver(htmlTemplateResolver());
        return templateEngine;
    }

    private ITemplateResolver htmlTemplateResolver() {
        ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
        templateResolver.setPrefix("/templates/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode(TemplateMode.HTML);
        templateResolver.setCharacterEncoding(StandardCharsets.UTF_8.name());
        return templateResolver;
    }
}

@Service
@RequiredArgsConstructor
public class MailServiceImpl implements MailService {
    private static final String SUBJECT = "Library App - Email Verification";
    private static final String URL = "http://localhost:8081/library-app/account/emailVerification?token=";
    private static final String HTML_TEMPLATE = "email_verification";

    private final JavaMailSender mailSender;
    private final TemplateEngine templateEngine;

    @Override
    public void sendHtmlMessage(UserDto userInfo, String token) throws MessagingException {
        final Context context = new Context();
        context.setVariable("user_name", userInfo.getFirstName() + " " + userInfo.getLastName());
        context.setVariable("email", userInfo.getEmail());
        context.setVariable("verification_url", URL + token);

        final MimeMessage mimeMessage = this.mailSender.createMimeMessage();
        final MimeMessageHelper mailMessage = new MimeMessageHelper(mimeMessage, true, "UTF-8");
        mailMessage.setTo(userInfo.getEmail());
        mailMessage.setSubject(SUBJECT);

        final String htmlContent = this.templateEngine.process(HTML_TEMPLATE, context);
        mailMessage.setText(htmlContent, true);

        this.mailSender.send(mimeMessage);
    }
}

And here's the Thymeleaf HTML page:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{css/bootstrap.css}" type="text/css"/>
    <title>Library App: Email Verification</title>
</head>
<body>
    <section class="container h-100 d-flex justify-content-center" style="width: 50%;">
        <div style="margin-top: 5%;">
            <p>Dear <bold><span th:text="${user_name}"></span></bold></p>
            <p>To complete the registration process, please click the button below: </p>
            <button type="button" class="btn btn-primary btn-sm"><a th:href="@{${verification_url}}" style="text-decoration: none;">Complete Registration</a></button>
            <br>
            <br>
            <hr>
            <p>In case you have not tried to create an account in our website, just ignore this email.</p>
        </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script href="../static/js/bootstrap.js" th:href="@{js/bootstrap.js}"></script>
</body>
</html>

When I send the Thymeleaf page to my Yahoo mail and check it out there, it's just a plain HTML page.

PS: I've downloaded Bootstrap CSS and JS files to the resources/static directory.

Upvotes: 1

Views: 1065

Answers (1)

Degla Melek
Degla Melek

Reputation: 36

I think you must use cdn links for the css and js instead of static call and the Thymeleaf is a template engine that should be compiled in spring application i think the email frame cannot do it.

so i suggest to create a html css and bootstrap only for the email mime message.

Upvotes: 0

Related Questions