[Share] How to set Password for Individual Project Page

To set password for individual project page, you can follow these.

You can do same with Product, Event, Blog...

#1. First, edit individual project page > Add a Code Block

#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>

#3. Result

When users access page, they will see this

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