Form Login V3.2 Encrypt content dan Hidden Content

Labels:

 what's New ?  

  1.  Profile appears only when logged in. [ New v3.1 ]
  2. Speed ​​up login / register notifications. [ New v3.1 ]
  3.  bug fixed [Content delay displayed] when logging in. [ New v3.1 ]
  4. Added hidden and show password. [ New v3.1 ]
  5. Remove button [button delete] in dasboard [ New v3.1 ] 
  6. ExpRole Membership [New v3.2]
  7. Encrypt Content [ New v3.2 ]
  8. New Dasboard admin [ search user, search role, pagination dynamic, Generate date, Exprole Membership ]  [ New v3.2 ]
  9. New 2 Role [ Staff, Μodder ] [ New v3.2 ]
  10. New Style form v2 [ New v3.2 (ongoing) ]

Dalam Update kali ini kebanyakan fokus perbaikan pada js dengan memasang fitur encrypt kontent dan  Menambahkan banyak fitur juga pada dasboard admin 

Preview Form Login
List Video Tutorial
Download Video Tutorial Pasang Form Download Video v3.2 ZMv5 Download Video v3.2 ZMv6
Download Video Tutorial Buat Akun firebase Download Video
Video Thumbnail
Tutorial ZMv5 (Available) Tutorial ZMv6 (Available) Tutorial firebase Demo encrypt

Status Versi: v3.2
Kusarankan setelah kalian edit jsnya, maka encrypt semua kode jsnya.
Login


step 1 :js link.

letakan js link firebase dan config ini di bawah <head>

ganti config firebase dengan punya kamu sendiri 

    <script src='https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js'/>
  <script src='https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js'/>
  <script src='https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js'/>
  <script>/*<![CDATA[*/
const configformlogin={

  apiKey: "AIzaSyCDUKoueS66e77qvqGbrc1Clb0eFJWi2JU",
	authDomain: "formlogin-6e176.firebaseapp.com",
	projectId: "formlogin-6e176",
	storageBucket: "formlogin-6e176.appspot.com",
	messagingSenderId: "197923569691",
	appId: "1:197923569691:web:db39447bcd0f6d7bd6f8be"
};
/*]]>*/
</script>

step 2: css.

letakan ditempatnya yaitu didalam <b:skin> </b:skin>


.btn-close-profile,.cls{transition:.3s;outline:0}#register-favorite,.group label{color:var(--colom-input)}

.ProfileX h2,.form,.notifchapter,
div#Lognotif-pass,div#Lognotif-register,div#Lognotif-login{text-align:center}

:root{
--bg-form:#fff;
--color-text-form:#222;
--color-text-profile:#222;
--bg-btn-cls:#0074B1;
--c-btn-cls:#FFF;
--bg-colom-input:#f1f1f1;
--colom-input:#555;
--color-svg-input:#bbb;
--bar-bottom-color:#00BA47;
--br-bottom:#f1f1f1;
--bg-btn-fl:#00BA47;
--hover-bg-btn-fl:#1e90ff;
--c-btn-fl:#fff;
--size-font-input:14px;
--color-message-a:#00d449;
--sideBd-color:#ccc;
/*color Notif Lock Chapter*/
--text-notif:#f1f1f1;
--bgcolor-notif:#1e2129;
--color-textrole:#ffba0a;
/*Link Opsi Login / Register Header*/
--bgcolor-opsiprofile:#1e2129;
--textcolor-opsiprofile:#f1f1f1;
}

#fixedform{position:fixed;top:0;right:0;left:0;display:grid;place-items:center;z-index:9999;overflow:auto;max-height:100%;max-width:1080px}

.ProfileX,span.data-user{position:relative;padding:10px}

.ProfileX{display:flex;flex-direction:column;margin:20px;background:var(--bg-form);color:var(--color-text-profile);border-radius:15px;border:none}

#logoprofile svg{width:75px;height:75px}

#logoprofile{float:left;margin:auto auto 5px 15px;width:80px;height:80px;border-radius:50%}

.profile-content{display:flex;flex-direction:column;margin:15px;gap:15px}

span.data-user{border-radius:15px;border:2px solid #f1f1f1;margin:5px}

span.data-user span:first-child{position:absolute;top:-25px}
button#change-username-button{position:absolute;right:-15px;top:-15px}

.btn-close-profile{position:absolute;top:15px;right:15px;background-color:#0000;border:none;height:auto;border-radius:15px;margin:auto;padding:1px 3px}

.btn-opsi-delete,.btn-opsi-logout,

#Lognotif-login,#Lognotif-pass,#Lognotif-register{background:#fff;width:250px;height:auto;position:fixed;left:50%;transform:translateX(-50%);z-index:999}

.btn-opsi-profile{display:inline-flex;justify-content:space-between}
.btn-opsi-delete,.btn-opsi-logout{top:40%;border:2px solid #f1f1f1;border-radius:25px;padding:30px;gap:5px;flex-wrap:wrap}#box-btn-opsi-delete span,#btnlogout span{text-align:center;font-size:15px;margin:15px auto}.cls{background-color:var(--bg-btn-cls);border:none;height:auto;border-radius:15px;color:var(--c-btn-cls);margin:auto;padding:5px 10px;font-size:12px}.cls:hover{background-color:#00b4ff;cursor:pointer}.login-page{width:100%;padding:0;margin:auto}.boxbutton{display:inline-flex;flex-direction:row-reverse;justify-content:center;width:100%;gap:15px;padding:5px}

div#Lognotif-login,div#Lognotif-pass,div#Lognotif-register{padding:5px;border-radius:25px;top:50%;font-size:15px}

div#Lognotif-login .btn-fl,div#Lognotif-pass .btn-fl,div#Lognotif-register .btn-fl{outline:0;background:var(--bg-btn-fl);border-radius:25px;border:none;width:80px;padding:8px 0;color:var(--c-btn-fl);font-size:13px;cursor:pointer}

p.noted,p.noted-message{font-size:13px}
#login-form h3,#register-form h3{color:#222;margin-bottom:55px;margin-top:-15px}.icon-lock-pass{position:absolute;right:10px;top:8px}.form,.group{position:relative}.icon-lock-pass .showPas{width:24px;height:24px;fill:#bbb}.hidden,.hidden1,.form .register-fr,.form .reset-fr,.icon1.hidden,.icon2.hidden,.options li:first-child{display:none}.border-wrp{margin:10px auto;color:#b6b6b6;width:100%;font-size:14px;display:flex;justify-content:center}.border-bts{border-color:var(--sideBd-color);width:100px;border-top-style:solid;border-top-width:1px}.spanor{margin:-10px 10px 0;text-transform:uppercase;font-style:italic}

.form{z-index:1;
background:var(--bg-form);
color:var(--color-text-form);
max-width:300px;
margin:auto;
padding:35px;
box-shadow:rgba(0,0,0,.2) 0 2px 10px;
letter-spacing:1px;
border-radius:15px}

.form .message{margin:5px 0 0;color:#bbb;font-size:.85em}.form .message a{color:var(--color-message-a);text-decoration:none}.group{margin-bottom:35px}#register-favorite,.group input{font-size:var(--size-font-input);padding:13px 20px;border-radius:35px;background-color:var(--bg-colom-input);width:100%;border:none}#select-submenu .s-hidden{visibility:hidden;padding-right:10px}#select-submenu .select{cursor:pointer;display:inline-flex;position:relative;font-size:var(--size-font-input);margin-top:-12px;width:100%}#select-submenu .styledSelect{position:absolute;right:0;left:0;padding:8px;background-color:var(--bg-colom-input);border-radius:35px}#select-submenu .styledSelect:after{content:"";width:0;height:0;border:5px solid transparent;border-color:#000 transparent transparent;position:absolute;top:16px;right:25px}#select-submenu .styledSelect:before{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="" d="M3.497 8.065L4.784 19h14.443l1.286-10.935l-4.01 2.673l-4.498-6.297l-4.498 6.297l-4.01-2.673ZM2.806 5.2L7.005 8l4.186-5.86a1 1 0 0 1 1.628-.001L17.005 8l4.2-2.799a1 1 0 0 1 1.547.95L21.11 20.116a1 1 0 0 1-.993.883H3.894a1 1 0 0 1-.993-.883L1.258 6.149A1 1 0 0 1 2.806 5.2Zm9.2 9.8a2 2 0 1 1-.001-4a2 2 0 0 1 0 4Z"/></svg>');position:absolute;top:6px;left:15px}#select-submenu .styledSelect.active,#select-submenu .styledSelect:active{background-color:#f1f1f1}.options{display:none;position:absolute;top:80%;right:0;left:0;z-index:999;margin:0;padding:15px;list-style:none;background-color:#fff;border-radius:25px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}.btn-closeform,.form .btn-fl{outline:0;border-radius:15px;cursor:pointer}.options li{margin:5px 0;padding:3px 10px;border-radius:25px;background:#f1f1f1}.options li:hover{background-color:var(--bg-btn-fl);color:#fff}.group input:focus{outline:0}.group label{display:flex;font-size:var(--size-font-input);position:absolute;pointer-events:none;left:15px;top:10px;transition:.2s;-moz-transition:.2s;-webkit-transition:.2s;align-content:center}.group label svg{margin:auto 5px auto auto}.group input:focus~label,.group input:valid~label{left:0;top:-25px;font-size:14px}.bar{position:relative;display:block;width:100%}.bar:after,.bar:before{content:"";height:2px;width:0;bottom:-1px;position:absolute;background:var(--bar-bottom-color);transition:.2s;-moz-transition:.2s;-webkit-transition:.2s}.bar:before{left:45%}.bar:after{right:45%}.group input:focus~.bar:after,.group input:focus~.bar:before{width:50%}.btn-closeform{position:absolute;top:15px;right:20px;background:#0000;border:none;padding:0;font-size:14px}.btn-closeform svg{width:30px;height:30px}.form .btn-fl{background:var(--bg-btn-fl);border:none;width:150px;padding:8px 0;color:var(--c-btn-fl);font-size:15px;box-shadow:rgba(0,0,0,.16) 0 2px 5px,rgba(0,0,0,.12) 0 2px 10px}.form button:active,.form button:focus,.form button:hover{background:var(--hover-bg-btn-fl);box-shadow:rgba(0,0,0,.1) 0 1px 3px,rgba(0,0,0,.1) 0 1px 5px}

.notifchapter{padding:10px;margin:auto 10px;background:var(--bgcolor-notif);color:var(--text-notif);z-index:99;border-radius:15px}

.notifchrole{display:flex;flex-direction:column}.rolenotif{margin-top:20px;font-size:16px;font-weight:700}.rolenotif p{color:var(--color-textrole)}.dropdown-opsi{position:relative;display:inline-block;float:right;margin-right:5px}.dropdown-btn-opsi{content:"";border:none}.dropdown-btn-opsi:after{content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cg fill="white"%3E%3Cpath d="M11 6a3 3 0 1 1-6 0a3 3 0 0 1 6 0z"%2F%3E%3Cpath fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');}

.dropdown-content-opsi{display:none;position:absolute;right:0;margin-top:12px;direction:rtl;background-color:var(--bgcolor-opsiprofile);min-width:150px;border-radius:15px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:9991}

.dropdown-item-opsi{padding:12px 16px;text-decoration:none;display:flex;gap:5px;color:var(--textcolor-opsiprofile);border:none;background:#0000;}

.dropdown-item-opsi:hover{background:#222;color:#fff;border-radius:15px}.show-opsi{display:block}

/*css Button menu Profile zv5*/
.menu-login {
  display: flex;
  place-content: center;
  align-items: center;
  color: white;
  background-color: rgba(0,0,0,.4);
  padding: 4px 10px;
  border-radius: 5px;
}
@media (max-width: 900px) {
.menu-login {
  width: 35px;
  height: 35px;
  overflow: hidden;}
}
.menu-login:hover {filter: hue-rotate(100deg);}

step 3:Button Profile.

cari BlogSearch1 > lalu cari <b:include name='darkMode'/> setelah ditemukan letakan kode button profile ini dibawahnya <b:include name='darkMode'/>


<!--Menu Login/Register-->       <div class='dropdown-opsi'> 
<button class='dropdown-btn-opsi menu-login'>
<span class='sm:dn'>Login</span></button>
<div class='dropdown-content-opsi'>
<button class='dropdown-item-opsi' disabled='disabled' id='profiletab-button' onclick='document.getElementById(&quot;contentx&quot;).style.display=&quot;flex&quot;;' type='button'><svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='M12 4a8 8 0 0 0-6.96 11.947A4.99 4.99 0 0 1 9 14h6a4.99 4.99 0 0 1 3.96 1.947A8 8 0 0 0 12 4Zm7.943 14.076A9.959 9.959 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.958 9.958 0 0 0 2.057 6.076l-.005.018l.355.413A9.98 9.98 0 0 0 12 22a9.947 9.947 0 0 0 5.675-1.765a10.055 10.055 0 0 0 1.918-1.728l.355-.413l-.005-.018ZM12 6a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z' fill='currentColor' fill-rule='evenodd'/></svg>Profile</button>
 <button class='dropdown-item-opsi' onclick='document.getElementById(&quot;login-register-form&quot;).style.display=&quot;&quot;;'><svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4 22q-.825 0-1.413-.588T2 20V9q0-.825.588-1.413T4 7h5V4q0-.825.588-1.413T11 2h2q.825 0 1.413.588T15 4v3h5q.825 0 1.413.588T22 9v11q0 .825-.588 1.413T20 22H4Zm0-2h16V9h-5q0 .825-.588 1.413T13 11h-2q-.825 0-1.413-.588T9 9H4v11Zm2-2h6v-.45q0-.425-.238-.788T11.1 16.2q-.5-.225-1.012-.338T9 15.75q-.575 0-1.088.113T6.9 16.2q-.425.2-.663.563T6 17.55V18Zm8-1.5h4V15h-4v1.5ZM9 15q.625 0 1.063-.438T10.5 13.5q0-.625-.438-1.063T9 12q-.625 0-1.063.438T7.5 13.5q0 .625.438 1.063T9 15Zm5-1.5h4V12h-4v1.5ZM11 9h2V4h-2v5Zm1 5.5Z' fill='currentColor'/></svg>Login/Register</button> 
</div>
</div>   
                                <script>
/*<![CDATA[*/
  const dropdownButton = document.querySelector('.dropdown-btn-opsi');
    const dropdownContent = document.querySelector('.dropdown-content-opsi'); dropdownButton.addEventListener('click', () => {        dropdownContent.classList.toggle('show-opsi');
    });
 window.addEventListener('click', (event) => {
        if (!event.target.matches('.dropdown-btn-opsi')) {
            if (dropdownContent.classList.contains('show-opsi')) {
                dropdownContent.classList.remove('show-opsi');
            }
        }
    });
/*]]>*/
  </script>    
    <!--Menu Login/Register-->

step 4: kode form.

letakan kode ini diatas </head>. jika masih bingung maka cari saja kode ini <b:includable id='inlineAd2'> dan letakan diatasnya


<b:includable id='frm'>   
 <div id='fixedform'>

 <!-- Form Profile -->
<div class='ProfileX' id='contentx' style='display:none;'>
 <h2>Profile</h2>
 <span id='logoprofile'>
<svg fill='%23bbb' height='45' viewBox='0 0 24 24' width='45' xmlns='http://www.w3.org/2000/svg'><path d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'/></svg>
</span>    
    <button class='btn-close-profile' id='close-profile' onclick='document.getElementById(&quot;contentx&quot;).style.display=&quot;none&quot;;'><svg height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='m14.5 9.5l-5 5m0-5l5 5M7 3.338A9.954 9.954 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'/></svg></button>
  <div class='profile-content'>
   <span class='data-user'>
    <span>Uid:</span>
  <span id='profile-uid'/>
    </span>
    <span class='data-user'>
    <span>Username:</span>
   <span id='profile-username'/> 
    <button class='cls' id='change-username-button'><svg height='20' viewBox='0 0 32 32' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M13 3c-3.855 0-7 3.145-7 7c0 2.41 1.23 4.55 3.094 5.813C5.527 17.343 3 20.883 3 25h2c0-4.43 3.57-8 8-8c2.145 0 4.063.879 5.5 2.25l-4.719 4.719l-.062.312l-.688 3.532l-.312 1.468l1.469-.312l3.53-.688l.313-.062l10.094-10.094c1.16-1.16 1.16-3.09 0-4.25a3.018 3.018 0 0 0-4.219-.031l-3.968 3.969a10.103 10.103 0 0 0-3.032-2A7.024 7.024 0 0 0 20 10c0-3.855-3.145-7-7-7zm0 2c2.773 0 5 2.227 5 5s-2.227 5-5 5s-5-2.227-5-5s2.227-5 5-5zm13 10c.254 0 .52.082.719.281a.977.977 0 0 1 0 1.406l-9.688 9.688l-1.781.375l.375-1.781l9.688-9.688A.934.934 0 0 1 26 15z' fill='currentColor'/></svg></button>
    </span>
  <span class='data-user'>
    <span>Email:</span>
  <span id='profile-email'/>
    </span>
    <span class='data-user'>
   <span>Role:</span>
  <span id='profile-role'/>
   </span> 
    <span class='data-user'>
   <span>Exp Member:</span>
  <span id='exp-role'/>
   </span> 
  <div class='btn-opsi-profile'>
  <button class='cls' onclick='document.querySelector(&apos;#delete-account-button&apos;).style.display=&apos;block&apos;; document.querySelector(&apos;#box-btn-opsi-delete&apos;).style.display=&apos;flex&apos;; document.querySelector(&apos;#cancel-delete-account&apos;).style.display=&apos;block&apos;'>Delete Account?</button>      <div class='btn-opsi-delete' id='box-btn-opsi-delete' style='display:none'><span>Apakah Kamu yakin Ingin menghapus Akun Milik kamu?, Data yang sudah dihapus tidak bisa dikembalikan lagi.. tolong ingat itu!! </span>
<button class='cls' id='delete-account-button'>Yes! Delete MyAccount</button> 
  <button class='cls' id='cancel-delete-account' onclick='document.querySelector(&apos;#delete-account-button&apos;).style.display=&apos;none&apos;; document.querySelector(&apos;#box-btn-opsi-delete&apos;).style.display=&apos;none&apos;; document.querySelector(&apos;#cancel-delete-account&apos;).style.display=&apos;none&apos;' style='display:none'>Cancel</button>
      </div>
    <button class='cls lmg' onclick='document.getElementById(&apos;btnlogout&apos;).style.display=&apos;flex&apos;'>logout?</button> 
   <div class='btn-opsi-logout' id='btnlogout' style='display:none'>
   <span>Apakah Kamu yakin Ingin Log Out dari Akun Milik kamu?</span>
 <button class='cls hidden' id='logout-button'>Yes!</button>
   <button class='cls lmg2' onclick='document.getElementById(&apos;btnlogout&apos;).style.display=&apos;none&apos;'>Cancel!</button>
     </div>    
     </div>
   <!--div btn-opsi-profile -->    
	</div>
	</div>   
 
 <!--Form Container -->
<div class='login-page fr-close' id='login-register-form' style='display:none'>
<div class='form'>
   <button class='btn-closeform' onclick='document.getElementById(&apos;login-register-form&apos;).style.display=&apos;none&apos;'><svg height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><path d='m14.5 9.5l-5 5m0-5l5 5M7 3.338A9.954 9.954 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'/></svg></button>
    <!-- Form Login -->
<form class='login-fl' id='login-form'>
   <h3>Welcome Back!</h3> 
  <div class='group icon-email'>
     <input class='frinput' id='login-email' required='required' type='email'/>
     <span class='bar'/>
      <label><svg fill='var(--color-svg-input)' height='25' viewBox='0 0 24 24' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'/></svg>Email</label>
      </div>
<div class='group icon-pas'>
 	<input class='frinput' id='login-password' required='required' type='password'/>
        <span class='bar'/>
<label><svg fill='var(--color-svg-input)' height='25' viewBox='0 0 24 24' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/></svg>Password</label>
<span class='icon-lock-pass' id='showpass'>
<svg class='showPas icon1' viewBox='0 0 24 24'><path d='M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z' fill='var(--color-svg-input)'/></svg>
<svg class='showPas icon2 hidden' viewBox='0 0 24 24'>
<path d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z' fill='var(--color-svg-input)'/></svg>
</span>
      </div>
<div class='boxbutton'>        
   <button class='btn-fl' type='submit'>login</button>
      </div>  
   <p class='message'>
   <a class='reoverPassword'>Forgot Password?</a>
    </p>
<div class='border-wrp'>
<div class='border-bts'/>
<span class='spanor'>or</span>
<div class='border-bts'/>
  </div>
   <p class='message'>New User? 
   <a class='createAccount'>Register</a>
    </p>   
    </form> 
    <!-- Form Register -->
<form class='register-fr' id='register-form'>
    <h3>Create Account</h3>
      <div class='group icon-email'>
     <input class='frinput' id='register-email' required='required' type='email'/>
        <span class='bar'/>
        <label><svg fill='#bbb' height='25' viewBox='0 0 24 24' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'/></svg>Email</label>
      </div>
        <div class='group'>
<input class='frinput' id='register-username' required='required' type='text'/>
        <span class='bar'/>
        <label><svg fill='var(--color-svg-input)' height='25' viewBox='0 0 24 24' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'/></svg>Username</label>
      </div>
      <div class='group icon-pas'>
  <input class='frinput' id='register-password' required='required' type='password'/>
        <span class='bar'/>
  <label><svg fill='var(--color-svg-input)' height='25' viewBox='0 0 24 24' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/></svg>Password</label>
<span class='icon-lock-pass' id='showpass2'>
<svg class='showPas icon3' viewBox='0 0 24 24'><path d='M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z' fill='var(--color-svg-input)'/></svg>
<svg class='showPas icon4 hidden' viewBox='0 0 24 24'>
<path d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z' fill='var(--color-svg-input)'/></svg>
</span>
    </div>
 <div class='group' id='select-submenu'>
 <select id='register-favorite' name='register-favorite'>
 <option disabled='' selected='' value=''>Reader</option>
<option value='Manga'>Manga</option><option value='Manghua'>Manghua</option>
<option value='Manghwa'>Manghwa</option><option value='Light Novel JP'>Light Novel JP</option>
<option value='Web Novel jp'>Web Novel JP</option>
<option value='Web Novel KR'>Web Novel KR</option>
<option value='Web Novel CN'>Web Novel CN</option>
  </select>   
 <span class='bar'/>
 <label/>
 </div>
  <button class='btn-fl' type='submit'>REGISTER</button>
      <p class='message'>Already have an account?<a class='signIn'>Log in here</a></p>
    <p class='noted-message'>Your e-mail must be the same as the one you&#39;re using in your Ko-Fi or Patreon account.</p>
    </form>       
    <!-- Form Resert Password-->
<form class='reset-fr' id='reset-password-form'>
  <p class='noted'>Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.</p>    
 <div class='group'>
 <input class='frinput' id='reset-password-email' required='required' type='email'/>
   <span class='bar'/>
     <label><svg fill='var(--color-svg-input)' height='25' viewBox='0 0 24 24' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'/></svg>Email</label>
     </div>
      <button class='btn-fl' type='submit'>Reset password</button>
   <p class='message'>Back to <a class='backToLogin'>Log in here</a></p>
    </form>    
  </div>
    </div>     
    
 <!--Notif Log-->
<div class='notiflog hidden' id='Lognotif-login'>
<span><p id='login-message'/></span>
<div class='notifbtn'>      
<button class='btn-fl' id='closetab-button' onclick='loghidden()'>Close</button>
  </div>
</div>
<div class='notiflog hidden' id='Lognotif-register'>
<span><p id='register-message'/></span>
<div class='notifbtn'>      
<button class='btn-fl' id='closetab-button' onclick='loghidden()'>Close</button>
  </div>
</div>
<div class='notiflog hidden' id='Lognotif-pass'>
<span><p id='reset-password-message'/></span>   
<div class='notifbtn'>      
<button class='btn-fl' id='closetab-button' onclick='loghidden()'>Close</button>
  </div>
</div>

 </div>   

  <script defer='defer'>
/*<![CDATA[*/ 
/*==== Js For Show And hidden Password by hirutshuji ====*/
function showpasslogin(){document.querySelector("#login-password").setAttribute("type","text"),document.querySelector(".icon1").classList.add("hidden"),document.querySelector(".icon2").classList.remove("hidden")}function hidepasslogin(){document.querySelector("#login-password").setAttribute("type","password"),document.querySelector(".icon1").classList.remove("hidden"),document.querySelector(".icon2").classList.add("hidden")}function showpassregister(){document.querySelector("#register-password").setAttribute("type","text"),document.querySelector(".icon3").classList.add("hidden"),document.querySelector(".icon4").classList.remove("hidden")}function hidepassregister(){document.querySelector("#register-password").setAttribute("type","password"),document.querySelector(".icon3").classList.remove("hidden"),document.querySelector(".icon4").classList.add("hidden")}var pwShownLogin=0;document.getElementById("showpass").addEventListener("click",function(){0==pwShownLogin?(pwShownLogin=1,showpasslogin()):(pwShownLogin=0,hidepasslogin())},!1);var pwShownRegister=0;document.getElementById("showpass2").addEventListener("click",function(){0==pwShownRegister?(pwShownRegister=1,showpassregister()):(pwShownRegister=0,hidepassregister())},!1);
/*]]>*/
  </script>     
<script defer='defer'>
/*<![CDATA[*/
$(".message a.signIn,.message a.createAccount").on("click",function(){$(".register-fr,.login-fl").animate({height:"toggle",opacity:"toggle"},"slow")}),$(".reoverPassword,.backToLogin").on("click",function(){$(".reset-fr,.login-fl").animate({height:"toggle",opacity:"toggle"},"slow")}),$("#register-favorite").each(function(){var e=$(this),t=$(this).children("option").length;e.addClass("s-hidden"),e.wrap('<div class="select"></div>'),e.after('<div class="styledSelect"></div>');var i=e.next("div.styledSelect");i.text(e.children("option").eq(0).text());for(var o=$("<ul />",{class:"options"}).insertAfter(i),l=0;l<t;l++)$("<li />",{text:e.children("option").eq(l).text(),rel:e.children("option").eq(l).val()}).appendTo(o);var n=o.children("li");i.click(function(e){e.stopPropagation(),$("div.styledSelect.active").each(function(){$(this).removeClass("active").next("ul.options").hide()}),$(this).toggleClass("active").next("ul.options").toggle()}),n.click(function(t){t.stopPropagation(),i.text($(this).text()).removeClass("active"),e.val($(this).attr("rel")),o.hide()}),$(document).click(function(){i.removeClass("active"),o.hide()})});
/*]]>*/
  </script>     
</b:includable>

<b:includable id='jsfrm'>
 <script>/*<![CDATA[*/
 /*====jsfrm v3.2 [selesai] by hirutshuji====*/
const firebaseConfigform=configformlogin;firebase.initializeApp(firebaseConfigform);const auth=firebase.auth(),db=firebase.firestore(),loginRegisterForm=document.querySelector("#login-register-form"),loginForm=document.querySelector("#login-form"),registerForm=document.querySelector("#register-form"),resetPasswordForm=document.querySelector("#reset-password-form"),loginEmail=document.querySelector("#login-email"),loginPassword=document.querySelector("#login-password"),loginMessage=document.querySelector("#login-message"),registerEmail=document.querySelector("#register-email"),registerUsername=document.querySelector("#register-username"),registerPassword=document.querySelector("#register-password"),registerFavorite=document.querySelector("#register-favorite"),registerMessage=document.querySelector("#register-message"),resetPasswordEmail=document.querySelector("#reset-password-email"),resetPasswordMessage=document.querySelector("#reset-password-message"),contentProfile=document.querySelector("#contentx"),profileUid=document.querySelector("#profile-uid"),profileEmail=document.querySelector("#profile-email"),profileUsername=document.querySelector("#profile-username"),profileRole=document.querySelector("#profile-role"),expRoleuser=document.querySelector("#exp-role"),logoutButton=document.querySelector("#logout-button"),LognotifLogin=document.querySelector("#Lognotif-login"),LognotifRegister=document.querySelector("#Lognotif-register"),LognotifResetpass=document.querySelector("#Lognotif-pass");function showContent(){contentProfile.classList.remove("hidden"),logoutButton.classList.remove("hidden"),removeDisabled()}function hideContent(){contentProfile.classList.add("hidden"),logoutButton.classList.add("hidden")}function loghidden(){LognotifLogin.classList.add("hidden"),LognotifRegister.classList.add("hidden"),LognotifResetpass.classList.add("hidden")}function removeDisabled(){document.getElementById("profiletab-button").removeAttribute("disabled")}const changeUsernameButton=document.querySelector("#change-username-button");changeUsernameButton.addEventListener("click",()=>{let e=prompt("Masukkan Username baru Anda:");if(null!==e){let t=auth.currentUser;db.collection("users").doc(t.uid).update({username:e}).then(()=>{profileUsername.textContent=e,alert("Username berhasil diubah.")}).catch(e=>{alert("Gagal mengubah Username: "+e.message)})}});const deleteAccountButton=document.querySelector("#delete-account-button");function showProfile(e){db.collection("users").doc(e).get().then(t=>{if(t.exists){let s=t.data();profileUid.textContent=e,profileEmail.textContent=s.email,profileUsername.textContent=s.username,profileRole.textContent=s.role,expRoleuser.textContent=s.exp}else console.log("Data User tidak ditemukan!")}).catch(e=>{console.log("Gagal Mengambil data User:",e)})}deleteAccountButton.addEventListener("click",()=>{let e=prompt("Masukkan kata sandi Anda untuk mengonfirmasi penghapusan akun, akun yang sudah dihapus tidak bisa dikembalikan:");if(null!==e){let t=auth.currentUser,s=firebase.auth.EmailAuthProvider.credential(t.email,e);t.reauthenticateWithCredential(s).then(()=>{db.collection("users").doc(t.uid).delete().then(()=>{t.delete().then(()=>{setTimeout(function(){alert("Account successfully deleted."),location.reload()},0)})}).catch(e=>{alert("Gagal menghapus akun: "+e.message)})}).catch(e=>{alert("Autentikasi gagal. Mohon periksa kata sandi Anda.")})}}),loginForm.addEventListener("submit",e=>{e.preventDefault();let t=loginEmail.value,s=loginPassword.value;auth.signInWithEmailAndPassword(t,s).then(e=>{let t=e.user;t.emailVerified?(LognotifLogin.classList.remove("hidden"),loginMessage.textContent="Login berhasil!",loginMessage.style.color="green",db.collection("users").doc(t.uid).update({emailVerified:!0}),setTimeout(function(){alert("Welcome Back!"),location.reload()},1e3)):(LognotifLogin.classList.remove("hidden"),loginMessage.textContent="Harap verifikasi email Anda sebelum login.",loginMessage.style.color="red")}).catch(e=>{LognotifLogin.classList.remove("hidden"),loginMessage.textContent="Login failed. "+e.message,loginMessage.style.color="red"})}),registerForm.addEventListener("submit",e=>{e.preventDefault();let t=registerEmail.value,s=registerUsername.value,r=registerPassword.value,o=registerFavorite.value,i=new Date;function a(e){return e.toLocaleDateString("id-ID",{timeZone:"Asia/Jakarta",day:"2-digit",month:"2-digit",year:"numeric",timeZoneName:"short"})}i.setSeconds(i.getSeconds()+10),auth.createUserWithEmailAndPassword(t,r).then(e=>{let n=e.user;return n.sendEmailVerification(),db.collection("users").doc(n.uid).set({email:t,username:s,password:r,favorite:o,role:"User",exp:a(i),emailVerified:!1})}).then(()=>{LognotifRegister.classList.remove("hidden"),registerMessage.textContent="Registrasi berhasil!  Silakan periksa email Anda untuk memverifikasi akun Anda.",registerMessage.style.color="green",setTimeout(function(){alert("Pastikan verifikasi terlebih dahulu sebelum Login, dan data Anda hanya bisa dihapus di Tempat Profile."),location.reload(),auth.signOut()},1e3)}).catch(e=>{LognotifRegister.classList.remove("hidden"),registerMessage.textContent="Registration failed. "+e.message,registerMessage.style.color="red"})}),resetPasswordForm.addEventListener("submit",e=>{e.preventDefault();let t=resetPasswordEmail.value;auth.sendPasswordResetEmail(t).then(()=>{LognotifResetpass.classList.remove("hidden"),resetPasswordMessage.textContent="Password reset email sent. Please check your email to reset your password.",resetPasswordMessage.style.color="green"}).catch(e=>{LognotifResetpass.classList.remove("hidden"),resetPasswordMessage.textContent="Failed to send password reset email. "+e.message,resetPasswordMessage.style.color="red"})}),logoutButton.addEventListener("click",()=>{auth.signOut(),document.querySelector(".lmg").classList.add("hidden"),document.querySelector(".lmg2").classList.add("hidden"),location.reload()}),auth.onAuthStateChanged(e=>{e&&e.emailVerified?(showContent(),showProfile(e.uid),checkUserRole(e.uid)):hideContent()});
  /*]]>*/
  </script>
</b:includable>

<b:includable id='jsfrmcheck'>
   <script>
     /*<![CDATA[*/
 /*==== jsfrmcheck v3.2 [selesai] by hirutshuji ====*/
function checkMembershipExp(){let e=document.getElementById("profile-uid"),r=document.querySelector("#exp-role");if(e&&r){let t=e.textContent,l=r.textContent.trim(),i=l.split(", ");if(2===i.length){let o=i[0];i[1];let n=o.split("/");if(3===n.length){let a=parseInt(n[0],10),s=parseInt(n[1],10)-1,d=parseInt(n[2],10),m=new Date(d,s,a);if(!isNaN(m.getTime())){let c=new Date;(c==m||c>=m||c>m)&&db.collection("users").doc(t).update({role:"User",exp:"Belum berlanggan Membership"}).then(()=>{alert("Membership dengan Role 'Member' Kamu telah habis karena itu Kami akan merubah kembali Role kamu ke 'User', silahkan Perpanjang jika ingin tetap Dengan Role Member.Semoga Harimu menyenangkan"),location.reload()}).catch(e=>{console.error("Gagal mengubah peran pengguna:",e)})}}}}}function checkUserRole(e){db.collection("users").doc(e).onSnapshot(e=>{if(e.exists){let r=e.data().role,t=document.querySelectorAll(".notifchapter"),l=document.querySelectorAll(".admin"),i=document.querySelectorAll(".member"),o=document.querySelectorAll(".modder"),n=document.querySelectorAll(".staff"),a=document.querySelectorAll(".guest"),s=document.querySelector(".rolenotif p").innerText;setTimeout(()=>{s===r||s!==r?t.forEach(e=>{e.classList.add("hidden")}):t.forEach(e=>{e.classList.remove("hidden")})},5e3),"Admin"===r?(l[0].classList.remove("admin","member","staff","modder","guest","hidden","hidden1"),checkMembershipExp(),unlockAdmin(),unlockModder(),unlockStaff(),unlockMember(),unlockUser(),console.log("Role Admin")):"Modder"===r?(o[0].classList.remove("modder","member","staff","guest","hidden","hidden1"),checkMembershipExp(),unlockModder(),unlockStaff(),unlockMember(),unlockUser(),console.log("Role Moddertor")):"Staff"===r?(n[0].classList.remove("staff","member","modder","guest","hidden","hidden1"),checkMembershipExp(),unlockModder(),unlockStaff(),unlockMember(),unlockUser(),console.log("Role Staff")):"Member"===r?(i[0].classList.remove("member","guest","hidden","hidden1"),checkMembershipExp(),unlockMember(),unlockUser(),console.log("Role Member")):"User"===r&&(a[0].classList.remove("guest","hidden"),checkMembershipExp(),unlockUser(),console.log("Role User"))}})}auth.onAuthStateChanged(e=>{e&&e.emailVerified?(showContent(),showProfile(e.uid),checkUserRole(e.uid)):hideContent()});     
/*]]>*/</script>
       </b:includable>

step 5:pemanggil kode form dan js utama.

Cari <body> dan letakan kode ini dibawahnya


    <b:include name='frm'/>   
    <b:include name='jsfrm'/>

step 6:Pasang Form ke Chapter

Cari kode ini <div class='check-box'> <data:post.body/> </div> Didalam id='postChapter' Manga

Sudah ketemu ?.. jika sudah,maka kurung kode itu dengan kode dibawah ini

Perhatikan Tanda merah dalam kode ini,Seperti itulah cara kurungnya


<b:if cond='data:post.labels any (l =&gt; l.name == &quot;Admin&quot; || l.name == &quot;User&quot; || l.name == &quot;Member&quot; || l.name == &quot;Modder&quot; || l.name == &quot;Staff&quot;)'>
    <div class='notifchapter' id='notifchapterwrn'>
    <div class='notifchrole'>  
    <h2>Chapter Terkunci</h2>  
    <span>Chapter Ini terkunci, Silahkan login terlebih dahulu Sesuai Role</span>
   <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Admin&quot;)'>   
 <span class='rolenotif'>Unlock with Role: <p class='m-0 tac fs-20'>Admin</p></span>
  <b:else/>
    <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Modder&quot;)'>   
 <span class='rolenotif'>Unlock with Role: <p class='m-0 tac fs-20'>Modder</p></span>
  <b:else/>
    <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Staff&quot;)'>   
 <span class='rolenotif'>Unlock with Role: <p class='m-0 tac fs-20'>Staff</p></span>    
  <b:else/>
    <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Member&quot;)'>
   <span class='rolenotif'>Unlock with Role: <p class='m-0 tac c-ddd fs-20'>Member</p></span>
   <b:else/>
      <b:if cond='data:post.labels any (l =&gt; l.name == &quot;User&quot;)'>
 <span class='rolenotif'>Unlock with Role: <p class='m-0 tac c-ddd fs-20'>User</p></span> 
  </b:if>
  </b:if>
  </b:if>
  </b:if>
  </b:if>
   </div>   
  </div>
  </b:if>                                       
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;Admin&quot;)'>
<script async='async'>/*<![CDATA[*/
function wrapDivs() {
  var divs = document.getElementsByClassName('check-lck');
  for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    var newDiv = document.createElement('div');
    newDiv.className = 'premiumKTAdmin hidden1 admin';
  
 div.parentNode.insertBefore(newDiv, div);
    newDiv.appendChild(div);
  }

 const premiumSckAdmin = document.querySelectorAll('.premiumKTAdmin');    
premiumSckAdmin.forEach(premiumCDAdmin => {
 const isiKontenAdmin = premiumCDAdmin.innerHTML.trim();
 const teksTerenkripsiAdmin = encryptKontentAdmin(isiKontenAdmin);
 premiumCDAdmin.setAttribute('data-text', teksTerenkripsiAdmin);
 premiumCDAdmin.innerHTML = '';
  }); 
}
document.addEventListener('DOMContentLoaded', wrapDivs);
/*]]>*/</script>
     <b:else/>
     <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Staff&quot;)'>
<script async='async'>/*<![CDATA[*/
function wrapDivs() {
  var divs = document.getElementsByClassName('check-lck');
for (var i = 0; i < divs.length; i++) {   var div = divs[i];
    var newDiv = document.createElement('div');
    newDiv.className = 'premiumKTStaff staff modder admin hidden1';
  
  div.parentNode.insertBefore(newDiv, div);
    newDiv.appendChild(div);
  }

  const premiumSckStaff = document.querySelectorAll('.premiumKTStaff');    
premiumSckStaff.forEach(premiumCDStaff => {
 const isiKontenStaff = premiumCDStaff.innerHTML.trim();
 const teksTerenkripsiStaff = encryptKontentStaff(isiKontenStaff);
 premiumCDStaff.setAttribute('data-text', teksTerenkripsiStaff);
 premiumCDStaff.innerHTML = '';
    }); 
}
document.addEventListener('DOMContentLoaded', wrapDivs);
/*]]>*/</script>
   <b:else/>
   <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Modder&quot;)'>
<script async='async'>/*<![CDATA[*/ 
function wrapDivs() {
  var divs = document.getElementsByClassName('check-lck');
for (var i = 0; i < divs.length; i++) {   var div = divs[i];
    var newDiv = document.createElement('div');
    newDiv.className = 'premiumKTModder modder staff admin hidden1';  
  div.parentNode.insertBefore(newDiv, div);
    newDiv.appendChild(div);
  }
 const premiumSckModder = document.querySelectorAll('.premiumKTModder');    
premiumSckModder.forEach(premiumCDModder => {
 const isiKontenModder = premiumCDModder.innerHTML.trim();
 const teksTerenkripsiModder = encryptKontentModder(isiKontenModder);
 premiumCDModder.setAttribute('data-text', teksTerenkripsiModder);
 premiumCDModder.innerHTML = '';
    }); 
}
document.addEventListener('DOMContentLoaded', wrapDivs);
/*]]>*/</script>
  <b:else/>
  <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Member&quot;)'>
<script async='async'>/*<![CDATA[*/
function wrapDivs() {
  var divs = document.getElementsByClassName('check-lck');
for (var i = 0; i < divs.length; i++) {   var div = divs[i];
    var newDiv = document.createElement('div');
    newDiv.className = 'premiumKTMember member admin staff modder hidden1';
   
  div.parentNode.insertBefore(newDiv, div);
    newDiv.appendChild(div);
  }
const premiumSckMember = document.querySelectorAll('.premiumKTMember');    
premiumSckMember.forEach(premiumCDMember => {
 const isiKontenMember = premiumCDMember.innerHTML.trim();
 const teksTerenkripsiMember = encryptKontentMember(isiKontenMember);
 premiumCDMember.setAttribute('data-text', teksTerenkripsiMember);
 premiumCDMember.innerHTML = '';
    }); 
  
}
document.addEventListener('DOMContentLoaded', wrapDivs);
/*]]>*/</script>
    <b:else/>
  <b:if cond='data:post.labels any (l =&gt; l.name == &quot;User&quot;)'>
  <script async='async'>/*<![CDATA[*/
function wrapDivs() {
  var divs = document.getElementsByClassName('check-lck');
  for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    var newDiv = document.createElement('div');
    newDiv.className = 'premiumKTUser admin staff modder member hidden guest';    
    div.parentNode.insertBefore(newDiv, div);
    newDiv.appendChild(div);
  }

const premiumSckUser = document.querySelectorAll('.premiumKTUser');    
premiumSckUser.forEach(premiumCDUser => {
  const isiKontenUser = premiumCDUser.innerHTML.trim();
  const teksTerenkripsiUser = encryptKontentUser(isiKontenUser);
  premiumCDUser.setAttribute('data-text', teksTerenkripsiUser);
  premiumCDUser.innerHTML = '';
}); 
}
document.addEventListener('DOMContentLoaded', wrapDivs);
/*]]>*/</script>
   </b:if>
  </b:if>
  </b:if>
  </b:if> 
  </b:if>         
  
 <div class='check-lck'>      
  <div class='check-box'>               <data:post.body/>
   </div> 
   </div>
   
<b:include name='jsfrmcheck'/>

step 6.5 : Kode Encrypt

Kode Encrypt Letakan ini di atas </body> atau letakan di atas </head>

opsional, kalian bisa encrypt kode ini pakai tools obufescator, ini demi kalian supaya aman, karena kode ini yang bertugas membuka encryptnya.


Mohon Pilih Salah satu, jangan dipakai semua
Wajib baca ini

Kode untuk "Untuk Manga" encryptnya punya batas 10ribu huruf, jadi kalau kalian pasang ini di website untuk novel maka Novel kalian jadi rusak saat didecrypt, dikarena novel itu sangat panjang dan banyak textnya, bahkan bisa 10ribu huruf lebih


karena hal ini aku menerima laporan 'novel jadi rusak saat dibuka'.

padahal aku buat ini untuk Manga, karena itu aku pakai btoa.

jadi Aku sudah buat yang "untuk Novel", itu bekerja dengan baik sejauh aku test.

Jika nanti masih ada bug tolong laporkan

Untuk Manga


<script>
/*<![CDATA[*/
let kodenumberAdmin=22,
kodenumberStaff=25,
kodenumberModder=20,
kodenumberMember=15,
kodenumberUser=10;
function encryptKontentAdmin(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberAdmin);t+=o}return btoa(t)}function encryptKontentModder(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberModder);t+=o}return btoa(t)}function encryptKontentStaff(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberStaff);t+=o}return btoa(t)}function encryptKontentMember(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberMember);t+=o}return btoa(t)}function encryptKontentUser(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberUser);t+=o}return btoa(t)}function openlockAdmin(e){e=atob(e);let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberAdmin);t+=o}return t}function unlockAdmin(){document.querySelectorAll(".premiumKTAdmin").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockAdmin(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockModder(e){e=atob(e);let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberModder);t+=o}return t}function unlockModder(){document.querySelectorAll(".premiumKTModder").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockModder(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockStaff(e){e=atob(e);let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberStaff);t+=o}return t}function unlockStaff(){document.querySelectorAll(".premiumKTStaff").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockStaff(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockMember(e){e=atob(e);let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberMember);t+=o}return t}function unlockMember(){document.querySelectorAll(".premiumKTMember").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockMember(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockUser(e){e=atob(e);let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberUser);t+=o}return t}function unlockUser(){document.querySelectorAll(".premiumKTUser").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockUser(t);e.innerHTML=r,e.removeAttribute("data-text")})}
/*]]>*/
</script>

Untuk Novel


 <script>
  /*<![CDATA[*/
let kodenumberAdmin=22,
kodenumberStaff=25,
kodenumberModder=20,
kodenumberMember=15,
kodenumberUser=10;
function encryptKontentAdmin(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberAdmin);t+=o}return t}function encryptKontentModder(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberModder);t+=o}return t}function encryptKontentStaff(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberStaff);t+=o}return t}function encryptKontentMember(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberMember);t+=o}return t}function encryptKontentUser(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)+kodenumberUser);t+=o}return t}function openlockAdmin(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberAdmin);t+=o}return t}function unlockAdmin(){document.querySelectorAll(".premiumKTAdmin").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockAdmin(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockModder(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberModder);t+=o}return t}function unlockModder(){document.querySelectorAll(".premiumKTModder").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockModder(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockStaff(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberStaff);t+=o}return t}function unlockStaff(){document.querySelectorAll(".premiumKTStaff").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockStaff(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockMember(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberMember);t+=o}return t}function unlockMember(){document.querySelectorAll(".premiumKTMember").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockMember(t);e.innerHTML=r,e.removeAttribute("data-text")})}function openlockUser(e){let t="";for(let r=0;r<e.length;r++){let o=String.fromCharCode(e.charCodeAt(r)-kodenumberUser);t+=o}return t}function unlockUser(){document.querySelectorAll(".premiumKTUser").forEach(e=>{let t=e.getAttribute("data-text"),r=openlockUser(t);e.innerHTML=r,e.removeAttribute("data-text")})}
/*]]>*/
  </script>

step 7 Update(3.2): dasboard admin,letakan dihalaman 

<style>
:root {
    --bg-datauser-dasboard: #1e2129;
    --color-dasboard: #0c70de;
    --color-text-dasboard: #fff;
}
    
ul#user-list li button:first-child,ul#user-list li button:nth-child(2),ul#user-list li button:nth-child(3){font-size:12px;padding:5px;margin:5px;position:absolute}
ul#user-list{margin:0;counter-reset:usertotal;list-style:none;}
ul#user-list li::before {
  position: absolute;
  top: -30px;
  left: -20px;
  font-size: 16px;
  border-radius: 5px;
  padding: 3px 7px;
  background:var(--color-dasboard);
  color: var(--color-text-dasboard);
  counter-increment: usertotal;
  content: counter(usertotal);
}
#user-list li {
  position: relative;
  margin: 55px 0 25px -20px;
  background: var(--bg-datauser-dasboard);
  color:var(--color-text-dasboard);
  padding: 15px;
  height: auto;
  border-radius: 15px;
  font-size: 16px;
  float: left;
}
  
span.setting-user{display:flex;flex-direction:column}
span.setting-user>span{border:1px solid var(--color-dasboard);border-radius:5px;padding:1px 10px;margin:3px;overflow:hidden}
span.setting-user>span:hover{overflow:auto}
ul#user-list li button:first-child {
  background: var(--color-dasboard);
  color:var(--color-text-dasboard);
  border: none;
  border-radius: 5px;
  right: -5px;
  top: -25px;
}
ul#user-list li button:nth-child(2) {
    background: #0000;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #eee;
    bottom: 13px;
    right: 16px;
}ul#user-list li button:nth-child(3){border:1px solid var(--color-dasboard);border-radius:5px;bottom:0;left:0}
 
  
/*generate tanggal*/
div#set1 {
    display: flex;
    padding: 5px;
    margin: 5px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
input#checkTanggal {
    padding: 10px 15px;
    background: #1e2129ba;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 5px;
    text-align: center;
}
input#checkTanggal::placeholder {
    color: #fff;
}
span#inputset1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#inputset1 button {
    background:var(--color-dasboard);
    color: #fff;
    border: none;
    border-radius: 15px;
    padding: 6px 20px;
    margin: 5px;
}
  span#result_tanggal {
    position: relative;
    border-radius: 15px;
    background: #1e2129ba;
    color: #fff;
    padding: 3px;
    width: 50%;
    min-height: 60px;
    max-height: 100%;
    margin: 5px;
}
span#result_tanggal:before {
    content: "Output >";
    position: absolute;
    top: 0;
    left: -80px;
    background: #1e2129ba;
    color: #fff;
    padding: 3px 8px;
    border-radius: 16px;
}
/*pencarian tanggal*/
.setting-dashboard {
    display: flex;
    padding: 5px;
    margin: 5px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
span.cariUser,.filterUser {
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
input#search-input {
    width: 100%;
    padding: 10px 15px;
    background: #1e2129ba;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 5px;
    text-align: center;
}
input#search-input::placeholder {
    color: #fff;
}
.cariUser button {
    background: var(--color-dasboard);
    color: #fff;
    border: none;
    border-radius: 15px;
    padding: 6px 20px;
    margin: 5px;
}
/*pencarian role*/
select#filter-role {
    width: 50%;
    padding: 10px 15px;
    background: #1e2129ba;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
}
span.filterUser button {
    background: var(--color-dasboard);
    color: #fff;
    border: none;
    border-radius: 15px;
    padding: 6px 20px;
    margin: 5px;
}  
  
  
/*pagination*/  
div#pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 3px;
}

div#pagination button {
    padding: 5px 8px;
    background: #0c70de;
    border-radius: 5px;
    border: none;
    width: 24%;
    color: #fff;
}
div#page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
div#page-numbers span {
    margin: auto 5px;
    border: none;
    background: #0c70de;
    color: #eee;
    font-size: 16px;
    border-radius: 5px;
    padding: 3px 7px;
}
div#page-numbers span.current-page,
div#pagination button:hover,
div#page-numbers span:hover {
    background: #ff9a00;
    color: #1e2129;
}
</style>
<div id="admin-dashboard" class="hidden1">
<div id='set1'>
 <b>Tools Penghitung Tanggal</b>
<p>Masukan Text Seperti :[10 hari] atau [10 bulan] atau [10 tahun] nanti kamu bakal dapat Format Tanggal dan Tanggal itu bisa kamu masukan Ke Exp Role</p>
<span id='inputset1'>
<input placeholder="Exp User 5 hari? 7 hari?" type="text" id="checkTanggal" />
<button onclick="hitungTanggal()">Generate Tanggal?</button>
<span id="result_tanggal" align="center"></span>
 </span>
</div>    

<div class="setting-dashboard">
  <span class="cariUser">
 <input type="text" id="search-input" placeholder="Cari berdasarkan ID, Email, Role, atau Username"/>
    <button onclick="searchUsers()">Cari User</button>
    </span>
    <br/>
  <span class="filterUser">
    <select id="filter-role">
  <option value="all">Semua Role</option>
        <option value="Role: Admin">Admin</option>
       <option value="Role: Staff">Staff</option>
        <option value="Role: Modder">Modder</option>
         <option value="Role: Member">Member</option>
       
        <option value="Role: User">User</option>
    </select>
    <button onclick="filterUsers()">Filter Role</button>
    </span>
</div>

<ul id="user-list"></ul>  

  <div id="pagination">
        <button onclick="loadPreviousPage()">Prev</button>
        <div id="page-numbers"></div>
        <button onclick="loadNextPage()">Next</button>
    </div>

</div>



<script>
    /*<![CDATA[*/
function showAdminDashboard(){document.querySelector("#admin-dashboard").classList.remove("hidden1")}function filterUsers(){let e=document.querySelector("#filter-role").value;document.querySelectorAll("#user-list li").forEach(a=>{let s=a.querySelector(".role-user").textContent;"all"===e||s===e?a.style.display="block":a.style.display="none"})}function searchUsers(){let e=document.querySelector("#search-input").value.toLowerCase();document.querySelectorAll("#user-list li").forEach(a=>{a.textContent.toLowerCase().includes(e)?a.style.display="block":a.style.display="none"})}function changeUserRole(e,a){db.collection("users").doc(e).get().then(s=>{if(s.exists){if("Admin"===s.data().role){alert("Tidak diizinkan Merubah User dengan Role Admin.");return}db.collection("users").doc(e).update({role:a}).then(()=>{alert("Role User berhasil diubah.")}).catch(e=>{alert("Gagal mengubah Role User: "+e.message)})}}).catch(e=>{alert("Gagal mengambil data User: "+e.message)})}function ExpRoleuser(e,a){if(!/^(\d{2})\/(\d{2})\/(\d{4})$/.test(a)){alert("Format tanggal tidak valid. Gunakan format dd/mm/yyyy.");return}db.collection("users").doc(e).get().then(s=>{if(s.exists){let t=s.data();if("Admin"===t.role){alert("Tidak diizinkan Merubah Tanggal Exp pada user dengan Role Admin.");return}let i=a.split("/"),r=parseInt(i[0],10),n=parseInt(i[1],10)-1,l=parseInt(i[2],10),o=new Date(l,n,r);if(isNaN(o.getTime())){alert("Format tanggal tidak valid. Gunakan format dd/mm/yyyy.");return}let u=o.toLocaleDateString("id-ID",{timeZone:"Asia/Jakarta",day:"2-digit",month:"2-digit",year:"numeric",timeZoneName:"short"});"Admin"!==t.role&&(db.collection("users").doc(e).update({exp:u}),alert("Tanggal Exp Role User berhasil diubah."))}}).catch(e=>{console.error("Error getting user data:",e)})}function showUserList(e){let a=document.querySelector("#user-list");a.innerHTML="",sessionStorage.setItem("DataListhiru",JSON.stringify(e)),e.forEach(e=>{let s=document.createElement("li");s.classList.add("usersub"),s.innerHTML=`
                <span class="setting-user">
                    <span id="uidcheck" class="username-user">Uid: ${e.uid}</span>
                    <span class="username-user">Nama: ${e.username}</span>
                    <details>
                        <summary>info Status email?</summary>
                        <p>false = Belum verifikasi email dan belum login sekalipun</p>
                        <p>true = sudah verifikasi email dan sudah Login sekali (terdaftar)</p>
                    </details>
                    <span class="email-user">Email: ${e.email}</span>
                    <span class="email-status">Status email: ${e.emailVerified}</span>
                    <details>
                        <summary>info Role</summary>
                        <p>Hanya 3 Role yang tersedia</p>
                        <p>1: Admin = membuka Konten User & Member & Admin</p>
                        <p>2: Member = membuka Konten User & Member</p>
                        <p>3: User = membuka Konten User</p>
                    </details>
                    <span class="role-user">Role: ${e.role}</span>
                    <span class="favorite-user">Opsi: ${e.favorite}</span>
                    <details>
                        <summary>info aturan Exp Role</summary>
                        <p>Hanya Tanggal angka yang diijinkan</p>
                        <p>1. dd/mm/yyyy: harus wajib dua angka seperti ini [01/01/2023] Angka satu punya angka nol</p>
                        <p>2. dd/mm/yyyy: Dalam Tanggal kalian tidak boleh memasukan Huruf, Hanya angka yang diperbolehkan</p>
                        <p>3. dd/mm/yyyy: Kalian Juga tidak boleh Memasukan WIB Karena Itu otomatis Bakal ada dengan sendirinya</p>
                    </details>
                    <span class="exp-role">exp: ${e.exp}</span>
                </span>
                <span class="btn-edit">
                    <button class="editrole">Edit Role</button>
                    <button class="editexp">Edit Tanggal Exp</button>
                </span>
            `;s.querySelector(".editrole").addEventListener("click",()=>{let a=prompt("Masukkan Role baru untuk User:");null!==a&&""!==a.trim()&&changeUserRole(e.uid,a)});s.querySelector(".editexp").addEventListener("click",()=>{let a=prompt("Masukkan tanggal Exp membership: contoh (30/12/2023) tanpa WIB:");null!==a&&""!==a.trim()&&ExpRoleuser(e.uid,a)}),a.appendChild(s)}),loadUsers()}function watchUserCollection(){let e=sessionStorage.getItem("DataListhiru");e&&showUserList(e=JSON.parse(e)),db.collection("users").onSnapshot(e=>{let a=[];e.forEach(e=>{a.push({uid:e.id,...e.data()})}),sessionStorage.setItem("DataListhiru",JSON.stringify(a)),showUserList(a)})}function checkUserRole(e){db.collection("users").doc(e).onSnapshot(e=>{if(e.exists){let a=e.data(),s=document.querySelector(".admin-utama");document.querySelector(".user-member"),document.querySelector(".guest"),"Admin"===a.role?(showAdminDashboard(),watchUserCollection(),s.classList.remove("user-member"),s.classList.remove("admin-utama"),s.classList.remove("guest"),s.classList.remove("hidden1"),s.classList.remove("hidden"),console.log("Role [Admin]")):"Staff"===a.role?(alert("Akun kamu role [Staff], tidak bisa membuka halaman admin"),console.log("Role [Staff]"),sessionStorage.removeItem("DataListhiru"),window.history.back()):"Modder"===a.role?(alert("Akun kamu role [Modder], tidak bisa membuka halaman admin"),console.log("Role [Modder]"),sessionStorage.removeItem("DataListhiru"),window.history.back()):"Member"===a.role?(alert("Akun kamu role [Member], tidak bisa membuka halaman admin"),console.log("Role [Member]"),sessionStorage.removeItem("DataListhiru"),window.history.back()):"User"===a.role&&(alert("Akun kamu role [user], tidak bisa membuka halaman admin"),console.log("Role [User]"),sessionStorage.removeItem("DataListhiru"),window.history.back())}})}
/*]]>*/
</script>
             
<script>
  function hitungTanggal(){var a=document.getElementById("checkTanggal").value,t=parseInt(a),e=a.toLowerCase().match(/[a-z]+/);if(isNaN(t)||null===e)return document.getElementById("result_tanggal").innerHTML="Format input kamu Salah, Contoh yang Benar: '10 hari' atau '10 bulan' atau '10 tahun'.";var n=new Date,l=new Date(n);"hari"===e[0]||"Hari"===e[0]?l.setDate(n.getDate()+t):"bulan"===e[0]||"Bulan"===e[0]?l.setMonth(n.getMonth()+t):("tahun"===e[0]||"Tahun"===e[0])&&l.setFullYear(n.getFullYear()+t);var r=l.getDate(),u=l.getMonth()+1,g=l.getFullYear();r<10&&(r="0"+r),u<10&&(u="0"+u);var h=r+"/"+u+"/"+g;return document.getElementById("result_tanggal").innerHTML=h}
</script>
    

  <script>
//<![CDATA[
    let currentPage=1;
    const usersPerPage=1;//jumlah User ditampilkan perhalaman

 function setUsersPerPage(e){usersPerPage=e,currentPage=1,loadUsers()}function loadUsers(){let e=(currentPage-1)*usersPerPage,r=e+usersPerPage,a=document.querySelectorAll("#user-list li");a.forEach(e=>{e.style.display="none"});for(let s=e;s<r&&s<a.length;s++)a[s].style.display="block";displayPageNumbers()}function loadPreviousPage(){currentPage>1&&(currentPage--,loadUsers())}function loadNextPage(){currentPage++,loadUsers()}function displayPageNumbers(){let e=document.querySelectorAll("#user-list li"),r=e.length,a=Math.ceil(r/usersPerPage),s=document.querySelector("#page-numbers");s.innerHTML="";for(let t=1;t<=a;t++){let l=document.createElement("span");l.textContent=t,t===currentPage&&l.classList.add("current-page"),l.addEventListener("click",()=>{currentPage=t,loadUsers()}),s.appendChild(l)}}const url=new URL(window.location.href);url.searchParams.has("page")&&(currentPage=parseInt(url.searchParams.get("page")));
    //]]>
</script>
Selesai

Next Update Akan dirapikan kodenya, dan kalau ada yang request silahkan komentar

kalau ada yang punya saran dan kritik dipersilahkan komentar. (Saran metode kunci postingan yang lebih baik dibutuhkan disini).


Manual tanpa Menggunakan Label [ User, Admin, Member, Modder, Staff ]

Masukan Post Didalam div

  • Admin : <div class='premiumKTAdmin hidden1 admin' data-text=""> Kontent <div>
  • Staff : <div class='premiumKTStaff staff modder admin hidden1' data-text=""> Kontent <div>
  • Modder : <div class='premiumKTModder modder staff admin hidden1' data-text=""> Kontent <div>
  • Member : <div class='premiumKTMember member admin staff modder hidden1' data-text=""> Kontent <div>
  • User : <div class='premiumKTUser admin staff modder member hidden guest' data-text=""> Kontent <div>
    • Support jika kalian suka form login ini : Demo Trakteer

    untuk mendapat akses kode versi gratis

    silahkan masuk kegroup telegram dan chat aku disana

    Group Telegram

    Versi Premium:

    Buy via Telegram

    Posting Komentar:

    150 Komentar

    1. #Question...
      Anonymous
      Anonim
      Member
      I like it but I wish we can edit the register option.
      delete Balas
    2. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      If you understand javascript, then you can edit it yourself, with what you want.

      Can you give me an example? What do you want to edit?,Maybe that example can be useful when I update this login code
      delete Balas
    3. #Reply... Anonim
      Anonymous
      Anonim
      Member
      Done editing. I didn't see it. Btw, I've tried to login but this happens https://im.ge/i/Screenshot-2023-08-15-015717.j4tkTJ
      delete Balas
    4. #Reply... Anonim
      Didanim
      Didanim
      Member
      how to activate the firestore database? I don't know what document ID is.
      delete Balas
    5. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      @dmcscans
      It's already in the video.
      As long as you follow the tutorial it will work.
      Firebase database Will be active when you have opened the section "firebase database" And start setting the rules.
      delete Balas
    6. #Question...
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      @Anonim
      That's because you didn't delete the part in the javascript,
      The element you removed has a class/id Try searching for class/id In javascript and delete if you have found it
      delete Balas
    7. #Reply... Anonim
      Didanim
      Didanim
      Member
      Followed the video but you didn't show how you make the firebase database.
      delete Balas
    8. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      It's on the video, in the first video (Min 2:35) there I created the Firestore database, it's the database I'm using, not a real-time database.
      The document ID that you said is a User ID, the user ID is randomly generated when you register In form register.

      Maybe I misunderstood what you meant, if possible please give me a screenshot to make it clearer.
      delete Balas
    9. #Reply... Anonim
      Didanim
      Didanim
      Member
      How about similar to this style? Is it difficult? https://drive.google.com/file/d/1LYYg_I6BFvJU8TkDCl38GIhnibpd8rtB/view?usp=sharing
      delete Balas
    10. #Question...
      Chocolate con leche
      Chocolate con leche
      Member
      Is it possible to use this in other template?
      delete Balas
    11. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Btw Your style is very good, may I use it to use in the next code update?
      delete Balas
    12. #Reply... Chocolate con leche
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Of course it can be done,
      You have to find the element used to enclose the article and just add a div with class "lck".
      And skip step 4 and 5 because this step only for ZeistmangaV5
      I want to ask, What theme do you use?
      delete Balas
    13. #Reply... Anonim
      Didanim
      Didanim
      Member
      sure, you can.
      delete Balas
    14. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      I've done it, I'll upload it later after successfully installing it on ZeistmangaV5
      delete Balas
    15. #Question...
      Anonymous
      Anonim
      Member
      wow
      delete Balas
    16. #Question...
      선생님
      선생님
      Member
      i like the style min. when is the update?
      delete Balas
    17. #Reply... 선생님
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      after I finished making the video tutorial
      delete Balas
    18. #Question...
      Wernayasa
      Wernayasa
      Member
      Ada demonya.
      Di tunggu tutorialnya.
      delete Balas
    19. #Reply... 선생님
      선생님
      선생님
      Member
      Hi nim, how to remove this effect? https://im.ge/i/wNoF2x
      delete Balas
    20. #Reply... 선생님
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      .group input:focus ~ label, .group input:valid ~ label { left:0;
      top: -25px;
      font-size: 14px;}
      this is the css section that creates the effect
      delete Balas
    21. #Reply... Wernayasa
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Sudah ku upload.
      Agak lama karena internetnya cuman 2Mb
      delete Balas
    22. #Question...
      Anonymous
      Anonim
      Member
      Min kenapa selalu gagal begini yah? Padahal udah ngikutin seperti yang di video

      Login: https://ibb.co/SKrJ2rs
      Register: https://ibb.co/gS9H400
      delete Balas
    23. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Kamu Sudah ganti configformlogin ini belum,
      Ganti ini dengan punya kamu sendiri.

      <script>/*<![CDATA[*/
      const configformlogin={

      apiKey: "AIzaSyCDUKoueS66e77qvqGbrc1Clb0eFJWi2JU",
      authDomain: "formlogin-6e176.firebaseapp.com",
      projectId: "formlogin-6e176",
      storageBucket: "formlogin-6e176.appspot.com",
      messagingSenderId: "197923569691",
      appId: "1:197923569691:web:db39447bcd0f6d7bd6f8be",
      measurementId: "G-9RHRPYQXVQ"

      };
      /*]]>*/
      </script>

      delete Balas
    24. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Komentar ini telah dihapus oleh pengarang.
      delete Balas
    25. #Question...
      Anonymous
      Anonim
      Member
      is there a way to hide the profile if the user is not logged? And when I tried to register or login, the message is very delayed. It took a minute to appear.
      delete Balas
    26. #Reply... MAGIC Reincarnated
      선생님
      선생님
      Member
      Hi min, could you please provide the original code instead of the minified version? It's challenging for me to make edits.
      delete Balas
    27. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Udah bisa ternyata dari rules firestorenya. Kedepannya apakah ada update min?
      delete Balas
    28. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      There's a way.
      I'll make a tutorial later on Thursday, because I'm busy in the next two days.

      Work Stage: https://demokodehiru.blogspot.com/p/dasboard-admin-hiru.html
      delete Balas
    29. #Reply... 선생님
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      sorry but Unmified Code is not share,
      That's early stage code, for my development.
      And only a few web developers can get it.
      If you still want, Go Trakteer Link , it's not expensive, only 0,33$ dollar (for support development).
      If there is an update to the code, you will still get the Unminified code.
      delete Balas
    30. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      baguslah kalau sudah benar.
      Yep..Code Bakal Terus diupdate sampai benar-benar memberikan Kemanan ketat, karena targetku adalah Encrypt Kontent...Untuk Web Premium Yang sangat Butuh Ginian
      delete Balas
    31. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      contoh dasar encrypt kontent yang aku maksud Link
      delete Balas
    32. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Mantap min dan semoga yang ini juga ada update karna masih bisa diakalin dengan cara inspect element
      delete Balas
    33. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Mungkin Next Update, Soalnya next Update aku gak mau terburu-buru, Cari cara dulu biar aman kontentnya.
      Update kali ini cuman bug kecil.
      delete Balas
    34. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Siap min jangan buru2
      delete Balas
    35. #Question...
      Azathoth13x
      Azathoth13x
      Member
      work with Zm v6?
      delete Balas
    36. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      This works on any theme, as long as you know the data:post.body location of the content you want to lock (step 6).
      delete Balas
    37. #Question...
      Anonymous
      Unknown
      Member
      Step 3 bug
      delete Balas
    38. #Question...
      Novel & Manga
      Novel & Manga
      Member
      Komentar ini telah dihapus oleh pengarang.
      delete Balas
    39. #Question...
      Novel & Manga
      Novel & Manga
      Member
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEVDy85u6aVrQmHuSK-__kToJ0c4tk6z40Npm3r9CBocl0ztvPcJTnOZGS1E1YyQ4wd2cbYv5bC7e17XDZ4vBZg_7AFROhu6AIr_lArUfx8_0OG9-xKbpWTpbGwYtWkqYjtileR-5Q4OL1lAjFVm3o3vkWXBxdPOF2J8JPed2bZP9jSLJbSX2VZV1lDE0/s320/Screenshot_20230916-082420_Chrome.jpg
      delete Balas
    40. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Min untuk next update apakah bisa tambahkan fitur countdown waktu untuk mengembalikan Role 'Member' Ke role 'User', misal diatur ke 10 hari maka dalam 10 hari role 'Member' akan berubah menjadi role 'user' dan di profile user akan ada countdown nya, jadi seperti membership gitu
      delete Balas
    41. #Reply... Unknown
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      where is the bug?
      delete Balas
    42. #Reply... Novel & Manga
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Ada banyak Kesalahan Saat kamu meletakan kodenya, Kamu pakai tema apa?,kalau zeistmangav5 tinggal ikuti video tutorialnya, kalau zeistmangav6 nanti aku buat tutorialnya
      delete Balas
    43. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      entah bisa atau gak, Soalnya Bingung Ambil data tanggal dan mencocokannya dengan tanggal saat ini itu gimana caranya.
      akan kucoba targetkan fitur itu.Otw cari di stackoverflow
      delete Balas
    44. #Reply... MAGIC Reincarnated
      Novel & Manga
      Novel & Manga
      Member
      Step 3
      delete Balas
    45. #Reply... MAGIC Reincarnated
      Novel & Manga
      Novel & Manga
      Member
      zeistmangav5
      delete Balas
    46. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Sudah Berhasil buat fitur exp Role, Next update bakal ada...
      delete Balas
    47. #Reply... Novel & Manga
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Coba Gunakan Kode ini, Ini sama dengan yang ada di demo.
      Link
      <!--Menu Login/Register-->
      <div class='dropdown-opsi'>
      <button class='dropdown-btn-opsi menu-login'>
      <span class='sm:dn'>Login</span></button>
      <div class='dropdown-content-opsi'>
      <button class='dropdown-item-opsi' disabled='disabled' id='profiletab-button' onclick='document.getElementById(&quot;contentx&quot;).style.display=&quot;flex&quot;;' type='button'><svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='M12 4a8 8 0 0 0-6.96 11.947A4.99 4.99 0 0 1 9 14h6a4.99 4.99 0 0 1 3.96 1.947A8 8 0 0 0 12 4Zm7.943 14.076A9.959 9.959 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.958 9.958 0 0 0 2.057 6.076l-.005.018l.355.413A9.98 9.98 0 0 0 12 22a9.947 9.947 0 0 0 5.675-1.765a10.055 10.055 0 0 0 1.918-1.728l.355-.413l-.005-.018ZM12 6a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z' fill='currentColor' fill-rule='evenodd'/></svg>Profile</button>
      <button class='dropdown-item-opsi' onclick='document.getElementById(&quot;login-register-form&quot;).style.display=&quot;&quot;;'><svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4 22q-.825 0-1.413-.588T2 20V9q0-.825.588-1.413T4 7h5V4q0-.825.588-1.413T11 2h2q.825 0 1.413.588T15 4v3h5q.825 0 1.413.588T22 9v11q0 .825-.588 1.413T20 22H4Zm0-2h16V9h-5q0 .825-.588 1.413T13 11h-2q-.825 0-1.413-.588T9 9H4v11Zm2-2h6v-.45q0-.425-.238-.788T11.1 16.2q-.5-.225-1.012-.338T9 15.75q-.575 0-1.088.113T6.9 16.2q-.425.2-.663.563T6 17.55V18Zm8-1.5h4V15h-4v1.5ZM9 15q.625 0 1.063-.438T10.5 13.5q0-.625-.438-1.063T9 12q-.625 0-1.063.438T7.5 13.5q0 .625.438 1.063T9 15Zm5-1.5h4V12h-4v1.5ZM11 9h2V4h-2v5Zm1 5.5Z' fill='currentColor'/></svg>Login/Register</button>
      </div>
      </div>
      <script>
      /*<![CDATA[*/
      const dropdownButton = document.querySelector('.dropdown-btn-opsi');
      const dropdownContent = document.querySelector('.dropdown-content-opsi'); dropdownButton.addEventListener('click', () => { dropdownContent.classList.toggle('show-opsi');
      });
      window.addEventListener('click', (event) => {
      if (!event.target.matches('.dropdown-btn-opsi')) {
      if (dropdownContent.classList.contains('show-opsi')) {
      dropdownContent.classList.remove('show-opsi');
      }
      }
      });
      /*]]>*/
      </script>
      <!--Menu Login/Register-->
      delete Balas
    48. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Wahh mantap min, ditunggu next updatenya
      delete Balas
    49. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Kayak gini kan, exp role yang kamu maksud
      Screenshot
      Link video test

      dikarenakan timer coutdown realtime gak mungkin bisa dibuat olehku.
      Tapi kalau tanggal exp Member di Profile bisa aja, jadi ketika sudah Habis Waktunya maka Role Membernya akan balik ke User
      delete Balas
    50. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Nah iya begitu min, tanpa countdown juga udah mantap, kira2 untuk next update apakah masih lama min?
      delete Balas
    51. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Aku Lagi kena demam, Mungkin Minggu depan, Kalau demamku hilang sebelum hari kamis, Ya.. berarti kamis Updatenya
      delete Balas
    52. #Reply... MAGIC Reincarnated
      Wernayasa
      Wernayasa
      Member
      Gk usah di paksain, santai aj.
      Moga cepat sembuh.
      delete Balas
    53. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Semoga sembuh min
      delete Balas
    54. #Reply... Wernayasa
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Makasih bang, Lumayan agak mendingan setelah minum banyak obat.
      delete Balas
    55. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Makasih
      delete Balas
    56. #Question...
      Anonymous
      Anonim
      Member
      Min next update apa bisa tambahkan fitur search di dashboard karna nanti jika user lumayan banyak nyari user nya agak susah
      delete Balas
    57. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      kalau dashboard Admin Diupdate Secarah terpisah..
      Itu Udah dibuat Cuman Belum direlease, soalnya belum ada stylenya dan stuck di button delete , Video.
      delete Balas
    58. #Question...
      Anonymous
      Anonim
      Member
      can I add another role?
      delete Balas
    59. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Other role could be added, but it would be too complicated to explain.
      The point is you have to connect and add logic to the function checkUserRole(e),
      place the new code for the New Role check Logic condition in if else


      newRole1 = document.querySelectorAll(".guest");

      else if ("User" === s) { newRole1[0].classList.remove("guest", "hidden");
      console.log("Role User");
      }
      delete Balas
    60. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      If you want to add another role, just write a comment here, I'll add it for the next update.
      delete Balas
    61. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      I want to add the role Staff or Mod. Any of this two.
      delete Balas
    62. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Wahh makin mantap min, semoga hari ini jadi udapte
      delete Balas
    63. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      OK, I'll add that role
      delete Balas
    64. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      minggu... soalnya tinggal cssnya doang (ada dua versi style,style ke2 pakai gambar anime Screenshot) dan upload video baru, wifi lemot jadi harus pakai kuota buat uploadnya, minggu baru ada kuota.
      delete Balas
    65. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Siap min, ditunggu updatenya
      delete Balas
    66. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Makasih min untuk updatenya, tapi kok di aku error yah
      Screenshot,
      Sama info usernya tidak muncul
      Screenshot

      Dan juga pas login dengan akun admin chapter yang terkunci tetap tidak terbuka
      delete Balas
    67. #Reply... Anonim
      Anonymous
      Anonim
      Member
      Ss 1: https://ibb.co/7XFR1nX
      Ss 2: https://ibb.co/C6HmrT2
      delete Balas
    68. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Ah... itu salahku, kamu Langsung Ngambil kodenya waktu aku lagi (proses) ubah Kode lama ke yang baru, itu kode step 4 lama, sekarang ganti ke yang baru, sudah aku upload
      delete Balas
    69. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Lakukan pemasangan ulang pada step 4
      delete Balas
    70. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Berhasil min, terima kasih untuk updatenya
      delete Balas
    71. #Question...
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      yep sama-sama
      delete Balas
    72. #Question...
      Azathoth13x
      Azathoth13x
      Member
      Thank for updated but still "Unknown runtime binding: includable in widget" in ZMv6
      delete Balas
    73. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      can you include a screenshot or video?, Someone has already installed this form in zmv6 and it worked, I have also tried it, so I don't understand what the error is.
      delete Balas
    74. #Question...
      Anonymous
      Anonim
      Member
      When entering the password, it can changed like this?
      <style>
      /* Style all input fields */
      input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      }

      /* Style the submit button */
      input[type=submit] {
      background-color: #04AA6D;
      color: white;
      }

      /* Style the container for inputs */
      .container {
      background-color: #f1f1f1;
      padding: 20px;
      }

      /* The message box is shown when the user clicks on the password field */
      #message {
      display:none;
      background: #f1f1f1;
      color: #000;
      position: relative;
      padding: 20px;
      margin-top: 10px;
      }

      #message p {
      padding: 10px 35px;
      font-size: 18px;
      }

      /* Add a green text color and a checkmark when the requirements are right */
      .valid {
      color: green;
      }

      .valid:before {
      position: relative;
      left: -35px;
      content: "✔";
      }

      /* Add a red text color and an "x" when the requirements are wrong */
      .invalid {
      color: red;
      }

      .invalid:before {
      position: relative;
      left: -35px;
      content: "✖";
      }
      </style>
      </head>
      <body>

      <h3>Password Validation</h3>
      <p>Try to submit the form.</p>

      <div class="container">
      <form action="/action_page.php">
      <label for="usrname">Username</label>
      <input type="text" id="usrname" name="usrname" required>

      <label for="psw">Password</label>
      <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>

      <input type="submit" value="Submit">
      </form>
      </div>

      <div id="message">
      <h3>Password must contain the following:</h3>
      <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
      <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
      <p id="number" class="invalid">A <b>number</b></p>
      <p id="length" class="invalid">Minimum <b>8 characters</b></p>
      </div>

      <script>
      var myInput = document.getElementById("psw");
      var letter = document.getElementById("letter");
      var capital = document.getElementById("capital");
      var number = document.getElementById("number");
      var length = document.getElementById("length");

      // When the user clicks on the password field, show the message box
      myInput.onfocus = function() {
      document.getElementById("message").style.display = "block";
      }

      // When the user clicks outside of the password field, hide the message box
      myInput.onblur = function() {
      document.getElementById("message").style.display = "none";
      }

      // When the user starts to type something inside the password field
      myInput.onkeyup = function() {
      // Validate lowercase letters
      var lowerCaseLetters = /[a-z]/g;
      if(myInput.value.match(lowerCaseLetters)) {
      letter.classList.remove("invalid");
      letter.classList.add("valid");
      } else {
      letter.classList.remove("valid");
      letter.classList.add("invalid");
      }

      // Validate capital letters
      var upperCaseLetters = /[A-Z]/g;
      if(myInput.value.match(upperCaseLetters)) {
      capital.classList.remove("invalid");
      capital.classList.add("valid");
      } else {
      capital.classList.remove("valid");
      capital.classList.add("invalid");
      }

      // Validate numbers
      var numbers = /[0-9]/g;
      if(myInput.value.match(numbers)) {
      number.classList.remove("invalid");
      number.classList.add("valid");
      } else {
      number.classList.remove("valid");
      number.classList.add("invalid");
      }

      // Validate length
      if(myInput.value.length >= 8) {
      length.classList.remove("invalid");
      length.classList.add("valid");
      } else {
      length.classList.remove("valid");
      length.classList.add("invalid");
      }
      }
      </script>
      delete Balas
    75. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      yes it can.
      I'll make a tutorial on installing it tomorrow
      delete Balas
    76. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      This is a tutorial for installing password validation

      Video : Link


      file: Link
      delete Balas
    77. #Question...
      Anonymous
      Anonim
      Member
      i found your site recently. But where's the code admin?
      delete Balas
    78. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      After logging in to my account, don't forget to refresh the website
      delete Balas
    79. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      I will open it for two day.
      you see the gift menu above the header,
      open the gift and enter the account
      username: hiru
      password : lumatina

      [ account exp: 01/10/2023 ]
      delete Balas
    80. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      it's empty tho?
      delete Balas
    81. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      What's empty?.
      Check this video : Link
      delete Balas
    82. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Okay, I understand. In Step 6, this
      Chapter Terkunci
      Chapter Ini terkunci, Silahkan login terlebih dahulu Sesuai Role
      Unlock with Role:
      Member       it keeps disappearing, and when the user's role is 'Member the content isn't showing..
      delete Balas
    83. #Question...
      Blackberry
      Blackberry
      Member
      Admin can you help me? I can't find the code "Forma email verification V2", I'm doing the firebase tutorial in tyour Zeistmanga 1.2 theme and it's not in that template. How can I continue?
      delete Balas
    84. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      if nothing is changed in the code then it will work fine.
      did you change the label? or class name?
      It's hard for me to know because the code worked fine when I tested it.

      and for role notification issues
      Chapter Terkunci
      Chapter Ini terkunci, Silahkan login terlebih dahulu Sesuai Role
      Unlock with Role:
      Member
      which often disappears, that's because I set it using setTimeout 5 seconds,

      in step 4... more precisely in function checkUserRole, there is this code
      setTimeout(()=>{s===r||s!==r?t.forEach(e=>{e.classList.add("hidden")}):t.forEach(e=>{e.classList.remove("hidden")})},5e3)
      Just replace the 5 seconds, with the seconds you want...

      5e3

      5000= 5e3 = 5sec
      10000 10e4 = 10 seconds
      60000 = 6e4 = 60 seconds
      3600000 = 36e5 = 1 hour
      delete Balas
    85. #Reply... Blackberry
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      "Form email verification V2" is old code, now it's "v3.2".

      do you mean zeistmaid v1.2?,
      it is very difficult to install form login v3.2 into Zeistmaid v1.2, because code count bookmark.

      code form login v3.2: Link

      Contact me if you have any problems.
      I will help you install it
      https://t.me/webhiru
      delete Balas
    86. #Question...
      Azathoth13x
      Azathoth13x
      Member
      Thanks for ur hard work
      delete Balas
    87. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      yeah u're welcome
      delete Balas
    88. #Question...
      Azathoth13x
      Azathoth13x
      Member
      Screenshot

      My profile not appear and How to give role? Did I skip look?
      delete Balas
    89. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Don't forget the Firestore rules
      , replace using this rule
      rules_version = '2';
      service cloud.firestore {
      match /databases/{database}/documents {
      match /{document=**} {
      allow read, write: if request.auth != null;
      }
      }
      }


      how to give role: Link
      delete Balas
    90. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      Why is there a timeout? Why not it will not appear if the user has the role?
      delete Balas
    91. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      because I didn't have enough time when creating the code.. that's why I used setTimeout , I have fixed this, where it will only disappear if the content is already open.
      I'll make a tutorial tonight
      delete Balas
    92. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      wow thank you.
      delete Balas
    93. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      This tutorial removes setTimeout and makes the role notification only disappear when the content is opened
      Link video
      delete Balas
    94. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      btw, I can't edit the style? Because when I edit it, it's not working anymore.
      delete Balas
    95. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      You can edit the style, as long as you don't change the class name and ID or the html structure
      delete Balas
    96. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      I didn't change the class name, I just changed the height and width here. #fixedform{position:fixed;top:0;right:0;left:0;display:grid;place-items:center;z-index:9999;overflow:auto;height:100%;width:100%;justify-content: center;}
      delete Balas
    97. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      it's the container that makes the form float....if you change max-height to height and max-width to width then the container will cover the screen

      just try putting it on
      background:#222; then the whole screen goes dark, the reason why it doesn't work is because the container covers the whole screen so what you click is the container and nothing else
      delete Balas
    98. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      I'm trying to center the container where the register, login, and profile options are located.
      delete Balas
    99. #Question...
      Didanim
      Didanim
      Member
      Can you check what's wrong? Even my role is Member the content is not showing. Link
      delete Balas
    100. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      that's difficult, because I don't use the add class to display the popup form.
      When I have free time I will make a tutorial
      delete Balas
    101. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Give my account the role "Member", so I can check
      delete Balas
    102. #Reply... Didanim
      Didanim
      Didanim
      Member
      and also this when Login failed. Screenshot
      delete Balas
    103. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      delete your account in authentication and firestore database then re-register,
      I've logged in there and it's normal, it's just a "member" problem that I haven't checked
      delete Balas
    104. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      I've already done it, but it only happens when you enter the wrong password. Perhaps I made a mistake while changing the language in id='jsfrm' to English?
      delete Balas
    105. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      If you enter the password incorrectly, there will be a notification "Login failed . The password is invalid or the user does not have a password."

      Check it out
      Firestore rules Have you replaced it?
      delete Balas
    106. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      If there is an error in the line of code then the code will not run, so the problem is not id='jsfrm', but firebase
      delete Balas
    107. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      Yes, this? rules_version = '2';
      service cloud.firestore {
      match /databases/{database}/documents {
      match /{document=**} {
      allow read, write: if request.auth != null;
      }
      }
      }
      delete Balas
    108. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      yes, that's correct.
      delete Balas
    109. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      I found a little problem, your content is trapped by the canvas script so it doesn't display anything because the canvas script doesn't work.

      To make it work... maybe you should put the function canvas in code function checkUserRole
      delete Balas
    110. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      Yes, that's the problem but how?
      delete Balas
    111. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      give me the code snippet const img <data:post.body/>
      delete Balas
    112. #Question...
      Anonymous
      Anonim
      Member
      can we hide/disable the click of the login button if they access the profile/logged in?
      delete Balas
    113. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      Here window.addEventListener(`load`, function () {
      const imgTags = `<data:post.body.cssEscaped/>`;
      ImageManager.loadImages(imgTags);
      });
      delete Balas
    114. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      could you please provide a little more detail?
      I don't quite understand what you mean and what it's for
      delete Balas
    115. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin

      function loadImg () {
      const imgTags = `<data:post.body.cssEscaped/>`;
      ImageManager.loadImages(imgTags);
      }


      put this function " loadImg () " under unlockUser() in the function checkUserRole

      like this
      "Member"===t?(n[0].classList.remove("member","guest","hidden","hidden1"),checkMembershipExp(),unlockMember(),unlockUser(),loadImg (),console.log("Role Member"))
      delete Balas
    116. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      the same with profile you can't click it if you haven't logged it.
      delete Balas
    117. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      Hi, I now understand the error. When I set it to Production Mode, "Login failed" appears, but it works correctly in Test Mode. Here's the demo image Screenshot
      delete Balas
    118. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      Is this correct? function checkMembershipExp(){let e=document.getElementById("profile-uid"),r=document.querySelector("#exp-role");if(e&&r){let t=e.textContent,l=r.textContent.trim(),i=l.split(", ");if(2===i.length){let o=i[0];i[1];let n=o.split("/");if(3===n.length){let a=parseInt(n[0],10),s=parseInt(n[1],10)-1,d=parseInt(n[2],10),m=new Date(d,s,a);if(!isNaN(m.getTime())){let c=new Date;(c==m||c>=m||c>m)&&db.collection("users").doc(t).update({role:"User",exp:"Membership has expired"}).then(()=>{alert("Your 'Member' role membership has expired, so we will change your role back to 'User'. Please renew if you want to remain a 'Member'. Have a great day!"),location.reload()}).catch(e=>{console.error("Failed to change user role:",e)})}}}}}function checkUserRole(e){db.collection("users").doc(e).onSnapshot(e=>{if(e.exists){let r=e.data().role,l=document.querySelectorAll(".admin"),i=document.querySelectorAll(".member"),o=document.querySelectorAll(".modder"),n=document.querySelectorAll(".staff"),a=document.querySelectorAll(".guest");"Admin"===r?(l[0].classList.remove("admin","member","staff","modder","guest","hidden","hidden1"),checkMembershipExp(),unlockAdmin(),unlockModder(),unlockStaff(),unlockMember(),unlockUser(),notiRole(),loadImg(),console.log("Role Admin")):"Modder"===r?(o[0].classList.remove("modder","member","staff","guest","hidden","hidden1"),checkMembershipExp(),unlockModder(),unlockStaff(),unlockMember(),unlockUser(),loadImg(),console.log("Role Moddertor")):"Staff"===r?(n[0].classList.remove("staff","member","modder","guest","hidden","hidden1"),checkMembershipExp(),unlockModder(),unlockStaff(),unlockMember(),unlockUser(),notiRole(),loadImg(),console.log("Role Staff")):"Member"===r?(i[0].classList.remove("member","guest","hidden","hidden1"),checkMembershipExp(),unlockMember(),unlockUser(),notiRole(),loadImg(),console.log("Role Member")):"User"===r&&(a[0].classList.remove("guest","hidden"),checkMembershipExp(),unlockUser(),notiRole(),loadImg(),console.log("Role User"))}})}auth.onAuthStateChanged(e=>{e&&e.emailVerified?(showContent(),showProfile(e.uid),checkUserRole(e.uid)):hideContent()});
      function notiRole(){let t=document.querySelectorAll(".notifchapter");t?t.forEach(e=>{e.classList.add("hidden")}): t.forEach(e=>{e.classList.remove("hidden")})}
      function loadImg () {
      const imgTags = `<data:post.body.cssEscaped/>`;
      ImageManager.loadImages(imgTags);
      }
      delete Balas
    119. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Delete this code (This code shouldn't be there )
      function loadImg () {
      const imgTags = `<data:post.body.cssEscaped/>`;
      ImageManager.loadImages(imgTags);
      }


      And look for a code like this then replace it
      window.addEventListener(`load`, function () {
      const imgTags = `<data:post.body.cssEscaped/>`;
      ImageManager.loadImages(imgTags);
      });
      With this code
      function loadImg () {
      const imgTags = `<data:post.body.cssEscaped/>`;
      ImageManager.loadImages(imgTags);
      }
      delete Balas
    120. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      yes I know that, have you changed the Firestore database rules? as I suggested.
      delete Balas
    121. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      Yes, I did. But why is it working well only in test mode? Screenshot
      delete Balas
    122. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      There are two reasons
      1 Because the rules of the two modes are different, that's why I suggest changing the rules.
      2 There is no database with the name "users"
      delete Balas
    123. #Reply... MAGIC Reincarnated
      Didanim
      Didanim
      Member
      I don't know what's wrong, I followed your tutorial video Screenshot
      delete Balas
    124. #Reply... Didanim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      try using custom error.
      find this code
      find this code in jsfrm

      loginMessage.textContent = "login failed. " + e.message;

      replace with this


      if (e.code === "auth/user-not-found") {
      loginMessage.textContent = "Email not found. Please register";
      } else if (e.code === "auth/wrong-password") {
      loginMessage.textContent = "Wrong password. Please try again.";
      } else {
      loginMessage.textContent = "Login Failed. There is an error: " + e.message;
      }
      delete Balas
    125. #Question...
      Anonymous
      Anonim
      Member
      min, this appear after I add the code, can we remove it? Screenshot
      delete Balas
    126. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      I don't know what it is. can you send the full picture?
      delete Balas
    127. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      its URL
      delete Balas
    128. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Maybe it's the login session token URL, if it's really a login token then it can't be hidden.
      delete Balas
    129. #Reply... MAGIC Reincarnated
      Anonymous
      Anonim
      Member
      but I saw the example in zeistmaid. It wasn't like this: blogspot.com/2023/10/chapter-1.html?zx=a6a20ec91630d7d9
      delete Balas
    130. #Reply... Anonim
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      yeah in zeistmaid it doesn't happen like that, because the code is a little different.

      Does the form you use on the Zeistmaid theme use the same code as this post?
      then in the login section, register and profile or open content... is it all working normally?
      delete Balas
    131. #Question...
      Azathoth13x
      Azathoth13x
      Member
      Screenshot

      ZMv6 Search Bookmark Setting not work
      delete Balas
    132. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      delete class .hidden in this css
      .hidden,.hidden1,.form .register-fr,.form .reset-fr,.icon1.hidden,.icon2.hidden,.options li:first-child{display:none}
      example like this
      .hidden1,.form .register-fr,.form .reset-fr,.icon1.hidden,.icon2.hidden,.options li:first-child{display:none}
      delete Balas
    133. #Question...
      Azathoth13x
      Azathoth13x
      Member
      Screenshot

      How css?
      delete Balas
    134. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      gap: 5px 10px;
      delete Balas
    135. #Reply...
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      I will make a video tutorial
      delete Balas
    136. #Question...
      Azathoth13x
      Azathoth13x
      Member
      Thank u have kofi?
      delete Balas
    137. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      yeah I have Kofi Link kofi.

      this is the video tutorial Link video
      delete Balas
    138. #Reply... MAGIC Reincarnated
      Azathoth13x
      Azathoth13x
      Member
      kodenumber can enter any number right?
      delete Balas
    139. #Reply... MAGIC Reincarnated
      Azathoth13x
      Azathoth13x
      Member
      One more how to popup profile change to page? It maybe better than popup
      delete Balas
    140. #Question...
      Azathoth13x
      Azathoth13x
      Member
      <b:if cond='data:post.labels any (l =&gt; l.name == &quot;Admin&quot; || l.name == &quot;User&quot; || l.name == &quot;MemberA1&quot; || l.name == &quot;MemberA2&quot; || l.name == &quot;MemberA3&quot; || l.name == &quot;MemberA4&quot; || l.name == &quot;MemberA5&quot; || l.name == &quot;Modder&quot; || l.name == &quot;Staff&quot;)'>

      9 labels can be used if more there will be error
      delete Balas
    141. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Yes, but also no, sometimes there can be an error if there are more than 100, so I recommend just 1-50.
      delete Balas
    142. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      You can't, because the javascript is still fetching the data that appears in the profile.
      delete Balas
    143. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      try this
      <b:if cond='data:post.labels any (labelLock => labelLock.name in ["MemberA1", "MemberA2","MemberA3","MemberA4","MemberA5","Admin","Staff","Modder","User","Member"])'>
      delete Balas
    144. #Question...
      Azathoth13x
      Azathoth13x
      Member
      Can login but cant create account
      delete Balas
    145. #Reply... Azathoth13x
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      Code "other roles" is not the cause of the register error code.

      I don't know where the error is because I don't know what changes you made to the jsfrm code.

      screenshot code jsfrm and record console.log when you register
      delete Balas
    146. #Reply... MAGIC Reincarnated
      Azathoth13x
      Azathoth13x
      Member
      I fixed it that my wrong
      delete Balas
    147. #Question...
      S David Prince
      S David Prince
      Member
      😌 hehehe I also want to contribute ; I know I'm not on you guys level tho but I finally see something I can add
      delete Balas
    148. #Question...
      S David Prince
      S David Prince
      Member
      rules_version = '3';
      service cloud.firestore {
      match /databases/{database}/documents {
      // Allow read access for authenticated users.
      match /{document=**} {
      allow read: if request.auth != null;

      // Allow write access only for authenticated users from a specific domain and subdomains.
      allow write: if request.auth != null &&
      request.auth.token.email.matches(".*@yourdomain.com");
      }
      }
      }
      delete Balas
    149. #Reply... S David Prince
      MAGIC Reincarnated
      MAGIC Reincarnated
      Admin
      that's good, it gave me the idea to develop this login form so that it can only be accessed on registered domains.
      delete Balas
    150. #Reply... MAGIC Reincarnated
      S David Prince
      S David Prince
      Member
      Eish my bad thats a wrong. the previous code only give write access to the custom domain email address
      service cloud.firestore {
      match /databases/{database}/documents {
      match /{document=**} {
      allow read: if request.auth != null;

      // Allow write access only for authenticated users with the custom claim 'domain' set to 'sdacvip.com'.
      allow write: if request.auth != null &&
      request.auth.token.domain == 'domain.com';
      }
      }
      }

      I think this worked
      delete Balas
    Tinggalkan komentar Jika suka dengan kontent ini
    Masukkan URL Gambar (imgbb) / (im.ge) atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


    image quote pre code