Skip to content

Commit 978dbcd

Browse files
lucasleandro1lucasleandro1
authored
Added template to reset password and confirmable (#302)
* added template to reset password and confirmable * changes in edit new password * remove files unnecessary * remove file password_change * add reset password view * add confirmations views * created and customized templates
1 parent 6c12c27 commit 978dbcd

File tree

7 files changed

+221
-4
lines changed

7 files changed

+221
-4
lines changed

‎app/assets/stylesheets/devise.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.container {
2+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
3+
background-color: #f9f9f9;
4+
display: flex;
5+
justify-content: center;
6+
flex-direction: column;
7+
align-items: center;
8+
min-height: 100vh;
9+
margin: 0;
10+
}
11+
12+
.auth-container {
13+
background: white;
14+
padding: 2.5rem;
15+
border-radius: 16px;
16+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
17+
width: 100%;
18+
max-width: 420px;
19+
}
20+
21+
.auth-title {
22+
font-size: 1.8rem;
23+
font-weight: bold;
24+
margin-bottom: 1.5rem;
25+
text-align: center;
26+
}
27+
28+
form {
29+
margin-bottom: 1.5rem;
30+
}
31+
32+
.input {
33+
margin-bottom: 1rem;
34+
text-align: left;
35+
}
36+
37+
.input label {
38+
display: block;
39+
margin-bottom: 0.5rem;
40+
font-weight: 500;
41+
}
42+
43+
.input input[type="email"] {
44+
width: 94%;
45+
padding: 0.75rem;
46+
border: 1px solid #ccc;
47+
border-radius: 8px;
48+
font-size: 1rem;
49+
}
50+
.input_password input[type="password"] {
51+
width: 94%;
52+
padding: 0.75rem;
53+
border: 1px solid #ccc;
54+
border-radius: 8px;
55+
font-size: 1rem;
56+
}
57+
58+
.submit input[type="submit"] {
59+
width: 100%;
60+
background: linear-gradient(to right, #1e3a8a, #3b82f6);
61+
color: white;
62+
padding: 0.75rem;
63+
border: none;
64+
border-radius: 8px;
65+
font-weight: bold;
66+
font-size: 1rem;
67+
cursor: pointer;
68+
transition: background 0.3s ease;
69+
}
70+
71+
.submit input[type="submit"]:hover {
72+
background: linear-gradient(to right, #1e40af, #2563eb);
73+
}

‎app/views/devise/confirmations/new.html.erb‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="container">
2+
<div class="auth-container">
3+
<h2 class="auth-title"><%= t("devise.confirmations.new.title") %></h2>
4+
5+
<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
6+
<%= render "devise/shared/error_messages", resource: resource %>
7+
8+
<div class="input">
9+
<%= f.label :email, t("activerecord.attributes.#{resource_name}.email") %>
10+
<%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
11+
</div>
12+
13+
<div class="submit">
14+
<%= f.submit t("devise.confirmations.new.resend_confirmation_instructions") %>
15+
</div>
16+
<% end %>
17+
</div>
18+
</div>

‎app/views/devise/mailer/confirmation_instructions.html.erb‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<style>
6+
@media only screen and (max-width: 600px) {
7+
.container {
8+
padding: 20px !important;
9+
}
10+
h1 {
11+
font-size: 24px !important;
12+
}
13+
p, a {
14+
font-size: 16px !important;
15+
}
16+
}
17+
</style>
18+
</head>
19+
<body style="margin: 0; padding: 0; font-family: sans-serif;">
20+
<div class="container" style="max-width: 600px; padding: 40px;">
21+
<h1 style="color: #333;"><%= t("devise.mailer.confirmation_instructions.subject") %></h1>
22+
23+
<p style="color: #555;">
24+
<%= t("devise.mailer.confirmation_instructions.greeting", recipient: @resource.email) %>
25+
</p>
26+
27+
<p style="color: #555;">
28+
<%= t("devise.mailer.confirmation_instructions.instruction") %>
29+
</p>
30+
31+
<p>
32+
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>"
33+
style="display: inline-block; background-color: #3b82f6; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px;">
34+
<%= t("devise.mailer.confirmation_instructions.action") %>
35+
</a>
36+
</p>
37+
38+
<p style="color: #999; font-size: 12px; margin-top: 20px;">
39+
<%= t("devise.mailer.reset_password_instructions.instruction_2") %>
40+
</p>
41+
</div>
42+
</body>
43+
</html>

‎app/views/devise/mailer/reset_password_instructions.html.erb‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<style>
6+
@media only screen and (max-width: 600px) {
7+
.container {
8+
padding: 20px !important;
9+
}
10+
h1 {
11+
font-size: 24px !important;
12+
}
13+
p, a {
14+
font-size: 16px !important;
15+
}
16+
}
17+
</style>
18+
</head>
19+
<body style="margin: 0; padding: 0; font-family: sans-serif; ">
20+
<div class="container" style="max-width: 600px; padding: 40px;">
21+
<h1 style="color: #333;"><%= t("devise.mailer.reset_password_instructions.subject") %></h1>
22+
<p style="color: #555;"><%= t("devise.mailer.reset_password_instructions.greeting", recipient: @resource.email) %></p>
23+
<p style="color: #555;"><%= t("devise.mailer.reset_password_instructions.instruction") %></p>
24+
<p>
25+
<a href="<%= edit_password_url(@resource, reset_password_token: @token) %>"
26+
style="display: inline-block; background-color: #3b82f6; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px;">
27+
<%= t("devise.mailer.reset_password_instructions.action") %>
28+
</a>
29+
</p>
30+
<p style="color: #999; font-size: 12px; margin-top: 20px;">
31+
<%= t("devise.mailer.reset_password_instructions.instruction_2") %>
32+
</p>
33+
</div>
34+
</body>
35+
</html>

‎app/views/devise/passwords/edit.html.erb‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="container">
2+
<div class="auth-container">
3+
<h2 class="auth-title"><%= t("devise.passwords.edit.change_your_password") %></h2>
4+
5+
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
6+
<%= render "devise/shared/error_messages", resource: resource %>
7+
<%= f.hidden_field :reset_password_token %>
8+
9+
<div class="input_password">
10+
<p><%= f.label :password, t("devise.passwords.edit.new_password") %></p>
11+
<% if @minimum_password_length %>
12+
<p><em>(<%= t("devise.passwords.edit.minimum_length", count: @minimum_password_length) %>)</em></p>
13+
<% end %>
14+
<p><%= f.password_field :password, autofocus: true, autocomplete: "new-password" %></p>
15+
</div>
16+
17+
<div class="input_password">
18+
<p><%= f.label :password_confirmation, t("devise.passwords.edit.confirm_new_password") %></p>
19+
<p><%= f.password_field :password_confirmation, autocomplete: "new-password" %></p>
20+
</div>
21+
22+
<div class="submit">
23+
<%= f.submit t("devise.passwords.edit.change_my_password") %>
24+
</div>
25+
<% end %>
26+
</div>
27+
</div>

‎app/views/devise/passwords/new.html.erb‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="container">
2+
<div class="auth-container">
3+
<h2 class="auth-title"><%= t("devise.passwords.new.forgot_your_password") %></h2>
4+
5+
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
6+
<%= render "devise/shared/error_messages", resource: resource %>
7+
8+
<div class="input">
9+
<p><%= f.label :email, t("devise.passwords.new.email") %></p>
10+
<p><%= f.email_field :email, autofocus: true, autocomplete: "email" %></p>
11+
</div>
12+
13+
<div class="submit">
14+
<%= f.submit t("devise.passwords.new.send_me_reset_password_instructions") %>
15+
</div>
16+
<% end %>
17+
</div>
18+
</div>

‎config/locales/pt-BR/devise.yml‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ pt-BR:
3333
confirmations:
3434
confirmed: A sua conta foi confirmada com sucesso.
3535
new:
36+
title: Confirmação de e-mail
3637
resend_confirmation_instructions: Reenviar instruções de confirmação
3738
send_instructions: Dentro de minutos, você receberá um email com as instruções de confirmação da sua conta.
3839
send_paranoid_instructions: Se o seu e-mail existir em nosso banco de dados, você receberá um email com instruções sobre como confirmar sua conta em alguns minutos.
@@ -50,8 +51,8 @@ pt-BR:
5051
confirmation_instructions:
5152
action: Confirmar minha conta
5253
greeting: Bem-vindo %{recipient}!
53-
instruction: "Você pode confirmar sua conta através do link abaixo:"
54-
subject: Instruções de confirmação
54+
instruction: "Você pode confirmar sua conta através do link abaixo"
55+
subject: Confirmação de conta
5556
email_changed:
5657
greeting: Olá %{recipient}!
5758
message: Estamos entrando em contato para notificá-lo de que seu e-mail está sendo alterado para %{email}.
@@ -64,10 +65,10 @@ pt-BR:
6465
reset_password_instructions:
6566
action: Redefinir minha senha
6667
greeting: Olá %{recipient}!
67-
instruction: Alguém fez o pedido para redefinir sua senha, e você pode fazer isso clicando no link abaixo.
68+
instruction: Recebemos uma solicitação para redefinir sua senha, click no botão abaixo para contiuar.
6869
instruction_2: Se você não fez este pedido, por favor ignore este e-mail.
6970
instruction_3: Sua senha não será alterada até que você acesse o link acima e crie uma nova.
70-
subject: Instruções de redefinição de senha
71+
subject: Redefinição de senha
7172
unlock_instructions:
7273
action: Desbloquear minha conta
7374
greeting: Olá %{recipient}!
@@ -79,11 +80,13 @@ pt-BR:
7980
success: Autorizado com sucesso de uma conta de %{kind}.
8081
passwords:
8182
edit:
83+
minimum_length: "%{count} caracteres no mínimo"
8284
change_my_password: Alterar minha senha
8385
change_your_password: Alterar sua senha
8486
confirm_new_password: Confirme sua nova senha
8587
new_password: Nova senha
8688
new:
89+
email: E-mail
8790
forgot_your_password: Esqueceu sua senha?
8891
send_me_reset_password_instructions: Enviar instruções para redefinição da senha
8992
no_token: Você não pode acessar esta página sem estar logado. Se você veio de um email de redefinição de senha, por favor certifique-se de ter digitado a URL corretamente.

0 commit comments

Comments
 (0)