mirror of https://github.com/Requarks/wiki.git
Nicolas Giard
6 years ago
16 changed files with 849 additions and 4 deletions
Split View
Diff Options
-
4client/components/admin.vue
-
206client/components/admin/admin-mail.vue
-
36client/graph/admin/mail/mail-mutation-save-config.gql
-
17client/graph/admin/mail/mail-query-config.gql
-
39client/static/svg/icon-new-post.svg
-
1package.json
-
74server/core/mail.js
-
15server/db/migrations/2.0.0.js
-
46server/graph/resolvers/mail.js
-
57server/graph/schemas/mail.graphql
-
16server/helpers/error.js
-
1server/master.js
-
21server/models/users.js
-
8server/modules/authentication/local/authentication.js
-
8server/setup.js
-
304server/templates/account-verify.html
@ -0,0 +1,206 @@ |
|||
<template lang='pug'> |
|||
v-container(fluid, grid-list-lg) |
|||
v-layout(row wrap) |
|||
v-flex(xs12) |
|||
.admin-header |
|||
img(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;') |
|||
.admin-header-title |
|||
.headline.primary--text {{ $t('admin:mail.title') }} |
|||
.subheading.grey--text {{ $t('admin:mail.subtitle') }} |
|||
v-spacer |
|||
v-btn(color='success', depressed, @click='save', large) |
|||
v-icon(left) check |
|||
span {{$t('common:actions.apply')}} |
|||
v-form.pt-3 |
|||
v-layout(row wrap) |
|||
v-flex(lg6 xs12) |
|||
v-form |
|||
v-card.wiki-form |
|||
v-toolbar(color='primary', dark, dense, flat) |
|||
v-toolbar-title |
|||
.subheading {{ $t('admin:mail.configuration') }} |
|||
v-subheader Sender |
|||
.px-3.pb-3 |
|||
v-text-field( |
|||
outline |
|||
v-model='config.senderName' |
|||
label='Sender Name' |
|||
required |
|||
:counter='255' |
|||
prepend-icon='person' |
|||
) |
|||
v-text-field( |
|||
outline |
|||
v-model='config.senderEmail' |
|||
label='Sender Email' |
|||
required |
|||
:counter='255' |
|||
prepend-icon='email' |
|||
) |
|||
v-divider |
|||
v-subheader SMTP Settings |
|||
.px-3.pb-3 |
|||
v-text-field( |
|||
outline |
|||
v-model='config.host' |
|||
label='Host' |
|||
required |
|||
:counter='255' |
|||
prepend-icon='memory' |
|||
) |
|||
v-text-field( |
|||
outline |
|||
v-model='config.port' |
|||
label='Port' |
|||
required |
|||
prepend-icon='router' |
|||
persistent-hint |
|||
hint='Usually 465 (recommended), 587 or 25.' |
|||
style='max-width: 300px;' |
|||
) |
|||
v-switch( |
|||
v-model='config.secure' |
|||
label='Secure (TLS)' |
|||
color='primary' |
|||
persistent-hint |
|||
hint='Should be enabled when using port 465, otherwise turned off (587 or 25).' |
|||
prepend-icon='vpn_lock' |
|||
) |
|||
v-text-field.mt-3( |
|||
outline |
|||
v-model='config.user' |
|||
label='Username' |
|||
required |
|||
:counter='255' |
|||
prepend-icon='lock_outline' |
|||
) |
|||
v-text-field( |
|||
outline |
|||
v-model='config.pass' |
|||
label='Password' |
|||
required |
|||
prepend-icon='lock' |
|||
type='password' |
|||
) |
|||
|
|||
v-flex(lg6 xs12) |
|||
v-card.wiki-form |
|||
v-form |
|||
v-toolbar(color='primary', dark, dense, flat) |
|||
v-toolbar-title |
|||
.subheading {{ $t('admin:mail.dkim') }} |
|||
.pa-3 |
|||
.body-2.grey--text.text--darken-2 DKIM (DomainKeys Identified Mail) provides a layer of security on all emails sent from Wiki.js by providing the means for recipients to validate the domain name and ensure the message authenticity. |
|||
v-switch( |
|||
v-model='config.useDKIM' |
|||
label='Use DKIM' |
|||
color='primary' |
|||
prepend-icon='vpn_key' |
|||
) |
|||
v-text-field( |
|||
outline |
|||
v-model='config.dkimDomainName' |
|||
label='Domain Name' |
|||
:counter='255' |
|||
prepend-icon='vpn_key' |
|||
:disabled='!config.useDKIM' |
|||
) |
|||
v-text-field( |
|||
outline |
|||
v-model='config.dkimKeySelector' |
|||
label='Key Selector' |
|||
:counter='255' |
|||
prepend-icon='vpn_key' |
|||
:disabled='!config.useDKIM' |
|||
) |
|||
v-text-field( |
|||
outline |
|||
v-model='config.dkimPrivateKey' |
|||
label='Private Key' |
|||
prepend-icon='vpn_key' |
|||
persistent-hint |
|||
hint='Private key for the selector in PEM format' |
|||
:disabled='!config.useDKIM' |
|||
) |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import _ from 'lodash' |
|||
import { get, sync } from 'vuex-pathify' |
|||
import mailConfigQuery from 'gql/admin/mail/mail-query-config.gql' |
|||
import mailUpdateConfigMutation from 'gql/admin/mail/mail-mutation-save-config.gql' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
config: { |
|||
senderName: '', |
|||
senderEmail: '', |
|||
host: '', |
|||
port: 0, |
|||
secure: false, |
|||
user: '', |
|||
pass: '', |
|||
useDKIM: false, |
|||
dkimDomainName: '', |
|||
dkimKeySelector: '', |
|||
dkimPrivateKey: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
darkMode: get('site/dark') |
|||
}, |
|||
methods: { |
|||
async save () { |
|||
try { |
|||
await this.$apollo.mutate({ |
|||
mutation: mailUpdateConfigMutation, |
|||
variables: { |
|||
senderName: this.config.senderName || '', |
|||
senderEmail: this.config.senderEmail || '', |
|||
host: this.config.host || '', |
|||
port: _.toSafeInteger(this.config.port) || 0, |
|||
secure: this.config.secure || false, |
|||
user: this.config.user || '', |
|||
pass: this.config.pass || '', |
|||
useDKIM: this.config.useDKIM || false, |
|||
dkimDomainName: this.config.dkimDomainName || '', |
|||
dkimKeySelector: this.config.dkimKeySelector || '', |
|||
dkimPrivateKey: this.config.dkimPrivateKey || '' |
|||
}, |
|||
watchLoading (isLoading) { |
|||
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-update') |
|||
} |
|||
}) |
|||
this.$store.commit('showNotification', { |
|||
style: 'success', |
|||
message: 'Configuration saved successfully.', |
|||
icon: 'check' |
|||
}) |
|||
} catch (err) { |
|||
this.$store.commit('showNotification', { |
|||
style: 'red', |
|||
message: err.message, |
|||
icon: 'warning' |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
apollo: { |
|||
config: { |
|||
query: mailConfigQuery, |
|||
fetchPolicy: 'network-only', |
|||
update: (data) => _.cloneDeep(data.mail.config), |
|||
watchLoading (isLoading) { |
|||
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-refresh') |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,36 @@ |
|||
mutation ( |
|||
$senderName: String!, |
|||
$senderEmail: String!, |
|||
$host: String!, |
|||
$port: Int!, |
|||
$secure: Boolean!, |
|||
$user: String!, |
|||
$pass: String!, |
|||
$useDKIM: Boolean!, |
|||
$dkimDomainName: String!, |
|||
$dkimKeySelector: String!, |
|||
$dkimPrivateKey: String! |
|||
) { |
|||
mail { |
|||
updateConfig( |
|||
senderName: $senderName, |
|||
senderEmail: $senderEmail, |
|||
host: $host, |
|||
port: $port, |
|||
secure: $secure, |
|||
user: $user, |
|||
pass: $pass, |
|||
useDKIM: $useDKIM, |
|||
dkimDomainName: $dkimDomainName, |
|||
dkimKeySelector: $dkimKeySelector, |
|||
dkimPrivateKey: $dkimPrivateKey |
|||
) { |
|||
responseResult { |
|||
succeeded |
|||
errorCode |
|||
slug |
|||
message |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
{ |
|||
mail { |
|||
config { |
|||
senderName |
|||
senderEmail |
|||
host |
|||
port |
|||
secure |
|||
user |
|||
pass |
|||
useDKIM |
|||
dkimDomainName |
|||
dkimKeySelector |
|||
dkimPrivateKey |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
<?xml version="1.0" encoding="iso-8859-1"?> |
|||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> |
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve" width="100px" height="100px"> |
|||
<linearGradient id="SVGID_1__44829" gradientUnits="userSpaceOnUse" x1="32" y1="11" x2="32" y2="53.6696" spreadMethod="reflect"> |
|||
<stop offset="0" style="stop-color:#1A6DFF"/> |
|||
<stop offset="1" style="stop-color:#C822FF"/> |
|||
</linearGradient> |
|||
<path style="fill:url(#SVGID_1__44829);" d="M56,15.184v-1.183C56,12.347,54.654,11,53,11H11c-1.654,0-3,1.347-3,3.001v1.183 C6.837,15.597,6,16.696,6,18v32c0,1.657,1.343,3,3,3h46c1.657,0,3-1.343,3-3V18C58,16.696,57.163,15.597,56,15.184z M9,17h46 c0.395,0,0.729,0.234,0.892,0.567l-22.138,15.94c-1.049,0.754-2.459,0.754-3.508,0L8.108,17.567C8.271,17.234,8.605,17,9,17z M11,13 h42c0.552,0,1,0.449,1,1.001V15H10v-0.999C10,13.449,10.448,13,11,13z M55,51H9c-0.552,0-1-0.448-1-1V19.953L29.078,35.13 c0.874,0.629,1.897,0.943,2.922,0.943s2.048-0.314,2.922-0.943L56,19.953V50C56,50.552,55.552,51,55,51z"/> |
|||
<linearGradient id="SVGID_2__44829" gradientUnits="userSpaceOnUse" x1="49" y1="11" x2="49" y2="53.6696" spreadMethod="reflect"> |
|||
<stop offset="0" style="stop-color:#1A6DFF"/> |
|||
<stop offset="1" style="stop-color:#C822FF"/> |
|||
</linearGradient> |
|||
<rect x="44" y="47" style="fill:url(#SVGID_2__44829);" width="10" height="2"/> |
|||
<linearGradient id="SVGID_3__44829" gradientUnits="userSpaceOnUse" x1="50" y1="11" x2="50" y2="53.6696" spreadMethod="reflect"> |
|||
<stop offset="0" style="stop-color:#1A6DFF"/> |
|||
<stop offset="1" style="stop-color:#C822FF"/> |
|||
</linearGradient> |
|||
<rect x="46" y="43" style="fill:url(#SVGID_3__44829);" width="8" height="2"/> |
|||
<linearGradient id="SVGID_4__44829" gradientUnits="userSpaceOnUse" x1="19" y1="11" x2="19" y2="53.6696" spreadMethod="reflect"> |
|||
<stop offset="0" style="stop-color:#1A6DFF"/> |
|||
<stop offset="1" style="stop-color:#C822FF"/> |
|||
</linearGradient> |
|||
<rect x="18" y="45" style="fill:url(#SVGID_4__44829);" width="2" height="4"/> |
|||
<linearGradient id="SVGID_5__44829" gradientUnits="userSpaceOnUse" x1="15" y1="11" x2="15" y2="53.6696" spreadMethod="reflect"> |
|||
<stop offset="0" style="stop-color:#1A6DFF"/> |
|||
<stop offset="1" style="stop-color:#C822FF"/> |
|||
</linearGradient> |
|||
<rect x="14" y="45" style="fill:url(#SVGID_5__44829);" width="2" height="4"/> |
|||
<linearGradient id="SVGID_6__44829" gradientUnits="userSpaceOnUse" x1="11" y1="11" x2="11" y2="53.6696" spreadMethod="reflect"> |
|||
<stop offset="0" style="stop-color:#1A6DFF"/> |
|||
<stop offset="1" style="stop-color:#C822FF"/> |
|||
</linearGradient> |
|||
<rect x="10" y="45" style="fill:url(#SVGID_6__44829);" width="2" height="4"/> |
|||
<linearGradient id="SVGID_7__44829" gradientUnits="userSpaceOnUse" x1="32" y1="20.1667" x2="32" y2="31.2199" spreadMethod="reflect"> |
|||
<stop offset="0" style="stop-color:#6DC7FF"/> |
|||
<stop offset="1" style="stop-color:#E6ABFF"/> |
|||
</linearGradient> |
|||
<path style="fill:url(#SVGID_7__44829);" d="M20.062,20h23.876c0.969,0,1.374,1.238,0.593,1.811l-11.347,8.321 c-0.705,0.517-1.663,0.517-2.368,0l-11.347-8.322C18.688,21.238,19.093,20,20.062,20z"/> |
|||
</svg> |
|||
@ -0,0 +1,74 @@ |
|||
const nodemailer = require('nodemailer') |
|||
const _ = require('lodash') |
|||
const fs = require('fs-extra') |
|||
const path = require('path') |
|||
|
|||
/* global WIKI */ |
|||
|
|||
module.exports = { |
|||
transport: null, |
|||
templates: {}, |
|||
init() { |
|||
if (_.get(WIKI.config, 'mail.host', '').length > 2) { |
|||
let conf = { |
|||
host: WIKI.config.mail.host, |
|||
port: WIKI.config.mail.port, |
|||
secure: WIKI.config.mail.secure |
|||
} |
|||
if (_.get(WIKI.config, 'mail.user', '').length > 1) { |
|||
conf = { |
|||
...conf, |
|||
auth: { |
|||
user: WIKI.config.mail.user, |
|||
pass: WIKI.config.mail.pass |
|||
} |
|||
} |
|||
} |
|||
if (_.get(WIKI.config, 'mail.useDKIM', false)) { |
|||
conf = { |
|||
...conf, |
|||
dkim: { |
|||
domainName: WIKI.config.mail.dkimDomainName, |
|||
keySelector: WIKI.config.mail.dkimKeySelector, |
|||
privateKey: WIKI.config.mail.dkimPrivateKey |
|||
} |
|||
} |
|||
} |
|||
this.transport = nodemailer.createTransport(conf) |
|||
} else { |
|||
WIKI.logger.warn('Mail is not setup! Please set the configuration in the administration area!') |
|||
this.transport = null |
|||
} |
|||
return this |
|||
}, |
|||
async send(opts) { |
|||
if (!this.transport) { |
|||
WIKI.logger.warn('Cannot send email because mail is not setup in the administration area!') |
|||
throw new WIKI.Error.MailNotSetup() |
|||
} |
|||
await this.loadTemplate(opts.template) |
|||
return this.transport.sendMail({ |
|||
from: 'noreply@requarks.io', |
|||
to: opts.to, |
|||
subject: `${opts.subject} - ${WIKI.config.title}`, |
|||
text: opts.text, |
|||
html: _.get(this.templates, opts.template)({ |
|||
logo: '', |
|||
siteTitle: WIKI.config.title, |
|||
copyright: 'Powered by Wiki.js', |
|||
...opts.data |
|||
}) |
|||
}) |
|||
}, |
|||
async loadTemplate(key) { |
|||
if (_.has(this.templates, key)) { return } |
|||
const keyKebab = _.kebabCase(key) |
|||
try { |
|||
const rawTmpl = await fs.readFile(path.join(WIKI.SERVERPATH, `templates/${keyKebab}.html`), 'utf8') |
|||
_.set(this.templates, key, _.template(rawTmpl)) |
|||
} catch (err) { |
|||
WIKI.logger.warn(err) |
|||
throw new WIKI.Error.MailTemplateFailed() |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
const _ = require('lodash') |
|||
const graphHelper = require('../../helpers/graph') |
|||
|
|||
/* global WIKI */ |
|||
|
|||
module.exports = { |
|||
Query: { |
|||
async mail() { return {} } |
|||
}, |
|||
Mutation: { |
|||
async mail() { return {} } |
|||
}, |
|||
MailQuery: { |
|||
async config(obj, args, context, info) { |
|||
return WIKI.config.mail |
|||
} |
|||
}, |
|||
MailMutation: { |
|||
async updateConfig(obj, args, context) { |
|||
try { |
|||
WIKI.config.mail = { |
|||
senderName: args.senderName, |
|||
senderEmail: args.senderEmail, |
|||
host: args.host, |
|||
port: args.port, |
|||
secure: args.secure, |
|||
user: args.user, |
|||
pass: args.pass, |
|||
useDKIM: args.useDKIM, |
|||
dkimDomainName: args.dkimDomainName, |
|||
dkimKeySelector: args.dkimKeySelector, |
|||
dkimPrivateKey: args.dkimPrivateKey, |
|||
} |
|||
await WIKI.configSvc.saveToDb(['mail']) |
|||
|
|||
WIKI.mail.init() |
|||
|
|||
return { |
|||
responseResult: graphHelper.generateSuccess('Mail configuration updated successfully') |
|||
} |
|||
} catch (err) { |
|||
return graphHelper.generateError(err) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
# =============================================== |
|||
# MAIL |
|||
# =============================================== |
|||
|
|||
extend type Query { |
|||
mail: MailQuery |
|||
} |
|||
|
|||
extend type Mutation { |
|||
mail: MailMutation |
|||
} |
|||
|
|||
# ----------------------------------------------- |
|||
# QUERIES |
|||
# ----------------------------------------------- |
|||
|
|||
type MailQuery { |
|||
config: MailConfig @auth(requires: ["manage:system"]) |
|||
} |
|||
|
|||
# ----------------------------------------------- |
|||
# MUTATIONS |
|||
# ----------------------------------------------- |
|||
|
|||
type MailMutation { |
|||
updateConfig( |
|||
senderName: String! |
|||
senderEmail: String! |
|||
host: String! |
|||
port: Int! |
|||
secure: Boolean! |
|||
user: String! |
|||
pass: String! |
|||
useDKIM: Boolean! |
|||
dkimDomainName: String! |
|||
dkimKeySelector: String! |
|||
dkimPrivateKey: String! |
|||
): DefaultResponse @auth(requires: ["manage:system"]) |
|||
} |
|||
|
|||
# ----------------------------------------------- |
|||
# TYPES |
|||
# ----------------------------------------------- |
|||
|
|||
type MailConfig { |
|||
senderName: String! |
|||
senderEmail: String! |
|||
host: String! |
|||
port: Int! |
|||
secure: Boolean! |
|||
user: String! |
|||
pass: String! |
|||
useDKIM: Boolean! |
|||
dkimDomainName: String! |
|||
dkimKeySelector: String! |
|||
dkimPrivateKey: String! |
|||
} |
|||
@ -0,0 +1,304 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> |
|||
<head> |
|||
<meta charset="utf-8"> <!-- utf-8 works for most cases --> |
|||
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary --> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine --> |
|||
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely --> |
|||
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. --> |
|||
|
|||
<!-- Web Font / @font-face : BEGIN --> |
|||
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. --> |
|||
|
|||
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. --> |
|||
<!--[if mso]> |
|||
<style> |
|||
* { |
|||
font-family: sans-serif !important; |
|||
} |
|||
</style> |
|||
<![endif]--> |
|||
|
|||
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ --> |
|||
<!--[if !mso]><!--> |
|||
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> --> |
|||
<!--<![endif]--> |
|||
|
|||
<!-- Web Font / @font-face : END --> |
|||
|
|||
<!-- CSS Reset : BEGIN --> |
|||
<style> |
|||
|
|||
/* What it does: Remove spaces around the email design added by some email clients. */ |
|||
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */ |
|||
html, |
|||
body { |
|||
margin: 0 auto !important; |
|||
padding: 0 !important; |
|||
height: 100% !important; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
/* What it does: Stops email clients resizing small text. */ |
|||
* { |
|||
-ms-text-size-adjust: 100%; |
|||
-webkit-text-size-adjust: 100%; |
|||
} |
|||
|
|||
/* What it does: Centers email on Android 4.4 */ |
|||
div[style*="margin: 16px 0"] { |
|||
margin: 0 !important; |
|||
} |
|||
|
|||
/* What it does: Stops Outlook from adding extra spacing to tables. */ |
|||
table, |
|||
td { |
|||
mso-table-lspace: 0pt !important; |
|||
mso-table-rspace: 0pt !important; |
|||
} |
|||
|
|||
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ |
|||
table { |
|||
border-spacing: 0 !important; |
|||
border-collapse: collapse !important; |
|||
table-layout: fixed !important; |
|||
margin: 0 auto !important; |
|||
} |
|||
table table table { |
|||
table-layout: auto; |
|||
} |
|||
|
|||
/* What it does: Uses a better rendering method when resizing images in IE. */ |
|||
img { |
|||
-ms-interpolation-mode:bicubic; |
|||
} |
|||
|
|||
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */ |
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
/* What it does: A work-around for email clients meddling in triggered links. */ |
|||
*[x-apple-data-detectors], /* iOS */ |
|||
.unstyle-auto-detected-links *, |
|||
.aBn { |
|||
border-bottom: 0 !important; |
|||
cursor: default !important; |
|||
color: inherit !important; |
|||
text-decoration: none !important; |
|||
font-size: inherit !important; |
|||
font-family: inherit !important; |
|||
font-weight: inherit !important; |
|||
line-height: inherit !important; |
|||
} |
|||
|
|||
/* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */ |
|||
.a6S { |
|||
display: none !important; |
|||
opacity: 0.01 !important; |
|||
} |
|||
|
|||
/* What it does: Prevents Gmail from changing the text color in conversation threads. */ |
|||
.im { |
|||
color: inherit !important; |
|||
} |
|||
|
|||
/* If the above doesn't work, add a .g-img class to any image in question. */ |
|||
img.g-img + div { |
|||
display: none !important; |
|||
} |
|||
|
|||
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */ |
|||
/* Create one of these media queries for each additional viewport size you'd like to fix */ |
|||
|
|||
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */ |
|||
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) { |
|||
u ~ div .email-container { |
|||
min-width: 320px !important; |
|||
} |
|||
} |
|||
/* iPhone 6, 6S, 7, 8, and X */ |
|||
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { |
|||
u ~ div .email-container { |
|||
min-width: 375px !important; |
|||
} |
|||
} |
|||
/* iPhone 6+, 7+, and 8+ */ |
|||
@media only screen and (min-device-width: 414px) { |
|||
u ~ div .email-container { |
|||
min-width: 414px !important; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
<!-- CSS Reset : END --> |
|||
<!-- Reset list spacing because Outlook ignores much of our inline CSS. --> |
|||
<!--[if mso]> |
|||
<style type="text/css"> |
|||
ul, |
|||
ol { |
|||
margin: 0 !important; |
|||
} |
|||
li { |
|||
margin-left: 30px !important; |
|||
} |
|||
li.list-item-first { |
|||
margin-top: 0 !important; |
|||
} |
|||
li.list-item-last { |
|||
margin-bottom: 10px !important; |
|||
} |
|||
</style> |
|||
<![endif]--> |
|||
|
|||
<!-- Progressive Enhancements : BEGIN --> |
|||
<style> |
|||
|
|||
/* What it does: Hover styles for buttons */ |
|||
.button-td, |
|||
.button-a { |
|||
transition: all 100ms ease-in; |
|||
} |
|||
.button-td-primary:hover, |
|||
.button-a-primary:hover { |
|||
background: #1976d2 !important; |
|||
border-color: #1976d2 !important; |
|||
} |
|||
|
|||
/* Media Queries */ |
|||
@media screen and (max-width: 600px) { |
|||
|
|||
/* What it does: Adjust typography on small screens to improve readability */ |
|||
.email-container p { |
|||
font-size: 17px !important; |
|||
} |
|||
|
|||
} |
|||
|
|||
</style> |
|||
<!-- Progressive Enhancements : END --> |
|||
|
|||
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. --> |
|||
<!--[if gte mso 9]> |
|||
<xml> |
|||
<o:OfficeDocumentSettings> |
|||
<o:AllowPNG/> |
|||
<o:PixelsPerInch>96</o:PixelsPerInch> |
|||
</o:OfficeDocumentSettings> |
|||
</xml> |
|||
<![endif]--> |
|||
|
|||
</head> |
|||
<!-- |
|||
The email background color (#222222) is defined in three places: |
|||
1. body tag: for most email clients |
|||
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr |
|||
3. mso conditional: For Windows 10 Mail |
|||
--> |
|||
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #EEE;"> |
|||
<center style="width: 100%; background-color: #EEE;"> |
|||
<!--[if mso | IE]> |
|||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;"> |
|||
<tr> |
|||
<td> |
|||
<![endif]--> |
|||
|
|||
<!-- Visually Hidden Preheader Text : BEGIN --> |
|||
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"> |
|||
<%= preheadertext %> |
|||
</div> |
|||
<!-- Visually Hidden Preheader Text : END --> |
|||
|
|||
<!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. --> |
|||
<!-- Preview Text Spacing Hack : BEGIN --> |
|||
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"> |
|||
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ |
|||
</div> |
|||
<!-- Preview Text Spacing Hack : END --> |
|||
|
|||
<!-- |
|||
Set the email width. Defined in two places: |
|||
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px. |
|||
2. MSO tags for Desktop Windows Outlook enforce a 600px width. |
|||
--> |
|||
<div style="max-width: 600px; margin: 0 auto;" class="email-container"> |
|||
<!--[if mso]> |
|||
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600"> |
|||
<tr> |
|||
<td> |
|||
<![endif]--> |
|||
|
|||
<!-- Email Body : BEGIN --> |
|||
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;"> |
|||
<!-- Email Header : BEGIN --> |
|||
<tr> |
|||
<td style="padding: 20px 0; text-align: center"> |
|||
<img src="<%= logo %>" width="200" height="50" alt="<%= siteTitle %>" border="0" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;"> |
|||
</td> |
|||
</tr> |
|||
<!-- Email Header : END --> |
|||
|
|||
<!-- Hero Image, Flush : BEGIN --> |
|||
<tr> |
|||
<td style="background-color: #ffffff;"> |
|||
<img src="https://static.requarks.io/email/email-cover-book.jpg" width="600" height="" alt="<%= title %>" border="0" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto;" class="g-img"> |
|||
</td> |
|||
</tr> |
|||
<!-- Hero Image, Flush : END --> |
|||
|
|||
<!-- 1 Column Text + Button : BEGIN --> |
|||
<tr> |
|||
<td style="background-color: #ffffff;"> |
|||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> |
|||
<tr> |
|||
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;"> |
|||
<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;"><%= title %></h1> |
|||
<p style="margin: 0;"><%= content %></p> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td style="padding: 0 20px 20px 20px;"> |
|||
<!-- Button : BEGIN --> |
|||
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;"> |
|||
<tr> |
|||
<td class="button-td button-td-primary" style="border-radius: 4px; background: #1976d2;"> |
|||
<a class="button-a button-a-primary" href="<%= buttonLink %>" style="background: #1976d2; border: 1px solid #1976d2; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;"><%= buttonText %></a> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<!-- Button : END --> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
<!-- 1 Column Text + Button : END --> |
|||
|
|||
</table> |
|||
<!-- Email Body : END --> |
|||
|
|||
<!-- Email Footer : BEGIN --> |
|||
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;"> |
|||
<tr> |
|||
<td style="padding: 20px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;"> |
|||
<%= copyright %> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<!-- Email Footer : END --> |
|||
|
|||
<!--[if mso]> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<![endif]--> |
|||
</div> |
|||
|
|||
<!--[if mso | IE]> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<![endif]--> |
|||
</center> |
|||
</body> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save