HTML in emails not rendering - meteor

I use the meteor-ssr package to render email templates serverside and send them
Template:
Hello
A request to change your payment account was sent. If this was not you, your account may be compromised and you should reset your password immediately.
New account: {{pending.email}}
Click the link below to confirm the change.
{{id}}
And server
sendPaymentChangeToken: function() {
SSR.compileTemplate('paymentChangeEmail', Assets.getText('paymentChange.html'));
var user = Meteor.user();
var email = user.emails[0].address;
var token = user.payment.token;
var html = SSR.render("paymentChangeEmail", token);
Email.send({
from: 'Tabler <no-reply#tabler.com>',
to: email,
subject: 'Payment Confirmation',
text: html
});
}
Problem is the link tag i rendered as
27d8bdca14be4522abdb5fddf9f86c9f8ba29a3500660
Instead of actually providing a link
Any help is much appreciate

You are assigning your string of HTML to the text property instead of the html property.
Don't send pure HTML emails though, that's a good flat for spam filters. Send a multipart email with equivalent HTML and plain text parts. Hopefully the email package will do The Right Thing if you assign values to both html and text.

You need to change text o html like akshat says
Email.send({
from: 'Tabler <no-reply#tabler.com>',
to: email,
subject: 'Payment Confirmation',
text: html
});
To
Email.send({
from: 'Tabler <no-reply#tabler.com>',
to: email,
subject: 'Payment Confirmation',
html : html
});

Assuming that token in sendPaymentChangeToken is being mapped to {{id}} in your SSR template, it looks like you forgot to include the server URL.
Try:
var token = Meteor.absoluteUrl() + user.payment.token;

Related

How to create a clickable, visible but obfuscated mailto:// link

I know there's already a lot about email obfuscation on this site. But recently I found this neat little CSS-trick that I hadn't encountered before.
It SHOWS the email address (here: user#domain.com), but sadly it doesn't produce a clickable mailto:// link. If one entered it as a href, of course the address would again be ready for bots to be picked up.
So I added a litte javascript routine, that adds an event listener to all .e-mail elements:
// Email de-obfuscation, start mail client, copy email to clipboard:
document.querySelectorAll('.e-mail').forEach(e => {
// get the encoded email address from ::after and decode:
function getDecodeEmail(event) {
z=event.currentTarget;
y=getComputedStyle(z,'::after');
x=y.getPropertyValue('content');
// reverse string rtl
v=x.split("").reverse().join("");
// remove all "
return v.replace(/['"]+/g, '');
};
// onClick start mail client with decoded email address:
e.addEventListener("click", event => {
// prevent href=#
event.preventDefault();
// get the (reversed) email address of the calling anchor
v=getDecodeEmail(event);
//window.location.href="mailto:"+v;
// former statement doesn't fire in SE code snippets,
// but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/
// for now, let's just display the link:
alert("mailto:"+v);
});
// right mouse click copies email to clipboard:
e.addEventListener("contextmenu", event => {
// prevent href=#
event.preventDefault();
// get the (reversed) email address of the calling anchor
v=getDecodeEmail(event);
// copy v to clipboard
navigator.clipboard.writeText(v);
// just to check:
navigator.clipboard.readText().then( clipText => alert(clipText) );
// former statements don't work in SE code snippets,
// but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/
});
});
.e-mail::after {
content: attr(data-mailSvr) "\0040" attr(data-mailUsr);
unicode-bidi: bidi-override;
direction: rtl;
}
<a class=e-mail data-mailUsr=resu data-mailSvr=moc.niamod href=""></a>
On the one hand side I'm very content with this solution. But on the other hand, I think my javascript spoils the elegance and simplicity of the HTML/CSS. Does anybody have an idea how to complement this approach of email obfuscation, only using pure CSS + HTML, resulting in a clickable and visable link that meets all common requirements (i.e. screen reader compatible, sufficiently obfuscated, correctly formatted, right clickable for copying)?
I have done something similar in the past. I needed a way to display my email address on one of my websites, but not get horribly spammed in the process. I implemented this 2 years ago, and I haven't received any spam. I didn't do this with CSS though... this is pure JS.
If you hover over the result, you'll see that it creates a clickable email address.
Hope this helps.
let fname = "first";
let lname = "last";
let domain = "gmail.com";
email.innerHTML = `${fname}.${lname}#${domain}`;
<span id="email"></span>

Stripe payment with JMSPaymentBundle "The source parameter is required"

I already integrated JMSPaymentBundle, with paypal every thing works fine!
When I tried to change with stripe from this link for JMS
and using ruudk/PaymentStripeBundle from github, it's actually the same.
But there is a thing. I'm receiving this error: The source parameter is required
In the issues of the bundle, I found that I must use stripe form
<form action=""
method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="MYPUBLISHEDKEY"
data-amount="999"
data-name="Demo Site"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto">
</script>
</form>
This form generates a Token. What I need to know is :
1- Where to put that published token used by JMSPaymentBundle?
2- What action in the form should I do? Is it the same for paypal?
it's hard to say what's going on here but it seems like https://github.com/ruudk/PaymentStripeBundle/ is lacking some necessary documentation.
From what I can tell it's adding a token hidden field to your forms:
https://github.com/ruudk/PaymentStripeBundle/blob/master/src/Form/CheckoutType.php#L12
However, the Checkout embed code you're using won't save the token to that field. I don't see any additional Javascript embedded in this library, so you'll need to build your own using the custom Stripe Checkout integration:
https://stripe.com/docs/checkout#integration-custom
Something like this should work:
var handler = StripeCheckout.configure({
key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// NOTE: assuming that the field injected by the library has an ID of "token"--you'll have to check your DOM and possibly adjust this
var field = document.getElementById('token');
field.value = token.id;
// TODO: submit form and send to your backend
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Stripe.com',
description: '2 widgets',
zipCode: true,
amount: 2000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});

Server Side Rendering HTML text (write with HTML tags in DB) as effectively html in an email

On one hand
I've a field will in a collection, where user can save html text (through a WYSIWYG editor): it works fine and users can write/save some strings like this it's<strong>bold</strong> and sometimes <i>italic</i>. Nothing crazy..
On a second hand
When a user send this field will by email (as part of emailData), rendered with meteorhacks:ssr in an html template, the field show up as it's<strong>bold</strong> and sometimes <i>italic</i>. with HTML tags as normal text.
So, anyone know the trick to render in the html email's body: 'it's bold and sometimes italic.'? Thanks.
My code is very complicated, lot of const and succession of functions, but except of html rendering, it works fine and is finally structured like this:
SSR.compileTemplate('htmlEmail', Assets.getText('replycontact.html'));
var emailData = {
message: `${message}`,
will: `${will}`,
origincontactdate: `${origincontactdate}`,
contactname: `${contactname}`,
};
//send the mail
Email.send({
to: to,
from: from,
subject: subject,
html: SSR.render('htmlEmail', emailData),
});
The problem was that Meteor was escaping the HTML string.
Therefore, the solution is to use 3 brackets {{{ }}} instead of 2 - here for the emailData in the html template : instead of {{will}}, use {{{will}}}.
The code above in the question remain as it.
source: https://stackoverflow.com/a/16565529/7281870
Your data is most likely being saved as HTML encoded in the database, eg
<b>
is saved as
<b>
If so, you simply need to unencode it using the Javascript decodeURI() function, which you can read more about here:
http://www.w3schools.com/jsref/jsref_decodeuri.asp
So your code will look like this:
var emailData = {
message: `${message}`,
will: decodeURI(${will}),
origincontactdate: `${origincontactdate}`,
contactname: `${contactname}`,
};
//send the mail
Email.send({
to: to,
from: from,
subject: subject,
html: SSR.render('htmlEmail', emailData),
});

Meteor: How to keep showing profile avatar after logged out?

After reading Discover Meteor, I'm trying to customize microscope to further practice my meteor skills.
I am using accounts-twitter and hope to display the user's twitter profile pic on each of their post submission. I user the following helper to get the post's author id in post_item.js
Template.postItem.helpers({
username: function () {
owner = this.userId;
var user = Meteor.users.findOne({
_id: owner
});
return user;
}
});
And then in post_item.html I use the following to display the profile pic:
<img class="pull-right" src="{{username.profile.avatar}}">
If I've logged in my account, I can see my profile pic next to all of my submitted posts. However, when I log out, all the profile pics will be disappeared.
Sorry for the newbie questions. Any pointers are welcome.
Thanks for your help.
Stupid me. I forgot that by default, Meteor only publishes the logged in user. Hopefully the following answer will help other meteor newbies.
Server:
Meteor.publish("allUsers", function () {
return Meteor.users.find({}, {
fields: {
profile: 1
}
});
});
Client:
Meteor.subscribe('allUsers');
Then you will be able to load all the user's profile pics using the following:
<img src="{{username.profile.avatar}}">

Using Accounts.emailTemplates.resetPassword.html correctly in Meteor

I have no problems using Accounts.emailTemplates.resetPassword.text but if I also use Accounts.emailTemplates.resetPassword.html I don't get an HTML email.
Are there any example of how to use Accounts.emailTemplates.resetPassword.html correctly?
It is very simple to use - just like you would use text. See the example below, it will send the return value as the e-mail body. Works for all three: resetPassword, verifyEmail, and enrollAccount.
Accounts.emailTemplates.verifyEmail.html = function (user, url) {
return "<h1>Thanks for signing up!</h1>"
+ " To <strong>activate</strong> your account, click the link below:\n\n"
+ url;
};
Still, both variants are sent as e-mail: text and html. If your e-mail client defaults to display emails as text, then you will not see the HTML flavor of the message, so make sure both text and html contain the same information.

Resources