Merge pull request #151 from TelosLabs/password-reset-email

Reset Password Email Design

app/mailers/password_mailer.rb

@@ -1,5 +1,5 @@
 class PasswordMailer < ApplicationMailer
   def password_reset
-    mail to: params[:user].email
+    mail(to: params[:user].email, subject: I18n.t("mailers.password_mailer.password_reset.subject"))
   end
 end

app/views/layouts/mailer.html.erb

@@ -180,6 +180,32 @@
         text-decoration-line: underline;
       }
 
+      .c-paragraph {
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+        color: #1C1C1E;
+        margin-bottom: 16px;
+      }
+
+      .c-button {
+        display: flex;
+        padding: 16px 10px;
+        margin: 0 auto;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 10px;
+        background-color: #CB0C1C;
+        font-size: 18px;
+        line-height: 22px;
+        font-weight: 600;
+        font-style: italic;
+        color: white;
+        text-decoration: none;
+        text-transform: uppercase;
+      }
     </style>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

app/views/password_mailer/password_reset.html.erb

@@ -1 +1,27 @@
-<%= link_to "Reset your password", edit_password_reset_url(token: params[:token]) %>
+<div class="u-w-full">
+  <div class="container">
+    <h1 class="title">
+      Reset your password
+    </h1>
+
+    <p class="c-paragraph">
+      Hello,
+      <br><br>
+      we're sending you this email because you requested a password reset.
+      <br><br>
+      Click on the button to create a new password:
+      <br><br>
+
+      <%= link_to "Create new password", edit_password_reset_url(token: params[:token]), class: "c-button" %>
+      <br>
+
+      If you didn't request a password reset, you can ignore this email.
+    </p>
+  </div>
+
+  <div class="c-footer">
+    <span class="u-text-center">
+      <%= image_tag url_for("main_logo.png"), class: "c-footer-img" %>
+    </span>
+  </div>
+</div>

config/locales/en.yml

@@ -35,6 +35,9 @@ en:
         subject:
           with_time: "Your bookmarked session is starting in %{time_before_session}."
           without_time: "Your bookmarked session is starting soon."
+    password_mailer:
+      password_reset:
+        subject: "Password Reset - Rails World 2024"
   views:
     status_filters:
       past: "Past"