HTML and Text email invite with translations

James Peret 10 years ago
parent
commit
00dff3bde1

+ 1 - 1
app/controllers/invites_controller.rb

@@ -16,7 +16,7 @@ class InvitesController < ApplicationController
16 16
 
17 17
     if @user.errors.empty? && @user.update(invitation_sent_at: Time.now.utc)
18 18
       flash[:notice] = "successfully sent invite to #{@user.email}"
19
-      redirect_to dashboard_path
19
+      redirect_to invite_path
20 20
     else
21 21
       render :invite
22 22
     end

+ 2 - 9
app/mailers/user_mailer.rb

@@ -34,18 +34,11 @@ class UserMailer < ActionMailer::Base
34 34
   
35 35
   def invite_message(user, from, content)
36 36
       @user = user
37
+      @from = from
37 38
       @token = user.raw_invitation_token
38 39
       invitation_link = accept_user_invitation_url(:invitation_token => @token)
39 40
       I18n.with_locale(from.language) do
40
-        mail(:from => from, :bcc => from, :to => @user.email, :subject => (t 'invite_message.email_subject')) do |format|
41
-          content = content.gsub('{{invitation_link}}', invitation_link)
42
-          format.text do
43
-            render :text => content
44
-          end
45
-          format.html do
46
-            render :html => content
47
-          end
48
-        end
41
+        mail(:from => from.email, :bcc => from.email, :to => @user.email, :subject => (t 'invite_email.email_subject'))
49 42
       end
50 43
   end
51 44
   

+ 21 - 10
app/views/devise/invitations/edit.html.erb

@@ -1,11 +1,22 @@
1
-<h2><%= t 'devise.invitations.edit.header' %></h2>
1
+<% title (t 'registration.sign_up') + ' - ' + @config.website_name %>
2 2
 
3
-<%= simple_form_for resource, :as => resource_name, :url => invitation_path(resource_name), :html => { :method => :put } do |f| %>
4
-  <%= devise_error_messages! %>
5
-  <%= f.hidden_field :invitation_token %>
6
-
7
-  <%= f.input :password %>
8
-  <%= f.input :password_confirmation %>
9
-
10
-  <%= f.submit t("devise.invitations.edit.submit_button") %>
11
-<% end %>
3
+<%= content_tag(:div, class: 'cover-center compact-form') do%>
4
+	<%= image_tag('avalanche_network_logo_full_small.png', size: '208x150', class: 'centered')%>
5
+	<%= bootstrap_form_for(resource, as: resource_name, url: invitation_path(resource_name), :html => { :method => :put }) do |f| %>
6
+	    <%= render :partial => 'layouts/flash' %>
7
+	    <%= f.alert_message "Please fix the errors below."%>
8
+	    <%= content_tag(:fieldset) do %>
9
+	    	    <%= f.hidden_field :invitation_token %>
10
+		    <%= f.text_field :first_name, hide_label: true, placeholder: (t 'registration.first_name'), required:true, autofocus: true, class: 'input-block-level' %>
11
+		    <%= f.text_field :last_name, hide_label: true, placeholder: (t 'registration.last_name'), required:true, class: 'input-block-level' %>
12
+		    <%= f.email_field :email, required: true, hide_label: true, placeholder: (t'registration.email'), class: 'input-block-level' %>
13
+		    <%= f.password_field :password, hide_label: true, placeholder: (t 'registration.password'), required: true, class: 'input-block-level' %>
14
+		    <%= f.password_field :password_confirmation, hide_label: true, placeholder: (t 'registration.password_confirmation'), required: true, class: 'input-block-level' %>
15
+		  	 
16
+		<% end%>
17
+		<%= content_tag(:div, class: 'form-buttons') do %>
18
+  	     	<%= f.submit (t 'registration.sign_up_submit'), id: 'submit_registration_btn', class: 'btn inverse' %>
19
+  	     	<%= link_to (t 'registration.sign_in'), new_user_session_path, class: 'btn btn-link inverse' %>
20
+		<% end%>
21
+	<% end %>
22
+<% end %>

+ 361 - 4
app/views/user_mailer/invite_message.html.erb

@@ -1,7 +1,364 @@
1
-<p><%= I18n.t("devise.mailer.invitation_instructions.hello", email: @user.email) %></p>
1
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+<html xmlns="http://www.w3.org/1999/xhtml">
3
+	<head>
4
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5
+        <title>*|MC:SUBJECT|*</title>
6
+        <style type="text/css" data-roadie-ignore>
7
+			/* ---- CLIENT-SPECIFIC STYLES ---- */
8
+			
9
+			 /* Force Outlook to provide a "view in browser" message */
10
+			#outlook a{padding:0;}
11
+			 /* Force Hotmail to display emails at full width */
12
+			.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
13
+			/* Force Hotmail to display normal line spacing */
14
+			.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 
15
+			/* Prevent WebKit and Windows mobile changing default text sizes */
16
+			body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} 
17
+			/* Remove spacing between tables in Outlook 2007 and up */
18
+			table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} 
19
+			/* Allow smoother rendering of resized image in Internet Explorer */
20
+			img{-ms-interpolation-mode:bicubic;} 
2 21
 
3
-<p><%= I18n.t("devise.mailer.invitation_instructions.someone_invited_you", url: root_url) %></p>
22
+			/* ---- RESET STYLES ---- */
23
+			body{margin:0; padding:0;}
24
+			img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
25
+			table{border-collapse:collapse !important;}
26
+			body, .bodyTable, .bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
27
+			
28
+			/* ---- TEMPLATE STYLES ---- */
29
+			.container, #page-header, #page-content, #page-content2, #page-footer { width: 600px; }
30
+			
31
+			
32
+			
33
+			.page-footer a {
34
+				color: #202020;
35
+				text-decoration: underline;
36
+			}
37
+			.btn:hover { background: rgba(0, 0, 0, 0.2); }
38
+			.btn.btn-success:hover { background-color: rgba(146, 188, 100, 0.25); }
4 39
 
5
-<p><%= link_to I18n.t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@user, :invitation_token => @token) %></p>
40
+			/* ---- MOBILE STYLES ---- */
41
+			
42
+			@media only screen and (max-width: 480px){
43
+				
44
+				/* ---- CLIENT-SPECIFIC MOBILE STYLES ---- */
45
+				/* Prevent Webkit platforms from changing default text sizes */
46
+				body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} 
47
+				/* Prevent iOS Mail from adding padding to the body */
48
+			    	body{width:100% !important; min-width:100% !important;} 
49
+	
50
+				/* ---- MOBILE RESET STYLES ---- */
51
+				.bodyCell{padding:0px !important;}
6 52
 
7
-<p><%= I18n.t("devise.mailer.invitation_instructions.ignore").html_safe %></p>
53
+				/* ---- MOBILE STYLES ---- */
54
+		
55
+				@media only screen and (max-width: 480px){
56
+					
57
+					/* ---- MOBILE TEMPLATE STYLES ---- */
58
+					.page-header, #page-header, #page-content, #page-content2, #page-footer { width: 100%; padding-left: 25px; padding-right: 25px; margin-left: 0px; margin-right: 0px;}
59
+					.hide-mobile { display:none !important; }
60
+				}
61
+			}
62
+		</style>
63
+		
64
+		<style>
65
+		
66
+		/* ---- TEMPLATE STYLES ---- */
67
+
68
+		body, .bodyTable{
69
+			/*@editable*/ background-color:#FFFFFF;
70
+			padding: 0px; margin: 0px;
71
+		}
72
+		
73
+		h1 {
74
+			/* mission description 2: */
75
+			font-family: Avenir-Light;
76
+			font-size: 28px;
77
+			color: #000000;
78
+			line-height: 38px;
79
+			
80
+		}
81
+		
82
+		#page-header {padding-bottom: 23px;}
83
+		
84
+		.bodyTable, .bodyCell { margin: 0px; padding: 0px;}
85
+		
86
+		#body-success { background-color: #92BC64; width: 100%; margin-left: 0px; margin-right: 0px;}
87
+		#body-danger { background-color: #ED5A51; width: 100%; margin-left: 0px; margin-right: 0px;}
88
+		#body-default { background-color: #F3F3F3; width: 100%; margin-left: 0px; margin-right: 0px;}
89
+		
90
+		.cetered { text-align: center; }
91
+		
92
+		#content-main { padding-left: 10px; padding-right: 10px; }
93
+		
94
+		.page-welcome {
95
+			text-align: center;
96
+			padding-top: 30px;
97
+			padding-bottom: 60px;
98
+		}
99
+		
100
+		.page-how-to {
101
+			text-align: center;
102
+			padding-top: 30px;
103
+			padding-bottom: 10px;
104
+		}
105
+		
106
+		.page-welcome h1 {
107
+			font-family: Helvetica;
108
+			font-size: 32px;
109
+			color: #000000;
110
+			line-height: 38px;
111
+			text-align: center;
112
+			font-weight: 300;
113
+			margin-top: 45px;
114
+			margin-bottom: 32px;
115
+		}
116
+		
117
+		.page-welcome h2, .page-how-to h2 {
118
+			font-family: Helvetica;
119
+			font-size: 24px;
120
+			color: #000000;
121
+			line-height: 34px;
122
+			text-align: center;
123
+			font-weight: 300;
124
+			margin-top: 45px;
125
+			margin-bottom: 32px;
126
+		}
127
+		
128
+		.page-header h3 {
129
+			font-family: Helvetica-Light;
130
+			font-size: 28px;
131
+			color: #000000;
132
+			line-height: 38px;
133
+			font-weight: 400;
134
+			margin-top: 0px;
135
+			
136
+		}
137
+		
138
+		.page-welcome p {
139
+			font-family: Helvetica-Light;
140
+			font-size: 18px;
141
+			color: #1D1D26;
142
+			line-height: 25px;
143
+			margin-top: 0px;
144
+			text-align: center;
145
+		}
146
+		
147
+		.page-welcome a {
148
+			color: #55A2DA;
149
+		}
150
+		
151
+		.page-welcome a:hover {
152
+			color: #92BC64;
153
+			text-decoration: underline;
154
+		}
155
+		
156
+		.page-footer {
157
+			text-align: center;
158
+			margin-top: 30px;
159
+			margin-bottom: 25px;
160
+			font-family: Avenir-LightOblique;
161
+			font-size: 14px;
162
+			color: #000000;
163
+			line-height: 19px;
164
+		}
165
+		
166
+		.page-footer a {
167
+			color: #202020;
168
+			text-decoration: none;
169
+		}
170
+		
171
+		hr { border: 1px solid black; margin-bottom: 30px;}
172
+		
173
+		.btn {
174
+			display: inline-block;
175
+			padding: 4px 12px;
176
+			margin-bottom: 0;
177
+			text-align: center;
178
+			vertical-align: middle;
179
+			cursor: pointer;
180
+			background-color: transparent;
181
+			border: 2px solid #202020;
182
+			border-bottom-color: #202020;
183
+			border-radius: 4px;
184
+			text-shadow: none;
185
+			font-family: Avenir-Book;
186
+			font-style: normal;
187
+			color: #333333;
188
+			text-transform: none;
189
+			text-decoration:none;
190
+		}
191
+		
192
+		.btn.btn-success {
193
+			color: #92BC64;
194
+			border-color: #92BC64;
195
+		}
196
+		
197
+		.btn-container {
198
+			margin-bottom: 45px;
199
+			margin-top: 35px;
200
+			text-align: center;
201
+		}
202
+		
203
+		.step-box {
204
+			border: 2px solid #D4D4DE;
205
+			border-radius: 4px;
206
+			width: 300px;
207
+			height: 54px;
208
+			margin-left: auto;
209
+			margin-right: auto;
210
+			margin-bottom: 20px;
211
+		}
212
+		
213
+		.step-box .number {
214
+			font-family: Helvetica-Bold;
215
+			font-size: 40px;
216
+			color: #000000;
217
+			line-height: 53px;
218
+			width: 50px;
219
+			padding-top: 5px;
220
+
221
+		}
222
+		
223
+		.step-box .text { 
224
+			width: 250px; 
225
+			padding-top: 20px;
226
+			text-align: left;
227
+			padding-left: 5px;
228
+			font-family: Helvetica-Bold;
229
+			font-size: 14px;
230
+			color: #000000;
231
+			line-height: 19px;
232
+		}
233
+		
234
+		.copyright { 
235
+			padding-top: 15px;
236
+		}
237
+		
238
+		</style>
239
+		
240
+    </head>
241
+    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
242
+        	<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="bodyTable">
243
+            	<tr>
244
+                	<td align="center" valign="top" class="bodyCell">
245
+                    	
246
+                      	<!-- BEGIN HEADER // -->
247
+                          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="page-header" style="margin-bottom: 22px; margin-top: 4px">
248
+                              <tr>
249
+                                  <td valign="top" class="cetered">
250
+                                  		<img src="http://avalanche2.s3.amazonaws.com/email_files/base/avalanche2_logomark.png" style="width:174px; height: 124px;" id="logo" />
251
+                                  </td>
252
+                              </tr>
253
+                          </table>
254
+                          <!-- // END HEADER -->
255
+					
256
+                    </td>
257
+                </tr>
258
+            </table>
259
+            <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="bodyTable" id="body-default">
260
+              	<tr>
261
+                  	<td align="center" valign="top" class="bodyCell">
262
+                    	
263
+					  <!-- BEGIN BODY // -->
264
+	                      <table border="0" cellpadding="0" cellspacing="0" class="container" id="page-content">
265
+	                          <tr>
266
+	                              <td valign="top" class="centered" id="content-main">
267
+									<%= content_tag(:div, class: 'page-welcome centered') do %>
268
+										<%= content_tag(:h1, ( t 'invite_email.welcome')) %>
269
+										<hr>
270
+										<%= content_tag(:p, (t 'invite_email.welcome_text', email: @user.email, from: @from.full_name).html_safe, class: 'tagline') %>
271
+										<%= content_tag(:p, (t 'invite_email.ignore').html_safe, class: 'tagline') %>
272
+									
273
+									<% end %>
274
+									
275
+	                              </td>
276
+	                          </tr>
277
+	                      </table>
278
+	                      <!-- // END BODY -->
279
+					
280
+                      </td>
281
+                  </tr>
282
+              </table>
283
+              <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="bodyTable">
284
+              	<tr>
285
+                  	<td align="center" valign="top" class="bodyCell">
286
+                    	
287
+                        	<!-- BEGIN FOOTER // -->
288
+	                      <table border="0" cellpadding="0" cellspacing="0" class="container" id="page-content2">
289
+	                          <tr>
290
+	                              <td valign="top" class="centered">
291
+								
292
+								<%= content_tag(:div, class: 'page-how-to centered') do %>
293
+									<%= content_tag(:h2, ( t 'sign_up_email.how_it_works')) %>
294
+									
295
+									<%= content_tag(:div, class: 'step-box') do %>
296
+				   	                      <table border="0" cellpadding="0" cellspacing="0" class="" >
297
+				   	                          <tr>
298
+				   	                              <td valign="top" class="number"><b>1</b></td>
299
+				   	                              <td valign="top" class="text"><%= t 'sign_up_email.step1' %></td>
300
+			      	                          </tr>
301
+			      	                      </table>	
302
+									<% end %>
303
+									<%= content_tag(:div, class: 'step-box') do %>
304
+				   	                      <table border="0" cellpadding="0" cellspacing="0" class="" >
305
+				   	                          <tr>
306
+				   	                              <td valign="top" class="number"><b>2</b></td>
307
+				   	                              <td valign="top" class="text"><%= t 'sign_up_email.step2' %></td>
308
+			      	                          </tr>
309
+			      	                      </table>	
310
+									<% end %>
311
+									<%= content_tag(:div, class: 'step-box') do %>
312
+				   	                      <table border="0" cellpadding="0" cellspacing="0" class="" >
313
+				   	                          <tr>
314
+				   	                              <td valign="top" class="number"><b>3</b></td>
315
+				   	                              <td valign="top" class="text"><%= t 'sign_up_email.step3' %></td>
316
+			      	                          </tr>
317
+			      	                      </table>	
318
+									<% end %>
319
+									<%= content_tag(:div, class: 'step-box') do %>
320
+				   	                      <table border="0" cellpadding="0" cellspacing="0" class="" >
321
+				   	                          <tr>
322
+				   	                              <td valign="top" class="number"><b>4</b></td>
323
+				   	                              <td valign="top" class="text"><%= t 'sign_up_email.step4' %></td>
324
+			      	                          </tr>
325
+			      	                      </table>	
326
+									<% end %>
327
+									<%= content_tag(:div, class: 'step-box') do %>
328
+				   	                      <table border="0" cellpadding="0" cellspacing="0" class="" >
329
+				   	                          <tr>
330
+				   	                              <td valign="top" class="number"><b>5</b></td>
331
+				   	                              <td valign="top" class="text"><%= t 'sign_up_email.step5' %></td>
332
+			      	                          </tr>
333
+			      	                      </table>	
334
+									<% end %>
335
+									
336
+									<%= content_tag(:div, class: 'btn-container') do %>
337
+										<%= link_to((t 'sign_up_email.start'), accept_invitation_url(@user, :invitation_token => @token), class: 'btn btn-success') %>
338
+									<% end %>
339
+								
340
+								<% end %>
341
+								
342
+								
343
+   	                              </td>
344
+   	                          </tr>
345
+   	                      </table>
346
+                         <!-- // END FOOTER -->
347
+					
348
+                        	<!-- BEGIN FOOTER // -->
349
+	                      <table border="0" cellpadding="0" cellspacing="0" class="container" id="page-footer">
350
+	                          <tr>
351
+	                              <td valign="top" class="centered">
352
+								<%= content_tag(:div, class: 'page-footer') do %>
353
+									<span class="copyright">&copy; Avalanche Network</span>
354
+								<% end %>
355
+   	                              </td>
356
+   	                          </tr>
357
+   	                      </table>
358
+                         <!-- // END FOOTER -->
359
+					
360
+                      </td>
361
+                  </tr>
362
+              </table>
363
+    </body>
364
+</html>

+ 25 - 0
app/views/user_mailer/invite_message.text.erb

@@ -0,0 +1,25 @@
1
+-----------------
2
+
3
+<%= t 'invite_email.welcome' %>
4
+
5
+<%= t 'invite_email.welcome_text_simple_1', email: @user.email %>
6
+<%= t 'invite_email.welcome_text_simple_2', from: @from.full_name %>
7
+<%= t 'invite_email.welcome_text_simple_3' %>
8
+
9
+<%= t 'invite_email.ignore_simple_1' %>
10
+<%= t 'invite_email.ignore_simple_2' %>
11
+
12
+
13
+<%= t 'sign_up_email.how_it_works' %>:
14
+
15
+1. <%= t 'sign_up_email.step1' %>
16
+2. <%= t 'sign_up_email.step2' %>
17
+3. <%= t 'sign_up_email.step3' %>
18
+4. <%= t 'sign_up_email.step4' %>
19
+5. <%= t 'sign_up_email.step5' %>
20
+
21
+<%= t 'sign_up_email.start' %>:
22
+<%= accept_invitation_url(@user, :invitation_token => @token)%>
23
+
24
+-----------------
25
+Avalanche Network

+ 2 - 1
config/initializers/devise.rb

@@ -301,5 +301,6 @@ Rails.application.config.to_prepare do
301 301
   Devise::RegistrationsController.layout proc{ |controller| user_signed_in? ? "application" : "cover" }
302 302
   Devise::ConfirmationsController.layout "cover"
303 303
   Devise::UnlocksController.layout "cover"            
304
-  Devise::PasswordsController.layout "cover"        
304
+  Devise::PasswordsController.layout "cover"  
305
+  Devise::InvitationsController.layout "cover"      
305 306
 end

+ 2 - 0
config/locales/devise_invitable.en.yml

@@ -12,6 +12,8 @@ en:
12 12
       edit:
13 13
         header: "Set your password"
14 14
         submit_button: "Set my password"
15
+      user:
16
+        updated: 'Your password was set successfully. You are now signed in.'
15 17
     mailer:
16 18
       invitation_instructions:
17 19
         subject: 'Invitation instructions'

+ 11 - 1
config/locales/email.en.yml

@@ -20,4 +20,14 @@ en:
20 20
     step5: 'Win rewards'
21 21
     start: 'Start'
22 22
   invite:
23
-    send: 'Send Invite'
23
+    send: 'Send Invite'
24
+  invite_email:
25
+    email_subject: 'Join the Avalanche'
26
+    welcome: 'Join the Avalanche'
27
+    welcome_text: 'Hello <b>%{email}</b>.<br> You have been invited by <b>%{from}</b> to join the <a href="http://avalanche.network">Avalanche Network</a>! Follow this email to get started.'
28
+    welcome_text_simple_1: 'Hello %{email}.'
29
+    welcome_text_simple_2: 'You have been invited by %{from} to join the Avalanche Network!'
30
+    welcome_text_simple_3: 'Follow this email to get started.'
31
+    ignore: 'If you dont want to accept the invitation, please ignore this email.<br />Your account wont be created until you access the link below and set your password.'
32
+    ignore_simple_1: 'If you dont want to accept the invitation, please ignore this email.'
33
+    ignore_simple_2: 'Your account wont be created until you access the link below and set your password.'

+ 13 - 1
config/locales/email.pt-BR.yml

@@ -18,4 +18,16 @@ pt-BR:
18 18
     step3: 'Complete todos os passos'
19 19
     step4: 'Complete a missão'
20 20
     step5: 'Ganhe recompensas'
21
-    start: 'Começar'
21
+    start: 'Começar'
22
+  invite:
23
+    send: 'Enviar convite'
24
+  invite_email:
25
+    email_subject: 'Participe da Avalanche'
26
+    welcome: 'Participe da Avalanche'
27
+    welcome_text: 'Olá <b>%{email}</b>.<br>Você foi convidado por <b>%{from}</b> para participar do <a href="http://avalanche.network">Avalanche Network</a>! Siga este email para começar.'
28
+    welcome_text_simple_1: 'Olá %{email}.'
29
+    welcome_text_simple_2: 'Você foi convidado por %{from} para participar do Avalanche Network!'
30
+    welcome_text_simple_3: 'Siga este email para começar.'
31
+    ignore: 'Se você não quiser participar, simplesmente não siga este email.<br />Sua conta não vai ser criada até você seguir o link abaixo e cadastrar uma senha.'
32
+    ignore_simple_1: 'Se você não quiser participar, simplesmente não siga este email.'
33
+    ignore_simple_2: 'Sua conta não vai ser criada até você seguir o link abaixo e cadastrar uma senha.'

BIN
dump.rdb