{{custom_pk_dark.start}}#555{{custom_pk_dark.end}}
{{custom_dev_pk.start}}{{custom_dev_pk.end}}
 
{{user_registered==false.start}}
{{template==177.start}}
	{{cur_page_name~=login|forum|index|feed.start}}
		{{custom_passkey_work.start}}222{{custom_passkey_work.end}}
	{{cur_page_name~=login|forum|index|feed.end}}
{{template==177.end}}
{{template==111|144.start}}
	{{cur_page_name==login.start}}
		{{custom_passkey_work.start}}333{{custom_passkey_work.end}}
	{{cur_page_name==login.end}}
{{template==111|144.end}}
{{user_registered==false.end}}
 

{{custom_passkey_work==true.start}}
 
<style>
{{template==177.start}}
 
{{custom_pk_dark==true.start}}
form#login_form	div.form-group.passkeyLoginBox {
	background-color: {{custom_pk_dark}};
	padding: 0.5em;	
	}
{{custom_pk_dark==true.end}}
 
form#login_form:not(.show_classic){
	/*	background-color: beige;	*/
	div.form-group:not(.passkeyLoginBox) {
		display: none !important;
		}
	button.form-control.btn.passkeyLoginBtn {
		height: 120px !important;
		}
	button.btn-info.passkey_show_classic	{margin-top: 0.7em}	
	}
 
form#login_form.show_classic	{
	button.btn-info.passkey_show_classic	{
		display: none;		}
	button svg, button br {display: none;		}
	div.form-group.passkeyLoginBox {
		button {opacity : 0.5}
		}
{{custom_pk_dark==true.start}}
	.passkeyLoginMsg	{
		filter:brightness(2.5);
		}
{{custom_pk_dark==true.end}}
	}
 
{{template==177.end}}
 
{{template==111|144.start}}
 
form#login_form:not(.show_classic){
	text-align: center;
	& > :not(.passkeyLoginBox) {
		display: none !important;
		}
	.passkeyLoginBox {
		}
	} 
 
form#login_form.show_classic	{
	button.passkey_show_classic	{
		display: none;		}
	button svg, button br {display: none;		}
	.passkeyLoginBox {
		button {opacity : 0.5}
		}
	} 
 
{{template==111|144.end}}
 

</style>
 
<script>
document.addEventListener("DOMContentLoaded", function() {
 
if(document.getElementById("login_form"))	setTimeout(()=>{
	{{custom_dev_pk.start}}
		//	möglicherweise ist diese Zeitverzögerung nicht (mehr) nötig
	{{custom_dev_pk.end}}
 
const c={v:"\u2705 passkey 12.7.2026"
	,shw_classic:"show_classic"
	}
 
const y={v:"passkey"
	,pkform:document.querySelector("form#login_form")
	,pkbox:document.querySelector("form#login_form .passkeyLoginBox")
	,pkmsg:document.querySelector("form#login_form .passkeyLoginMsg")
	,pkbut:document.querySelector("form#login_form button.passkeyLoginBtn")
	}
	console.log(c.v,typeof (window.Passkey),y);
 

{{custom_dev_pk.start}}
/*********
Statuszeile überwachen
https://developer.mozilla.org/de/docs/Web/API/MutationObserver
*********/{{custom_dev_pk.end}}
 
const config_pk_msg = { attributes: false, childList: true, subtree: false };
 
const pk_msg_observe = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
			function vg(n){
				return y.pkbox.getAttribute('data-pk-' + n)==mutation.target.textContent;
				}
	{{custom_dev_pk.start}}
     console.log("A child node has been added or removed.\n"+mutation.target.textContent);
	{{custom_dev_pk.end}}
 
			if(vg("cancelled") ||	vg("failed") ||	vg("nocred")){
					y.pkform.classList.toggle(c.shw_classic,1);
					y.pkform.closest(".card , .box").scrollIntoView(1);
					pk_observer.disconnect();
				}	
			}
	{{custom_dev_pk.start}}
     else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
	{{custom_dev_pk.end}}
 
  }
};
 
const pk_observer = new MutationObserver(pk_msg_observe);
 
pk_observer.observe(y.pkmsg, config_pk_msg);
 
{{custom_dev_pk.start}}
/*********
button verzieren / hinzufügen
*********/{{custom_dev_pk.end}}
 
	function clone_template(id){
		let tmp=document.getElementById(id);
		tmp=tmp?.content.firstElementChild.cloneNode(1);
		return tmp;
		}
 
	let tmp=clone_template("t_pk_cl");
	if(tmp)	{
		y.pkbut.parentNode.insertBefore(tmp,null);
 
		tmp.onclick=()=>
			y.pkform.classList.toggle(c.shw_classic);
		}
	
	tmp=clone_template("t_pk_svg");
	if(tmp)	{
		y.pkbut.insertBefore(tmp,y.pkbut.firstChild);
		}	
},document.querySelector("form#login_form .passkeyLoginMsg")	?	20: 555);
})
</script>
 

<template id="t_pk_cl"><button type="button"
{{template==177.start}} class="form-control btn btn-info passkey_show_classic"{{template==177.end}}
{{template==144.start}} class="button input passkey_show_classic"{{template==144.end}}
{{template==111.start}} class="button1 passkey_show_classic"{{template==111.end}} >classic Login</button>
</template> 
 
<template id="t_pk_svg"><span><svg xmlns="http://w3.org" viewBox="0 0 32 32" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M16 3C13.2 3 10.5 4.1 8.5 6.1c-4 4-4 10.4 0 14.4.2.2.5.2.7 0s.2-.5 0-.7c-3.6-3.6-3.6-9.5 0-13.1C11.1 4.8 13.5 3.9 16 3.9s4.9.9 6.8 2.8c3.8 3.8 3.8 9.9-.1 13.7l-4.1 4.1c-.2.2-.2.5 0 .7s.5.2.7 0l4.1-4.1c4.2-4.2 4.2-11-.1-15.1C21.5 4.1 18.8 3 16 3z"/>
                <path d="M16 6.3c-2.4 0-4.6.9-6.3 2.6-3.5 3.5-3.5 9.1 0 12.6.2.2.5.2.7 0s.2-.5 0-.7c-3.1-3.1-3.1-8.1 0-11.2 1.5-1.5 3.5-2.3 5.6-2.3s4.1.8 5.6 2.3c3.1 3.1 3.1 8.1 0 11.2l-2.4 2.4c-.2.2-.2.5 0 .7s.5.2.7 0l2.4-2.4c3.5-3.5 3.5-9.1 0-12.6-1.7-1.7-3.9-2.6-6.3-2.6z"/>
                <path d="M16 9.6c-1.5 0-3 .6-4.1 1.7-2.3 2.3-2.3 5.9 0 8.2.2.2.5.2.7 0s.2-.5 0-.7c-1.9-1.9-1.9-4.9 0-6.8 1-1 2.2-1.5 3.4-1.5s2.5.5 3.4 1.5c1.9 1.9 1.9 4.9 0 6.8l-1.3 1.3c-.2.2-.2.5 0 .7s.5.2.7 0l1.3-1.3c2.3-2.3 2.3-5.9 0-8.2-1.1-1.1-2.6-1.7-4.1-1.7z"/>
                <path d="M16 12.9c-.7 0-1.3.3-1.8.8-1 1-1 2.6 0 3.6.2.2.5.2.7 0s.2-.5 0-.7c-.6-.6-.6-1.6 0-2.2.3-.3.7-.5 1.1-.5s.8.2 1.1.5c.6.6.6 1.6 0 2.2l-.7.7c-.2.2-.2.5 0 .7s.5.2.7 0l.7-.7c1-1 1-2.6 0-3.6-.5-.5-1.1-.8-1.8-.8z"/>
                <path d="M16 15.6c-.2 0-.4.1-.5.3-.3.3-.3.8 0 1.1l1.5 1.5c.2.2.5.2.7 0s.2-.5 0-.7l-1.5-1.5c-.1-.1-.3-.2-.7-.2z"/>
            </svg><br></span>
</template>
 
{{custom_passkey_work==true.end}}