templates/mobile/mobile.html.twig line 1

Open in your IDE?
  1. {% extends 'basic.html.twig' %}
  3. {% block title %}{{ site_name }} - First ID Demo{% endblock %}
  5. {% block body %}
  6. <div class="container">
  7.     <div class="row">
  8.         <div class="col-md-12">
  9.             <h3>First ID: <span id="firstid"></span></h3>
  10.         </div>
  11.     </div>
  12.     <div class="row mt-4">
  13.         <div class="col-md-4">
  14.             <h4>MAID:</h4>
  15.             <input type="text" id="maidInput" class="mb-2 form-control" placeholder="Enter or generate MAID">
  16.             <button id="generateMaid" class="btn btn-secondary">Generate New MAID</button>
  17.         </div>
  18.         <div class="col-md-4">
  19.             <h4>Email:</h4>
  20.             <input type="text" id="emailInput" class="mb-2 form-control" placeholder="Enter or generate Email">
  21.             <button id="generateEmail" class="btn btn-secondary">Generate New Email</button>
  22.         </div>
  23.         <div class="col-md-4">
  24.             <h4>Configuration:</h4>
  25.             <form id="configForm">
  26.                 <div class="mb-2">
  27.                     <label for="deviceType" class="form-label">Device Type:</label>
  28.                     <select id="deviceType" class="form-select" name="deviceType">
  29.                         <option value="web">Web</option>
  30.                         <option value="mobile">Mobile</option>
  31.                         <option value="tablet">Tablet</option>
  32.                     </select>
  33.                 </div>
  34.                 <div class="mb-2">
  35.                     <label for="deviceManufacturer" class="form-label">Device Manufacturer:</label>
  36.                     <input type="text" id="deviceManufacturer" class="form-control" name="deviceManufacturer">
  37.                 </div>
  38.                 <div class="mb-2">
  39.                     <label for="osVersion" class="form-label">OS Version:</label>
  40.                     <input type="text" id="osVersion" class="form-control" name="osVersion">
  41.                 </div>
  42.                 <div class="mb-2">
  43.                     <label for="buildId" class="form-label">Build ID:</label>
  44.                     <input type="text" id="buildId" class="form-control" name="buildId">
  45.                 </div>
  46.                 <div class="mb-2">
  47.                     <label for="deviceModel" class="form-label">Device Model:</label>
  48.                     <input type="text" id="deviceModel" class="form-control" name="deviceModel">
  49.                 </div>
  50.                 <div class="mb-2">
  51.                     <label for="deviceResolution" class="form-label">Device Resolution:</label>
  52.                     <input type="text" id="deviceResolution" class="form-control" name="deviceResolution" placeholder="e.g., 1920x1080">
  53.                 </div>
  54.                 <div class="mb-2">
  55.                     <label for="deviceRam" class="form-label">Device RAM (MB):</label>
  56.                     <input type="number" id="deviceRam" class="form-control" name="deviceRam">
  57.                 </div>
  58.             </form>
  59.             <button id="generateConfig" class="btn btn-secondary">Generate New Config</button>
  60.         </div>
  61.     </div>
  62.     <div class="mt-4 row">
  63.         <div class="col-md-12">
  64.             <button id="linkEntities" class="btn btn-primary">Link Entities</button>
  65.             <div id="result" class="mt-3"></div>
  66.         </div>
  67.     </div>
  68.     <div class="mt-4 row">
  69.         <div class="col-md-12">
  70.             <h4>History</h4>
  71.             <ul id="history" class="list-group"></ul>
  72.         </div>
  73.     </div>
  74. </div>
  76. <script>
  77.     const API_BASE_URL = 'https://api.preprod.first-id.fr';
  78.     let currentMaid = '';
  79.     let currentEmail = '';
  80.     let currentConfig = {};
  81.     let history = [];
  83.     function addToHistory(maid, email, config, fid, matchingStatus) {
  84.         const newEntry = `MAID: ${maid}, Email: ${email}, Config: ${JSON.stringify(config)}, FID: ${fid}, Matching Status: ${matchingStatus}`;
  85.         history.push(newEntry);
  86.         const historyElement = document.getElementById('history');
  87.         const li = document.createElement('li');
  88.         li.classList.add('list-group-item');
  89.         li.textContent = newEntry;
  90.         historyElement.appendChild(li);
  91.     }
  93.     async function sha256(message) {
  94.         const encoder = new TextEncoder();
  95.         const data = encoder.encode(message);
  96.         const hash = await crypto.subtle.digest('SHA-256', data);
  97.         const hashArray = Array.from(new Uint8Array(hash));
  98.         const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  99.         return hashHex;
  100.     }
  102.     function updateConfigForm(config) {
  103.         for (const [key, value] of Object.entries(config)) {
  104.             const element = document.getElementById(key);
  105.             if (element) {
  106.                 element.value = value;
  107.             }
  108.         }
  109.     }
  111.     function getConfigFromForm() {
  112.         const form = document.getElementById('configForm');
  113.         const formData = new FormData(form);
  114.         const config = {};
  115.         for (const [key, value] of formData.entries()) {
  116.             config[key] = value;
  117.         }
  118.         return config;
  119.     }
  121.     document.getElementById('generateMaid').addEventListener('click', function() {
  122.         fetch('/mobile/generate-maid')
  123.             .then(response => response.json())
  124.             .then(data => {
  125.                 currentMaid = data.maid;
  126.                 document.getElementById('maidInput').value = currentMaid;
  127.             })
  128.             .catch(error => {
  129.                 console.error('Error:', error);
  130.             });
  131.     });
  133.     document.getElementById('generateEmail').addEventListener('click', function() {
  134.         fetch('/mobile/generate-email')
  135.             .then(response => response.json())
  136.             .then(async data => {
  137.                 currentEmail = await sha256(data.email);
  138.                 document.getElementById('emailInput').value = currentEmail;
  139.             })
  140.             .catch(error => {
  141.                 console.error('Error:', error);
  142.             });
  143.     });
  145.     document.getElementById('generateConfig').addEventListener('click', function() {
  146.         fetch('/mobile/generate-config')
  147.             .then(response => response.json())
  148.             .then(data => {
  149.                 currentConfig = data.config;
  150.                 updateConfigForm(currentConfig);
  151.             })
  152.             .catch(error => {
  153.                 console.error('Error:', error);
  154.             });
  155.     });
  157.     document.getElementById('linkEntities').addEventListener('click', function() {
  158.         currentMaid = document.getElementById('maidInput').value;
  159.         currentEmail = document.getElementById('emailInput').value;
  160.         currentConfig = getConfigFromForm();
  162.         const deviceDataInput = {
  163.             deviceType: currentConfig.deviceType,
  164.             deviceManufacturer: currentConfig.deviceManufacturer,
  165.             osVersion: currentConfig.osVersion,
  166.             buildId: currentConfig.buildId,
  167.             deviceModel: currentConfig.deviceModel,
  168.             deviceResolution: currentConfig.deviceResolution,
  169.             deviceRam: currentConfig.deviceRam,
  170.         };
  172.         fetch(`${API_BASE_URL}/mobile/client`, {
  173.             method: 'POST',
  174.             headers: {
  175.                 'Content-Type': 'application/json',
  176.             },
  177.             body: JSON.stringify({
  178.                 maid: currentMaid,
  179.                 email: currentEmail,
  180.                 ...deviceDataInput,
  181.                 dfid: "true"
  182.             }),
  183.             // mode: 'cors' // This explicitly declares we're making a CORS request
  184.             mode: "no-cors",
  185.             credentials: 'include',
  186.         })
  187.         .then(response => response.json())
  188.         .then(data => {
  189.             console.log("result", data);
  190.             if (data.firstId) {
  191.                 document.getElementById('firstid').textContent = data.firstId;
  192.                 document.getElementById('result').textContent = `Entities linked successfully. Matching status: ${data.matchingStatus}`;
  193.                 addToHistory(currentMaid, currentEmail, deviceDataInput, data.firstId, data.matchingStatus);
  194.             } else {
  195.                 document.getElementById('result').textContent = 'Error: ' + (data.message || 'Unknown error occurred');
  196.             }
  197.         })
  198.         .catch(error => {
  199.             document.getElementById('result').textContent = 'Error: ' + error;
  200.         });
  201.     });
  202. </script>
  203. {% endblock %}