Skip to content

Commit

Permalink
Merge pull request #97 from IABTechLab/sas-UID2-4428-tc-portal-euid-a…
Browse files Browse the repository at this point in the history 
…dd-phone-number

tc-portal euid add phone number
  • Loading branch information
@ssundahlTTD
ssundahlTTD authored Nov 22, 2024
2 parents 2a34ff4 + 36ea841 commit 4348190
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 127 deletions.
72 changes: 36 additions & 36 deletions public/locales_euid/en.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
8 changes: 1 addition & 7 deletions src/routes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,7 @@ 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 (idType === 'email') {
if (!isValidEmail(email)) {
res.render('index', { email, countryList, error: i18n.__('Please enter a valid email address') });
return;
Expand Down
289 changes: 205 additions & 84 deletions views_euid/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,206 @@
<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}}
{{#if phoneExample}}
<br>
{{__ "For-example"}} {{phoneExample}}
{{/if}}
</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" />
<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>
<br />
<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>
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>

0 comments on commit 4348190

Please sign in to comment.