From 630c316aaf588aea42bb7a3d7e5c55582e1bf3b9 Mon Sep 17 00:00:00 2001 From: Leonid Nikitin Date: Mon, 4 Dec 2023 22:42:35 +0600 Subject: [PATCH] Added service-captcha-gui. --- public/captcha/images/refresh.png | Bin 0 -> 355 bytes public/captcha/script.js | 5 +++++ public/captcha/style.css | 5 +++++ 3 files changed, 10 insertions(+) create mode 100644 public/captcha/images/refresh.png create mode 100644 public/captcha/script.js create mode 100644 public/captcha/style.css diff --git a/public/captcha/images/refresh.png b/public/captcha/images/refresh.png new file mode 100644 index 0000000000000000000000000000000000000000..a8eb150a0aff4094c98834d3a1690e19f6963287 GIT binary patch literal 355 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`EX7WqAsj$Z!;#Vf2?- zG7x6;t5)LxG9*h}BT9nv(@M${i&7cN%ggmL^RkPR6AM!H@{7`Ezq647Dth4Q;uvDl zyY%u#FK0uMV;|#_MN2Pk{J}Tv(UQpz6q0)return null;r.innerHTML='
',fetch(n+"/api/v1/captcha",{headers:{"Content-Type":"application/json",Accept:"application/json","public-token":c}}).then(e=>e.json()).then(function(t){let l=t.image_body.width,d=t.image_body.height;r.innerHTML=`

Выберите значение в том порядке, на котором на картинке выше:

`;let s=r.querySelector("div.window-captcha__content__body__coordinator"),p=s.querySelector("img");p.addEventListener("click",function(t){let n=e.createElement("div");n.style.left=t.offsetX/p.width*100+"%",n.style.top=t.offsetY/p.height*100+"%",n.classList.add("pointer");let c=t.offsetX*(l/p.width),a=t.offsetY*(d/p.height),o=s.querySelectorAll(".pointer").length+1;n.innerHTML=`${o}`,n.addEventListener("click",function(){n.remove(),s.querySelectorAll(".pointer").forEach(function(e,t){e.querySelector("span.pounter__number").textContent=t+1})}),s.appendChild(n)}),r.querySelector(".window-captcha__content__body__button").addEventListener("click",function(){(function t(n,c,o,i,r){let l=n.querySelector("button.window-captcha__content__body__button");if(l.querySelectorAll(".loading").length>0)return null;let d=e.createElement("span");d.classList.add("loading"),l.appendChild(d);let s={captcha_key:n.querySelector(".captcha_key").value,verification:[]};n.querySelectorAll(".pointer").forEach(function(e){s.verification.push({x:e.querySelector(".x").value,y:e.querySelector(".y").value})}),fetch(c+"/api/v1/captcha",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json","public-token":o},body:JSON.stringify(s)}).then(e=>{if(429===e.status){a("Вы превысили количество попыток. Обновите каптчу.",l);return}return e.json()}).then(function(t){if(void 0!==t.errors){let n="";for(let c in t.errors)n+=t.errors[c]+"
";""===n&&(n=t.message),a(n,l);return}if(void 0===t.captcha_key){a("Произошла ошибка!",l);return}i.querySelector("button.button-open-window-captcha").remove();let o=e.createElement("div");o.innerHTML=`Ура!!! Проверку прошли!`,i.appendChild(o),i.querySelector(".window-captcha").remove();let d=e.createElement("input");d.name=r.getAttribute("data-captcha-verified-name"),d.value=t.captcha_key,d.type="hidden",r.appendChild(d)}).catch(e=>{a("Произошла ошибка!",l)}).finally(function(){d.remove()})})(r,n,c,o,i)})}).catch(e=>{r.innerHTML=`
Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!
`})}function a(t,n){let c=e.createElement("div");c.classList.add("error-message"),c.innerHTML=t,n.before(c),setTimeout(function(){c.remove()},3e3)}t.forEach(function(t){let a=t.attachShadow({mode:"closed"}),o=e.createElement("button"),i=e.createElement("link"),r=t.getAttribute("data-domain"),l=t.getAttribute("data-token"),d=t.getAttribute("data-static-path"),s=null;i.rel="stylesheet",i.type="text/css",i.href=d+"/style.css",a.appendChild(i),o.textContent="Я не робот!",o.type="button",o.classList.add("button-open-window-captcha"),a.appendChild(o),o.addEventListener("click",function(){null===s&&(s=function t(a,o,i,r){let l=e.createElement("div");return l.classList.add("window-captcha"),l.innerHTML=`
Я не робот!
`,a.appendChild(l),l.addEventListener("click",function(e){if(e.target!==l)return null;n(l)}),l.querySelector("button.window-captcha__close").addEventListener("click",function(){n(l)}),l.querySelector("button.window-captcha__reload").addEventListener("click",function(){c(l,o,i,a,r)}),l}(a,r,l,t)),s.style.display="block",c(s,r,l,a,t)})})}(document); diff --git a/public/captcha/style.css b/public/captcha/style.css new file mode 100644 index 0000000..c180588 --- /dev/null +++ b/public/captcha/style.css @@ -0,0 +1,5 @@ +/* + * Copyright (C) 2023 Leonid Nikitin (kor-elf) + * https://git.kor-elf.net/kor-elf/service-captcha-gui/src/branch/main/LICENSE.md + */ +.button-open-window-captcha:hover,.window-captcha__close:hover,.window-captcha__content__body__button:hover{opacity:.8}.captcha-verified{background:#1d8100;border:1px solid #ddd;border-radius:90px;padding:10px 20px;color:#000;font-size:18px;font-weight:700;font-family:serif;display:inline-block;vertical-align:top}.button-open-window-captcha,.window-captcha__content__body__button{background:#68aaff;border:1px solid #ddd;border-radius:90px;padding:10px 20px;cursor:pointer;color:#000;font-size:18px;font-weight:700;font-family:serif}.window-captcha__content__body__button{border-radius:0;width:100%;padding:20px 0;border:0;position:relative}.window-captcha__content__body__button .loading{background:rgba(255,255,255,.48)}.window-captcha{background:rgba(0,0,0,.48);position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;display:none}.window-captcha__close{background:#961b1b;position:absolute;top:0;right:0;padding:15px;font-size:20px;font-weight:700;font-family:serif;color:#fff;border:0;cursor:pointer}.window-captcha__content{background:#fff;border-radius:3px;margin:20px auto;max-width:600px;box-shadow:3px 3px 10px rgba(0,0,0,.33)}.window-captcha__content__header{position:relative;font-size:20px;font-weight:700;color:#000;font-family:serif;padding:14px 40px 7px 20px;border-bottom:2px solid #ccc}.window-captcha__content__body .error-message,.window-captcha__content__body__error{color:#961b1b;font-size:16px;font-weight:700;padding:20px}.window-captcha__reload{background:url('images/refresh.png') center center no-repeat;width:32px;height:32px;border:1px solid #ddd;border-radius:90px;cursor:pointer;vertical-align:middle;margin-left:10px}.window-captcha__content__reload:hover{background-color:rgba(0,0,0,.15)}.window-captcha__content__body{min-height:400px;position:relative}.window-captcha__content__body .loading{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.window-captcha__content__body .loading:before{width:40px;height:40px;border:4px solid #ddd;border-top:4px solid #2e93e6;border-radius:50%;animation:.8s linear infinite sp-anime;display:flex;justify-content:center;align-items:center;content:' '}.window-captcha__content__body p{font-size:20px;font-weight:700;padding:5px 20px;font-family:serif}.window-captcha__content__body__coordinator{cursor:pointer;position:relative}.window-captcha__content__body__coordinator .pointer{background:#fff;position:absolute;border-radius:90px;border:1px solid #961b1b;width:30px;height:30px;margin:-15px 0 0 -15px;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:serif;font-size:16px}.window-captcha__content__body__coordinator .pointer:hover span{font-size:0}.window-captcha__content__body__coordinator .pointer:hover span:after{content:"X";font-size:16px;color:#961b1b}.window-captcha__content__body__error{border:1px solid #961b1b;margin:20px}@keyframes sp-anime{100%{transform:rotate(360deg)}} \ No newline at end of file