Skip to content

Commit 69b6628

Browse files
anuragSharma1112anuragSharma1112
authored
complete UI for visitor Registration (#63)
1 parent 18e9c0c commit 69b6628

5 files changed

Lines changed: 141 additions & 28 deletions

File tree

‎web-backend/src/main/java/com/statusneo/vms/controller/VisitorController.java‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -130,18 +130,10 @@ public ResponseEntity<String> saveVisitor(@RequestBody Visitor visitor) {
130130
}
131131

132132
@PostMapping("/register")
133-
public ResponseEntity<?> registerVisitor(@RequestBody Visitor visitor) {
134-
try {
135-
if (visitor.getEmail() == null || visitor.getEmail().isEmpty()) {
136-
return ResponseEntity.badRequest().body("Email is required");
137-
}
138-
// Register visit and send OTP
139-
Visit savedVisit = visitService.registerVisit(visitor);
140-
return ResponseEntity.ok("Visitor registered successfully. Visit ID: " + savedVisit.getId());
141-
} catch (Exception e) {
142-
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
143-
.body("Error registering visitor: " + e.getMessage());
144-
}
133+
public String registerVisitor(@ModelAttribute Visitor visitor, Model model) {
134+
Visit savedVisit = visitService.registerVisit(visitor);
135+
model.addAttribute("visitId", savedVisit.getId());
136+
return "visitorOtpForm";
145137
}
146138

147139
@PostMapping("/confirm-visit")

‎web-backend/src/main/java/com/statusneo/vms/model/Employee.java‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ public void setName(String name){
4949
this.name = name;
5050
}
5151

52+
public Long getId() {
53+
return id;
54+
}
55+
5256
public Employee(String name) {
5357
this.name = name;
5458
}

‎web-backend/src/main/jte/visitConfirmationResult.jte‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,36 @@
33
@param Long visitId
44

55
<!DOCTYPE html>
6-
<html>
6+
<html lang="en">
77
<head>
8-
<title>Visit Confirmation</title>
8+
<meta charset="UTF-8">
9+
<title>Visit Confirmation Result</title>
10+
<script src="https://cdn.tailwindcss.com"></script>
911
</head>
10-
<body>
11-
<h1>Visit Confirmation Result</h1>
12+
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
13+
<div class="bg-white p-8 rounded-2xl shadow-lg w-full max-w-md text-center">
14+
<h1 class="text-2xl font-bold mb-6 text-gray-700">Visit Confirmation</h1>
1215

13-
#if(result.success())
14-
<p style="color: green;">${result.message()}</p>
15-
#else
16-
<p style="color: red;">${result.message()}</p>
17-
#if(result.reattempt())
18-
<form action="/api/visitors/resend-otp" method="post">
19-
<input type="hidden" name="visitId" value="${visitId}" />
20-
<button type="submit">Resend OTP</button>
21-
</form>
22-
#endif
23-
#endif
16+
#if(result.success())
17+
<p class="text-green-600 font-medium mb-6">${result.message()}</p>
18+
#else
19+
<p class="text-red-600 font-medium mb-6">${result.message()}</p>
2420

25-
<a href="/api/visitors/confirm-form">Back</a>
21+
#if(result.reattempt())
22+
<form action="/api/visitors/resend-otp" method="post" class="mb-4">
23+
<input type="hidden" name="visitId" value="${visitId}" />
24+
<button type="submit"
25+
class="w-full bg-yellow-500 text-white py-3 rounded-lg hover:bg-yellow-600 transition">
26+
Resend OTP
27+
</button>
28+
</form>
29+
#endif
30+
#endif
31+
32+
<a href="/api/visitors/confirm-form"
33+
class="inline-block mt-4 text-blue-500 hover:underline">
34+
Back to Confirmation
35+
</a>
36+
</div>
2637
</body>
2738
</html>

‎web-backend/src/main/jte/visitorOtpForm.jte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@param Long visitId
2+
3+
<!DOCTYPE html>
4+
<html>
5+
<head>
6+
<title>OTP Verification</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
</head>
9+
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
10+
<div class="bg-white shadow-lg rounded-2xl p-8 w-full max-w-md">
11+
<h1 class="text-2xl font-bold text-center mb-6 text-gray-800">OTP Verification</h1>
12+
13+
<form action="/api/visitors/verify-otp" method="post" class="space-y-6">
14+
<!-- Hidden visitId -->
15+
<input type="hidden" name="visitId" value="${visitId}" />
16+
17+
<!-- OTP input -->
18+
<div>
19+
<label for="otp" class="block text-sm font-medium text-gray-700 mb-2">Enter OTP</label>
20+
<input type="text" id="otp" name="otp"
21+
class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
22+
placeholder="Enter the OTP" required />
23+
</div>
24+
25+
<!-- Submit -->
26+
<button type="submit"
27+
class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-200">
28+
Verify OTP
29+
</button>
30+
</form>
31+
32+
<div class="mt-4 text-center">
33+
<a href="/api/visitors/confirm-form"
34+
class="text-blue-600 hover:underline text-sm">Back</a>
35+
</div>
36+
</div>
37+
</body>
38+
</html>

‎web-backend/src/main/jte/visitorRegistration.jte‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import com.statusneo.vms.model.Employee
2+
@import java.util.List
3+
@param List<Employee> employees
4+
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8">
9+
<title>Visitor Registration</title>
10+
<script src="https://cdn.tailwindcss.com"></script>
11+
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
12+
</head>
13+
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
14+
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-lg">
15+
<h2 class="text-2xl font-bold mb-6 text-center">Visitor Registration</h2>
16+
17+
<!-- Registration Form -->
18+
<form id="visitorForm"
19+
hx-post="/api/visitors/register"
20+
hx-target="#formResponse"
21+
hx-swap="innerHTML"
22+
class="space-y-4">
23+
24+
<div>
25+
<label class="block text-gray-700">Full Name</label>
26+
<input type="text" name="name" required
27+
class="w-full border border-gray-300 p-2 rounded"/>
28+
</div>
29+
30+
<div>
31+
<label class="block text-gray-700">Email</label>
32+
<input type="email" name="email" required
33+
class="w-full border border-gray-300 p-2 rounded"/>
34+
</div>
35+
36+
<div>
37+
<label class="block text-gray-700">Phone Number</label>
38+
<input type="text" name="phoneNumber" pattern="\d{10}" required
39+
class="w-full border border-gray-300 p-2 rounded"/>
40+
</div>
41+
42+
<div>
43+
<label class="block text-gray-700">Address</label>
44+
<textarea name="address" rows="2" required
45+
class="w-full border border-gray-300 p-2 rounded"></textarea>
46+
</div>
47+
48+
<div>
49+
<label class="block text-gray-700">Host (Employee)</label>
50+
<select name="hostId" required
51+
class="w-full border border-gray-300 p-2 rounded">
52+
<option value="">Select Host</option>
53+
@for(Employee employee : employees)
54+
<option value="${employee.getId()}">${employee.getName()} (${employee.getEmail()})</option>
55+
@endfor
56+
</select>
57+
</div>
58+
59+
<button type="submit"
60+
class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700">
61+
Register Visitor
62+
</button>
63+
</form>
64+
65+
<div id="formResponse" class="mt-6"></div>
66+
</div>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)