#35 Html Email Template

README.md

@@ -110,8 +110,28 @@ see: https://github.com/dwyl/learn-environment-variables
 
 ### Email
 
+This repo has two send email examples. One takes a string which becomes the body
+of the email, the other takes a html template. The two functions are defined in
+`lib/email.ex`. They use SES and Bamboo.
 
+For these functions to work you must have defined the following env variables:
+```
+SMTP_USERNAME
+SMTP_PASSWORD
+SES_SERVER
+SES_PORT
+```
+
+To understand more about how to set them up and how they work see the full
+tutorial here: https://github.com/dwyl/learn-phoenix-framework/blob/master/sending-emails.md
+
+To test out the string email go to the endpoint: `/email`
+To test out the html template email go to the endpoint: `/html-email`
 
+Using html gives you the ability to add an image. Inline styling gives you the
+ability to add colour, centering and padding like in the template in
+`html_email/email.html.eex`:
+![html-email](https://user-images.githubusercontent.com/16775804/54907608-d896a100-4edd-11e9-803e-d19af5e6d42f.png)
 
 ### Google Auth
 

config/config.exs

@@ -47,4 +47,3 @@ config :auth, Auth.Mailer,
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{Mix.env()}.exs"
-IO.inspect(Mix.env())

lib/auth_web/controllers/send_email_controller.ex

@@ -0,0 +1,14 @@
+defmodule AuthWeb.HtmlEmailController do
+  use AuthWeb, :controller
+
+  def index(conn, _params) do
+    render(conn, "index.html")
+  end
+
+  def html_email(conn, %{"email" => email}) do
+    Auth.Email.send_test_html_email(email, "Test email subject", "www.dwyl.com")
+    |> Auth.Mailer.deliver_now()
+
+    render(conn, "index.html")
+  end
+end

lib/auth_web/router.ex

@@ -30,6 +30,8 @@ defmodule AuthWeb.Router do
     pipe_through(:browser)
 
     get("/", PageController, :index)
+    get("/html-email", HtmlEmailController, :index)
+    post("/html-email", HtmlEmailController, :html_email)
     resources("/email", EmailController, only: [:index, :create])
     resources("/user", UserController, only: [:index, :create, :new, :show])
   end

lib/auth_web/templates/html_email/email.html.eex

@@ -0,0 +1,20 @@
+<section style="margin-bottom: 5rem;">
+  <div style="text-align: center; width: 5rem; margin: auto;">
+    <img src="https://dwyl.com/img/common/dwyl-heart-only-logo.png"
+    alt="dwyl logo" style="width: 100%;">
+  </div>
+  <h1 style="color: blue; text-align: center; font-family: arial;">
+    Please confirm your email address
+  </h1>
+  <p style="text-align: center; font-family: arial;">
+    As an extra security measure, please verify this is the correct email
+    address linked to your account by clicking the button below.
+  </p>
+  <div style="text-align: center; margin-top: 3rem;">
+    <a
+    href="<%= @link %>"
+    style="font-family: arial; text-decoration: none; background-color: green; color: white; padding: 1rem; border-radius: 0.25rem;">
+      Confirm your email
+    </a>
+  </div>
+</section>

lib/auth_web/templates/html_email/index.html.eex

@@ -0,0 +1,11 @@
+<section class="w-80 mt5 center">
+  <p>Send an email which contains a html template:</p>
+
+  <%= form_for @conn, Routes.html_email_path(@conn, :html_email), fn f -> %>
+    <div class="form-group pv3">
+      <%= label f, "Email address", class: "control-label" %>
+      <%= text_input f, :email %>
+    </div>
+    <%= submit "Send Html Email", class: "btn btn-primary" %>
+  <% end %>
+</section>

lib/auth_web/views/html_email_view.ex

@@ -0,0 +1,3 @@
+defmodule AuthWeb.HtmlEmailView do
+  use AuthWeb, :view
+end

lib/email.ex

@@ -1,11 +1,22 @@
 defmodule Auth.Email do
-  use Bamboo.Phoenix, view: Auth.EmailView
+  use Bamboo.Phoenix, view: AuthWeb.HtmlEmailView
 
   def send_test_email(to_email_address, subject, message) do
     new_email()
-    |> from("[email protected]") # also needs to be a validated email
+    # also needs to be a validated email
+    |> from("[email protected]")
     |> to(to_email_address)
     |> subject(subject)
     |> text_body(message)
   end
+
+  def send_test_html_email(to_email_address, subject, link) do
+    new_email()
+    # also needs to be a validated email
+    |> from("[email protected]")
+    |> to(to_email_address)
+    |> subject(subject)
+    |> assign(:link, link)
+    |> render("email.html")
+  end
 end