mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-16 06:41:11 +00:00
Code Activity

fix: emails do not get rendered correctly in Gmail

Browse Source
This commit is contained in:
Elias Schneider
2025-02-19 13:54:36 +01:00
parent 816c198a42
commit dca9e7a11a
2 changed files with 126 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
backend/resources/email-templates/components/style_html.tmpl
View File

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

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

@@ -1,36 +1,40 @@
{{ define "base" }} {{ define "base" }}
<div class="header"> <div class="header">
<div class="logo"> <div class="logo">
<img src="{{ .LogoURL }}" alt="{{ .AppName }}"/> <img src="{{ .LogoURL }}" alt="{{ .AppName }}"/>
<h1>{{ .AppName }}</h1> <h1>{{ .AppName }}</h1>
</div> </div>
<div class="warning">Warning</div> <div class="warning">Warning</div>
</div> </div>
<div class="content"> <div class="content">
<h2>New Sign-In Detected</h2> <h2>New Sign-In Detected</h2>
<div class="grid"> <table class="grid">
<tr>
{{ if and .Data.City .Data.Country }} {{ if and .Data.City .Data.Country }}
<div> <td>
<p class="label">Approximate Location</p> <p class="label">Approximate Location</p>
<p>{{ .Data.City }}, {{ .Data.Country }}</p> <p>{{ .Data.City }}, {{ .Data.Country }}</p>
</div> </td>
{{ end }} {{ end }}
<div> <td>
<p class="label">IP Address</p> <p class="label">IP Address</p>
<p>{{ .Data.IPAddress }}</p> <p>{{ .Data.IPAddress }}</p>
</div> </td>
<div> </tr>
<tr>
<td>
<p class="label">Device</p> <p class="label">Device</p>
<p>{{ .Data.Device }}</p> <p>{{ .Data.Device }}</p>
</div> </td>
<div> <td>
<p class="label">Sign-In Time</p> <p class="label">Sign-In Time</p>
<p>{{ .Data.DateTime.Format "2006-01-02 15:04:05 UTC" }}</p> <p>{{ .Data.DateTime.Format "2006-01-02 15:04:05 UTC" }}</p>
</div> </td>
</div> </tr>
</table>
<p class="message"> <p class="message">
This sign-in was detected from a new device or location. If you recognize this activity, you can 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. safely ignore this message. If not, please review your account and security settings.
</p> </p>
</div> </div>
{{ end -}} {{ end -}}