Custom Login Form with HTML/CSS
Fullstack Social iOS NodeJS REST
With most applications we create, we'll want to stylize the look and feel to match the designs we're given. In today's lesson, I'd like to go ahead and walk through how to use HTML/CSS to create a nice looking centered form in the browser. You'll have to do some research on flex boxes and layouts with CSS yourself, but hopefully this lesson can guide you through my process of laying out html views. In the very end of this lesson, I'll go through how to send requests from our form through custom Javascript code using Axios.

Comments (10)
juliolocoh
4 years ago
can please include how to upload a video or an audio Brian
Brian Voong
4 years ago
juliolocoh
4 years ago
I mean in the course
FrancoisObob
4 years ago
Loved that video, wasn't too long at all !
Christopher J. Roura
3 years ago
Is there any easy way to avoid the autocorrect feature in vs code? I try to click off of the autocorrected word or suggestion vs code provides and sometimes it works and sometimes it does not.
pboabang@gmail.com
3 years ago
Hi Brian thanks for lessons and your help I am going through the course and I am doing the log in forms, all the previous routes are working fine, when I entered my rout: localhost:1337/customauth/login, I am getting this error:(node:11444) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated, I have even tried using a controller file without explicitly defining the view in the rout and I am still getting the same error
pboabang@gmail.com
3 years ago
Hey Brian thanks ounce again, I figured out the problem, I simply did not save my custom-login.ejs files, Wow I lost a valuable time but it is a lesson learned thanks a lot.
Brian Voong
3 years ago
Setwork44
3 years ago
After writing "document.location = "/post" " it still doesn't transfer to post page...
Setwork44
3 years ago
prob fixed!
gerkov77
3 years ago
Fantastic Stuff! Can't wait to continue tomorrow after some sleep!
gerkov77
3 years ago
Hey Brian! Great stuff! One interesting glitch occurred, I wonder If there is a solution for that. The custom login page looks perfect on Brave browser, but the layout is completely messed out on Safari! On Safari the image is below the form, it's extremely stretched vertically- covers the rest of the window, and the text "Fullstack Social" is on the bottom of the page. The problem does not exist on Opera either. Is there some customisation that prevents this messed up rendering on Safari? Thanks in advance: Greg
gerkov77
3 years ago
Ok, turns out, that Safari needs some more information regarding the <img>, in this case adding height="100px" solved it!
JMan
2 years ago
Thanks, this video was great!
Christopher J. Roura
2 years ago
Have you ever gotten this error before? I think it is causing the startup image to not show. I pasted in the startup image and copied the code from your project as well. error: ** Grunt :: An error occurred. ** error: ------------------------------------------------------------------------ Aborted due to warnings. Loading "Gruntfile.js" tasks...ERROR >> Error: Cannot find module 'grunt-contrib-clean/package.json' >> Require stack: >> - /Users/cjroura/FullStackSocial/web_social/node_modules/sails-hook-grunt/accessible/load-grunt-tasks.js >> - /Users/cjroura/FullStackSocial/web_social/Gruntfile.js >> - /Users/cjroura/FullStackSocial/web_social/node_modules/grunt/lib/grunt/task.js >> - /Users/cjroura/FullStackSocial/web_social/node_modules/grunt/lib/grunt.js >> - /Users/cjroura/FullStackSocial/web_social/node_modules/grunt-cli/bin/grunt >> - /Users/cjroura/FullStackSocial/web_social/node_modules/sails-hook-grunt/lib/grunt-wrapper.js Warning: Task "default" not found. ------------------------------------------------------------------------ error: Looks like a Grunt error occurred-- error: Please fix it, then **restart Sails** to resume watching for changes to assets: error: CTRL+C, then `sails lift` error: Or if you're stuck, check out the troubleshooting tips below. error: Troubleshooting tips: error: error: *-> Are "grunt" and any custom Grunt plugins you're using installed in this project? error: Run `npm install` if you're not sure. error: error: *-> You might have a typo in one of your LESS files, etc. error: error: *-> Or maybe you don't have permissions to access the `.tmp` directory? error: e.g., `/Users/cjroura/FullStackSocial/web_social/.tmp` ? error: error: If you think this might be the case, try running: error: sudo chown -R YOUR_COMPUTER_USER_NAME /Users/cjroura/FullStackSocial/web_social/.tmp error: error: *-> If you're still unsure, drop by https://sailsjs.com/support.
sync__
2 years ago
did you solve this?
Christopher J. Roura
2 years ago
Yes, so as it turns out iCloud Drive can do some weird things with code files. So, long story short I had to download the files from iCloud Drive and make sure everything was all saved locally. Hope this helps.
HELP & SUPPORT