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.

Sign up for GitHub

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

Jump to bottom

Unconfigured Email #21

Closed
wilsontamarozzi opened this issue Sep 9, 2017 · 4 comments
Closed

Unconfigured Email #21

wilsontamarozzi opened this issue Sep 9, 2017 · 4 comments
Labels
need user feedback

Comments

@wilsontamarozzi
Copy link

I'm running some tests using hermes, but one of the emails appears unconfigured to me. Did I do something wrong?

E-mail image

http://prntscr.com/gj4e4z

My Script

body, err := h.GenerateHTML(email)
if err != nil {
	panic(err)
}

emailAddress := "my-email"
to := []string{emailAddress}
title := "Recuperar senha"

mime := "MIME-version: 1.0;\nContent-Type: text/html; charset=\"UTF-8\";\n\n"
subject := "Subject: " + title + "!\n"
msg := []byte(subject + mime + "\n" + body)
addr := "smtp.gmail.com:587"

auth := smtp.PlainAuth("", emailAddress, "my-password", "smtp.gmail.com")
if err := smtp.SendMail(addr, auth, emailAddress, to, msg); err != nil {
	log.Println("Error")
} else {
	log.Println("Success")
}

Content Email

Date: Sat, 09 Sep 2017 11:00:18 -0700 (PDT)
From: my-email
Subject: Recuperar senha!
MIME-version: 1.0;
Content-Type: text/html; charset="UTF-8";



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css" rel="stylesheet" media="all">
     
    *:not(br):not(tr):not(html) {
      font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    body {
      width: 100% !important;
      height: 100%;
      margin: 0;
      line-height: 1.4;
      background-color: #2c3e50;
      color: #74787E;
      -webkit-text-size-adjust: none;
    }
    a {
      color: #3869D4;
    }

     
    .email-wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #2c3e50;
    }
    .email-content {
      width: 100%;
      margin: 0;
      padding: 0;
    }
     
    .email-masthead {
      padding: 25px 0;
      text-align: center;
    }
    .email-masthead_logo {
      max-width: 400px;
      border: 0;
    }
    .email-masthead_name {
      font-size: 16px;
      font-weight: bold;
      color: #2F3133;
      text-decoration: none;
      text-shadow: 0 1px 0 white;
    }
    .email-logo {
      max-height: 50px;
    }
     
    .email-body {
      width: 100%;
      margin: 0;
      padding: 0;
      border-top: 1px solid #EDEFF2;
      border-bottom: 1px solid #EDEFF2;
      background-color: #FFF;
    }
    .email-body_inner {
      width: 570px;
      margin: 0 auto;
      padding: 0;
    }
    .email-footer {
      width: 570px;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }
    .email-footer p {
      color: #eaeaea;
    }
    .body-action {
      width: 100%;
      margin: 30px auto;
      padding: 0;
      text-align: center;
    }

    .body-dictionary {
      width: 100%;
      overflow: hidden;
      margin: 20px auto 20px;
      padding: 0;
    }
    .body-dictionary dt {
      clear: both;
      color: #000;
      font-weight: bold;
      float: left;
      width: 50%;
      padding: 0;
      margin: 0;
      margin-bottom: 0.3em;
    }
    .body-dictionary dd {
      float: left;
      width: 50%;
      padding: 0;
      margin: 0;
    }
    .body-sub {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 1px solid #EDEFF2;
      table-layout: fixed;
    }
    .body-sub a {
      word-break: break-all;
    }
    .content-cell {
      padding: 35px;
    }
    .align-right {
      text-align: right;
    }
     
    h1 {
      margin-top: 0;
      color: #2F3133;
      font-size: 19px;
      font-weight: bold;
    }
    h2 {
      margin-top: 0;
      color: #2F3133;
      font-size: 16px;
      font-weight: bold;
    }
    h3 {
      margin-top: 0;
      color: #2F3133;
      font-size: 14px;
      font-weight: bold;
    }
    blockquote {
      margin: 1.7rem 0;
      padding-left: 0.85rem;
      border-left: 10px solid #F0F2F4;
    }
    blockquote p {
        font-size: 1.1rem;
        color: #999;
    }
    blockquote cite {
        display: block;
        text-align: right;
        color: #666;
        font-size: 1.2rem;
    }
    cite {
      display: block;
      font-size: 0.925rem; 
    }
    cite:before {
      content: "\2014 \0020";
    }
    p {
      margin-top: 0;
      color: #74787E;
      font-size: 16px;
      line-height: 1.5em;
    }
    p.sub {
      font-size: 12px;
    }
    p.center {
      text-align: center;
    }
    table {
      width: 100%;
    }
    th {
      padding: 0px 5px;
      padding-bottom: 8px;
      border-bottom: 1px solid #EDEFF2;
    }
    th p {
      margin: 0;
      color: #9BA2AB;
      font-size: 12px;
    }
    td {
      padding: 10px 5px;
      color: #74787E;
      font-size: 15px;
      line-height: 18px;
    }
    .content {
      align: center;
      padding: 0;
    }
     
    .data-wrapper {
      width: 100%;
      margin: 0;
      padding: 35px 0;
    }
    .data-table {
      width: 100%;
      margin: 0;
    }
    .data-table th {
      text-align: left;
      padding: 0px 5px;
      padding-bottom: 8px;
      border-bottom: 1px solid #EDEFF2;
    }
    .data-table th p {
      margin: 0;
      color: #9BA2AB;
      font-size: 12px;
    }
    .data-table td {
      padding: 10px 5px;
      color: #74787E;
      font-size: 15px;
      line-height: 18px;
    }
     
    .button {
      display: inline-block;
      width: 100%;
      background-color: #00948d;
      color: #ffffff;
      font-size: 15px;
      line-height: 45px;
      text-align: center;
      text-decoration: none;
      -webkit-text-size-adjust: none;
      mso-hide: all;
    }
     
    @media only screen and (max-width: 600px) {
      .email-body_inner,
      .email-footer {
        width: 100% !important;
      }
    }
  </style>
</head>
<body dir="ltr">
  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td class="content">
        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
          
          <tr>
            <td class="email-masthead">
              <a class="email-masthead_name" href="https://example-hermes.com/" target="_blank">
                
                  <img src="http://www.duchess-france.org/wp-content/uploads/2016/01/gopher.png" class="email-logo" />
                
                </a>
            </td>
          </tr>

          
          <tr>
            <td class="email-body" width="100%">
              <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
                
                <tr>
                  <td class="content-cell">
                    <h1>Hi Jon Snow,</h1>
                    
                        
                          
                            <p>You have received this email because a password reset request for Hermes account was received.</p>
                          
                        
                    
                    

                      

                      
                      
                        
                        
                        
                      

                      
                      
                        
                          
                            <p>Click the button below to reset your password:</p>
                            <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
                              <tr>
                                <td align="center">
                                  <div>
                                    <a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: #DC4D2F" target="_blank">
                                      Reset your password
                                    </a>
                                  </div>
                                </td>
                              </tr>
                            </table>
                          
                        
                      

                    
                     
                        
                          
                            <p>If you did not request a password reset, no further action is required on your part.</p>
                          
                        
                      

                    <p>
                      Thanks,
                      <br />
                      Hermes
                    </p>

                    
                       
                        <table class="body-sub">
                          <tbody>
                              
                                <tr>
                                  <td>
                                    <p class="sub">If you’re having trouble with the button &#39;Reset your password&#39;, copy and paste the URL below into your web browser.</p>
                                    <p class="sub"><a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010</a></p>
                                  </td>
                                </tr>
                              
                          </tbody>
                        </table>
                      
                    
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-cell">
                    <p class="sub center">
                      Copyright © 2017 Hermes. All rights reserved.
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
```
@matcornic
Copy link
Owner

It's weird, it seems that the CSS is not interpreted even though you set the conte type to text/html. I personnally use gomail and it works like a charm.

An example: https://github.com/soprasteria/docktor/blob/golang/server/modules/email/email.go

Could you try with it ?

By the way, did you try with other email clients ?

@BryanMoslo
Copy link

@matcornic I'm having the same issue but it is only on Gmail (any browser)

@suciptoid
Copy link

suciptoid commented Aug 22, 2019 •
edited
Loading

Having same issue with Gmail & Protonmail

EDIT: problem solved using https://github.com/vanng822/go-premailer

@matcornic
Copy link
Owner

matcornic commented Jan 28, 2020 •
edited
Loading

@showcheap Now that Hermes uses CSS inlining by default with go-premailer, it should be better (since #61)

And I really recommend to use gomail like here: https://github.com/matcornic/hermes/blob/master/examples/main.go#L136

It's very easy to setup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
need user feedback
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@suciptoid @BryanMoslo @matcornic @wilsontamarozzi