adding phone number optout

public/locales/en.json

@@ -1,6 +1,5 @@
 {
 	"Transparency and Control Portal": "Transparency and Control Portal",
-	"This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email below. You represent and warrant that this is your email.": "This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email below. You represent and warrant that this is your email.",
 	"Enter your email address": "Enter your email address",
 	"NEXT": "NEXT",
 	"Please enter a valid email address": "Please enter a valid email address",
@@ -31,5 +30,9 @@
 	"NO": "NO",
 	"This choice may limit your ability to access ad supported content.": "This choice may limit your ability to access ad supported content.",
 	"You may be asked to Opt-In again in the future to access such content.": "You may be asked to Opt-In again in the future to access such content.",
-	"We have received your request to opt out and will begin processing it shortly.": "We have received your request to opt out and will begin processing it shortly."
+	"We have received your request to opt out and will begin processing it shortly.": "We have received your request to opt out and will begin processing it shortly.",
+	"Enter your phone number, e.g. +1111111111": "Enter your phone number, e.g. +1111111111",
+	"This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email or phone number below. You represent and warrant that this is your information.": "This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email or phone number below. You represent and warrant that this is your information.",
+	"Email Address": "Email Address",
+	"Phone Number": "Phone Number"
 }

public/locales/ja.json

@@ -1,6 +1,5 @@
 {
 	"Transparency and Control Portal": "透明性と管理ポータル",
-	"This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email below. You represent and warrant that this is your email.": "このサイトでは、Unified ID 2.0を使ったターゲティング広告をオプトアウトすることができます。以下にあなたのメールアドレスを入力してください。確認のメールをお送りします。",
 	"Enter your email address": "メールアドレスを入力してください",
 	"NEXT": "次へ",
 	"Please enter a valid email address": "有効なEメールアドレスを入力してください。",
@@ -31,5 +30,9 @@
 	"NO": "いいえ",
 	"This choice may limit your ability to access ad supported content.": "この選択により、広告付きコンテンツへのアクセスが制限される場合があります。",
 	"You may be asked to Opt-In again in the future to access such content.": "将来、そのようなコンテンツにアクセスするために、再度オプトインを求められる可能性があります。",
-	"We have received your request to opt out and will begin processing it shortly.": "オプトアウトのリクエストを受け取りました。まもなく処理を開始します。"
+	"We have received your request to opt out and will begin processing it shortly.": "オプトアウトのリクエストを受け取りました。まもなく処理を開始します。",
+	"Enter your phone number, e.g. +1111111111": "電話番号を入力してください",
+	"This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email or phone number below. You represent and warrant that this is your information.": "このサイトでは、Unified ID 2.0を使ったターゲティング広告をオプトアウトすることができます。以下にあなたのメールアドレスや電話番号を入力してください。確認のメールをお送りします。",
+	"Email Address": "メールアドレス",
+	"Phone Number": "電話番号"
 }

public/stylesheets/index.css

@@ -51,7 +51,7 @@
   height: 40px;
   justify-content: flex-start;
   margin-right: 1.0px;
-  margin-top: 30px;
+  margin-top: 20px;
   min-width: 399px;
   padding: 0 16.0px;
   position: relative;

src/routes/index.ts

@@ -39,15 +39,21 @@ const isValidEmail = (email: string) => {
   return emailRegex.test(email);
 };
 
+const isValidPhone = (phone: string) => {
+  // eslint-disable-next-line no-control-regex
+  const phoneRegex = /^\+[0-9]{10,15}$/;
+  return phoneRegex.test(phone);
+};
+
 const EmailPromptRequest = z.object({
   email: z.string(),
   recaptcha: z.string(),
 });
 
 const handleEmailPromptSubmission: RequestHandler<{}, z.infer<typeof EmailPromptRequest>, { email: string, encrypted: string, error?: string }> = async (req, res, _next) => {
   const { email, recaptcha } = EmailPromptRequest.parse(req.body);
-  if (!isValidEmail(email)) {
-    res.render('index', { email, error : i18n.__('Please enter a valid email address') });
+  if (!isValidEmail(email) && !isValidPhone(email)) {
+    res.render('index', { email, error : i18n.__('Please enter a valid email address or phone number') });
     return;
   }
 

src/routes/optout.ts

@@ -25,8 +25,10 @@ import axios from 'axios';
 
 import { OPTOUT_API_KEY, OPTOUT_ENDPOINT_URL } from '../utils/process';
 
-export async function optout(email: string): Promise<any> {
-  const url = `${OPTOUT_ENDPOINT_URL}?email=${encodeURIComponent(email)}`;
+export async function optout(identityInput: string): Promise<any> {
+  const url = identityInput[0] == '+' 
+    ? `${OPTOUT_ENDPOINT_URL}?phone=${encodeURIComponent(identityInput)}`
+    : `${OPTOUT_ENDPOINT_URL}?email=${encodeURIComponent(identityInput)}`;
 
   const response = await axios.get<any>(url,
     {

views/index.hbs

@@ -186,7 +186,7 @@
         </div>
         <div class="rectangle-121-C61RwL"></div>
         <div class="this-site--net-160765-C61RwL raleway-medium-stratos-12px">
-            {{__ "This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email below. You represent and warrant that this is your email."}}
+            {{__ "This site allows you to opt out of targeted advertising based on Unified ID 2.0. Please enter your email or phone number below. You represent and warrant that this is your information."}}
         </div>
         {{#if error}}
             <div class="error this-site--net-160765-C61RwL raleway-medium-stratos-12px">
@@ -202,8 +202,18 @@
             {{{siteKeyInput}}}
             <input type="hidden" name="step" value="email_prompt">
             <input type="hidden" id="recaptcha" name="recaptcha" />
+
+            <br>
+
+            <div>
+              <input type="radio" id="email_type" name="id_type" value="email" onclick="handleIdTypeClick(this)" checked>
+              <label style="border-style: none" class="raleway-medium-stratos-12px" for="email_type">{{__ "Email Address"}}</label>&nbsp;&nbsp;
+              <input type="radio" id="phone_type" name="id_type" value="phone" onclick="handleIdTypeClick(this)">
+              <label style="border-style: none" class="raleway-medium-stratos-12px" for="phone_type">{{__ "Phone Number"}}</label>
+            </div>
+
             <div class="desktopui--ry-default-C61RwL">
-              <input type="text" style="border-style: none" class="link-i16077146939-wxkpqU raleway-medium-stratos-12px border-class-1" name="email" placeholder="{{__ "Enter your email address"}}" value="{{email}}">
+              <input type="text" id="id_input" style="border-style: none" class="link-i16077146939-wxkpqU raleway-medium-stratos-12px border-class-1" name="email" placeholder="{{__ "Enter your email address"}}" value="{{email}}">
               </input>
               <!--
               <div class="link-i16077146939-wxkpqU raleway-medium-stratos-12px border-class-1">
@@ -219,6 +229,14 @@
             </div>
           </form>
           <script>
+              function handleIdTypeClick(idType) {
+                if (idType.value === "email") {
+                  document.getElementById('id_input').placeholder = "{{__ "Enter your email address"}}";
+                } else if (idType.value === "phone") {
+                  document.getElementById('id_input').placeholder = "{{__ "Enter your phone number, e.g. +1111111111"}}";
+                }
+              }
+
               const form = document.getElementById("email_prompt");
               form.addEventListener("submit", onSubmit);
               function onSubmit(e) {