Skip to content
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.

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

refactor(authentik): refactor implement designed authentik emails #2728

Draft
wants to merge 10 commits into
base: master
Choose a base branch
from
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ entries:
attrs:
activate_user_on_success: true
subject: DreamMall Account Confirmation
template: email/account_confirmation.html
template: dreammall_account_confirmation.html
# token_expiry: 30 - how long should the token in the link be valid?
use_global_settings: true

Expand Down
173 changes: 173 additions & 0 deletions authentik/templates/dreammall_account_confirmation.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css" emogrify="no">
#outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide:all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } a img { border:none; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; }
</style>
<style type="text/css" emogrify="no">
@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} }
</style>
<style type="text/css" emogrify="no">
@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r1-i { background-color: transparent !important } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 320px !important } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important } .r4-i { padding-bottom: 5px !important; padding-top: 5px !important } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important } .r6-o { border-style: solid !important; width: 100% !important } .r7-i { padding-left: 0px !important; padding-right: 0px !important } .r8-c { box-sizing: border-box !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important; text-align: center !important; width: 100% !important } .r9-i { background-color: #ffffff !important } .r10-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important } .r11-i { padding-bottom: 55px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 50px !important } .r12-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 200px !important } .r13-o { background-size: cover !important; border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r14-i { background-color: #f3f3f3 !important; padding-bottom: 48px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 48px !important } .r15-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important } .r16-c { box-sizing: border-box !important; padding-bottom: 16px !important; padding-top: 16px !important; text-align: left !important; valign: top !important; width: 100% !important } .r17-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 230px !important } .r18-o { border-style: solid !important; margin: 0 auto 0 0 !important; margin-bottom: 0px !important; margin-top: 0px !important; width: 230px !important } .r19-i { text-align: center !important } .r20-r { background-color: #2ca5b1 !important; border-color: #2ca5b1 !important; border-radius: 30px !important; padding-bottom: 15px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 13px !important; text-align: center !important; width: 220px !important } .r21-o { border-style: solid !important; margin: 0 auto 0 0 !important; margin-bottom: 0px !important; margin-top: 32px !important; width: 100% !important } .r22-i { padding-top: 0px !important; text-align: left !important } .r23-i { background-color: #3d4753 !important; padding-bottom: 42px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 37px !important } .r24-o { border-style: solid !important; margin: 0 auto 0 0 !important; margin-bottom: 16px !important; width: 100% !important } .r25-i { text-align: left !important } .r26-c { box-sizing: border-box !important; padding-top: 20px !important; text-align: left !important; valign: top !important; width: 100% !important } .r27-c { box-sizing: border-box !important; text-align: left !important; width: 100% !important } .r28-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important } .r29-i { font-size: 0px !important; padding-left: 0px !important; padding-right: 206px !important; padding-top: 8px !important } .r30-c { box-sizing: border-box !important; width: 32px !important } .r31-o { border-style: solid !important; margin-right: 10px !important; width: 32px !important } .r32-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important } .r33-i { padding-left: 0px !important; padding-right: 0px !important; padding-top: 30px !important } body { -webkit-text-size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-table { min-width: unset !important } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important } .resp-table { display: inline-table !important } .magic-resp { display: table-cell !important } }
</style>
<!--[if !mso]><!-->
<style type="text/css" emogrify="no">
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:wght@700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
</style>
<!--<![endif]-->
<style type="text/css">
p, h1, h2, h3, h4, ol, ul, li { margin: 0; } .default-button { color: #ffffff; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word } .nl2go-default-textstyle { color: #392F65; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; word-break: break-word } a, a:link { color: #2ca5b1; text-decoration: none } .default-heading3 { color: #392F65; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 20px; word-break: break-word } .nl2go_class_14_white_b { color: #ffffff; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; word-break: break-word } .nl2go_class_16_blue_reg { color: #392F65; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; word-break: break-word } .nl2go_class_16_white_reg_up { color: #ffffff; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; text-transform: uppercase; word-break: break-word } .nl2go_class_24_blue_b { color: #392F65; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 700; word-break: break-word } .nl2go_class_headline { color: #677876; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 26px; word-break: break-word } .nl2go_class_impressum { color: #999999; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; word-break: break-word } .default-heading2 { color: #392F65; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 24px; word-break: break-word } .default-heading4 { color: #392F65; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 18px; word-break: break-word } .nl2go_class_14_white_l { color: #ffffff; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 300; word-break: break-word } .nl2go_class_14_white_reg { color: #ffffff; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 14px; word-break: break-word } .nl2go_class_48_blue_vollkorn_b { color: #392F65; font-family: Vollkorn, Georgia, Times, Times New Roman, serif, Arial; font-size: 48px; word-break: break-word } .default-heading1 { color: #392F65; font-family: Vollkorn, Georgia, Times, Times New Roman, serif, Arial; font-size: 48px; word-break: break-word } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; }
</style>
<!--[if mso]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
<style type="text/css">
a:link{color: #2ca5b1; text-decoration: none;}
</style>
</head>
<body bgcolor="#ffffff" text="#392F65" link="#2ca5b1" yahoo="fix" style="background-color: #ffffff;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r0-o" style="table-layout: fixed; width: 100%;">
<tr>
<td valign="top" class="r1-i" style="background-color: transparent;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="600" align="center" class="r3-o" style="table-layout: fixed;">
<tr>
<td class="r4-i" style="padding-bottom: 5px; padding-top: 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<th width="100%" valign="top" class="r5-c" style="font-weight: normal;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%;">
<tr>
<td valign="top" class="r7-i" style="padding-left: 10px; padding-right: 10px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<td class="r8-c nl2go-default-textstyle" align="center" style="color: #392f65; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 16px; line-height: 1.5; word-break: break-word; padding-left: 30px; padding-right: 30px; padding-top: 20px; text-align: center;">
<div>
<p style="margin: 0;">
<a href="{{ mirror }}" style="color: #2ca5b1; text-decoration: none;"><span style="color: #7f7f7f;">Im Browser öffnen</span></a>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="600" align="center" class="r3-o" style="table-layout: fixed; width: 600px;">
<tr>
<td valign="top" class="r9-i" style="background-color: #ffffff;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r0-o" style="table-layout: fixed; width: 100%;">
<tr>
<td class="r11-i" style="padding-bottom: 55px; padding-top: 50px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<th width="100%" valign="top" class="r5-c" style="font-weight: normal;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="280" align="center" class="r12-o" style="table-layout: fixed; width: 280px;">
<tr>
<td style="font-size: 0px; line-height: 0px;">
<img src="https://img.mailinblue.com/8184770/images/content_library/original/66f67428af9199f8eb65b102.png" width="280" border="0" style="display: block; width: 100%;">
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" align="center" class="r13-o" style="table-layout: fixed; width: 100%;">
<tr>
<td class="r14-i" style="background-color: #f3f3f3; padding-bottom: 48px; padding-left: 59px; padding-right: 240px; padding-top: 48px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<th width="100%" valign="top" class="r5-c" style="font-weight: normal;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r6-o" style="table-layout: fixed; width: 100%;">
<tr>
<td valign="top" class="r7-i">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<td class="r15-c nl2go-default-textstyle" align="left" style="color: #392f65; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 16px; word-break: break-word; line-height: 1.1; text-align: left; valign: top;">
<div>
<h3 class="default-heading3" style="margin: 0; color: #392f65; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 20px; word-break: break-word;"><span style="color: #404040; font-family: 'Arial black', helvetica, sans-serif;">Herzlich willkommen!</span></h3>
</div>
</td>
</tr>
<tr>
<td class="r16-c nl2go-default-textstyle" align="left" style="color: #392f65; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 16px; line-height: 1.5; word-break: break-word; padding-bottom: 16px; padding-top: 16px; text-align: left; valign: top;">
<div>
<p style="margin: 0;">
<span style="color: #404040; font-family: Arial, helvetica, sans-serif;">Wir freuen uns, dass du loslegst. Zuerst musst du dein Konto bestätigen. Öffne einfach den unten stehenden Link.</span>
</p>
</div>
</td>
</tr>
<tr>
<td class="r17-c" align="left">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="163" class="r18-o" style="table-layout: fixed; width: 163px;">
<tr>
<td height="18" align="center" valign="top" class="r19-i nl2go-default-textstyle" style="color: #392f65; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 16px; line-height: 1.5; word-break: break-word;">
<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="v-text-anchor:middle; height: 45px; width: 162px;" arcsize="50%" fillcolor="#2ca5b1" strokecolor="#2ca5b1" strokeweight="1px" data-btn="1"> <w:anchorlock> </w:anchorlock> <v:textbox inset="0,0,0,0"> <div style="display:none;"> <center class="default-button"><span>Konto bestätigen</span></center> </div> </v:textbox> </v:roundrect> <![endif]-->
<!--[if !mso]><!-- -->
<a href="{{ url }}" class="r20-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; border-style: solid; word-wrap: break-word; display: block; -webkit-text-size-adjust: none; background-color: #2ca5b1; border-bottom-width: 0px; border-color: #2ca5b1; border-left-width: 0px; border-radius: 30px; border-right-width: 0px; border-top-width: 0px; color: #ffffff; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; height: 18px; mso-hide: all; padding-bottom: 15px; padding-left: 5px; padding-right: 5px; padding-top: 13px; width: 153px;"><span>Konto bestätigen</span></a>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="r15-c" align="left">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style="table-layout: fixed; width: 100%;">
<tr class="nl2go-responsive-hide">
<td height="32" style="font-size: 32px; line-height: 32px;">
­
</td>
</tr>
<tr>
<td align="left" valign="top" class="r22-i nl2go-default-textstyle" style="color: #392f65; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 16px; word-break: break-word; line-height: 1; text-align: left;">
<div>
<p style="margin: 0;">
<span style="color: #404040; font-size: 14px;">Wenn das nicht funktioniert, kopiere den folgenden Link und füge ihn in deinen Browser ein.</span>
</p>
<p style="margin: 0;">
<a href="{{ url }}" title="Account-Bestätigung" rel="noopener noreferrer" target="_blank" style="color: #2ca5b1; text-decoration: none;"><span style="color: #404040; font-size: 14px;"></span></a>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
{% include './dreammall_email_footer.html' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Loading
Loading