Initial version of the confirmation mail style

cesium · Dec 4, 2024 · 1b22e9d · 1b22e9d
1 parent fd5d515
commit 1b22e9d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/lib/atomic/accounts/user_notifier.ex b/lib/atomic/accounts/user_notifier.ex
@@ -34,7 +34,7 @@ defmodule Atomic.Accounts.UserNotifier do
       |> subject("Confirm your Account")
       |> assign(:user, user)
       |> assign(:url, url)
-      |> render_body("user_confirmation.txt")
+      |> render_body("user_confirmation.html")
 
     case Mailer.deliver(email) do
       {:ok, _term} -> {:ok, email}

diff --git a/lib/atomic_web/templates/email/user_confirmation.html.eex b/lib/atomic_web/templates/email/user_confirmation.html.eex
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
+      <link href="/assets/app.css" rel="stylesheet">
+   </head>
+   <body class="flex flex-col h-full items-center">
+    <div class="h-32 w-fit mt-8">
+        <div class="flex h-16 shrink-0 select-none items-center gap-x-4 pt-4">
+            <img src="/images/atomic.svg" class="h-14 w-auto" />
+            <p class="text-2xl font-semibold text-zinc-400">Atomic</p>
+        </div>
+    </div>
+    <div class="h-fit w-fit bg-gray-100 rounded-md pt-8 mx-16">
+        <h1 class="flex font-extrabold text-xl justify-center">
+            <p class="text-orange-700 mr-1">Hi</p>
+            <p class="text-black"><%= @user.email %>!</p>
+        </h1>
+
+        <p class="text-center mx-8">Welcome to the Atomic-Platform! You can confirm your Atomic account by clicking on the button bellow:</p>
+
+        <div class="flex justify-center my-5">
+            <a class="bg-transparent text-orange-700 hover:text-white font-semibold border border-orange-500 hover:bg-orange-500 hover:border-transparent rounded py-2 px-4" href="<%= @url %>">Verify your account</a>
+        </div>
+
+        <p class="text-center">If you didn't create an Atomic account, you can ignore this message.</p>
+
+        <div class="flex flex-col items-center text-sm p-8 bg-gray-200 mt-16 rounded-b-md text-gray-600">
+            <p>Copyright © CeSIUM - Centro de Estudantes de Engenharia Informática da Universidade do Minho
+        </div>
+    </div>
+   </body>
+</html>
diff --git a/lib/atomic_web/templates/email/user_confirmation.txt.eex b/lib/atomic_web/templates/email/user_confirmation.txt.eex