Hey welcome back everyone.
JENNY be here with slow dot common in this lesson we are going to create our profile of you.
All right.
So if we can check out our mockups we are to the point where we can now create this guy right here because
once we log in we create our user I should say we're we come back here we get our avatar image here
we get our name and so now we want it to be able when we are already logged in and we click on this
button instead of taking us to the log and it's going to take us to this view right here.
So we've got a nice little model here.
It's shows our avatar image our name and our e-mail and then gives us the option to log out.
All right so let's go ahead and get working on coding that up.
So we're going to do is here ender controller.
We're going to right click and say new file We're going to create our controller File for us and say
a touch class and we're going to call this profile Visi but different than usual this time we're actually
going to create a zip file for it.
So we're going to learn about working with kids in this lesson.
I was going to say next and create.
All right so then we got our profile the c file and we have our.
So don't be scared by you know working with zips it's pretty much just exactly the same as working in
storyboard on only just working on an individual view instead of being able to see all of them together.
OK.
So let's grab our Z right here.
I'm going to create a new group to hold our lives and call this the Z abs.
Just a heads up some people call them needs or Zeb's doesn't really matter.
I'm going to go drag this profile that is Zerbe here into the folder and let's go ahead and take a look
at our profile model once more.
We got to button this view a dark slightly transparent background so that looks good.
OK let's do this.
First off I'm going to do that background use I'm going to say.
By the you actually know because that will be a pain every time we try to put something in.
It'll try to put it inside of the view and we don't want it inside of you.
So we're into the fore forefront of it which is the white one.
OK.
So just to be able to see the bounds of this I'm going to change the.
So this was happening to me earlier.
It looks like we're having some beta bugs.
You can see that saying that there's nothing selected when clearly there is something selected.
So if you just leave the file and then come back hopefully that works out OK.
Yeah.
So now we're able to I'm going to say Hey just a slightly different background color on this front view.
Just to kind of see its bounds.
And then let's go ahead and start throwing everything in there that we know we're going to need.
We're going to need a button here in the top or right.
And let's go ahead and add that it's the image for that that is close button.
OK.
And then going to press command equal up get rid of the label for it.
There we go.
And then command equal and then I'm going to put this up in the top right corner and I'm going to constrain
it.
Well not yet.
Let's go ahead and put some of the other things that we need.
We're going to need a label soon to throw in a table here we we're going to need an image.
So I want to put an image in here.
And just so we can kind of see it.
I'm going to put in a placeholder up say the profile default and set the size to 100 by 100.
Now we're going to need a couple more labels below here.
So it's going to be our name label is going to be our e-mail label and then we're going to need a button
down here to be able to log out.
All right so let's go ahead and we're going to grab these three labels and change their properties.
So here we're going to set the color to our purple that we use hairiness at our font to custom and Helvetica
new for our top one here.
This is going to say your profile.
And we're going to bump that up and make you style of bold.
OK.
And see how that looks.
You know what I think we go even bigger.
So let's see here.
What is that 6:23.
Let's see how that looks.
That looks pretty good.
So we're going to put you right there and center you then we're going to put you right there right here.
It's just great to placeholder for that name Johnny B press command equal to resize it put you in the
middle here.
Say Johnny at the dot com.
And again this is just placeholders.
And we're going to actually slide both of those and these are also going to be to try mediums.
That looks.
I think that looks pretty good.
And comment equal hand can't equal that done here for this guy for this button.
We were going to set this text to log out change its font to custom Helvetica new and its style is bold
as well and let's size up to say 20 I think that will look good command equal and change the text color
to that purple that we're using.
All right.
That looks pretty good.
So now let's go ahead and put in that.
You I have you that is in the background and that you view if you drag it.
And we're just going to put it right here above and I'm going to control drag from this little Let's
rename it right now.
When I two renamed B.G. view for background view I'm going to control and direct to the view and see
leading space to container trailing space to container top space to container and bottom space to container.
Now I'm going to come over here to the size inspector and change all of those to zero.
Area and then selecting the background view we can set the background color to black and then drop the
alphabet to zero point for every game.
All right.
And then another we're able to kind of.
Now that we have a darker background let's change this View's background color back to just white hopes
that's clear to white here.
OK.
All right so this is looking good.
Let's go ahead and constrain some things so the container you for our modal.
We're gonna go 20 from the left 20 from the right the height.
I think it looks pretty good.
So we'll just set it at 320 and add those constraints and then we are going to center it horizontally
or center it vertically in the container.
There we go.
All right so that looks good.
We need to add constraints for the rest.
So this guy here is going to be eight from the top from the right.
Our profile is you know what I think we'll go ahead and just throw these four elements into a stack.
Use I want to grab the profile the image and these two labels and embed in the stack for you right here.
And then we're going to need to constrain the size of this image.
We're all still hog up the whole container.
So I'm going to constrain to 100 and 100 had to constraints.
There we go.
And then with the stack you selected I'm just going to center it horizontally and vertically.
And that looks good.
Let's give it some spacing so that these aren't so crammed together.
I was trying maybe 12 14.
That looks pretty good.
Let's go ahead and move it up a little bit.
I'm going to take it.
Check out the size inspector here and a line center to Y and C minus maybe like 40.
Up too much minus 20 area I think that looks pretty good.
So we got our profile.
I think we need to make this a little bit taller this view right here.
So the height equals let's try.
Three hundred and sixty.
I think that that looks now it's better that way things aren't so so scrunched together.
All right so it's constrain the sky here.
Let's go from the bottom hand center horizontally.
All right.
And I think that constrains everything everything is lookin real good.
All right.
So I'm going to save this.
And then we're going to open up our assistant.
With the profile we see right here.
And this makes some of the outlets for Ferrara elements here.
All right.
I'm going to just delete these.
The stuff that we don't need.
All right so we've got to button her clothes motile button here.
I going to say close close close.
Motile pressed.
That's an action and touch so it is good and connect.
Then we got our log out button.
I'm going to say log out preste.
And this is an action that's touch up inside.
And then we're going to need some outlets for power images and our labels here soon to say profile image
here I'm going to say a user name and here this is the user Lupe's user e-mail.
Right.
And then we also need one for the background view because what we're going to do is we're going to add
a gesture recognizer to that background view so that when someone clicks on it it will also dismiss.
OK.
So when I say Vicci you.
All right and connect already.
So let's go ahead and make it to where we can actually see this view.
So for that we're going to need to jump into our channel AVC.
So right now anytime we click on the logon button it's going to take us to the log in page.
But if we are already logged in we instead want to take us to that profile view controller.
So we were going to do a check we're going to say if off service for instance that is logged in when
we click on it we are going to instead show profile page else then we will show the logon controller.
OK.
But now we're working with a zip right.
We don't just have some Segway and a storyboard that we can perform.
Right.
So it's actually actually really easy to do.
All we're going to do is we're going to say let profile people profile we see you're going to instantiate
it and then we're going to say profile dot modal presentation style and this is the presentation style
for model the presented view controllers.
So what we're going to do is we're going to instantiate the profile and then we're going to present
it as a model.
And that is just dot custom.
Ken.
And then all we have to do is say present and yet present your controller and the controller to present
is the one that we just instantiated profile animated.
True and completion is new.
All right so easy peasy three lines of code.
We instantiate it.
We set the price of the modal presentation style and then we present it.
All right.
So get rid of this comment and we're going to run this and see how it goes.
All right and just a reminder to see the profile view we have to be in a logged in state.
And so since we don't have the oh here we go.
So apparently we are already considered to be logged in.
Because when we created the account last time we grandis we saved to our user defaults that is logged
in the state is equal to true.
So yeah here we go.
Pretty cool.
But one thing that we're noticing right off the bat is that we forgot one thing and that's here in the
profile we see which is we want the view the overall view to have a background color of clear.
I just want to say that and I mean everything else looks good.
I'm not going to run it again just to see that background.
Let's actually jump into making this all set up with the correct information.
All right.
So let's go ahead and jump in to profile See hand.
I want you to try and fill out the rest of this profile.
VC right.
So what do we need.
We need to be able to show the user's image the user's name and email and then have it be able to close
the modem by clicking on here.
And that's all I want you to do.
That's all I want you to do.
Pretty simple stuff that we that we have all done that we've done in previous few controllers.
Right.
So give it a try.
And then we'll finish up the rest of it.
All right.
OK.
Welcome back.
Hope you tried that out.
So what we're going to do is we're going to create a function called set up view.
And what are we going to do.
We are going to set the user name the e-mail and the profile image.
Those are the first things we're going to bring to a user name is equal to our user name dot text I
should say it's equal to user data service that instance that
name all right and then user e-mail that text is equal to user data service instance that e-mail and
the profile image is equal to profile image that image is equal to you UI image named.
And again user data service that instance that Avatar not color but name and the background color is
profile image that background color is equal to.
And then we use our function that we created in the last video use or data service that instance does
turn color and the color that are the components that we are going to pass into this are put in the
user data service that instance dot Avatar color string.
All right.
So now when we load up this profile the user name email profile image the image itself as well as the
background color will be correct.
All right so here let's go ahead and finish up the close modal preste.
That's a simple dismiss function dismiss animated.
True that just dismisses the view and the conclusion is no and then viewed it load we are going to not
forget to call the set up function this time going to press hold control and I had to adjust the indentation
in case you haven't seen that before so if you have something that gets a donkey can just press control.
And that'll fix it to his correct indentation.
OK so now we have this log out press button.
So what do we want to have happen when we log out.
OK.
So when we log in what do we do we set a whole bunch of variables and booleans and stuff.
We set the Avatar color name email and name.
We also set some variables here in the office service.
We set the is logged in boolean to true.
We set a token and we store the user e-mail.
All right so when we log out we want to clear all of that.
Right.
So here in the user data service what we're going to do is we're going to create a log out user function
case and say funk log out user.
And here we are going to set all of these variables back to empty strings we're going to see ID is equal
to empty string have a tar name is equal to an empty string.
Avatar color is equal to an empty string you know is equal to an empty empty string and name is equal
to an empty string.
We also want to set the service variables.
So when I say service that instance that is logged in is equal to false service instance dot user e-mail
is back to an empty string and of service dot instance dot off tokin is back to an empty string.
Ok so now we have our log out user functions.
Let's jump back into profile of the C and we're going to say user data service that instance that log
out user.
Now when we log out remember we created that notification to notify other classes when user data changes.
And this is a prime example of when the use of data has changed.
We have wiped clean everything.
So practically in speaking in the future what that means is when we log out we're going to when we get
all of this done we're going to clear the channels we're going to clear the chats and and just a clean
slate for the app.
All right.
So that's why we need to have this notification post.
So we're going to say notification center that default that post and we want this guy right here.
The name is know to underscore and use a day to day change and the object is new.
OK.
And then we are going to dismiss the view see this and this sentiment is true and completion is new.
I just want to save that and.
Yes.
Now when we load up the app and we create a user and log in we're going to be able to click on the profile
button and it should populate all of our data.
And then when we click log out you should wipe it all out.
Right so let's go and run this.
So here we go log in.
All right so we need to do the log out thing first.
So now we can log in and don't have an account just going to see Jack attack.
It doesn't really matter.
Just an avatar tweet set the background color and create an account.
And here we go.
I want to click on this.
And here we go.
Your profile Jack attack.
That is our e-mail.
We forgot to set this to be a circle image but we'll fix that in a second.
Let's see if this works.
Yep.
So that works.
And if we log out then what we should expect to see is that this this dismisses and then because we
have already set up our Her our observer on the channel Visi which is listening for changes to our user
data when we log out this is going to switch back to our default image.
And this should switch back to a log in.
And there we go.
All right.
Pretty smooth.
All right so let's go ahead and fix those couple of little things that we saw here in the profile of
the sea.
This should be of class circle image.
And then I think the last thing was I told you that we were going to have a gesture recognizer to this
background view so that you could click on it.
You could tap on it and it would dismiss as well.
So let's do that I'm going to jump into our profile here and we are going to add and create that tap
gesture recognizers and say let close touch equal to you I'd tap gesture recognizer and let's see here
let's go ahead and create our target to do a quick action I should say so we're going to create a function
just like we did in the create account VC where we tapped to dismiss the keyboard.
We're going to create a function similar to that.
We're going to say objective see funk close tap.
And that's going to be Rick and user of type II tap gesture recognizer and we're going to say this this
kind of made it is true completion is new.
Ok so back up here again target is self action is hash tag selector.
That's not a hash tag hashtags selector and we are in the profile the C dot clothes type.
All right.
So let's do this one more time.
Going to run it and let's do this.
Log in don't have an account.
Jenny.
Email doesn't matter.
It doesn't really matter.
She's an amateur bird again.
And at the count.
All right there we are.
All right.
We've got a circular image that didn't work.
Oh you know we forgot to add that just recognize it we created it but we didn't add it.
So we want to add to it to the background.
You believe you don't add gesture recognizer just recognize that we want to add is of course close touch.
Take that and run it.
All right.
Coming in here.
Log on up.
Yep we have to log in again.
Log out I should say and Johnny e-mail doesn't matter.
Password doesn't really matter.
And we're going to be a chameleon this time and create account
and when it click and there we go.
All right.
So looks like everything is working perfectly.
We click on log out.
It logs us out and then we're able to love back in.
All right so in this lesson we created the profile view.
But one thing that is bothering me is that every time we want to log in we have to go through the create
user account cycle.
Let's go ahead.
In this next lesson we're going to make it so that we can log in right from here as well as if you're
already logged in then it'll automatically set things up for you.
All right.
So that's going to be a fun one.
Hope you're looking forward to that.
And just to save our progress I'm going to add and commit and then I will see you in the next one.