MEAN Stack – Style the Sign-up Page – Day 8

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll have some fun and bootstrap/style out the sign-up page.

We look at:
– The MEAN Stack Sign-up page
– Easily formatting pages using our styles

The functional design post mentioned in this video of the home page – use case, storyboard and wireframes can be found here: Home Page Design.

Next

MEAN Stack – Customer CRUD Module with Yeoman – Day 9
Previous

MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

9 Comments

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Daniel
    Reply

    HI Shristi! First of all, thanks so much for making these tutorials. They are extremely helpful and well curated. Secondly, I was wondering how or even if it was possible with meanjs to get rid of the first, last name, and email requirements to signup? I’m just aiming to use only the username and password to signup.

    • bossable

      Hey Daniel – anything is possible! 🙂

      Removing email will impact things like ‘forgot my password’. First name/last name are normally concatenated into ‘display name’, so you’ll also need to re-factor parts of the UI.

      It’s also the case that when you’re dealing with apps that cater to people and organisations, that some of these fields aren’t relevant. It’s very possible to change things up, it’s just a bit of work.

      I would recommend that you start by having a look at passport.js http://passportjs.org/guide/ to understand how authentication works. Then try and identify the parts of the mean stack that align to the passport authentication. Once you’re comfortable with how it works, then you can start pulling bits out.

  • shubham
    Reply

    i wanted to know what you referred to learn mean!!we are doing a project so i need lot more than this videos which are a huge help thnks!can u please send a link to study from?

    • bossable

      Thanks for checking out the videos 🙂 unfortunately I don’t have a single link, just lots of trial and error 🙂

  • joseph dolginow
    Reply

    I am following along your tutorials. Thank you so much. I plan on using meanJS for a webapp I am making. I have quick question. The signup and signin pages that are styled with bootstrap look great until they are expanded wide in which case the input fields scrunch to the right side of the white box we created. How do I fix this?

    • bossable

      Thanks for checking out the videos! There may be an issue with the cols, check that your code looks something like this:
      Signin:

      <section class="row" data-ng-controller="AuthenticationController">
    <div class="col-xs-offset-1 col-xs-10 col-md-offset-4 col-md-4 login-form-bg">
        <h3 class="text-center">Login</h3>
        <form data-ng-submit="signin()" class="signin form-horizontal" autocomplete="off">

      Signup:

      <section class="row" data-ng-controller="AuthenticationController">
	<div class="col-xs-offset-1 col-xs-10 col-md-offset-4 col-md-4 login-form-bg">
        <h3 class="text-center">Sign up</h3>
		<form name="userForm" data-ng-submit="signup()" class="signin form-horizontal" novalidate autocomplete="off">

      I have also created a sample of the 30 day mean app with media queries which fixes similar button spacing css issues here: https://bossable.selz.com/ (instructions here: https://bossable.com/download/) note that this is a paid download.

    • John

      I also had this problem. Thanks so much Shristi for your answer (and thanks Joseph for asking).

      Loving this challenge so far!