pdaire · August 8, 2024 20:22
diff --git a/form.html b/form.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WhatsAuth Validation</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .container {
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      max-width: 400px;
      width: 100%;
    }

    h1 {
      font-size: 1.5rem;
      color: #333;
      margin-bottom: 20px;
      text-align: center;
    }

    form {
      display: flex;
      flex-direction: column;
    }

    label {
      margin-bottom: 5px;
      color: #555;
      font-weight: bold;
    }

    input[type="email"],
    input[type="text"] {
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
      color: #333;
      width: 100%;
      box-sizing: border-box;
    }

    input[type="text"]:disabled {
      background-color: #e9ecef;
    }

    .validate-btn,
    .submit-btn {
      padding: 12px;
      border: none;
      border-radius: 4px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      width: 100%;
      margin-bottom: 10px;
    }

    .validate-btn {
      background-color: #28a745;
      color: #fff;
    }

    .validate-btn:hover {
      background-color: #218838;
    }

    .submit-btn {
      background-color: #007bff;
      color: #fff;
    }

    .submit-btn:hover {
      background-color: #0069d9;
    }

    @media (max-width: 600px) {
      .container {
        padding: 15px;
      }

      h1 {
        font-size: 1.25rem;
      }

      input[type="email"],
      input[type="text"] {
        padding: 10px;
        font-size: 0.9rem;
      }

      .validate-btn,
      .submit-btn {
        padding: 10px;
        font-size: 0.9rem;
      }
    }
  </style>
 </head>

 <body>
  <div class="container">
    <h1>Form with WhatsAuth Validation</h1>
    <form id="validateForm" onsubmit="return submitForm()">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <label for="phone">Phone Number:</label>
      <input type="text" id="phone" name="phone" placeholder="Validate using the button" disabled required>

      <button type="button" class="validate-btn" onclick="validate()">Validate phone</button>
      <button type="submit" class="submit-btn">Submit</button>
    </form>
  </div>

  <script>
    let pollInterval;

    function validate() {
      const email = document.getElementById('email').value;

      if (!email) {
        alert('Please enter your email.');
        return;
      }

      // API Request to get the verification link and code
      fetch('https://whatsauth.me/api/v1/verification_code?callback_url=https://eovrfqj1bjbm3o2.m.pipedream.net', {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer MY_APIKEY'
        }
      })
        .then(response => response.json())
        .then(data => {
          const link = data.link;
          const code = data.code;

          // Open the link in a new tab
          window.open(link, '_blank');

          // Start polling to fetch the phone number
          pollInterval = setInterval(() => fetchPhoneNumber(code), 2000);
        })
        .catch(error => console.error('Error:', error));
    }

    function fetchPhoneNumber(code) {
      // API Request to get the phone number using the code
      fetch(`https://whatsauth.me/api/v1/verify?code=${code}`, {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer MY_APIKEY'
        }
      })
        .then(response => response.json())
        .then(data => {
          const phoneNumber = data.phone_number;

          // If phone number is received, populate the phone field and stop polling
          if (phoneNumber) {
            document.getElementById('phone').value = phoneNumber;
            clearInterval(pollInterval);
          }
        })
        .catch(error => console.error('Error:', error));
    }

    function submitForm() {
      const phone = document.getElementById('phone').value;

      if (!phone) {
        alert('Phone number is required.');
        return false;
      }

      // Form submission logic here (e.g., send data to the server)
      alert('Form submitted successfully!');
      return true;
    }
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>WhatsAuth Validation</title>
	<style>
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #f4f4f4;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	}

	.container {
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	max-width: 400px;
	width: 100%;
	}

	h1 {
	font-size: 1.5rem;
	color: #333;
	margin-bottom: 20px;
	text-align: center;
	}

	form {
	display: flex;
	flex-direction: column;
	}

	label {
	margin-bottom: 5px;
	color: #555;
	font-weight: bold;
	}

	input[type="email"],
	input[type="text"] {
	padding: 12px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	color: #333;
	width: 100%;
	box-sizing: border-box;
	}

	input[type="text"]:disabled {
	background-color: #e9ecef;
	}

	.validate-btn,
	.submit-btn {
	padding: 12px;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
	width: 100%;
	margin-bottom: 10px;
	}

	.validate-btn {
	background-color: #28a745;
	color: #fff;
	}

	.validate-btn:hover {
	background-color: #218838;
	}

	.submit-btn {
	background-color: #007bff;
	color: #fff;
	}

	.submit-btn:hover {
	background-color: #0069d9;
	}

	@media (max-width: 600px) {
	.container {
	padding: 15px;
	}

	h1 {
	font-size: 1.25rem;
	}

	input[type="email"],
	input[type="text"] {
	padding: 10px;
	font-size: 0.9rem;
	}

	.validate-btn,
	.submit-btn {
	padding: 10px;
	font-size: 0.9rem;
	}
	}
	</style>
	</head>

	<body>
	<div class="container">
	<h1>Form with WhatsAuth Validation</h1>
	<form id="validateForm" onsubmit="return submitForm()">
	<label for="email">Email:</label>
	<input type="email" id="email" name="email" required>

	<label for="phone">Phone Number:</label>
	<input type="text" id="phone" name="phone" placeholder="Validate using the button" disabled required>

	<button type="button" class="validate-btn" onclick="validate()">Validate phone</button>
	<button type="submit" class="submit-btn">Submit</button>
	</form>
	</div>

	<script>
	let pollInterval;

	function validate() {
	const email = document.getElementById('email').value;

	if (!email) {
	alert('Please enter your email.');
	return;
	}

	// API Request to get the verification link and code
	fetch('https://whatsauth.me/api/v1/verification_code?callback_url=https://eovrfqj1bjbm3o2.m.pipedream.net', {
	method: 'GET',
	headers: {
	'Authorization': 'Bearer MY_APIKEY'
	}
	})
	.then(response => response.json())
	.then(data => {
	const link = data.link;
	const code = data.code;

	// Open the link in a new tab
	window.open(link, '_blank');

	// Start polling to fetch the phone number
	pollInterval = setInterval(() => fetchPhoneNumber(code), 2000);
	})
	.catch(error => console.error('Error:', error));
	}

	function fetchPhoneNumber(code) {
	// API Request to get the phone number using the code
	fetch(`https://whatsauth.me/api/v1/verify?code=${code}`, {
	method: 'GET',
	headers: {
	'Authorization': 'Bearer MY_APIKEY'
	}
	})
	.then(response => response.json())
	.then(data => {
	const phoneNumber = data.phone_number;

	// If phone number is received, populate the phone field and stop polling
	if (phoneNumber) {
	document.getElementById('phone').value = phoneNumber;
	clearInterval(pollInterval);
	}
	})
	.catch(error => console.error('Error:', error));
	}

	function submitForm() {
	const phone = document.getElementById('phone').value;

	if (!phone) {
	alert('Phone number is required.');
	return false;
	}

	// Form submission logic here (e.g., send data to the server)
	alert('Form submitted successfully!');
	return true;
	}
	</script>
	</body>

	</html>