Studio: User Signup
For this studio you will add functionality to allow users to "sign up" for your cheese-mvc
app.
Getting Ready
Within cheese-mvc
create the following files..
- Create a
UserController
inorg.launchcode.controllers
. Add the@Controller
annotation, along with@RequestMapping("user")
to configure routes into the controller. - Create a new folder,
user/
withinresources/templates
- Create
index.html
andadd.html
templates withinresources/templates/user/
- Create a
User
class withinorg.launchcode.models
Creating the Model
Your User
class should have a few private fields with getters and setters: username
, email
, password
. These should each be strings.
If you create a non-default constructor, be sure to also create a default constructor (which can be empty).
Rendering the Add User Form
Within the controller, create a handler method add(Model model)
to render the form. This handler should correspond to the path /user/add
, and for now, it can just return the path to the add.html
template.
Within the add.html
template, create a form that accepts inputs for each of the User
class properties, along with a Verify Password input. The form should be set up to POST
to the same URL that it is displayed at.
Be sure to set type="password"
for the password and verify inputs, to ensure the passwords are not visible when being typed into the form. You can also set type="email"
on the email input, which will enable some basic client-side validation.
Handling Form Submission
Within the controller, create a handler method with signature:
public String add(Model model, @ModelAttribute User user, String verify);
This will use model binding to create a new user object, user
, and pass it into your handler method. Check that verify
matches the password within the user
object. If it does, render the index.html
view template with a message that welcomes the user by name. If the passwords don't match, render the form again with the username and email fields already populated, along with a message indicating what went wrong.
You don't need to store the User
object anywhere for this studio. We're focusing on form handling and validation in this exercise. If you want to keep track of users using the method we employed in the models lesson video, check out the Bonus Missions below.
Bonus Missions
- Add a
userId
field toUser
, along with accessor methods (with appropriate access level). Create aUserData
class withinorg.launchcode.models
that provides access to a list of users viaadd
,getAll
, andgetById
. - Add additional validation within
UserController.add(Model, User, String)
to make sure that the username and email are not empty, that the username is between 5 and 15 characters long, and the username contains only letters. If any of these checks fails, render the form again with an appropriate message. When doing so, make sure that any inputs that did validate are populated with the value the user provided the first time. - This builds on 1. In the
user/index.html
view, display a list of all users by username. Each username should have a link that takes you to a detail page that lists the user's username and email. - Add a
Date
field inUser
, and initialize it to the time the user joined (i.e. when theUser
object was created). Display the value of this property in the user detail view.