From e23cfbec1d768af83892ea32e0d3603d4233ee3c Mon Sep 17 00:00:00 2001
From: Scott Sundahl <scott.sundahl@thetradedesk.com>
Date: Wed, 20 Nov 2024 16:30:20 -0700
Subject: [PATCH 1/3] it works

---
 src/routes/index.ts  |  15 ++-
 views_euid/index.hbs | 310 +++++++++++++++++++++++++++++++------------
 2 files changed, 234 insertions(+), 91 deletions(-)
diff --git a/src/routes/index.ts b/src/routes/index.ts
index bd0926f..b7a3daa 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -68,13 +68,14 @@ const handleEmailPromptSubmission: RequestHandler<{}, z.infer<typeof EmailPrompt
 
 
   let idInput = '';
-  if (ID_TYPE === 'EUID') {
-    if (!isValidEmail(email)) {
-      res.render('index', { email, countryList, error: i18n.__('Please enter a valid email address') });
-      return;
-    }
-    idInput = email;
-  } else if (idType === 'email') {
+  // if (ID_TYPE === 'EUID') {
+  //   if (!isValidEmail(email)) {
+  //     res.render('index', { email, countryList, error: i18n.__('Please enter a valid email address') });
+  //     return;
+  //   }
+  //   idInput = email;
+  // } else 
+  if (idType === 'email') {
     if (!isValidEmail(email)) {
       res.render('index', { email, countryList, error: i18n.__('Please enter a valid email address') });
       return;
diff --git a/views_euid/index.hbs b/views_euid/index.hbs
index 8bf38d7..9e38c7d 100644
--- a/views_euid/index.hbs
+++ b/views_euid/index.hbs
@@ -1,85 +1,227 @@
-<html>
-
-<head>
-  <meta charset='UTF-8' />
-  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-  <link rel='shortcut icon' href='/images/favicon.png' />
-  <meta name='og:type' content='website' />
-  {{{recaptchaScript}}}
-  <link rel='stylesheet' type='text/css' href='/stylesheets/index.css' />
-  <link rel='stylesheet' type='text/css' href='/stylesheets/style.css' />
-</head>
-
-<body style='margin: 0; background: rgba(255, 255, 255, 1)'>
-  <input type='hidden' id='anPageName' name='page' value='desktop-1' />
-  <div class='main'>
-    <div class='main-content'>
-      <h1 class='main-content__header'>
-        {{__ 'euid-portal-title'}}
-      </h1>
-      <div class='main-content__divider'></div>
-      <p class='main-content__description'>
-        {{__ 'euid-this-site-allows-you' }}
-      </p>
-      <p class='main-content__description'>
-        {{__ 'euid-transforms-your-email-address' }}
-      </p>
-      <p class='main-content__description'>
-        {{__ 'euid-by-entering-your-email-below' }}
-      </p>
-      {{#if error}}
-      <p class='error'>
-        {{error}}
-      </p>
-      {{/if}}
-      {{#if message}}
-      <p class='message'>
-        {{message}}
-      </p>
-      {{/if}}
-      <form class='main-content__form' id='email_prompt' action='/' method='post'>
-        {{{siteKeyInput}}}
-        <input type='hidden' name='step' value='email_prompt' />
-        <input type='hidden' id='recaptcha' name='recaptcha' />
-        <div class='form__input-container'>
-          <input type='text' class='form__input' name='email' placeholder='{{__ "Enter your email address"}}' value='{{email}}' />
-        </div>
-        <button>
-          {{__ 'NEXT'}}
-        </button>
-      </form>
-      <p class='main-content__description'>
-        {{__ "euid-for-more-information" }}
-        <a href='/privacy'>{{__ 'euid-privacy-notice'}}</a>.
-      </p>
-      <a target="_blank" href="https://www.thetradedesk.com/us/trust/report-a-vulnerability" class="vulnerability-link">{{__ 'Report-vulnerability'}}</a>
-      <script>
-        const form = document.getElementById("email_prompt");
-        form.addEventListener("submit", onSubmit); function onSubmit(e) {
-          e.preventDefault(); grecaptcha.ready(function () {
-            const key =
-              document.getElementById('recpatchaSiteKey').value;
-            grecaptcha.execute(key, { action: 'email_prompt' }).then(function
-              (token) {
-                document.getElementById('recaptcha').value = token;
-              form.submit();
-            });
-          });
-        }
-      </script>
-    </div>
-    <div class='main__footer'>
-      <h3 class='main__logo-label'>Powered by</h3>
-      <img class='main__logo' src='/images/EUID.png' />
-    </div>
-  </div>
-  <script> 
-    window.onload = function () {
-      if (window.location.href.includes('#/privacynotice')) {
-        window.location.href = '/privacy';
-      }
-    };
-  </script>
-</body>
-
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="/images/favicon.png" />
+  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
+  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
+  <script>
+    $(function () {
+      $.widget("custom.iconselectmenu", $.ui.selectmenu, {
+        _renderItem: function (ul, item) {
+          var li = $("<li>"),
+            wrapper = $("<div>", { text: item.label });
+
+          if (item.disabled) {
+            li.addClass("ui-state-disabled");
+          }
+
+          $("<span>", {
+            style: item.element.attr("data-style"),
+            "class": "ui-icon " + item.element.attr("data-class")
+          })
+            .appendTo(wrapper);
+
+          return li.append(wrapper).appendTo(ul);
+        },
+        _renderButtonItem: function (item) {
+          var buttonItem = $("<span>", {
+            "class": "ui-selectmenu-text"
+          });
+          if (item.value !== "") {
+            let callingCode = item.label.substring(item.label.indexOf("+"))
+            this._setText(buttonItem, callingCode);
+          } else {
+            this._setText(buttonItem, "Country");
+          }
+          return buttonItem;
+        }
+      });
+
+      $("#input_country_code")
+        .iconselectmenu({
+          create: function (event, ui) {
+            var widget = $(this).iconselectmenu("widget");
+            $span = $('<span id="' + this.id + 'selected" class="avatar-selected"> ').prependTo(widget);
+            $span.attr("style", $(this).children(":first").data("style"));
+            if (widget.text() === "Country") {
+              $span.attr("class", "avatar-selected--hidden");
+            }
+          },
+          change: function (event, ui) {
+            $span = $("#" + this.id + 'selected');
+            $span.attr("style", ui.item.element.data("style"));
+            $span.attr("class", "avatar-selected");
+          }
+        })
+        .iconselectmenu("menuWidget")
+        .addClass("ui-menu-icons avatar");
+    });
+  </script>
+  <meta name="og:type" content="website" />
+  {{{recaptchaScript}}}
+  <link rel="stylesheet" type="text/css" href="/stylesheets/index.css" />
+  <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
+</head>
+
+<body style='margin: 0; background: rgba(255, 255, 255, 1)'>
+  <input type='hidden' id='anPageName' name='page' value='desktop-1' />
+  <div class='main'>
+    <div class='main-content'>
+      <h1 class='main-content__header'>
+        {{__ 'euid-portal-title'}}
+    </h1
+      <div class='main-content__divider'></div>
+      <p class='main-content__description'>
+        {{__ 'euid-this-site-allows-you' }}
+      </p>
+      <p class='main-content__description'>
+        {{__ 'euid-transforms-your-email-address' }}
+      </p>
+      <p class='main-content__description'>
+        {{__ 'euid-by-entering-your-email-below' }}
+      </p>
+      {{#if error}}
+      <p class='error'>
+        {{error}}
+      </p>
+      {{/if}}
+      {{#if message}}
+      <p class='message'>
+        {{message}}
+      </p>
+      {{/if}}
+      {{!-- <form class='main-content__form' id='email_prompt' action='/' method='post'>
+        {{{siteKeyInput}}}
+        <input type='hidden' name='step' value='email_prompt' />
+        <input type='hidden' id='recaptcha' name='recaptcha' />
+        <div class='form__input-container'>
+          <input type='text' class='form__input' name='email' placeholder='{{__ "Enter your email address"}}' value='{{email}}' />
+        </div>
+        <button>
+          {{__ 'NEXT'}}
+        </button>
+      </form> --}}
+
+      <form class="main-content__form" id="email_prompt" action="/" method="post">
+        {{{siteKeyInput}}}
+        <input type="hidden" name="step" value="email_prompt">
+        <input type="hidden" id="recaptcha" name="recaptcha" />
+        <input type="hidden" id="email" name="email" />
+        <input type="hidden" id="countryCode" name="countryCode" />
+        <input type="hidden" id="phone" name="phone" />
+        <div class="form__radio-group">
+          <div class="form__radio-button">
+            <input type="radio" id="email_type" name="idType" value="email" onclick="handleIdTypeClick(this)" {{#unless countryCode}}checked{{/unless}}>
+            <label style="border-style: none" class="form__radio-label" for="email_type">{{__ "Email Address"}}</label>
+          </div>
+          <div class="form__radio-button">
+            <input type="radio" id="phone_type" name="idType" value="phone" onclick="handleIdTypeClick(this)" {{#if countryCode}}checked{{/if}}>
+            <label style="border-style: none" class="form__radio-label" for="phone_type">{{__ "Phone Number"}}</label>
+          </div>
+        </div>
+        <div class="form__input-container" id="email-input-container" {{#if countryCode}} style="display: none" {{/if}}>
+          <input type="text" id="id_input_email" class="form__input" placeholder="{{__ "Enter your email address"}}" value="{{email}}" />
+        </div>
+        <div class="form__input-container" id="phone-input-container" {{#unless countryCode}} style="display:none" {{/unless}}>
+          <div class="form__input-country-code">
+            <select id="input_country_code">
+              <option disabled selected value></option>
+              {{#each countryList}}
+              <option value="{{this.countryCode}}" data-class="avatar" data-style="background-image: url(&apos;/images/flags/{{this.countryCode}}.svg&apos;);">
+                {{this.countryName}} +{{this.callingCode}}
+              </option>
+              {{/each}}
+            </select>
+          </div>
+          <div class="form__input-phone">
+            <input type="text" id="input_phone" class="form__input" placeholder="{{__ "Enter phone number"}}" value="{{phone}}" />
+          </div>
+        </div>
+        <button class="form__next-button">
+          {{__ "NEXT"}}
+        </button>
+      </form>
+
+      <p class='main-content__description'>
+        {{__ "euid-for-more-information" }}
+        <a href='/privacy'>{{__ 'euid-privacy-notice'}}</a>.
+      </p>
+      <a target="_blank" href="https://www.thetradedesk.com/us/trust/report-a-vulnerability" class="vulnerability-link">{{__ 'Report-vulnerability'}}</a>
+      {{!-- <script>
+        const form = document.getElementById("email_prompt");
+        form.addEventListener("submit", onSubmit); function onSubmit(e) {
+          e.preventDefault(); grecaptcha.ready(function () {
+            const key =
+              document.getElementById('recpatchaSiteKey').value;
+            grecaptcha.execute(key, { action: 'email_prompt' }).then(function
+              (token) {
+                document.getElementById('recaptcha').value = token;
+              form.submit();
+            });
+          });
+        }
+      </script> --}}
+      <script>
+        function handleIdTypeClick(idType) {
+          if (idType.value === "email") {
+            document.getElementById('phone-input-container').style.display = "none";
+            document.getElementById('email-input-container').style.display = "inline-flex";
+          } else if (idType.value === "phone") {
+            document.getElementById('phone-input-container').style.display = "inline-flex";
+            document.getElementById('email-input-container').style.display = "none";
+          }
+        }
+
+        const form = document.getElementById("email_prompt");
+        form.addEventListener("submit", onSubmit);
+        function onSubmit(e) {
+          e.preventDefault();
+
+          if (form.querySelector('input[name=idType]:checked').value === 'email') {
+            $('#email').val($('#id_input_email').val());
+            $('#countryCode').val("");
+            $('#phone').val("");
+          } else {
+            $('#email').val("");
+            $('#countryCode').val($('#input_country_code').val());
+            $('#phone').val($('#input_phone').val());
+          }
+
+          grecaptcha.ready(function () {
+            const key = $('#recpatchaSiteKey').val();
+            grecaptcha.execute(key, { action: 'email_prompt' }).then(function (token) {
+              $('#recaptcha').val(token);
+              form.submit();
+            });
+          });
+        }
+
+        {{#if countryCode}}
+          $('#input_country_code').val('{{countryCode}}')
+
+          $(document).ready(function () {
+            $('#input_country_codeselected').attr('style', "background-image: url('images/flags/{{countryCode}}.svg');")
+            $('#input_country_codeselected').trigger('refresh')
+          })
+        {{/if}}
+      </script>
+    </div>
+    <div class='main__footer'>
+      <h3 class='main__logo-label'>Powered by</h3>
+      <img class='main__logo' src='/images/EUID.png' />
+    </div>
+  </div>
+  <script> 
+    window.onload = function () {
+      if (window.location.href.includes('#/privacynotice')) {
+        window.location.href = '/privacy';
+      }
+    };
+  </script>
+</body>
+
 </html>
\ No newline at end of file

From 9e698054e8d28db3df4dd663919f95fc101a3726 Mon Sep 17 00:00:00 2001
From: Scott Sundahl <scott.sundahl@thetradedesk.com>
Date: Thu, 21 Nov 2024 15:28:50 -0700
Subject: [PATCH 2/3] clean up ui and comments

---
 src/routes/index.ts  |  7 -------
 views_euid/index.hbs | 35 +++++++----------------------------
 2 files changed, 7 insertions(+), 35 deletions(-)

diff --git a/src/routes/index.ts b/src/routes/index.ts
index b7a3daa..0a039b6 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -68,13 +68,6 @@ const handleEmailPromptSubmission: RequestHandler<{}, z.infer<typeof EmailPrompt
 
 
   let idInput = '';
-  // if (ID_TYPE === 'EUID') {
-  //   if (!isValidEmail(email)) {
-  //     res.render('index', { email, countryList, error: i18n.__('Please enter a valid email address') });
-  //     return;
-  //   }
-  //   idInput = email;
-  // } else 
   if (idType === 'email') {
     if (!isValidEmail(email)) {
       res.render('index', { email, countryList, error: i18n.__('Please enter a valid email address') });
diff --git a/views_euid/index.hbs b/views_euid/index.hbs
index 9e38c7d..b69bf30 100644
--- a/views_euid/index.hbs
+++ b/views_euid/index.hbs
@@ -73,7 +73,7 @@
     <div class='main-content'>
       <h1 class='main-content__header'>
         {{__ 'euid-portal-title'}}
-    </h1
+      </h1>
       <div class='main-content__divider'></div>
       <p class='main-content__description'>
         {{__ 'euid-this-site-allows-you' }}
@@ -85,26 +85,19 @@
         {{__ 'euid-by-entering-your-email-below' }}
       </p>
       {{#if error}}
-      <p class='error'>
+      <p class="error">
         {{error}}
+        {{#if phoneExample}}
+        <br>
+        {{__ "For-example"}} {{phoneExample}}
+        {{/if}}
       </p>
       {{/if}}
       {{#if message}}
-      <p class='message'>
+      <p class="message">
         {{message}}
       </p>
       {{/if}}
-      {{!-- <form class='main-content__form' id='email_prompt' action='/' method='post'>
-        {{{siteKeyInput}}}
-        <input type='hidden' name='step' value='email_prompt' />
-        <input type='hidden' id='recaptcha' name='recaptcha' />
-        <div class='form__input-container'>
-          <input type='text' class='form__input' name='email' placeholder='{{__ "Enter your email address"}}' value='{{email}}' />
-        </div>
-        <button>
-          {{__ 'NEXT'}}
-        </button>
-      </form> --}}
 
       <form class="main-content__form" id="email_prompt" action="/" method="post">
         {{{siteKeyInput}}}
@@ -151,20 +144,6 @@
         <a href='/privacy'>{{__ 'euid-privacy-notice'}}</a>.
       </p>
       <a target="_blank" href="https://www.thetradedesk.com/us/trust/report-a-vulnerability" class="vulnerability-link">{{__ 'Report-vulnerability'}}</a>
-      {{!-- <script>
-        const form = document.getElementById("email_prompt");
-        form.addEventListener("submit", onSubmit); function onSubmit(e) {
-          e.preventDefault(); grecaptcha.ready(function () {
-            const key =
-              document.getElementById('recpatchaSiteKey').value;
-            grecaptcha.execute(key, { action: 'email_prompt' }).then(function
-              (token) {
-                document.getElementById('recaptcha').value = token;
-              form.submit();
-            });
-          });
-        }
-      </script> --}}
       <script>
         function handleIdTypeClick(idType) {
           if (idType.value === "email") {

From 36ea841f386335f6cbaf1b3ce4eae4b21d7b212c Mon Sep 17 00:00:00 2001
From: Scott Sundahl <scott.sundahl@thetradedesk.com>
Date: Fri, 22 Nov 2024 10:18:26 -0700
Subject: [PATCH 3/3] code review rework

---
 public/locales_euid/en.json | 72 ++++++++++++++++++-------------------
 views_euid/index.hbs        |  2 +-
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/public/locales_euid/en.json b/public/locales_euid/en.json
index 7147369..cab02a8 100644
--- a/public/locales_euid/en.json
+++ b/public/locales_euid/en.json
@@ -1,36 +1,36 @@
-{
-  "euid-portal-title": "European Unified ID (EUID) Portal",
-  "euid-this-site-allows-you": "This site allows you to withdraw consent and object to targeted advertising based on EUID.",
-  "euid-transforms-your-email-address": "EUID transforms your email address into an advertising identifier, which allows websites, apps, advertisers, and advertising companies to show you relevant advertising.",
-  "euid-your-choice-to-withdraw-consent": "Your choice to withdraw consent and/or object to targeted advertising based on EUID will mean that sites or apps you interact with, and advertising companies working with them, will no longer process your EUID to serve targeted advertising. This is limited to sites which use EUID.",
-  "euid-for-choice-with-respect": "For choice with respect to advertising based on cookies, please visit",
-  "euid-by-entering-your-email-below": "By entering your email below, you confirm that this is your information.",
-  "Enter your email address": "Enter your email address",
-  "NEXT": "NEXT",
-  "Please enter a valid email address": "Please enter a valid email address.",
-  "Sorry, we could not process your request.": "Sorry, we could not process your request.",
-  "Blocked-a-potentially-automated-request": "Blocked a potentially automated request. Please try again later.",
-  "Code does not match": "Code does not match",
-  "Welcome to": "Welcome to",
-  "Trouble sending verification email": "Trouble sending verification email",
-  "This site will allow you to view and manage how your interests are used to deliver relevant advertising across the internet.": "This site will allow you to view and manage how your interests are used to deliver relevant advertising across the internet.",
-  "...Check your email...": "...Check your email...",
-  "Please enter the verification code that was sent to your email.": "Please enter the verification code that was sent to your email.",
-  "Enter your verification code": "Enter your verification code",
-  "Powered by": "Powered by",
-  "Internal Server Error": "Internal Server Error",
-  "euid-exit": "EXIT",
-  "Welcome!": "Hello,",
-  "Opt-Out": "Opt-Out",
-  "(English)": "",
-  "euid-note-this-choice-may-limit": "Note: this choice may limit your ability to access ad supported content.",
-  "OPT OUT": "OPT OUT",
-  "Are you sure?": "Are you sure?",
-  "YES": "YES",
-  "NO": "NO",
-  "euid-we-have-received-your-request": "We have received your request to opt out and will begin processing it shortly.",
-  "Email Address": "Email Address",
-  "euid-for-more-information": "For more information on how the Trade Desk manages EUID and your rights with respect to EUID, please read the",
-  "euid-privacy-notice": "EUID Privacy Notice",
-  "Report-vulnerability": "Report a Vulnerability"
-}
+{
+  "euid-portal-title": "European Unified ID (EUID) Portal",
+  "euid-this-site-allows-you": "This site allows you to withdraw consent and object to targeted advertising based on EUID.",
+  "euid-transforms-your-email-address": "EUID transforms your email address or phone number into an advertising identifier, which allows websites, apps, advertisers, and advertising companies to show you relevant advertising.",
+  "euid-your-choice-to-withdraw-consent": "Your choice to withdraw consent and/or object to targeted advertising based on EUID will mean that sites or apps you interact with, and advertising companies working with them, will no longer process your EUID to serve targeted advertising. This is limited to sites which use EUID.",
+  "euid-for-choice-with-respect": "For choice with respect to advertising based on cookies, please visit",
+  "euid-by-entering-your-email-below": "By entering your email or phone number below, you confirm that this is your information.",
+  "Enter your email address": "Enter your email address",
+  "NEXT": "NEXT",
+  "Please enter a valid email address": "Please enter a valid email address.",
+  "Sorry, we could not process your request.": "Sorry, we could not process your request.",
+  "Blocked-a-potentially-automated-request": "Blocked a potentially automated request. Please try again later.",
+  "Code does not match": "Code does not match",
+  "Welcome to": "Welcome to",
+  "Trouble sending verification email": "Trouble sending verification email",
+  "This site will allow you to view and manage how your interests are used to deliver relevant advertising across the internet.": "This site will allow you to view and manage how your interests are used to deliver relevant advertising across the internet.",
+  "...Check your email...": "...Check your email...",
+  "Please enter the verification code that was sent to your email.": "Please enter the verification code that was sent to your email.",
+  "Enter your verification code": "Enter your verification code",
+  "Powered by": "Powered by",
+  "Internal Server Error": "Internal Server Error",
+  "euid-exit": "EXIT",
+  "Welcome!": "Hello,",
+  "Opt-Out": "Opt-Out",
+  "(English)": "",
+  "euid-note-this-choice-may-limit": "Note: this choice may limit your ability to access ad supported content.",
+  "OPT OUT": "OPT OUT",
+  "Are you sure?": "Are you sure?",
+  "YES": "YES",
+  "NO": "NO",
+  "euid-we-have-received-your-request": "We have received your request to opt out and will begin processing it shortly.",
+  "Email Address": "Email Address",
+  "euid-for-more-information": "For more information on how the Trade Desk manages EUID and your rights with respect to EUID, please read the",
+  "euid-privacy-notice": "EUID Privacy Notice",
+  "Report-vulnerability": "Report a Vulnerability"
+}
diff --git a/views_euid/index.hbs b/views_euid/index.hbs
index b69bf30..e323850 100644
--- a/views_euid/index.hbs
+++ b/views_euid/index.hbs
@@ -138,7 +138,7 @@
           {{__ "NEXT"}}
         </button>
       </form>
-
+      <br />
       <p class='main-content__description'>
         {{__ "euid-for-more-information" }}
         <a href='/privacy'>{{__ 'euid-privacy-notice'}}</a>.
