Do you want to force your users to log in but with a nice UX using blur effect and an alert box? Check this out

[matthieu_chateau]

Hi all!

As always, no excessive teasing needed, here is the demo if the user is not logged in: https://test-play.softr.app/slide-page

All style stuff should be customizable. Also note that the not logged in user won’t have the ability to click anywhere except on the link provided (‘log in’).

In the header code of the page settings:

<div id="alertWrapper">
  <div id="alertBox" class="custom-alert">
       <a href="#" id="goBackBtn">Go Back</a>
       <p>You are not logged in. Please <a href="https://yoursoftrapp.com/whatever-you-want">log in</a> to access the content.</p>
  </div>
</div>

<style>
#alertWrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 999;
  display: none;
}

.custom-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ebebeb;
  color: #000000;
  border-radius: 8px;
  border: 2px solid #182939;
  padding-top: 50px;
  padding-right: 60px;
  padding-bottom: 50px;
  padding-left: 60px;
  z-index: 1000;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.custom-alert p {
  margin: 0;
}

.custom-alert * {
  pointer-events: auto;
}

#goBackBtn {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #000000;
  text-decoration: underline;
  font-size: 13px;
  font-weight: 400;
}

@media only screen and (max-width: 768px) {
  .custom-alert {
    padding: 50px 20px;
  }
}

</style>

In the footer code of the page settings:

<script>
if (!window.logged_in_user) {
  var alertWrapper = document.getElementById("alertWrapper");
  alertWrapper.style.display = "flex";
}
</script>

<script>
document.getElementById("goBackBtn").addEventListener("click", function(event) {
  event.preventDefault();
  window.history.back();
});
</script>

[Suzie]

Thanks for sharing @matthieu_chateau, another great workaround

[Charles]

Woa ! So nice @matthieu_chateau, I love it !

Be careful because this is not a protection at all for your content, only esthetical views to remember your visitor has to login.

In 20 secondes you can easily remove it and access the content, so use it as a non-protective feature !

[matthieu_chateau]

Yes, if you disable javascript. But blocks behind the blur effect have conditional filters, so no big problem at the end.

[Charles]

I know you know but it is just people here who could take this script like this and forget to create such protections

[imraju]

hey @matthieu_chateau, is there a way to load to the same page on which this popped up? I am using this on the leadboarder template, where i am asking user to signup before going to details page but post signup, the user is going back to home page.

[matthieu_chateau]

Hi!

Just to be sure: after clicking “Go Back” button it should lead to your homepage or to the page where the alert box is (in this case it would be page reload)?

[imraju]

Well, pushing Go Back should take them to the Homepage as i have the list block on Home page and by clicking on the aingle block of the list i am going to the details block.

However, after signup, the control details block should open up as the popup appeared on top of it.

[matthieu_chateau]

For the go back button that leads to the homepage:
Change https://yourdomain.com by the current url of the homepage

<script>
document.getElementById("goBackBtn").addEventListener("click", function(event) {
  event.preventDefault();
  window.location.href = "https://yourdomain.com";
});
</script>

[imraju]

Thanks @matthieu_chateau . I have a made a really quick loom video to explain the problem that i have. Please spend a min through it to get and help me accordingly.

Here is the loom video

[matthieu_chateau]

Okay, I understand now, this thread treats about this use case: Complete guide: Redirect users to the page they were before signing up/signing in + onboarding use case

Ps: it won’t work with Google signup or Google signin option

[angieQCC]

Hi I love this option, what do I need to edit so it depends which user group someone is in?

[matthieu_chateau]

Hi Angie,

It will be a bit more than an update but basically it’s in the first script.
if (!window.logged_in_user) { means that the script will run if non logged in user.

Right now you can’t reach a specific user group while scripting (like logged_in_user_usergroupX).

You will need to re-create the user group according to the conditions of this user group in Airtable (which can be a lot to do ) with if (window['logged_in_user'] && window['logged_in_user']['airtable field'])

[angieQCC]

So if I said that “PAY AS YOU GO MEMBERS” can’t see the content, but “SUBSCRIBED” members can, I would put “PAY AS YOU GO MEMBERS” in the [‘airtable field’] part of your script / code? or is that the name of the field where I define where a member is PAYG or SUB?

[matthieu_chateau]

It’s more complicated, it would be the name (case sensitive) of the field in Airtable = something (the value that decides if a user is from one user group or from another).
Also, the way to code it will be a bit different if it’s a single value type or if this is a multiple value type (array).

Can you tell me what decides if a user is a PAY AS YOU GO MEMBERS in your Airtable setup?

[angieQCC]

Hi Matthieu,

Thank you so much for your help really appreciate it

As you can see by the screen shot the status is a formula field in AT based on a few other field conditions.

Thanks

Angie

[matthieu_chateau]

Thank you!

can you try to update the scripting part with this:

<script>
if (window['logged_in_user'] && window['logged_in_user']['Member Status'] === 'PAYG') {
  var alertWrapper = document.getElementById("alertWrapper");
  alertWrapper.style.display = "flex";
}
</script>

<script>
document.getElementById("goBackBtn").addEventListener("click", function(event) {
  event.preventDefault();
  window.history.back();
});
</script>

Important note: the value for a pay as you go member is ‘symbol PAYG’. I don’t know what symbol is this . So I just wrote the script as if the value was only ‘PAYG’.

In order to make it work you might have to duplicate the Member Status Formula field (name the new duplicated field as ‘Member Status For Code’) to remove the symbols. Once done, update ['Member Status'] in the script by ['Member Status For Code']

[angieQCC]

Thanks.

I’ve tried this code and tried it with the “clean” no icons field and even a text field, but it doesn’t seem to work.

I’ll give up for now and use a blurred screenshot as a work around!

Thanks for your time.

P.S. Please introduce conditional form fields soon

[matthieu_chateau]

Mmmm let me insist a bit, it should work (I’m stubborn )

In the header custom code of the page you would need to add this code:

<div id="alertWrapper">
  <div id="alertBox" class="custom-alert">
       <a href="#" id="goBackBtn">Go Back</a>
       <p>You are not logged in. Please <a href="https://yoursoftrapp.com/whatever-you-want">log in</a> to access the content.</p>
  </div>
</div>

<style>
#alertWrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 999;
  display: none;
}

.custom-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ebebeb;
  color: #000000;
  border-radius: 8px;
  border: 2px solid #182939;
  padding-top: 50px;
  padding-right: 60px;
  padding-bottom: 50px;
  padding-left: 60px;
  z-index: 1000;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.custom-alert p {
  margin: 0;
}

.custom-alert * {
  pointer-events: auto;
}

#goBackBtn {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #000000;
  text-decoration: underline;
  font-size: 13px;
  font-weight: 400;
}

@media only screen and (max-width: 768px) {
  .custom-alert {
    padding: 50px 20px;
  }
}

</style>

In the footer custom code of the same page insert this code:

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (window['logged_in_user'] && window['logged_in_user']['Member Status'] === 'PAYG') {
    var alertWrapper = document.getElementById("alertWrapper");
    alertWrapper.style.display = "flex";
  }
});
</script>

<script>
document.getElementById("goBackBtn").addEventListener("click", function(event) {
  event.preventDefault();
  window.history.back();
});
</script>

I made some tests myself and it worked. Just change Member Status by the name of the correct field in Airtable and PAYG by the right value (all case sensitive)