Skip to content

Commit b727578

Browse files
ThroyerThroyer
committed
Improve recovery forms
1 parent 0898234 commit b727578

File tree

7 files changed

+177
-149
lines changed

7 files changed

+177
-149
lines changed

‎src/main/java/com/github/throyer/common/springboot/domain/services/user/dto/Update.java

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
package com.github.throyer.common.springboot.domain.services.user.dto;
22

3-
import static com.github.throyer.common.springboot.domain.services.user.dto.CreateUserApi.STRONG_PASSWORD;
4-
import static com.github.throyer.common.springboot.domain.services.user.dto.CreateUserApi.STRONG_PASSWORD_MESSAGE;
53
import javax.validation.constraints.Email;
64
import javax.validation.constraints.NotEmpty;
75
import javax.validation.constraints.NotNull;
8-
import javax.validation.constraints.Pattern;
6+
import javax.validation.constraints.Size;
97
import lombok.Data;
108
import lombok.NoArgsConstructor;
119
import org.springframework.beans.BeanUtils;
1210
import org.springframework.validation.BindingResult;
13-
import org.springframework.validation.ObjectError;
1411

1512
@Data
1613
@NoArgsConstructor
1714
public class Update {
1815

19-
private static final String CONFIRM_ERROR_MESSAGE = "Valor informado na confirmação de senha invalido.";
20-
2116
@Email
2217
@NotNull
2318
@NotEmpty
@@ -29,21 +24,14 @@ public class Update {
2924
private String fourth = "";
3025

3126
@NotEmpty(message = "Por favor, forneça uma senha.")
32-
@Pattern(regexp = STRONG_PASSWORD, message = STRONG_PASSWORD_MESSAGE)
27+
@Size(min = 8, max = 255, message = "A senha deve conter no minimo {min} caracteres.")
3328
private String password;
3429

35-
@NotEmpty(message = "Por favor, confirme a senha.")
36-
private String confirmPassword;
37-
3830
public Update(Codes codes) {
3931
BeanUtils.copyProperties(codes, this);
4032
}
4133

42-
public void validate(BindingResult result) {
43-
if (!getConfirmPassword().equals(getPassword())) {
44-
result.addError(new ObjectError("confirmPassowrd", CONFIRM_ERROR_MESSAGE));
45-
}
46-
}
34+
public void validate(BindingResult result) { }
4735

4836
public String code() {
4937
return String.format("%s%s%s%s", first, second, third, fourth);

‎src/main/resources/static/css/register.css renamed to ‎src/main/resources/static/css/center-forms.css

File renamed without changes.

‎src/main/resources/templates/app/recovery/confirm.html

Lines changed: 66 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,75 @@
1-
<layout th:replace="~{app/fragments/layout :: layout(~{::title}, ~{::link}, ~{::main}, ~{::script}, ~{})}">
1+
<layout th:replace="~{app/fragments/layout :: layout(~{::title}, ~{::links}, ~{::main}, ~{::script}, ~{})}">
22
<title>Register</title>
3-
<link rel="stylesheet" type="text/css" th:href="@{/css/forms.css}">
4-
<link rel="stylesheet" type="text/css" th:href="@{/css/codes.css}">
3+
<links>
4+
<link rel="stylesheet" type="text/css" th:href="@{/css/forms.css}">
5+
<link rel="stylesheet" type="text/css" th:href="@{/css/codes.css}">
6+
<link rel="stylesheet" type="text/css" th:href="@{/css/center-forms.css}">
7+
</links>
58
<main class="container">
6-
<i class="fas fa-user fa-6x mb-2"></i>
7-
<h1>Recovery</h1>
8-
<form autocomplete="off" th:object="${codes}" class="needs-validation" novalidate th:action="@{/app/recovery/confirm}" method="POST">
9-
<input
10-
th:field="*{email}"
11-
type="email"
12-
hidden
13-
>
14-
<label for="input_email" class="form-label mt-4">Recovery code</label>
15-
<div class="codes">
16-
<div class="code">
17-
<input
18-
th:field="*{first}"
19-
type="number"
20-
class="form-control"
21-
maxlength="1"
22-
required
23-
>
9+
<form
10+
autocomplete="off"
11+
th:object="${codes}"
12+
class="needs-validation shadow-sm p-3 mb-5 bg-body rounded"
13+
novalidate
14+
th:action="@{/app/recovery/confirm}"
15+
method="POST"
16+
>
17+
<div class="row">
18+
<div class="col-md-12">
19+
<h1 class="fs-3 text-center">
20+
<i class="fas fa-fingerprint"></i>
21+
Confirm
22+
</h1>
2423
</div>
25-
<div class="code">
26-
<input
27-
th:field="*{second}"
28-
type="number"
29-
class="form-control"
30-
maxlength="1"
31-
required
32-
>
33-
</div>
34-
<div class="code">
35-
<input
36-
th:field="*{third}"
37-
type="number"
38-
class="form-control"
39-
maxlength="1"
40-
required
41-
>
42-
</div>
43-
<div class="code">
44-
<input
45-
th:field="*{fourth}"
46-
type="number"
47-
class="form-control"
48-
maxlength="1"
49-
required
50-
>
24+
</div>
25+
<div class="row">
26+
<input
27+
th:field="*{email}"
28+
type="email"
29+
hidden
30+
>
31+
<label for="input_email" class="form-label mt-4 text-center">Recovery code</label>
32+
<div class="codes">
33+
<div class="code">
34+
<input
35+
th:field="*{first}"
36+
type="number"
37+
class="form-control"
38+
maxlength="1"
39+
required
40+
>
41+
</div>
42+
<div class="code">
43+
<input
44+
th:field="*{second}"
45+
type="number"
46+
class="form-control"
47+
maxlength="1"
48+
required
49+
>
50+
</div>
51+
<div class="code">
52+
<input
53+
th:field="*{third}"
54+
type="number"
55+
class="form-control"
56+
maxlength="1"
57+
required
58+
>
59+
</div>
60+
<div class="code">
61+
<input
62+
th:field="*{fourth}"
63+
type="number"
64+
class="form-control"
65+
maxlength="1"
66+
required
67+
>
68+
</div>
5169
</div>
5270
</div>
5371
<div class="submit-container mt-4">
54-
<a th:href="@{/app/login}" class="btn btn-primary" role="button">Back</a>
72+
<a th:href="@{/app/recovery}" class="btn btn-primary" role="button">Back</a>
5573
<button class="btn btn-primary" type="submit">Submit</button>
5674
</div>
5775
</form>

‎src/main/resources/templates/app/recovery/index.html

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
1-
<layout th:replace="~{app/fragments/layout :: layout(~{::title}, ~{::link}, ~{::main}, ~{::script}, ~{})}">
1+
<layout th:replace="~{app/fragments/layout :: layout(~{::title}, ~{::links}, ~{::main}, ~{::script}, ~{})}">
22
<title>Register</title>
3-
<link rel="stylesheet" type="text/css" th:href="@{/css/forms.css}">
3+
<links>
4+
<link rel="stylesheet" type="text/css" th:href="@{/css/forms.css}">
5+
<link rel="stylesheet" type="text/css" th:href="@{/css/center-forms.css}">
6+
</links>
47
<main class="container">
5-
<i class="fas fa-user fa-6x mb-2"></i>
6-
<h1>Recovery</h1>
7-
<form th:object="${recovery}" class="needs-validation" novalidate th:action="@{/app/recovery}" method="POST">
8-
<div class="row">
9-
<div class="col-md-12 mt-4">
10-
<label for="input_email" class="form-label">E-mail</label>
8+
<form
9+
novalidate
10+
method="POST"
11+
autocomplete="off"
12+
class="needs-validation shadow-sm p-3 mb-5 bg-body rounded"
13+
th:object="${recovery}"
14+
th:action="@{/app/recovery}"
15+
th:fragment="form-register"
16+
>
17+
<div class="row gap-3">
18+
<div class="col-md-12">
19+
<h1 class="fs-3 text-center">
20+
<i class="far fa-envelope"></i>
21+
Recovery
22+
</h1>
23+
</div>
24+
<div class="col-md-12">
1125
<input
12-
th:field="*{email}"
26+
required
1327
type="email"
14-
class="form-control"
15-
id="input_name"
1628
autocomplete="email"
17-
required
29+
placeholder="E-mail"
30+
id="input_name"
31+
class="form-control form-control-sm"
32+
th:field="*{email}"
1833
>
1934
<div class="invalid-feedback">
20-
Por favor, informe o email.
35+
<small>Por favor, informe o email.</small>
2136
</div>
2237
</div>
2338
</div>

‎src/main/resources/templates/app/recovery/update.html

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,89 @@
11
<layout th:replace="~{app/fragments/layout :: layout(~{::title}, ~{::link}, ~{::main}, ~{::script}, ~{})}">
22
<title>Register</title>
3-
<link rel="stylesheet" type="text/css" th:href="@{/css/forms.css}">
4-
<link rel="stylesheet" type="text/css" th:href="@{/css/codes.css}">
3+
<links>
4+
<link rel="stylesheet" type="text/css" th:href="@{/css/forms.css}">
5+
<link rel="stylesheet" type="text/css" th:href="@{/css/codes.css}">
6+
<link rel="stylesheet" type="text/css" th:href="@{/css/center-forms.css}">
7+
</links>
58
<main class="container">
6-
<i class="fas fa-user fa-6x mb-2"></i>
7-
<h1>Recovery</h1>
8-
<form autocomplete="off" th:object="${update}" class="needs-validation" novalidate th:action="@{/app/recovery/update}" method="POST">
9-
<input
10-
th:field="*{email}"
11-
type="email"
12-
hidden
13-
>
14-
<div class="codes">
15-
<div class="code">
16-
<input
17-
th:field="*{first}"
18-
type="number"
19-
hidden
20-
maxlength="1"
21-
required
22-
>
23-
</div>
24-
<div class="code">
25-
<input
26-
th:field="*{second}"
27-
type="number"
28-
hidden
29-
maxlength="1"
30-
required
31-
>
9+
<form
10+
autocomplete="off"
11+
th:object="${update}"
12+
class="needs-validation shadow-sm p-3 mb-5 bg-body rounded"
13+
novalidate
14+
th:action="@{/app/recovery/update}"
15+
method="POST"
16+
>
17+
<div class="row">
18+
<input
19+
th:field="*{email}"
20+
type="email"
21+
hidden
22+
>
23+
<div class="codes">
24+
<div class="code">
25+
<input
26+
th:field="*{first}"
27+
type="number"
28+
hidden
29+
maxlength="1"
30+
required
31+
>
32+
</div>
33+
<div class="code">
34+
<input
35+
th:field="*{second}"
36+
type="number"
37+
hidden
38+
maxlength="1"
39+
required
40+
>
41+
</div>
42+
<div class="code">
43+
<input
44+
th:field="*{third}"
45+
type="number"
46+
hidden
47+
maxlength="1"
48+
required
49+
>
50+
</div>
51+
<div class="code">
52+
<input
53+
th:field="*{fourth}"
54+
type="number"
55+
hidden
56+
maxlength="1"
57+
required
58+
>
59+
</div>
3260
</div>
33-
<div class="code">
34-
<input
35-
th:field="*{third}"
36-
type="number"
37-
hidden
38-
maxlength="1"
39-
required
40-
>
61+
62+
</div>
63+
<div class="row gap-3">
64+
<div class="col-md-12">
65+
<h1 class="fs-3 text-center">
66+
<i class="fas fa-key"></i>
67+
New password
68+
</h1>
4169
</div>
42-
<div class="code">
70+
<div class="col-md-12">
4371
<input
44-
th:field="*{fourth}"
45-
type="number"
46-
hidden
47-
maxlength="1"
4872
required
49-
>
50-
</div>
51-
</div>
52-
<div class="row">
53-
<div class="col-md-12 mt-4">
54-
<label for="input_password" class="form-label">Password</label>
55-
<input
56-
th:field="*{password}"
5773
type="password"
5874
autocomplete="new-password"
59-
class="form-control"
75+
placeholder="New password"
6076
id="input_password"
61-
required
62-
>
63-
<div class="invalid-feedback">
64-
Por favor, informe a senha.
65-
</div>
66-
</div>
67-
</div>
68-
<div class="row">
69-
<div class="col-md-12 mt-4">
70-
<label for="input_confirm_password" class="form-label">Confirm password</label>
71-
<input
72-
th:field="*{confirmPassword}"
73-
type="password"
74-
class="form-control"
75-
id="input_confirm_password"
76-
required
77+
class="form-control form-control-sm"
78+
th:field="*{password}"
7779
>
7880
<div class="invalid-feedback">
79-
Por favor, confirme a senha.
81+
<small>Por favor, informe a senha.</small>
8082
</div>
8183
</div>
8284
</div>
8385
<div class="submit-container mt-4">
84-
<a th:href="@{/app/login}" class="btn btn-primary" role="button">Back</a>
86+
<a th:href="@{/app/recovery}" class="btn btn-primary" role="button">Back</a>
8587
<button class="btn btn-primary" type="submit">Submit</button>
8688
</div>
8789
</form>

0 commit comments

Comments
 (0)