Build a web app 2019 - 10/x Login Screen pt 5

Build a web app 2019 – 10/x Login Screen pt 5

Set up your e-mail login and sign up in

hello all you fans fancy apps in bubble dot is welcome back today we're going to continue to work on our login screen now it's been a while since I made a tutorial and the template I was using to teach you I've made irreparable changes to and I don't know how to reset it to the place where we were in our tutorial flow so I'm just going to start using this one here now most of the stuff is exactly the same the major changes being you don't have this checkbox and this is your mobile both buttons they will be below these I believe in the tutorial that you're following but it's mostly inconsequential to your learning process so I'll just continue from here now you have to make a decision either you won't log in to show up first or you want signup to show up first and the implications are is your user something like a staff or somebody who needs to be signed up to use your service then you won't log in to show up first and if it's targeted towards the mass consumer and your idea is to derive more consumers through the funnel then your signup should be the first thing that shows up so I don't know which one we're gonna do we're gonna figure it out as we go but basically we have here this call to action that's going to switch between login and sign up that's the first thing we get to set up so we could double click on the text and we're gonna go start edit workflow no it's not ideal because the entire text will be clickable normally I would put some text and then another text and then in another text and I would click on just the signup text but that's a lot of work for your tutorials so we're not gonna do that if you guys want to do that go ahead put three texts in one that's sign up and only make the signup text clickable otherwise please do follow along so let's go to here and let's set a state as I've said before setting States is basically a variable that lives at the browser level at the user level it doesn't store in your database and it reads and writes much quicker than anything you can put in your data tab which makes it very useful it also is important to keep in mind that it resets as soon as your user closes their browser window or navigates away so let's go ahead and change the state of something we're gonna use snap holder because I've already used it and I have it yes no you create a new custom state you call it whatever you want you is login or is signup the state type will be a yes/no and it's important to realize that this yes/no always starts off as a no or as an empty and then you have to set it so let's go is login value and let's set that to a hmm no what's the text say are you new here sign up yes we're gonna set it to a no because this will show up when it's login let's go conditional and say when snap holder is login is yes this element is visible true let's make it invisible on page load okay make sure that this is invisible on page load and let's copy that and let's paste it in there and let's do the exact opposite so we have this text when you paste it actually puts it 10 pixels over on either axis so we're gonna realign it and I'm gonna change the text that's inside we're gonna say already have an account then login instead okay good stuff and this one has to do the opposite and basically set state of snap holder to be is login to be yes okay so let's make something ok so this one is also invisible on page load and the conditional is if snap holders login is yes so now we should be able to switch back and forth between the states right oh they're both visible why are they both visible are they both yes did I make that mistake yes they're both yes but this one should be is no or is empty or well we have to rewrite snap holders is login is formatted as text is empty okay now only one should show up it's the login are you new here sign up instead let's click on here dang already you have an account login instead hey we just forgot a question mark are we really worried about it yeah why not be professional about it now we can put a conditional here as well and say when snap holders his login is a no or snap holders is login or matter this text is empty which is the state when you first load the page so when we load the page it should say login and now it says sign up great stuff and the last thing to change is this button right here we can actually just grab this condition paste it in here oops I made a mistake we can grab this condition and paste in here nailed it text signup this is slightly different though nailed it yep so now we have a way that we can switch between login and sign up just by clicking on this text right here the next thing we need to do is actually make this button work and then we're done let's go start edit workflow let's go account let's go sign the user up and bubble makes this so incredibly easy that it's almost excruciating sometimes not that sometimes the dependency trees break and you don't have access to all of the inputs because bubble tries to sort things according to what you're allowed to access here in this case should be an email it's not available so I find sometimes moving the button around actually will give you access to that particular input which you need sometimes moving the button around along the dependencies will actually fix it but it's definitely a bubble bug so I put it on the index and I found input emails value so not excruciating ly easy but easy enough so let's go yes here let's go account log the user in and again input emails value and input passwords value for email and password easy as pie and let's go yes and send the user up yes and we're just going to fix those and remember the email options in just a moment let's put this login back where it belongs back to start edit workflow now we can actually add conditionals here and we can go in snap holder is login is we're signing up so is no and or instead of is no we have to go format it as text yes is not yes so basically if it's empty or if it's no and remember the email our check box remember miss checked is yes if you're using a bubble check box is checked or is unchecked instead of the check box that I suggest you design following one of my tutorials anyways so I'm sure you can figure that out let's actually just copy this expression let's paste that in here and now we want is login is yes and check checked is yes so basically this logs it in if the is login is a yes and signs the user in if it's not yes so basically if it's no and they're both remembered right now so let's actually just copy these paste them in here and change these to no and no and copy this one and do the same thing here and basically say don't remember the email no no and no super so this should work so let's go ahead and navigate a week go to page index and we're gonna add a little handler just to UM basically test this we're gonna had a handler that's fresh let's hide everything here let's go to button let's go here make a big button that says log out plus I don't care I'm leaving it like that it's a dynamic data current user and now if the users logged in you'll have an email that they use to log in so we'll display that in the button as well and in the button we're going to actually log the user out and by out I actually mean out and that's easy to you can see and navigate to go to page and index we're gonna send a parameter P equals login if you don't understand this parameter thing just go back a couple tutorials to our navigation examples and you'll figure it out pretty quickly and the last thing we need to do before we preview is say not visible on page load but if get data from page URLs diameter P is resh then this element is visible yes otherwise not visible let's preview that and here's our login page this is from prior test don't worry about it email will be thiru true true at in our first test a password will be STF and we'll go remember me yes let's login okay we couldn't find a user because it doesn't exist well sign up instead sign up and there's true true true signed up as a user will find true Chuchu in our data tab under all users there's true true true and the rest of my tests cool cool log him out or her we don't know who it is now let's go with let's actually we should be able to log in right now the password and the user are that saved yeah it worked and let's go okay without remember me but this I know right now it won't work don't save go back and it stays can't because we never navigated away from the page it saved it but if we were to I think refresh the page I think it would go away it didn't go away that's what if we went to another page and then when to the page okay it still remembers I think what we have to do is go to start the workflow for the LA if you log in we have to say element action reset inputs and put that here let's preview that true choo-choo is still here even though we oh yeah true true we said remember me let's go don't remember me at password again asdf I remember me no don't remember me and login now it's right then up instead perfect don't save logout and it remember true true true it did not remember don't remember me perfect so everything works and in the next tutorial would you forgot password and we'll add a handler for logins who say for emails that don't exist we do want a handler that's a little bit more elegant than whatever the hell this is that we're going to build that out in the next tutorial

One thought on “Build a web app 2019 – 10/x Login Screen pt 5

Leave a Reply