resend code added

src/main/java/com/example/demo/controller/EmailController.java

@@ -22,10 +22,16 @@ public class EmailController {
     
 
     @PostMapping("/send")
-    public String send(@RequestParam String email) {
-        String otp = emailService.sendOtpEmail(email);
-        return "OTP sent to " + email + " (for demo, OTP: " + otp + ")";
+    public ResponseEntity<?> send(@RequestParam String email) {
+
+        if (!otpStore.canResend(email)) {
+            return ResponseEntity.status(429).body("Please wait before requesting another code.");
+        }
+
+        emailService.sendOtpEmail(email);
+        return ResponseEntity.ok().build();
     }
+
     
     @PostMapping("/verify")
     public ResponseEntity<String> verify(@RequestParam String email, @RequestParam String otp) {

src/main/java/com/example/demo/service/EmailService.java

@@ -14,7 +14,7 @@ public class EmailService {
     @Autowired
     private OtpStore otpStore;
     
-    public String sendOtpEmail(String toEmail) {
+    public void sendOtpEmail(String toEmail) {
         String otp = OtpUtil.generateOtp(6);
         otpStore.save(toEmail, otp);
 
@@ -23,16 +23,12 @@ public class EmailService {
         message.setSubject("Welcome to Thyme Crunch – Verify Your Account");
         message.setText(
             "Welcome to Thyme Crunch!\n\n" +
-            "Thank you for creating an account. To complete your registration, " +
-            "please enter the verification code below:\n\n" +
             "Your verification code: " + otp + "\n\n" +
-            "This code will expire in 5 minutes. If you did not create an account " +
-            "with Thyme Crunch, you can safely ignore this email.\n\n" +
-            "Happy cooking,\n" +
+            "This code will expire in 5 minutes.\n\n" +
+            "If you did not create an account, ignore this email.\n\n" +
             "The Thyme Crunch Team"
         );
 
         mailSender.send(message);
-        return otp;
     }
 }

src/main/java/com/example/demo/service/OtpStore.java

@@ -1,41 +1,63 @@
 package com.example.demo.service;
 
-import java.util.HashMap;
 import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
 
 import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Component;
 
 @Component
 public class OtpStore {
-    private final Map<String, String> otpMap = new HashMap<>();
-    private final Map<String, Long> expiryMap = new HashMap<>();
-    private static final long EXPIRY_MS = 5 * 60 * 1000;
+
+    private final Map<String, String> otpMap = new ConcurrentHashMap<>();
+    private final Map<String, Long> expiryMap = new ConcurrentHashMap<>();
+    private final Map<String, Long> lastSentMap = new ConcurrentHashMap<>();
+
+    private static final long EXPIRY_MS = 5 * 60 * 1000;      // 5 minutes
+    private static final long RESEND_COOLDOWN_MS = 60 * 1000; // 1 minute
+
 
     public void save(String email, String otp) {
         otpMap.put(email, otp);
         expiryMap.put(email, System.currentTimeMillis() + EXPIRY_MS);
+        lastSentMap.put(email, System.currentTimeMillis());
     }
 
+
     public boolean validate(String email, String otp) {
-        if (!expiryMap.containsKey(email) || System.currentTimeMillis() > expiryMap.get(email)) {
-            clear(email); // expired
+        Long expiry = expiryMap.get(email);
+
+        if (expiry == null || System.currentTimeMillis() > expiry) {
+            clear(email);
             return false;
         }
+
         return otp.equals(otpMap.get(email));
     }
 
+    public boolean canResend(String email) {
+        long now = System.currentTimeMillis();
+        long lastSent = lastSentMap.getOrDefault(email, 0L);
+
+        return (now - lastSent) >= RESEND_COOLDOWN_MS;
+    }
+
     public void clear(String email) {
         otpMap.remove(email);
         expiryMap.remove(email);
+        lastSentMap.remove(email);
     }
 
+
     @Scheduled(fixedRate = 120000)
     public void clearExpired() {
         long now = System.currentTimeMillis();
+
         expiryMap.entrySet().removeIf(entry -> {
             if (now > entry.getValue()) {
-                otpMap.remove(entry.getKey());
+                String email = entry.getKey();
+                otpMap.remove(email);
+                lastSentMap.remove(email);
                 return true;
             }
             return false;

src/main/resources/static/css/login.css

@@ -174,6 +174,14 @@ html {
   transition: background-color 0.1s ease, transform 0.2s ease;
 }
 
+#resendBtn:disabled {
+  background-color: #5a2a2a; 
+  color: #d8caa0;       
+  cursor: not-allowed;
+  transform: none;    
+  opacity: 1;           
+}
+
 .login-box button:hover {
   background-color: var(--dusty-red-hover);
   transform: scale(1.05);

src/main/resources/templates/verify.html

@@ -5,7 +5,9 @@
     <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
     <meta name="_csrf" th:content="${_csrf.token}"/>
     <title>Verify Your Thyme Crunch Account</title>
-    <link rel="stylesheet" th:href="@{css/create-account.css}">
+
+    <link rel="stylesheet" th:href="@{/css/login.css}">
+
     <link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
 </head>
 <body>
@@ -13,15 +15,15 @@
 <div class="header-wrap">
     <a th:href="@{/explore}">
         <header class="top-header">
-            <img th:src="@{/images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
+            <img th:src="@{/images/header_left.png}" class="swirl">
             <h1 class="site-name">Thyme Crunch</h1>
-            <img th:src="@{/images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
+            <img th:src="@{/images/header_right.png}" class="swirl">
         </header>
     </a>
 </div>
 
 <div class="align-decor">
-    <img th:src="@{images/decor_left.png}" alt="" class="vert_swirl">
+    <img th:src="@{/images/decor_left.png}" class="vert_swirl">
 
     <main class="main-content">
         <div class="login-box">
@@ -32,19 +34,80 @@
                 <label for="otpInput">Verification Code</label>
                 <input type="text" id="otpInput" maxlength="6" placeholder="000000" required>
             </div>
+
             <p id="message"></p>
+
             <button onclick="verifyOtp()">Verify</button>
+            
+            <p class="resend-text">
+				 Didn’t get the code?
+            <button id="resendBtn" onclick="resendOtp()" disabled>
+                Resend code (60s)
+            </button>
         </div>
     </main>
 
-    <img th:src="@{images/decor_right.png}" alt="" class="vert_swirl">
+    <img th:src="@{/images/decor_right.png}" class="vert_swirl">
 </div>
 
 <script>
+const COOLDOWN_SECONDS = 60;
+let countdownInterval = null;
+
+function startCooldown() {
+    const btn = document.getElementById("resendBtn");
+    let remaining = COOLDOWN_SECONDS;
+
+    btn.disabled = true;
+    btn.textContent = `Resend code (${remaining}s)`;
+
+    countdownInterval = setInterval(() => {
+        remaining--;
+        btn.textContent = `Resend code (${remaining}s)`;
+
+        if (remaining <= 0) {
+            clearInterval(countdownInterval);
+            btn.disabled = false;
+            btn.textContent = "Resend code";
+        }
+    }, 1000);
+}
+
+async function resendOtp() {
+    const email = sessionStorage.getItem("pendingEmail");
+    const message = document.getElementById("message");
+
+    const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute('content');
+    const csrfHeader = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');
+
+    startCooldown();
+
+    try {
+        const response = await fetch(`/api/email/send?email=${encodeURIComponent(email)}`, {
+            method: "POST",
+            headers: { [csrfHeader]: csrfToken }
+        });
+
+        if (response.ok) {
+            message.style.color = "green";
+            message.textContent = "A new code has been sent.";
+        } else {
+            message.style.color = "red";
+            message.textContent = "Couldn't resend code.";
+        }
+    } catch (err) {
+        message.style.color = "red";
+        message.textContent = "Network error.";
+    }
+}
+
+window.addEventListener("DOMContentLoaded", startCooldown);
+
 async function verifyOtp() {
     const otp = document.getElementById("otpInput").value;
     const email = sessionStorage.getItem("pendingEmail");
     const pendingUser = JSON.parse(sessionStorage.getItem("pendingUser"));
+    const message = document.getElementById("message");
 
     const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute('content');
     const csrfHeader = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');
@@ -69,11 +132,11 @@ async function verifyOtp() {
         sessionStorage.removeItem("pendingUser");
 
         message.style.color = "green";
-        message.textContent = "Account verified! Redirecting to login...";
+        message.textContent = "Account verified! Redirecting...";
         setTimeout(() => window.location.href = "/login", 1500);
     } else {
         message.style.color = "red";
-        message.textContent = "Invalid or expired code. Please try again.";
+        message.textContent = "Invalid or expired code.";
     }
 }
 </script>