Email confirmation layout is displayed improperly for gmail.com (used backend is Node.js)

Question

I try to create an email confirmation layout for my web project and everything is just fine for mail.ru server, but when I try to send a letter to gmail.com it goes to spam and is improperly styled (I use flex and inline styling). As for the question concerning going it to spam I already know it's something about domain issue and I should solve it on the server side (both google support and hosting say that), but how it is being displayed, they say it's connected to my program code. According to their advice I made up my mind to post it here in hope to get a solution concerning my improper styling (I send here wrong and correct attachments demostrating the current layouts) which is due to my lack of experience with Node.js. So here is the script:

Node.js-script nodemailer_express_hbs:

const path = require('path')
const nodemailer = require('nodemailer');
const hbs = require('nodemailer-express-handlebars');
 
const fs = require('fs');
const https = require('https');
const express = require('express');
const bodyParser = require('body-parser');
const helmet = require('helmet');
 
const privateKey  = fs.readFileSync('/var/www/www-root/data/www/myadobepics.ru/my-app/myadobepics.ru.key');
const certificate = fs.readFileSync('/var/www/www-root/data/www/myadobepics.ru/my-app/myadobepics.ru.crtca');
 
const credentials = {key: privateKey, cert: certificate};
 
const app = express();
app.use(helmet());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
 
const transport = nodemailer.createTransport({
    host: 'mail.myadobepics.ru',
    port: 465,
    secure: true,
    auth: {
        user: 'admin@myadobepics.ru',
        pass: '***'
    }
});
 
const message = {
    from: 'admin@myadobepics.ru',    
    to: '***',  
    subject: 'Registration at https://myadobepics.ru',
    attachments: [{
        filename: 'logo.png',
        path: __dirname + '/pics/logo.png',
        cid: 'logo'
    }],
    template: 'confirm',
    context: {
        nickname: 'yourname',
        email: 'youremail', 
        password: 'yourpassword', 
        gen: 'gencode'
    }
};
 
const options = {
    viewEngine: {
        extName: ".hbs",
        partialsDir: path.resolve('./views'),
        defaultLayout: false,
    },
    viewPath: path.resolve('./views'),
    extName: ".hbs",
};
 
transport.use('compile', hbs(options));
 
transport.sendMail(message, function(err, info) {
    if (!err) {
        console.log("E-mail was sent!");
    } else {
        console.log(err);
    }
});
 
const httpsServer = https.createServer(credentials, app);
 
httpsServer.listen(3344, function () {
    console.log("Waiting for user info on port 3344...");
});

Next I provide styling which is in the folder called views (this folder should be in the same directory as the script itself):

File confirm.hbs:




    
    
    
    Email confirmation for https://myadobepics.ru  


    
        
            
            
            Hello, {{nickname}}! Thank you for your registration! Please, press a button below if you want to confirm it.
            
                CONFIRM
            
            To log in you can use the credentials we have provided next.
            
                Your login: {{email}}
                Your password: {{password}}
            
            
                Best regards,
                Administrator
                E-mail: admin@myadobepics.ru
            
            This link will be expired in 24 hours

As for the image in the file above you may choose any one as email confirmation logo in case you will be running this code. It should be inside folder called pics which you will have to create at the same directory tree level as the script itself (just like the folder called views).

Here are two attachments for proper and improper styling:

https://postimg.cc/t1YnSnnZ https://postimg.cc/Jtc3BJNM

If anyone knows how to solve my issue or knows another solution for this problem using Node.js I would be very glad to hear your replies.

Best regards,
Kirill

Email confirmation layout is displayed improperly for gmail.com (used backend is Node.js)

0 Answers