Skip to content

Commit 71fa4ba

Browse files
ssundahlTTDssundahlTTD
authored
Merge pull request #42 from IABTechLab/sas-UID2-6012-migrate-sample-sites
migrate sample pages
2 parents 6eec606 + 3e1e8be commit 71fa4ba

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+35499
-0
lines changed

‎tools/hashing-tool/app.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
body {
2+
padding: 50px;
3+
font:
4+
14px 'Lucida Grande',
5+
Helvetica,
6+
Arial,
7+
sans-serif;
8+
}
9+
10+
a {
11+
color: #00b7ff;
12+
}
13+
14+
.alert {
15+
padding: 20px;
16+
background-color: #f44336;
17+
color: white;
18+
width: 400px;
19+
}
20+
21+
.closebtn {
22+
margin-left: 15px;
23+
color: white;
24+
font-weight: bold;
25+
float: right;
26+
font-size: 22px;
27+
line-height: 20px;
28+
cursor: pointer;
29+
transition: 0.3s;
30+
}
31+
32+
.closebtn:hover {
33+
color: black;
34+
}
35+
36+
.button {
37+
border-style: none;
38+
cursor: pointer;
39+
align-items: center;
40+
height: 40px;
41+
width: 401px;
42+
text-align: center;
43+
position: absolute;
44+
letter-spacing: 0.28px;
45+
box-sizing: border-box;
46+
color: white;
47+
font-family: 'Raleway', Helvetica, Arial, serif;
48+
font-size: 14px;
49+
font-style: normal;
50+
font-weight: 700;
51+
text-transform: none;
52+
text-indent: 0;
53+
text-shadow: none;
54+
margin: 0;
55+
padding: 1px 6px;
56+
background-color: rgba(2, 10, 64);
57+
border-image: initial;
58+
}
59+
60+
.form {
61+
margin-top: 40px;
62+
63+
}
64+
65+
.prompt {
66+
align-items: center;
67+
align-self: center;
68+
background-color: white;
69+
border: 1px solid rgba(2, 10, 64);
70+
border-radius: 2px;
71+
box-sizing: border-box;
72+
display: inline-flex;
73+
flex-direction: row;
74+
flex-shrink: 0;
75+
height: 40px;
76+
justify-content: flex-start;
77+
margin-right: 1px;
78+
margin-bottom: 20px;
79+
min-width: 399px;
80+
padding: 0 16px;
81+
position: relative;
82+
width: auto;
83+
}
84+
85+
#input_value {
86+
background-color: white;
87+
border-style: none;
88+
flex-shrink: 0;
89+
height: auto;
90+
letter-spacing: 0.12px;
91+
line-height: 16px;
92+
min-height: 16px;
93+
position: relative;
94+
text-align: left;
95+
white-space: nowrap;
96+
width: 351px;
97+
color: rgba(2, 10, 64, 1);
98+
font-family: 'Raleway', Helvetica, Arial, serif;
99+
font-size: 12px;
100+
font-style: normal;
101+
font-weight: 500;
102+
padding: 1px 2px;
103+
outline: none;
104+
}
105+
106+
h1 {
107+
padding-bottom: 20px;
108+
}
109+
110+

‎tools/hashing-tool/index.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>UID2 Hashing Tool</title>
6+
<link rel="stylesheet" type="text/css" href="./app.css" />
7+
<link rel="shortcut icon" href="/img/favicon.ico" />
8+
<script src="./uid2-sdk-3.3.0.js"></script>
9+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10+
</head>
11+
<script>
12+
console.log('Initializing example.');
13+
14+
async function updateGuiElements(normalizedInput, inputType) {
15+
console.log('Updating displayed values.');
16+
17+
if (normalizedInput) {
18+
const hashedValue = await window.__uid2Helper.hashIdentifier(normalizedInput);
19+
$('#hashed').text(hashedValue);
20+
const encodedValue = await window.__uid2Helper.hashAndEncodeIdentifier(normalizedInput);
21+
$('#base64_encoded').text(encodedValue);
22+
}
23+
else {
24+
$('#hashed').text(' ');
25+
$('#base64_encoded').text(' ');
26+
if (inputType === "email") {
27+
$("#normalization_value").text(' ');
28+
$('#alert_box_email').show();
29+
}
30+
else if (inputType === "mobile") {
31+
$('#alert_box_mobile').show();
32+
}
33+
}
34+
}
35+
36+
function clearElements() {
37+
document.querySelector('.input_value').value = "";
38+
$('#normalization_value').text(' ');
39+
$('#hashed').text(' ');
40+
$('#base64_encoded').text(' ');
41+
$('.alert').hide();
42+
}
43+
44+
function onDocumentReady() {
45+
console.log('Setting up interface handlers.');
46+
clearElements();
47+
document.querySelector('.input_value').placeholder = "Enter an email address";
48+
$('#enter').click(handleEnter);
49+
$('#clear_values_form').click(clearElements);
50+
$('#clear_values_form').show();
51+
}
52+
53+
function handleRadioClick(radioButton) {
54+
clearElements();
55+
const inputType = radioButton.value;
56+
let placeholder = "";
57+
if (inputType == "email") {
58+
placeholder = "Enter an email address";
59+
$('#normalization').show();
60+
$('#alert_email').show();
61+
$('#alert_mobile').hide();
62+
}
63+
else if (inputType == "mobile") {
64+
placeholder = "Enter a phone number";
65+
$('#normalization').hide();
66+
$('#alert_email').hide();
67+
$('#alert_mobile').show();
68+
}
69+
document.querySelector('.input_value').placeholder = placeholder;
70+
}
71+
72+
async function handleEnter() {
73+
$('.alert').hide();
74+
const inputValue = $('#input_value').val();
75+
const inputType = document.querySelector('input[name="toggle_input_type"]:checked').value;
76+
let normalizedInput = undefined;
77+
if (inputType == "mobile") {
78+
const isNormalizedPhone = window.__uid2Helper.isNormalizedPhone(inputValue)
79+
if (isNormalizedPhone) {
80+
normalizedInput = inputValue;
81+
}
82+
}
83+
if (inputType === "email") {
84+
normalizedInput = window.__uid2Helper.normalizeEmail(inputValue);
85+
$('#normalization_value').text(normalizedInput);
86+
}
87+
updateGuiElements(normalizedInput, inputType);
88+
}
89+
90+
$(document).ready(onDocumentReady);
91+
92+
</script>
93+
<body>
94+
<h1>UID2 Hashing Tool</h1>
95+
<p class="intro">
96+
Use this tool to verify that your own implementation is normalizing and
97+
encoding correctly. Choose Email or Phone Number, then type or paste the
98+
value and click Enter. <br><br>
99+
<b>NOTE:</b> Normalize phone numbers before using the tool.
100+
For details and examples, see <a href="https://unifiedid.com/docs/getting-started/gs-normalization-encoding">Normalization and Encoding</a>.
101+
</p>
102+
103+
<input type="radio" id="toggle_email" name="toggle_input_type" value="email" onclick="handleRadioClick(this)" checked>
104+
<label for="html">Email</label>
105+
<input type="radio" id="toggle_mobile" name="toggle_input_type" value="mobile" onclick="handleRadioClick(this)">
106+
<label for="css">Phone Number</label><br>
107+
108+
<div id="input_value_form" class="form">
109+
<div class="prompt">
110+
<input
111+
type="text"
112+
id="input_value"
113+
class="input_value"
114+
name="input_value"
115+
placeholder=""
116+
/>
117+
</div>
118+
119+
<div class="alert" id="alert_box_email">
120+
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
121+
Email format is invalid.
122+
</div>
123+
<div class="alert" id="alert_box_mobile">
124+
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
125+
Phone number format is invalid or is not normalized.
126+
</div>
127+
<br>
128+
</div>
129+
<div><button type="button" class="button" id="enter">Enter</button></div>
130+
<br><br><br>
131+
<div>
132+
<div id="normalization">
133+
<h3 class="label" id="normalization_label">Normalized Value:</h3>
134+
<h4 class="value"><pre id="normalization_value"></pre></h4>
135+
</div>
136+
137+
<h3 class="label">Hashed Value:</h3>
138+
<h4 class="value"><pre id="hashed"></pre></h4>
139+
140+
<h3 class="label">Base64-encoded Value:</h3>
141+
<h4 class="value"><pre id="base64_encoded"></pre></h4>
142+
143+
</div>
144+
</div>
145+
146+
147+
</div>
148+
<div id="clear_values_form" style="display: none" class="form">
149+
<form>
150+
<button type="button" class="button" id="clear_values">Clear</button>
151+
</form>
152+
</div>
153+
</div>
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)