Buy me a coffee

How to set Password for Individual Project Page

To set password for individual project page, you can follow these.
#1. First, edit individual project page > Add a Code Block

136d94aa89b32eed77a2 Min

#2. Add this code into Code Block

<style>
  #siteWrapper {
   display: none;
}

a.btn.btn--border.theme-btn--primary-inverse.sqs-button-element--secondary.second-button {
 display: none; 
}
  #check-pw-block {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#siteWrapper {
   display: none;
}

a.btn.btn--border.theme-btn--primary-inverse.sqs-button-element--secondary.second-button {
 display: none; 
}
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
  var $div = $(`
  <div id="check-pw-block">
    Enter Password:
    <input type="text" value="" id="inputPW" /><br />
    <p id="check-pw-error" style="display: none; color: red">Wrong password</p>
    <button onclick="protectPasscode()">Check</button>
  </div>
  `).appendTo("body");

});
function protectPasscode() {
  let password = 123;
  var inputPW = $("#inputPW")[0];
  var siteWrapper = $("#siteWrapper");
  var pwErrorText = $("#check-pw-error");
  var checkPwBlock = $("#check-pw-block");
  var buttonContact = $("a.btn.btn--border.theme-btn--primary-inverse.sqs-button-element--secondary.second-button");

  if (inputPW.value == password) {
    siteWrapper.show();
    buttonContact.css("display", "inline-block");
    checkPwBlock.hide();
  } else {
    siteWrapper.hide();
    buttonContact.hide();
    checkPwBlock.show();
    pwErrorText.show();
  }
}


</script>

080c8011820825567c19 Min

#3. Result
When users access page, they will see this

8205d62ed53772692b26 Min

#4. To change password, you can find this line

7918c1a3c5ba62e43bab Min