Creating Login Form

So with our dashboard view now completed, let’s just go ahead and move on to the log in view. So what I’m going to do is create a new file right here. So I’m going to name this– obviously, first of all, it’s a Swift file. And secondly, I’m going to name this as log in view.

So now we can create a simple log in form. And what we can do is just resume this right here. Once this runs, we’re going to create a very simple log in form. And this would start with a form. So in a secure application, you can create a form like this, which is going to give you a list view-like experience, but now you have a form.

So what you want to do is say text– text field, first of all. And the first argument is your username, but that is the place, all the text. And the second argument is the binding. So remember, we talked about state a bit before. So let’s just discuss state in this video.

So I want to create a variable state– private var username in the string. So what does that mean in this context is that I’m binding this text field to this particular user name variable. So what happens is whenever I change this text field, we pass the binding using the dollar sign. If I make use of the regular username variable without the dollar sign, it’s just that I’m accessing the value.

But if I want– so if you were to take over and change the value of the username whenever I make some change right here, I need to pass in the binding. I need to give Swift the binding to that particular variable. And we do that with the dollar sign, and this works only for state variables. So once we have that in place, we can have something like secure field as well and say your password.

And this would have the text binding for password. And password. There we go. And if we resume, we’re going to see that we get another view. We should get another view right here. You can see here, for some reason, in Xcode beta 3, this place for the text does not work with secure field. So if it works for you, good for you, not on Xcode beta 3. But for beta 3, it does not work.

So anyway, let’s just go ahead and proceed forward. So what we’re going to do next is let’s just wrap this in a navigation view, because we need to navigate away to the dashboard as well later on. And once we do that, you can see that we get a nice little space for the navigation bar title.

So we can see that this is our nice crypto application, which is the name of our application. And we can see that this is a place for the username and password for people to log in. And I could just say that this is a button right here, saying that some sort of action should be performed whenever I click on log in. We’re going to just say that this is log in.

So you see that we get a nice little log in button right there, but what we want is probably something like– we can apply this a background. Color, color, Color.red. And we can get this text view. That is the text inside this color as well. That is Color.white. And let’s see how that looks like. And apparently it’s not the color, but let’s see what this is. We can just go into inspect. And we can see the color is white.

Well, anyway, we have that. Plus, I want the padding of 20 with a corner. And actually, in Swift here, you see that the order matters. So I want to apply the padding first and then the background. And what I want to do is I want to say padding, trailing, and leading should be 20. I’ve got padding at the top. And at bottom should be 50.

And once we have that, I guess we could just give it a rounded border radius. It was something like that. Let’s see what it was. Radius. That is corner radius. That is right. So we get a corner radius of, let’s say, 10.

So let’s just apply the background first and give the corner radius, because once we give the background, the corner radius is applied to that particular view. If you don’t do the background first, the corner radius is applied and then the background is given. So that overwrites it.

So once we have that, we could pretty much just go ahead and stack this in a [INAUDIBLE] stack and throw in a couple of spacers to center this in the view. So we can see now that it’s taking shape. And now if we just go ahead and go to our delegate file and change our view from content view to a log in view– because that’s what we want to see now on the simulator– and just go ahead and run it, you’re going to see that on the simulator we should have a nice little log in form now.

So let’s just wait for the application to launch, and let’s just see. So here we are. So our username could be anything, like Maho. Our password could be, like, some secret password– anything like that. And we can have this nice little log in button.

So once we have that in place, what we need is a simple backend, which should actually call some sort of method here and update the UI, or rather just navigate away to a different page. That is a dashboard view. So let’s just do that.