WebTotem Security / 3.0.1

WebTotem Security v3.0.1

wt-security / includes / js / country-blocking.js

country-blocking.js in WebTotem Security 3.0.1, at includes/js/country-blocking.js

587 lines 13.7 KB

Raw Download Zip

1	const regions = [
2	{
3	region: __('Asia', 'wtotem'),
4	countries: [
5	"AF",
6	"AM",
7	"AZ",
8	"BH",
9	"BD",
10	"BT",
11	"BN",
12	"KH",
13	"CN",
14	"CY",
15	"GE",
16	"HK",
17	"IN",
18	"ID",
19	"IR",
20	"IQ",
21	"IL",
22	"JP",
23	"JO",
24	"KZ",
25	"KP",
26	"KR",
27	"KW",
28	"KG",
29	"LA",
30	"LB",
31	"MO",
32	"MY",
33	"MV",
34	"MN",
35	"MM",
36	"NP",
37	"OM",
38	"PK",
39	"PS",
40	"PH",
41	"QA",
42	"SA",
43	"SG",
44	"LK",
45	"SY",
46	"TW",
47	"TJ",
48	"TH",
49	"TL",
50	"TR",
51	"TM",
52	"AE",
53	"UZ",
54	"VN",
55	"YE",
56	],
57	},
58	{
59	region: __('Europe', 'wtotem'),
60	countries: [
61	"AX",
62	"AL",
63	"AD",
64	"AT",
65	"BY",
66	"BE",
67	"BA",
68	"BG",
69	"HR",
70	"CZ",
71	"DK",
72	"EE",
73	"FO",
74	"FI",
75	"FR",
76	"DE",
77	"GI",
78	"GR",
79	"GG",
80	"VA",
81	"HU",
82	"IS",
83	"IE",
84	"IM",
85	"IT",
86	"JE",
87	"LV",
88	"LI",
89	"LT",
90	"LU",
91	"MT",
92	"MD",
93	"MC",
94	"ME",
95	"NL",
96	"MK",
97	"NO",
98	"PL",
99	"PT",
100	"RO",
101	"RU",
102	"SM",
103	"RS",
104	"SK",
105	"SI",
106	"ES",
107	"SJ",
108	"SE",
109	"CH",
110	"UA",
111	"GB",
112	],
113	},
114	{
115	region: __('Africa', 'wtotem'),
116	countries: [
117	"DZ",
118	"AO",
119	"BJ",
120	"BW",
121	"IO",
122	"BF",
123	"BI",
124	"CV",
125	"CM",
126	"CF",
127	"TD",
128	"KM",
129	"CG",
130	"CD",
131	"CI",
132	"DJ",
133	"EG",
134	"GQ",
135	"ER",
136	"SZ",
137	"ET",
138	"TF",
139	"GA",
140	"GM",
141	"GH",
142	"GN",
143	"GW",
144	"KE",
145	"LS",
146	"LR",
147	"LY",
148	"MG",
149	"MW",
150	"ML",
151	"MR",
152	"MU",
153	"YT",
154	"MA",
155	"MZ",
156	"NA",
157	"NE",
158	"NG",
159	"RE",
160	"RW",
161	"SH",
162	"ST",
163	"SN",
164	"SC",
165	"SL",
166	"SO",
167	"ZA",
168	"SS",
169	"SD",
170	"TZ",
171	"TG",
172	"TN",
173	"UG",
174	"EH",
175	"ZM",
176	"ZW",
177	],
178	},
179	{
180	region: __('Oceania', 'wtotem'),
181	countries: [
182	"AS",
183	"AU",
184	"CX",
185	"CC",
186	"CK",
187	"FJ",
188	"PF",
189	"GU",
190	"HM",
191	"KI",
192	"MH",
193	"FM",
194	"NR",
195	"NC",
196	"NZ",
197	"NU",
198	"NF",
199	"MP",
200	"PW",
201	"PG",
202	"PN",
203	"WS",
204	"SB",
205	"TK",
206	"TO",
207	"TV",
208	"UM",
209	"VU",
210	"WF",
211	],
212	},
213	{
214	region: __('Americas', 'wtotem'),
215	countries: [
216	"AI",
217	"AG",
218	"AR",
219	"AW",
220	"BS",
221	"BB",
222	"BZ",
223	"BM",
224	"BO",
225	"BQ",
226	"BV",
227	"BR",
228	"CA",
229	"KY",
230	"CL",
231	"CO",
232	"CR",
233	"CU",
234	"CW",
235	"DM",
236	"DO",
237	"EC",
238	"SV",
239	"FK",
240	"GF",
241	"GL",
242	"GD",
243	"GP",
244	"GT",
245	"GY",
246	"HT",
247	"HN",
248	"JM",
249	"MQ",
250	"MX",
251	"MS",
252	"NI",
253	"PA",
254	"PY",
255	"PE",
256	"PR",
257	"BL",
258	"KN",
259	"LC",
260	"MF",
261	"PM",
262	"VC",
263	"SX",
264	"GS",
265	"SR",
266	"TT",
267	"TC",
268	"US",
269	"UY",
270	"VE",
271	"VG",
272	"VI",
273	],
274	},
275	];
276
277	const attacksContainer = document.querySelector(
278	".country-blocking-modal-attacks-container"
279	);
280	const countrySearchForm = document.querySelector("#country-search");
281	const searchInput = countrySearchForm.querySelector("input");
282	const countryBlockingForm = document.querySelector("#country-blocking");
283	const regionsContainer = countryBlockingForm.querySelector(
284	".country-blocking-form__main"
285	);
286	const numOfBlockedCountries = document.querySelector("#num-of-countries");
287	const selectAll = document.querySelector("#select-all");
288
289	selectAll.addEventListener("change", (event) => {
290	const allCountries = regionsContainer.querySelectorAll("[type=checkbox]");
291	allCountries.forEach((checkbox) => {
292	checkbox.checked = event.target.checked;
293	checkbox.dataset.checked = event.target.checked;
294	});
295
296	const countries = Array.from(
297	regionsContainer.querySelectorAll(".country-checkbox")
298	)
299	.filter((checkbox) => JSON.parse(checkbox.dataset.checked))
300	.map((checkbox) => checkbox.name);
301
302	checkedCountries = checkedCountries.concat(countries);
303
304	AmplitudeAnalytics.addAllCountry(checkedCountries);
305
306	const numNodes = document.querySelectorAll(".blocked-counter");
307	const countriesContainers = document.querySelectorAll(
308	".country-blocking-form__region-countries"
309	);
310	numNodes.forEach((node, index) => {
311	node.textContent = event.target.checked
312	? countriesContainers[index].querySelectorAll(".country-checkbox").length
313	: 0;
314	});
315
316	if (searchInput.value.length === 0 && !event.target.checked) {
317	checkedCountries = [];
318	}
319	if (searchInput.value.length > 0 && event.target.checked) {
320	checkedCountries = [...new Set(checkedCountries.concat(countries))];
321	}
322	});
323
324	const getCountryNameByCode = new Intl.DisplayNames(["en"], { type: "region" });
325
326	function toggleOpen() {
327	const countriesContainer = this.nextElementSibling;
328	const svg = this.querySelector("svg");
329	countriesContainer.classList.toggle("country-blocking-accordion--open");
330	countriesContainer.classList.toggle(
331	"country-blocking-form__region-countries--open"
332	);
333	svg.classList.toggle("chevron--open");
334	}
335
336	function toggleSelectRegion(event) {
337	const regionCheckboxes =
338	this.parentElement.parentElement.querySelectorAll(".country-checkbox");
339	const { checked } = event.target;
340	regionCheckboxes.forEach((checkbox) => {
341	checkbox.checked = checked;
342	checkbox.dataset.checked = checked;
343	if (checked) checkedCountries.push(checkbox.name);
344	else
345	checkedCountries = checkedCountries.filter(
346	(country) => country !== checkbox.name
347	);
348	});
349	}
350
351	let checkedCountries = [];
352
353	function updateCounter(node) {
354	return (event) => {
355	const { checked } = event.target;
356
357	if (event.target.classList.contains("select-all-region")) {
358	const allRegion =
359	event.target.parentElement.parentElement.querySelectorAll(
360	".country-checkbox"
361	);
362	return checked
363	? (node.textContent = allRegion.length)
364	: (node.textContent = 0);
365	}
366	const num = Number(node.textContent);
367	node.textContent = checked ? num + 1 : num - 1;
368	event.target.dataset.checked = checked;
369	if (!checked) {
370	checkedCountries = checkedCountries.filter(
371	(country) => country !== event.target.name
372	);
373	} else {
374	checkedCountries.push(event.target.name);
375	}
376
377	AmplitudeAnalytics.addContinent(checkedCountries);
378
379	const allRegionCheckbox =
380	event.target.parentElement.parentElement.querySelector(
381	".select-all-region"
382	);
383	const allRegionCheckboxes = Array.from(
384	event.target.parentElement.parentElement.querySelectorAll(
385	".country-checkbox"
386	)
387	);
388	allRegionCheckboxes.splice(
389	allRegionCheckboxes.findIndex(
390	(checkbox) => checkbox.name === event.target.name
391	),
392	1,
393	event.target
394	);
395	const isRegionChecked = allRegionCheckboxes.every((checkbox) =>
396	JSON.parse(checkbox.dataset.checked)
397	);
398
399	if (isRegionChecked) {
400	allRegionCheckbox.checked = true;
401	allRegionCheckbox.dataset.checked = true;
402	} else {
403	allRegionCheckbox.checked = false;
404	allRegionCheckbox.dataset.checked = false;
405	}
406
407	};
408	}
409
410	const ALL_COUNTRIES = regions.map((region) => region.countries).flat();
411
412	const populateCountries = (array, open = false, blockedCountries = []) => {
413	const buttons = regionsContainer.querySelectorAll("button");
414	buttons.forEach((button) => button.removeEventListener("click", toggleOpen));
415	const regionBtns = regionsContainer.querySelectorAll("button");
416	regionBtns.forEach((button) =>
417	button.removeEventListener("click", toggleOpen)
418	);
419
420	if (!isRepaint) checkedCountries = blockedCountries;
421
422	if (isRepaint) {
423	blockedCountries.length > 0
424	? (checkedCountries = blockedCountries)
425	: checkedCountries.concat(
426	Array.from(regionsContainer.querySelectorAll(".country-checkbox"))
427	.filter((checkbox) => (checkbox.dataset.checked = "true"))
428	.map((checkbox) => checkbox.name)
429	);
430	}
431
432	regionsContainer.innerHTML = "";
433	selectAll.checked = false;
434
435	array.forEach((item) => {
436	regionsContainer.innerHTML += `
437	<button type="button" class="country-blocking-form__region-container country-blocking-accordion">
438	<div>
439	<p class="country-blocking-form__region-name">
440	${item.region}
441	</p>
442	<p class="country-blocking-form__region-blocked">
443	<span class="blocked-counter">${
444	item.countries.filter((country) =>
445	checkedCountries.includes(country)
446	).length
447	}</span> ${__('countries blocked from','wtotem')} <span>${item.region}</span>
448	</p>
449	</div>
450	<svg class="chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
451	stroke="currentColor" width="16" height="16">
452	<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
453	</svg>
454	</button>
455	<div class="country-blocking-form__region-countries ${
456	open &&
457	item.countries.length &&
458	"country-blocking-form__region-countries--open"
459	}">
460	<div class="country-blocking-form__select-region">
461	<label for="select-all-${item.region}">${__('Select all','wtotem')}</label>
462	<input id="select-all-${
463	item.region
464	}" type="checkbox" class="wt-checkbox country-blocking-form__checkbox select-all-region">
465	</div>
466	${item.countries
467	.map((country) => {
468	const isChecked = checkedCountries.includes(country);
469	return `<div class="country-blocking-form__country-container">
470	<label for="${country}" class="country-blocking-form__country">
471	<img width="19" height="13" src="https://assets.wtotem.net/images/flags/${country.toLowerCase()}.png" alt="Flag of ${country}">
472	<p>${getCountryNameByCode.of(country)}</p>
473	</label>
474	<input name="${country}" id="${country}" ${
475	isChecked ? "checked" : ""
476	}
477	data-checked="${isChecked}"
478	type="checkbox" class="wt-checkbox country-blocking-form__checkbox country-checkbox">
479	</div>`;
480	})
481	.join("")}
482	</div>`;
483	});
484	const countryContainers = document.querySelectorAll(
485	".country-blocking-form__region-countries"
486	);
487
488	countryContainers.forEach((container, index) => {
489	const numNodes = document.querySelectorAll(".blocked-counter");
490	container.addEventListener("change", updateCounter(numNodes[index]));
491	});
492	const regionButtons = regionsContainer.querySelectorAll("button");
493	regionButtons.forEach((button) =>
494	button.addEventListener("click", toggleOpen)
495	);
496	const selectAllRegion =
497	regionsContainer.querySelectorAll(".select-all-region");
498	selectAllRegion.forEach((checkbox) => {
499	checkbox.addEventListener("click", toggleSelectRegion);
500	const regionCountries = Array.from(
501	checkbox.parentElement.parentElement.querySelectorAll(".country-checkbox")
502	);
503
504	const isRegionChecked = regionCountries.every((checkbox) =>
505	JSON.parse(checkbox.dataset.checked)
506	);
507
508	checkbox.dataset.checked = isRegionChecked;
509	checkbox.checked = isRegionChecked;
510	});
511
512	if (checkedCountries.length >= ALL_COUNTRIES.length) {
513	selectAll.checked = true;
514	selectAllRegion.forEach((checkbox) => (checkbox.checked = true));
515	}
516
517	numOfBlockedCountries.textContent = isRepaint
518	? [...new Set(checkedCountries)].length
519	: blockedCountries.length;
520	};
521
522	let timeout;
523
524	searchInput.addEventListener("input", (event) => {
525	clearTimeout(timeout);
526	timeout = setTimeout(() => {
527	const query = event.target.value.trim().toLowerCase();
528	AmplitudeAnalytics.searchCountry(query);
529	const filteredCountries = regions.map((region) => ({
530	region: region.region,
531	countries: region.countries.filter((country) =>
532	getCountryNameByCode.of(country).toLowerCase().includes(query)
533	),
534	}));
535	if (query) populateCountries(filteredCountries, true);
536	else populateCountries(regions);
537	}, 500);
538	});
539
540	countrySearchForm.addEventListener("submit", (event) => {
541	event.preventDefault();
542	clearTimeout(timeout);
543	const query = searchInput.value.trim().toLowerCase();
544	AmplitudeAnalytics.searchCountry(query);
545	const filteredCountries = regions.map((region) => ({
546	region: region.region,
547	countries: region.countries.filter((country) =>
548	getCountryNameByCode.of(country).toLowerCase().includes(query)
549	),
550	}));
551	populateCountries(filteredCountries, true);
552	});
553
554	countryBlockingForm.addEventListener("submit", (event) => {
555	event.preventDefault();
556
557	//checkedCountries = countries to block
558
559	});
560
561	const populateAttacks = (array) => {
562	attacksContainer.innerHTML = "";
563	array.forEach(
564	(country) =>
565	(attacksContainer.innerHTML += `
566	<div class="country-blocking-modal-attack-block">
567	<p class="country-blocking-modal-attack-block__percent"><span>${country.percent}</span>%</p>
568	<p class="country-blocking-modal-attack-block__country">${__('Attack from','wtotem')} <span>${country.country}</span></p>
569	</div>
570	`)
571	);
572	};
573
574	var isRepaint = false;
575
576	window.addEventListener('DOMContentLoaded', function () {
577
578	if(typeof blocked_countries_list !== 'undefined') {
579	populateCountries(regions, false, blocked_countries_list);
580	}
581
582	if(typeof mockAttacks !== 'undefined') {
583	populateAttacks(mockAttacks);
584	}
585
586	isRepaint = true;
587	});