refactor: use react email for email templates (#734)

Co-authored-by: Alessandro (Ale) Segala <43508+ItalyPaleAle@users.noreply.github.com>
Co-authored-by: Elias Schneider <login@eliasschneider.com>

backend/.golangci.yml

@@ -61,4 +61,4 @@ formatters:
     paths:
       - third_party$
       - builtin$
-      - examples$
+      - examples$

backend/internal/service/email_service.go

@@ -262,7 +262,7 @@ func prepareBody[V any](srv *EmailService, template email.Template[V], data *ema
 
 	// prepare text part
 	var textHeader = textproto.MIMEHeader{}
-	textHeader.Add("Content-Type", "text/plain;\n charset=UTF-8")
+	textHeader.Add("Content-Type", "text/plain; charset=UTF-8")
 	textHeader.Add("Content-Transfer-Encoding", "quoted-printable")
 	textPart, err := mpart.CreatePart(textHeader)
 	if err != nil {
@@ -274,18 +274,17 @@ func prepareBody[V any](srv *EmailService, template email.Template[V], data *ema
 	if err != nil {
 		return "", "", fmt.Errorf("execute text template: %w", err)
 	}
+	textQp.Close()
 
-	// prepare html part
 	var htmlHeader = textproto.MIMEHeader{}
-	htmlHeader.Add("Content-Type", "text/html;\n charset=UTF-8")
-	htmlHeader.Add("Content-Transfer-Encoding", "quoted-printable")
+	htmlHeader.Add("Content-Type", "text/html; charset=UTF-8")
+	htmlHeader.Add("Content-Transfer-Encoding", "8bit")
 	htmlPart, err := mpart.CreatePart(htmlHeader)
 	if err != nil {
 		return "", "", fmt.Errorf("create html part: %w", err)
 	}
 
-	htmlQp := quotedprintable.NewWriter(htmlPart)
-	err = email.GetTemplate(srv.htmlTemplates, template).ExecuteTemplate(htmlQp, "root", data)
+	err = email.GetTemplate(srv.htmlTemplates, template).ExecuteTemplate(htmlPart, "root", data)
 	if err != nil {
 		return "", "", fmt.Errorf("execute html template: %w", err)
 	}

backend/internal/utils/email/email_service_templates.go

@@ -3,7 +3,6 @@ package email
 import (
 	"fmt"
 	htemplate "html/template"
-	"io/fs"
 	"path"
 	ttemplate "text/template"
 
@@ -27,71 +26,35 @@ func GetTemplate[U any, V any](templateMap TemplateMap[U], template Template[V])
 	return templateMap[template.Path]
 }
 
-type cloneable[V pareseable[V]] interface {
-	Clone() (V, error)
-}
-
-type pareseable[V any] interface {
-	ParseFS(fs.FS, ...string) (V, error)
-}
-
-func prepareTemplate[V pareseable[V]](templateFS fs.FS, template string, rootTemplate cloneable[V], suffix string) (V, error) {
-	tmpl, err := rootTemplate.Clone()
-	if err != nil {
-		return *new(V), fmt.Errorf("clone root template: %w", err)
-	}
-
-	filename := fmt.Sprintf("%s%s", template, suffix)
-	templatePath := path.Join("email-templates", filename)
-	_, err = tmpl.ParseFS(templateFS, templatePath)
-	if err != nil {
-		return *new(V), fmt.Errorf("parsing template '%s': %w", template, err)
-	}
-
-	return tmpl, nil
-}
-
 func PrepareTextTemplates(templates []string) (map[string]*ttemplate.Template, error) {
-	components := path.Join("email-templates", "components", "*_text.tmpl")
-	rootTmpl, err := ttemplate.ParseFS(resources.FS, components)
-	if err != nil {
-		return nil, fmt.Errorf("unable to parse templates '%s': %w", components, err)
-	}
-
 	textTemplates := make(map[string]*ttemplate.Template, len(templates))
 	for _, tmpl := range templates {
-		rootTmplClone, err := rootTmpl.Clone()
+		filename := tmpl + "_text.tmpl"
+		templatePath := path.Join("email-templates", filename)
+
+		parsedTemplate, err := ttemplate.ParseFS(resources.FS, templatePath)
 		if err != nil {
-			return nil, fmt.Errorf("clone root template: %w", err)
+			return nil, fmt.Errorf("parsing template '%s': %w", tmpl, err)
 		}
 
-		textTemplates[tmpl], err = prepareTemplate[*ttemplate.Template](resources.FS, tmpl, rootTmplClone, "_text.tmpl")
-		if err != nil {
-			return nil, fmt.Errorf("parse '%s': %w", tmpl, err)
-		}
+		textTemplates[tmpl] = parsedTemplate
 	}
 
 	return textTemplates, nil
 }
 
 func PrepareHTMLTemplates(templates []string) (map[string]*htemplate.Template, error) {
-	components := path.Join("email-templates", "components", "*_html.tmpl")
-	rootTmpl, err := htemplate.ParseFS(resources.FS, components)
-	if err != nil {
-		return nil, fmt.Errorf("unable to parse templates '%s': %w", components, err)
-	}
-
 	htmlTemplates := make(map[string]*htemplate.Template, len(templates))
 	for _, tmpl := range templates {
-		rootTmplClone, err := rootTmpl.Clone()
+		filename := tmpl + "_html.tmpl"
+		templatePath := path.Join("email-templates", filename)
+
+		parsedTemplate, err := htemplate.ParseFS(resources.FS, templatePath)
 		if err != nil {
-			return nil, fmt.Errorf("clone root template: %w", err)
+			return nil, fmt.Errorf("parsing template '%s': %w", tmpl, err)
 		}
 
-		htmlTemplates[tmpl], err = prepareTemplate[*htemplate.Template](resources.FS, tmpl, rootTmplClone, "_html.tmpl")
-		if err != nil {
-			return nil, fmt.Errorf("parse '%s': %w", tmpl, err)
-		}
+		htmlTemplates[tmpl] = parsedTemplate
 	}
 
 	return htmlTemplates, nil

backend/resources/email-templates/api-key-expiring-soon_html.tmpl

@@ -1,17 +1,3 @@
-{{ define "base" }}
-    <div class="header">
-        <div class="logo">
-            <img src="{{ .LogoURL }}" alt="{{ .AppName }}" width="32" height="32" style="width: 32px; height: 32px; max-width: 32px;"/>
-            <h1>{{ .AppName }}</h1>
-        </div>
-        <div class="warning">Warning</div>
-    </div>
-    <div class="content">
-        <h2>API Key Expiring Soon</h2>
-        <p>
-            Hello {{ .Data.Name }},<br/><br/>
-            This is a reminder that your API key <strong>{{ .Data.ApiKeyName }}</strong> will expire on <strong>{{ .Data.ExpiresAt.Format "2006-01-02 15:04:05 MST" }}</strong>.<br/><br/>
-            Please generate a new API key if you need continued access.
-        </p>
-    </div>
-{{ end }}
+{{define "root"}}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="{{.LogoURL}}"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><body style="padding:50px;background-color:#FBFBFB;font-family:Arial, sans-serif"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;width:500px;margin:0 auto"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="left" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="width:210px;margin-bottom:16px"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column">
+<img alt="{{.AppName}}" height="32" src="{{.LogoURL}}" style="display:block;outline:none;border:none;text-decoration:none;width:32px;height:32px;vertical-align:middle;margin-right:8px" width="32"/></td><td data-id="__react-email-column"><p style="font-size:23px;line-height:24px;font-weight:bold;margin:0;padding:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.AppName}}</p></td></tr></tbody></table></td></tr></tbody></table><div style="background-color:white;padding:24px;border-radius:10px;box-shadow:0 1px 4px 0px rgba(0, 0, 0, 0.1)"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><h1 style="font-size:20px;font-weight:bold;margin:0">API Key Expiring Soon</h1></td><td align="right" data-id="__react-email-column">
+<p style="font-size:12px;line-height:24px;background-color:#ffd966;color:#7f6000;padding:1px 12px;border-radius:50px;display:inline-block;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Warning</p></td></tr></tbody></table><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">Hello <!-- -->{{.Data.Name}}<!-- -->, <br/>This is a reminder that your API key <strong>{{.Data.APIKeyName}}</strong> <!-- -->will expire on <strong>{{.Data.ExpiresAt.Format "2006-01-02 15:04:05 MST"}}</strong>.</p><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">Please generate a new API key if you need continued access.</p></div></td></tr></tbody></table><!--7--><!--/$--></body></html>{{end}}

backend/resources/email-templates/api-key-expiring-soon_text.tmpl

@@ -1,10 +1,12 @@
-{{ define "base" -}}
-API Key Expiring Soon
-====================
+{{define "root"}}{{.AppName}}
 
-Hello {{ .Data.Name }},
 
-This is a reminder that your API key "{{ .Data.ApiKeyName }}" will expire on {{ .Data.ExpiresAt.Format "2006-01-02 15:04:05 MST" }}.
+API KEY EXPIRING SOON
 
-Please generate a new API key if you need continued access.
-{{ end -}}
+Warning
+
+Hello {{.Data.Name}},
+This is a reminder that your API key {{.Data.APIKeyName}} will expire on
+{{.Data.ExpiresAt.Format "2006-01-02 15:04:05 MST"}}.
+
+Please generate a new API key if you need continued access.{{end}}

backend/resources/email-templates/components/email_html.tmpl

@@ -1,14 +0,0 @@
-{{ define "root" }}
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    {{ template "style" . }}
-</head>
-<body>
-    <div class="container">
-        {{ template "base" . }}
-    </div>
-</body>
-</html>
-{{ end }}

backend/resources/email-templates/components/email_text.tmpl

@@ -1,7 +0,0 @@
-{{- define "root" -}}
-{{- template "base" . -}}
-{{- end }}
-
-
---
-This is automatically sent email from {{.AppName}}.

backend/resources/email-templates/components/style_html.tmpl

@@ -1,92 +0,0 @@
-{{ define "style" }}
-<style>
-/* Reset styles for email clients */
- body, table, td, p, a {
-     margin: 0;
-     padding: 0;
-     border: 0;
-     font-size: 100%;
-     font-family: Arial, sans-serif;
-     line-height: 1.5;
-}
- body {
-     background-color: #f0f0f0;
-     color: #333;
-}
- .container {
-     width: 100%;
-     max-width: 600px;
-     margin: 40px auto;
-     background-color: #fff;
-     border-radius: 10px;
-     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-     padding: 32px;
-}
- .header {
-     display: flex;
-     margin-bottom: 24px;
-}
- .header .logo img {
-     width: 32px;
-     height: 32px;
-     vertical-align: middle;
-}
- .header h1 {
-     font-size: 1.5rem;
-     font-weight: bold;
-     display: inline-block;
-     vertical-align: middle;
-     margin-left: 8px;
-}
- .warning {
-     background-color: #ffd966;
-     color: #7f6000;
-     padding: 4px 12px;
-     border-radius: 50px;
-     font-size: 0.875rem;
-     margin: auto 0 auto auto;
-}
- .content {
-     background-color: #fafafa;
-     padding: 24px;
-     border-radius: 10px;
-}
- .content h2 {
-     font-size: 1.25rem;
-     font-weight: bold;
-     margin-bottom: 16px;
-}
- .grid {
-     width: 100%;
-     margin-bottom: 16px;
-}
- .grid td {
-     width: 50%;
-     padding-bottom: 8px;
-     vertical-align: top;
-}
- .label {
-     color: #888;
-     font-size: 0.875rem;
-}
- .message {
-     font-size: 1rem;
-     line-height: 1.5;
-     margin-top: 16px;
-}
- .button {
-     background-color: #000000;
-     color: #ffffff;
-     padding: 0.7rem 1.5rem;
-     text-decoration: none;
-     border-radius: 4px;
-     font-size: 1rem;
-     font-weight: 500;
-     display: inline-block;
-     margin-top: 24px;
-}
- .button-container {
-     text-align: center;
-}
-</style>
-{{ end }}

backend/resources/email-templates/login-with-new-device_html.tmpl

@@ -1,40 +1,5 @@
-{{ define "base" }}
-<div class="header">
-   <div class="logo">
-      <img src="{{ .LogoURL }}" alt="{{ .AppName }}" width="32" height="32" style="width: 32px; height: 32px; max-width: 32px;"/>
-      <h1>{{ .AppName }}</h1>
-   </div>
-   <div class="warning">Warning</div>
-</div>
-<div class="content">
-   <h2>New Sign-In Detected</h2>
-   <table class="grid">
-      <tr>
-         {{ if and .Data.City .Data.Country }}
-         <td>
-            <p class="label">Approximate Location</p>
-            <p>{{ .Data.City }}, {{ .Data.Country }}</p>
-         </td>
-         {{ end }}
-         <td>
-            <p class="label">IP Address</p>
-            <p>{{ .Data.IPAddress }}</p>
-         </td>
-      </tr>
-      <tr>
-         <td>
-            <p class="label">Device</p>
-            <p>{{ .Data.Device }}</p>
-         </td>
-         <td>
-            <p class="label">Sign-In Time</p>
-            <p>{{ .Data.DateTime.Format "2006-01-02 15:04:05 UTC" }}</p>
-         </td>
-      </tr>
-   </table>
-   <p class="message">
-      This sign-in was detected from a new device or location. If you recognize this activity, you can
-      safely ignore this message. If not, please review your account and security settings.
-   </p>
-</div>
-{{ end -}}
+{{define "root"}}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="{{.LogoURL}}"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><body style="padding:50px;background-color:#FBFBFB;font-family:Arial, sans-serif"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;width:500px;margin:0 auto"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="left" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="width:210px;margin-bottom:16px"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column">
+<img alt="{{.AppName}}" height="32" src="{{.LogoURL}}" style="display:block;outline:none;border:none;text-decoration:none;width:32px;height:32px;vertical-align:middle;margin-right:8px" width="32"/></td><td data-id="__react-email-column"><p style="font-size:23px;line-height:24px;font-weight:bold;margin:0;padding:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.AppName}}</p></td></tr></tbody></table></td></tr></tbody></table><div style="background-color:white;padding:24px;border-radius:10px;box-shadow:0 1px 4px 0px rgba(0, 0, 0, 0.1)"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><h1 style="font-size:20px;font-weight:bold;margin:0">New Sign-In Detected</h1></td><td align="right" data-id="__react-email-column">
+<p style="font-size:12px;line-height:24px;background-color:#ffd966;color:#7f6000;padding:1px 12px;border-radius:50px;display:inline-block;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Warning</p></td></tr></tbody></table><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">Your <!-- -->{{.AppName}}<!-- --> account was recently accessed from a new IP address or browser. If you recognize this activity, no further action is required.</p><h4 style="font-size:1rem;font-weight:bold;margin:30px 0 10px 0">Details</h4><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="width:225px"><p style="font-size:12px;line-height:24px;margin:0;color:gray;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Approximate Location</p>
+<p style="font-size:14px;line-height:24px;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.Data.City}}<!-- -->, <!-- -->{{.Data.Country}}</p></td><td data-id="__react-email-column" style="width:225px"><p style="font-size:12px;line-height:24px;margin:0;color:gray;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">IP Address</p><p style="font-size:14px;line-height:24px;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.Data.IPAddress}}</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:10px"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="width:225px"><p style="font-size:12px;line-height:24px;margin:0;color:gray;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Device</p><p style="font-size:14px;line-height:24px;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">
+{{.Data.Device}}</p></td><td data-id="__react-email-column" style="width:225px"><p style="font-size:12px;line-height:24px;margin:0;color:gray;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Sign-In Time</p><p style="font-size:14px;line-height:24px;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.Data.DateTime.Format "January 2, 2006 at 3:04 PM MST"}}</p></td></tr></tbody></table></div></td></tr></tbody></table><!--7--><!--/$--></body></html>{{end}}

backend/resources/email-templates/login-with-new-device_text.tmpl

@@ -1,15 +1,27 @@
-{{ define "base" -}}
-New Sign-In Detected
-====================
+{{define "root"}}{{.AppName}}
 
-{{ if and .Data.City .Data.Country }}
-Approximate Location: {{ .Data.City }}, {{ .Data.Country }}
-{{ end }}
-IP Address: {{ .Data.IPAddress }}
-Device:     {{ .Data.Device }}
-Time:       {{ .Data.DateTime.Format "2006-01-02 15:04:05 UTC"}}
 
-This sign-in was detected from a new device or location. If you recognize
-this activity, you can safely ignore this message. If not, please review
-your account and security settings.
-{{ end -}}
+NEW SIGN-IN DETECTED
+
+Warning
+
+Your {{.AppName}} account was recently accessed from a new IP address or
+browser. If you recognize this activity, no further action is required.
+
+DETAILS
+
+Approximate Location
+
+{{.Data.City}}, {{.Data.Country}}
+
+IP Address
+
+{{.Data.IPAddress}}
+
+Device
+
+{{.Data.Device}}
+
+Sign-In Time
+
+{{.Data.DateTime.Format "January 2, 2006 at 3:04 PM MST"}}{{end}}

backend/resources/email-templates/one-time-access_html.tmpl

@@ -1,17 +1,4 @@
-{{ define "base" }}
-    <div class="header">
-        <div class="logo">
-            <img src="{{ .LogoURL }}" alt="{{ .AppName }}" width="32" height="32" style="width: 32px; height: 32px; max-width: 32px;"/>
-            <h1>{{ .AppName }}</h1>
-        </div>
-    </div>
-    <div class="content">
-        <h2>Login Code</h2>
-        <p class="message">
-            Click the button below to sign in to {{ .AppName }} with a login code.</br>Or visit <a href="{{ .Data.LoginLink }}">{{ .Data.LoginLink }}</a> and enter the code <strong>{{ .Data.Code }}</strong>.</br></br>This code expires in {{.Data.ExpirationString}}.
-        </p>
-        <div class="button-container">
-            <a class="button" href="{{ .Data.LoginLinkWithCode }}" class="button">Sign In</a>
-        </div>
-    </div>
-{{ end -}}
+{{define "root"}}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="{{.LogoURL}}"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><body style="padding:50px;background-color:#FBFBFB;font-family:Arial, sans-serif"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;width:500px;margin:0 auto"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="left" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="width:210px;margin-bottom:16px"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column">
+<img alt="{{.AppName}}" height="32" src="{{.LogoURL}}" style="display:block;outline:none;border:none;text-decoration:none;width:32px;height:32px;vertical-align:middle;margin-right:8px" width="32"/></td><td data-id="__react-email-column"><p style="font-size:23px;line-height:24px;font-weight:bold;margin:0;padding:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.AppName}}</p></td></tr></tbody></table></td></tr></tbody></table><div style="background-color:white;padding:24px;border-radius:10px;box-shadow:0 1px 4px 0px rgba(0, 0, 0, 0.1)"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><h1 style="font-size:20px;font-weight:bold;margin:0">Your Login Code</h1></td><td align="right" data-id="__react-email-column"></td></tr></tbody></table><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">
+Click the button below to sign in to <!-- -->{{.AppName}}<!-- --> with a login code.<br/>Or visit<!-- --> <a href="{{.Data.LoginLink}}" style="color:#000;text-decoration-line:none;text-decoration:underline;font-family:Arial, sans-serif" target="_blank">{{.Data.LoginLink}}</a> <!-- -->and enter the code <strong>{{.Data.Code}}</strong>.<br/><br/>This code expires in <!-- -->{{.Data.ExpirationString}}<!-- -->.</p><div style="text-align:center"><a href="{{.Data.LoginLinkWithCode}}" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#000000;color:#ffffff;padding:12px 24px;border-radius:4px;font-size:15px;font-weight:500;cursor:pointer;margin-top:10px;padding-top:12px;padding-right:24px;padding-bottom:12px;padding-left:24px" target="_blank"><span><!--[if mso]><i style="mso-font-width:400%;mso-text-raise:18" hidden>&#8202;&#8202;&#8202;</i><![endif]--></span>
+<span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Sign In</span><span><!--[if mso]><i style="mso-font-width:400%" hidden>&#8202;&#8202;&#8202;&#8203;</i><![endif]--></span></a></div></div></td></tr></tbody></table><!--7--><!--/$--></body></html>{{end}}

backend/resources/email-templates/one-time-access_text.tmpl

@@ -1,10 +1,12 @@
-{{ define "base" -}}
-Login Code
-====================
+{{define "root"}}{{.AppName}}
 
-Click the link below to sign in to {{ .AppName }} with a login code. This code expires in {{.Data.ExpirationString}}.
 
-{{ .Data.LoginLinkWithCode }}
+YOUR LOGIN CODE
 
-Or visit {{ .Data.LoginLink }} and enter the the code "{{ .Data.Code }}".
-{{ end -}}
+Click the button below to sign in to {{.AppName}} with a login code.
+Or visit {{.Data.LoginLink}} {{.Data.LoginLink}} and enter the code
+{{.Data.Code}}.
+
+This code expires in {{.Data.ExpirationString}}.
+
+Sign In {{.Data.LoginLinkWithCode}}{{end}}

backend/resources/email-templates/test_html.tmpl

@@ -1,11 +1,3 @@
-{{ define "base" -}}
-    <div class="header">
-        <div class="logo">
-            <img src="{{ .LogoURL }}" alt="{{ .AppName }}"/>
-            <h1>{{ .AppName }}</h1>
-        </div>
-    </div>
-    <div class="content">
-        <p>This is a test email.</p>
-    </div>
-{{ end -}}
+{{define "root"}}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="{{.LogoURL}}"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><body style="padding:50px;background-color:#FBFBFB;font-family:Arial, sans-serif"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;width:500px;margin:0 auto"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="left" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="width:210px;margin-bottom:16px"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column">
+<img alt="{{.AppName}}" height="32" src="{{.LogoURL}}" style="display:block;outline:none;border:none;text-decoration:none;width:32px;height:32px;vertical-align:middle;margin-right:8px" width="32"/></td><td data-id="__react-email-column"><p style="font-size:23px;line-height:24px;font-weight:bold;margin:0;padding:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.AppName}}</p></td></tr></tbody></table></td></tr></tbody></table><div style="background-color:white;padding:24px;border-radius:10px;box-shadow:0 1px 4px 0px rgba(0, 0, 0, 0.1)"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><h1 style="font-size:20px;font-weight:bold;margin:0">Test Email</h1></td><td align="right" data-id="__react-email-column"></td></tr></tbody></table><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">
+Your email setup is working correctly!</p></div></td></tr></tbody></table><!--7--><!--/$--></body></html>{{end}}

backend/resources/email-templates/test_text.tmpl

@@ -1,3 +1,6 @@
-{{ define "base" -}}
-This is a test email.
-{{ end -}}
+{{define "root"}}{{.AppName}}
+
+
+TEST EMAIL
+
+Your email setup is working correctly!{{end}}

backend/resources/files.go

@@ -4,5 +4,5 @@ import "embed"
 
 // Embedded file systems for the project
 
-//go:embed email-templates images migrations fonts aaguids.json
+//go:embed email-templates/*.tmpl images migrations fonts aaguids.json
 var FS embed.FS