How to Create this Popup signin page in Bubble?

Hi, I saw this sign-in popup in a website that resists login without entering the username and password.

I was curious how it can be done using bubble.

I’m happy if you can share me any resources if available.

Thanks in Advance
image

You can do this using custom JS via the Toolbox plugin. This is the code to achieve something like this

// Function to open prompts for username and password
function getUserCredentials() {
    const username = prompt("Enter your username:");
    if (username !== null) {
        const password = prompt("Enter your password:");
        if (password !== null) {
            alert(`Username: ${username}\nPassword: ${password}`);
        } else {
            alert("Password not entered.");
        }
    } else {
        alert("Username not entered.");
    }
}

// Call the function to open the prompts
getUserCredentials();

Let me know if this works :slight_smile:

2 Likes

@sumankoiralasir

If you are using bubble (assuming that’s the case)
Go to Setting > Click on General Tab
You can see the following settings:

Let me know if that helps.

1 Like

I’m curious if you mean the user can’t proceed without logging in?

If that is what you mean, I don’t believe that’s a popup (without seeing the site). I would think that is a modal dialog, which is the common practice. A modal can look just like a popup. But, a popup can be easily closed, whereas a modal can look like a popup, but can’t be closed.

A modal can be created using code.

Also, @Zeroic

I understand what you’re doing with the code, but IMHO it is very insecure because it exposes the password.

Myself, I think I would change it to:

function getUserCredentials() {
let username, password;

do {
username = prompt(“Enter your username (at least 5 characters):”);
} while (!username || username.length < 5);

do {
password = prompt(“Enter your password (at least 8 characters):”);
} while (!password || password.length < 8);

alert(“Credentials received (but NOT securely stored):\n” +
Username: ${username}\nPassword length: ${password.length});
}

getUserCredentials();

this does not expose the password.

Just an observation.

You always have good information and it’s just something I noticed on this code :slightly_smiling_face:

2 Likes

Yes, I agree, good call. My intention was just for @sumankoiralasir to know how this works, but nevertheless, appreciate you building on it
Thanks!

1 Like

I have no doubt you know what you’re doing.

Sometimes we get in a hurry and overlook things.

I love reading your advice. I get a lot of tips from you.

1 Like

Why are you all doing this with js code and not with a pop-up workflow?

I can only speak for myself.

A popup can be easily closed.

I was wondering if the poster was talking about forcing a user to sign in before they continue.

A modal is a common practice.

Do you have a way to make the popup forced and act like a modal?

If I do not want that people close the pop-up I just say so in the settings. I am sure a developer can still find ways to close the pop-up but if it is that important you can always do something like a “do when” user is not logged in and pop-up not visible type of thing I suppose

An interesting idea…

although I don’t know why you would go against custom practices.

But hey, if it works for you…

writing custom code when you can is totally fine of course. when you use a no-code tool because you cannot or do not want to code it is good to know that you can do this without code in under a minute I suppose.

1 Like

You cannot do a popup that acts as a modal.

You can do it with code.

From what I can figure out, the example given was a modal. If I’m reading his question right.

There’s a big difference as I’m sure you know.

What is not possible then with a pop-up what you can do with a modal?

Why would you use a popup with all the workflows…

when I can build a modal in 5 minutes?

Makes no sense to me.

1 Like

If you want to write custom code thats totally fine.

@sumankoiralasir you can either write custom code or use a popup if you do not want to code or not know how to code. Set a workflow “When page is loaded” that will run when is not logged in and use one step “show popup”. If you want it to behave as a modal you should check the “this popup cant be closed by pressing esc”

2 Likes

I respect your answer.

We all have different ways of doing things.

I respect your way and appreciate your input.

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.