How to Create this Popup signin page in Bubble?

sumankoiralasir · 2024-07-26T16:42:55.667Z

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

Zeroic · 2024-07-26T17:10:33.734Z

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

codefree · 2024-07-27T08:18:46.050Z

@sumankoiralasir

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

image3222×238 21.2 KB

Let me know if that helps.

senecadatabase · 2024-07-27T12:44:11.284Z

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

Zeroic · 2024-07-27T14:29:53.624Z

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

senecadatabase · 2024-07-27T14:45:09.212Z

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.

sem · 2024-07-27T15:57:18.229Z

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

senecadatabase · 2024-07-27T16:20:47.776Z

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?

sem · 2024-07-27T17:01:45.859Z

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

senecadatabase · 2024-07-27T18:06:39.047Z

An interesting idea…

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

But hey, if it works for you…

sem · 2024-07-27T18:20:39.840Z

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.

senecadatabase · 2024-07-27T18:26:34.259Z

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.

sem · 2024-07-27T18:34:36.611Z

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

senecadatabase · 2024-07-27T18:47:45.268Z

Why would you use a popup with all the workflows…

when I can build a modal in 5 minutes?

Makes no sense to me.

sem · 2024-07-27T18:56:34.425Z

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”

senecadatabase · 2024-07-27T19:00:04.464Z

I respect your answer.

We all have different ways of doing things.

I respect your way and appreciate your input.

system · 2024-10-04T16:43:08.925Z

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