Update templates/index.html

templates/index.html

@@ -84,28 +84,26 @@
     <div class="container" id="registrationForm" style="display: none;">
         <h2>Register</h2>
         <label for="name">Your Name</label>
-        <input type="text" id="name" placeholder="Enter your name" required>
+        <input type="text" id="name" placeholder="Listening for name..." readonly>
 
         <label for="email">Your Email</label>
-        <input type="text" id="email" placeholder="Enter your email" required>
+        <input type="text" id="email" placeholder="Listening for email..." readonly>
 
         <label for="mobile">Your Mobile Number</label>
-        <input type="text" id="mobile" placeholder="Enter your mobile number" required>
+        <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
 
-        <button class="confirm-button" onclick="submitRegistration()">Submit Registration</button>
-        <button class="switch-button" onclick="showLoginForm()">Switch to Login</button>
+        <p class="status" id="registrationStatus">Listening... 🗣</p>
     </div>
 
     <div class="container" id="loginForm" style="display: none;">
         <h2>Login</h2>
         <label for="loginEmail">Your Email</label>
-        <input type="text" id="loginEmail" placeholder="Enter your email" required>
+        <input type="text" id="loginEmail" placeholder="Listening for email..." readonly>
 
         <label for="loginMobile">Your Mobile Number</label>
-        <input type="text" id="loginMobile" placeholder="Enter your mobile number" required>
+        <input type="text" id="loginMobile" placeholder="Listening for mobile number..." readonly>
 
-        <button class="confirm-button" onclick="submitLogin()">Login</button>
-        <button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
+        <p class="status" id="loginStatus">Listening... 🗣</p>
     </div>
 
     <div id="statusMessage" style="display: none;">
@@ -137,8 +135,10 @@
                     recognition.stop();
                     if (response.includes("new")) {
                         showRegistrationForm();
+                        captureName();
                     } else if (response.includes("existing")) {
                         showLoginForm();
+                        captureLoginDetails();
                     } else {
                         speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
                     }
@@ -150,20 +150,104 @@
             document.getElementById('welcomePage').style.display = 'none';
             document.getElementById('registrationForm').style.display = 'block';
             document.getElementById('loginForm').style.display = 'none';
+            document.getElementById('statusMessage').style.display = 'none';
         }
 
         function showLoginForm() {
             document.getElementById('welcomePage').style.display = 'none';
             document.getElementById('registrationForm').style.display = 'none';
             document.getElementById('loginForm').style.display = 'block';
+            document.getElementById('statusMessage').style.display = 'none';
+        }
+
+        function captureName() {
+            speak("Please say your name.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let nameCaptured = event.results[0][0].transcript.trim();
+                    document.getElementById('name').value = nameCaptured;
+                    recognition.stop();
+                    speak("You said " + nameCaptured + ". Is it correct?", function () {
+                        confirmName(nameCaptured);
+                    });
+                };
+            });
+        }
+
+        function confirmName(nameCaptured) {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("yes") || confirmation.includes("ok")) {
+                    captureEmail();
+                } else {
+                    captureName();
+                }
+            };
+        }
+
+        function captureEmail() {
+            speak("Now, say your email.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                    document.getElementById('email').value = emailCaptured;
+                    recognition.stop();
+                    speak("You said " + emailCaptured + ". Is it correct?", function () {
+                        confirmEmail(emailCaptured);
+                    });
+                };
+            });
+        }
+
+        function confirmEmail(emailCaptured) {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("yes") || confirmation.includes("ok")) {
+                    captureMobile();
+                } else {
+                    captureEmail();
+                }
+            };
+        }
+
+        function captureMobile() {
+            speak("Now, say your mobile number.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
+                    document.getElementById('mobile').value = mobileCaptured;
+                    recognition.stop();
+                    speak("You said " + mobileCaptured + ". Is it correct?", function () {
+                        confirmMobile(mobileCaptured);
+                    });
+                };
+            });
+        }
+
+        function confirmMobile(mobileCaptured) {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("yes") || confirmation.includes("ok")) {
+                    // Show confirmation page with details
+                    submitRegistration();
+                } else {
+                    captureMobile();
+                }
+            };
         }
 
         function submitRegistration() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
-            const mobile = document.getElementById('mobile').value;
+            const phone = document.getElementById('mobile').value;
 
-            // Simulate submission (e.g., send data to backend or Salesforce)
+            // Simulate submission
             document.getElementById('statusText').textContent = `Thank you for registering, ${name}!`;
             document.getElementById('statusMessage').style.display = 'block';
             setTimeout(() => {
@@ -171,12 +255,66 @@
             }, 3000);
         }
 
+        function captureLoginDetails() {
+            speak("Please say your email for login.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                    document.getElementById('loginEmail').value = emailCaptured;
+                    recognition.stop();
+                    speak("You said " + emailCaptured + ". Is it correct?", function () {
+                        confirmLoginEmail(emailCaptured);
+                    });
+                };
+            });
+        }
+
+        function confirmLoginEmail(emailCaptured) {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("yes") || confirmation.includes("ok")) {
+                    captureLoginMobile();
+                } else {
+                    captureLoginDetails();
+                }
+            };
+        }
+
+        function captureLoginMobile() {
+            speak("Now, say your mobile number.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
+                    document.getElementById('loginMobile').value = mobileCaptured;
+                    recognition.stop();
+                    speak("You said " + mobileCaptured + ". Is it correct?", function () {
+                        confirmLoginMobile(mobileCaptured);
+                    });
+                };
+            });
+        }
+
+        function confirmLoginMobile(mobileCaptured) {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("yes") || confirmation.includes("ok")) {
+                    submitLogin();
+                } else {
+                    captureLoginMobile();
+                }
+            };
+        }
+
         function submitLogin() {
-            const email = document.getElementById('loginEmail').value;
-            const mobile = document.getElementById('loginMobile').value;
+            const loginEmail = document.getElementById('loginEmail').value;
+            const loginMobile = document.getElementById('loginMobile').value;
 
-            // Simulate login check (e.g., match against backend or Salesforce)
-            if (email && mobile) {
+            // Simulate login check
+            if (loginEmail && loginMobile) {
                 document.getElementById('statusText').textContent = 'Login successful! Redirecting...';
                 document.getElementById('statusMessage').style.display = 'block';
                 setTimeout(() => {