Login Design
Instagram Firebase
Now that our LoginController is loaded up in our application, it's the perfect time to give it some nice design. First we start by centering the Instagram logo at the very top with a blue background behind it. Then we borrow the UITextField and UIButton components from our SignUpController. Lastly, I want to introduce the stylized attributed text for our button at the very bottom. While we're at it, let's also use a similar button in SignUpController to pop back to our login screen.

Comments (21)
Fred van Rijswijk
6 years ago
Great, hope for another video today... Quick question, are you going to use your LBTA Framework in this app? Or only the anchor extension?
Brian Voong
6 years ago
Fred van Rijswijk
6 years ago
Hi Brian, Not prefer I was wondering that you gone use them later on, I understand thats maybe it's making this course complicated... But I'm wondering how to implement LBTAComponents and Firebase .... Searching for better ways to implement Firebase datasource, also looking and using right now FirebaseUI components... I'm completely writing my app from Storyboards to only code... And having trouble with handeling the Structs / Classes and searching for the best way, so very interested in this course how to handle the data and displaying it in table or collections - views... So hoping for that videos are coming ;-) cheers Fred
rogerbayarea
6 years ago
Please no other framework to use like LBTA because once Swift, XCode, iOS any upgrade it always scary to fix bug. Any upgrade in my experience they always crush your app.
Brian Voong
6 years ago
Hen Shabat
6 years ago
Hi Brian, Would you recommend using CoreData to save the current user?
Brian Voong
6 years ago
Slava Nagornyak
6 years ago
Hi, Brian! Really interesting, why don't you use color literals? It's the same, as typing all these rgb, but you'll have a preview of what you're doing as well as color picker.
Stephen Novotny
6 years ago
Brian a lot of code duplication here for essentially two identical controllers. Maybe an update to show how to create components (classes perhaps) like you would in React.js etc to encapsulate all the UI and functionality to avoid WET ("write everything twice"). no rush. just my opinion. Still a very useful video. Thanks.
Brian Voong
6 years ago
mattnet
6 years ago
Hi Brian, For some reason, my logoContainerView is showing up with some sort of tinted or other color showing underneath my chose backgroud color. Any idea what might be causing this? My container is 150 in height like you suggest, and it's anchored at view.topAnchor. But it's being covered up by a grey section of about 60 or 70 px? Have no idea what's causing it...Thanks in advance!
mattnet
6 years ago
Apologies, I needed to set the navigationControllerIsHidden to true (or something like that). All good now!
wasim
6 years ago
Hi Brain, Something weird happening when i try to add constraints to logoImg(instagram logo) in login page. the commented code is not working, but anchor extension is working fine ! logoImg.anchor(top: nil, right: nil, bottom: nil, left: nil, height: 50, width: 200) /* logoImg.heightAnchor.constraint(equalToConstant: 50).isActive = true logoImg.widthAnchor.constraint(equalToConstant: 200).isActive = true */
LucaKiedrowski
6 years ago
Hey wasim :) Did you set the logoImg translatesAutoRezisingMasksIntoConstraints to false?:) If you want to do that with the "normal" anchors, you have to set that:) Wish you a great day!!
wasim
6 years ago
Oh man, you are right.. I missed it! my fault.. thanks for help luca
Brian Voong
6 years ago
LucaKiedrowski
6 years ago
No Problem man :) I always forget that too!
buglu
6 years ago
Hi Brain, In the last part of your video you suggest to use _ = navigationController?.popToViewController(animated: true) to dismiss the warning. In my opinion a better alternative to go back would be navigationController.popToRootViewController(animated: true)
buglu
6 years ago
navigationController?.popToRootViewController(animated: true) Ofcourse ;)
smiller193
6 years ago
Is anyone having an issue with the input accessory view getting stuck at the bottom? When exiting comment screen
Tokyojogo
5 years ago
Hi Brian, When using _ = navigationController?.popToViewController(animated: true) or navigationController?.popToRootViewController(animated: true) does this go back to the same instance of loginController or does it create a new one? Thanks.
Johnny Wu
5 years ago
It is same instance. you can try add a properties in LoginController and override viewDidAppear(_ animated:) ``` let randomNumber = arc4random_uniform(1000000) override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(true) print(randomNumber) } ```
Sanket Ray
5 years ago
When to use "dismiss(animated: true, completion : nil)" and when to use "navigationController.popViewController(animated : true)" ?
qdnguyen110
5 years ago
Hi Brian, I cannot set the status bar color to white on swift 4 ios 11?
Johnny Wu
5 years ago
``` override var preferredStatusBarStyle: UIStatusBarStyle { return .lightContent } ``` It works fine for me.
amosnistrian
5 years ago
Hi Bryan, @21:00 I understand intuitively why we pop the SignupController off the stack hierarchy but if instead of popping we push the LoginController onto the navigation stack, the views don't seem to be growing on the navigation stack, no matter how many times I alternate between pressing the login and sign up buttons at the bottom of the views, btw I'm using the view hierarchy debug tool to inspect the frames. Why is that? I would expect the stack to keep growing as we keep pushing the Login and Signin Controllers onto the navigation stack.
Shahrukh Mohammad
5 years ago
Hey Brian, this might seem like a stupid question, but I can't get the navigation bar items to appear on the left or the right hand side. only one of my items appear and always in the centre irregardless of where I placed it. I'm having the same problem with the instagram firebase course where the logout button appears in the centre instead of right. Please can you help me with this, it has caused me more suffering than that is justified
Brian Voong
5 years ago
Shahrukh Mohammad
5 years ago
Thanks a lot for your reply :-), here's the code: setupNavBar() } fileprivate func setupNavBar() { let navTitleView = UIImageView(image: #imageLiteral(resourceName: "logo")) navTitleView.frame = CGRect(x: 0, y: 0, width: 34, height: 34) navTitleView.contentMode = .scaleAspectFit navigationItem.titleView = navTitleView let settingsButton = UIButton(type: .system) settingsButton.setImage( #imageLiteral(resourceName: "settings").withRenderingMode(.alwaysOriginal), for: .normal) settingsButton.frame = CGRect(x: 0, y: 0, width: 34, height: 34) settingsButton.imageView?.contentMode = .scaleAspectFit settingsButton.addTarget(self, action: #selector(handleLogOut), for: .touchUpInside) navigationItem.leftBarButtonItem = UIBarButtonItem(customView: settingsButton) }
Shahrukh Mohammad
5 years ago
only the settingsButton appears and appears in the middle of the nav bar instead of left. this should be simple and yet I can't seem to figure out whats wrong.
blewjy
5 years ago
Hi Brian, Instead of embedding the viewcontroller in a navcontroller and hiding the navbar then presenting the next view through the nav controller, i decided to use present() and dismiss() instead, and everything seems to be working the same. Just want to ask if there is any core difference in terms of performance or preference (of iOS developers) between the two methods? Thanks!
Brian Voong
5 years ago
rickkettner
5 years ago
Brian, great lesson! When renaming a button, Xcode recently introduced a feature to automate the process. Just right click the button name and select "Refactor" -> "Rename" to simultaneously change the name in all places the button name is called.
Brian Voong
5 years ago
Sovorn
4 years ago
How to set top safe area background the same as the logoContainerView background??
Sovorn
4 years ago
Problem on IPhone X
peterjf2
2 years ago
Hey, just a heads up. The reason there is that black bar across the top is how we are presenting the Login Navigation Controller. I was trying to fix this in the xphone 12 simulator and had to add the .modalPresentationStyle = .fullscreen in my MainTabBarController. if Auth.auth().currentUser == nil { // Not logged in DispatchQueue.main.async { let loginController = LoginController() let navigationController = UINavigationController(rootViewController: loginController) navigationController.modalPresentationStyle = .fullScreen self.present(navigationController, animated: true, completion: nil) } return } Now the area behind the clock and battery is the same blue color as the logoContainerView.
Lucrecio909
4 years ago
I keep getting these errors when I try to create a new user, I was never able to resolve this any help will be appreciated. I believe its due to my Firebase authentication. Failed to save user info into db: Error Domain=com.firebase Code=1 "Permission denied" UserInfo={NSLocalizedDescription=Permission denied} 2018-10-14 15:12:32.783912-0700 InstagramFireBase[6688:291550] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C4.1:2][0x7fd704d4bf40] get output frames failed, state 8196 2018-10-14 15:12:32.784187-0700 InstagramFireBase[6688:291550] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C4.1:2][0x7fd704d4bf40] get output frames failed, state 8196 2018-10-14 15:12:32.785140-0700 InstagramFireBase[6688:291550] TIC Read Status [4:0x0]: 1:57 2018-10-14 15:12:32.785462-0700 InstagramFireBase[6688:291550] TIC Read Status [4:0x0]: 1:57 2018-10-14 15:13:20.775283-0700 InstagramFireBase[6688:292144] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C1.1:2][0x7fd704c18e00] get output frames failed, state 8196
Lucrecio909
4 years ago
Corrected error codes: I keep getting these errors when I try to create a new user, I was never able to resolve this any help will be appreciated. I believe its due to my Firebase authentication. 2018-10-14 15:11:33.423495-0700 InstagramFireBase[6688:290710] 5.9.0 - [Firebase/Database][I-RDB038012] updateChildValues: at /users failed: permission_denied Failed to save user info into db: Error Domain=com.firebase Code=1 "Permission denied" UserInfo={NSLocalizedDescription=Permission denied}
Brian Voong
4 years ago
Lucrecio909
4 years ago
I did not configure Firebase Database permissions. In Database in Firebase, under Reltime Database/Data I get "https://instagramfirebase-1f1bd.firebaseio.com/" inside this I have "instagramfirebase-1f1bd: "nil""
Brian Voong
4 years ago
Lucrecio909
4 years ago
Got it thank you Brian
Bishworaj
4 years ago
I am still having an issue on the 9. login design. For the button placement, I used this code: view.addSubview(alreadyHaveAccountButton) alreadyHaveAccountButton.anchor(top: nil, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, width: 0, height: 50) Same as you did. But, its just displaying on the top instead of showing on the bottom of the page. Can you please help me with it.
Brian Voong
4 years ago
dannyp75
3 years ago
Brian, I have an existing project with a login/sign page with a looped video. What's the way to implement that into your version. Watching this I realized I left out certain aspects in my project like user name.
HELP & SUPPORT