User Management

The ability to add, edit, and delete user accounts is essential to a web application. In some cases, a user can create an account on their own, in others an administrator has to manage users. In this app, users are managed by an administrator.

Users View

Add the Users view to the secure package. This view will have an additional security level: it will only be accessible to the authenticated users with an administrator role.

Expand views, ctrl-click secure, and select New - HTML File.

Enter users.scala.html in the name field.

Double-click HTML 5 file.

If prompted, click Add to add the file to version control.

Browse to the project repository to view the file:

LineDrop Play/Scala Web Application - Users View

Copy the contents of the file and paste them into users.scala.html replacing the original code.

Users view utilizes Scala code injections to access and work with compound objects.

At the very top of the file, two import statements are prefixed with the “@” symbol to use Scala code directly in the view. Please note, Scala code will be compiled first, followed by jQuery, and then finally HTML.

Next, values passed to the view by the controller are defined.

Users is a map which holds all users and csrf is the CSRF token used in the AJAX request.

The view is divided into a navigation panel designated by the nav tag and the main content area designated by the main tag. The main area holds the user list.

Each element in the list is created using Scala’s for loop.

To display the list in a timely order, the users map is converted to list and sorted by the created timestamp.

Notation _.2 is a shorthand device for getting the element’s value; in a similar manner, _.1 would be the element’s key.

Because there is no default iterator for Joda’s DateTime, converting the value to Int by using getMillis allows us to use the sortBy method. Each user element is an instance of the User class.

Please note, Scala’s if and for declarations in a view cannot have any space between the keyword and the opening parenthesis. For example:

Correct use: @for((date,count) <- count_by_date { …
Incorrect use: @for ((date,count) <- count_by_date { …

Add User Modal

Adding a new user is accomplished via a modal that is displayed when the button Add is clicked. The button has data-toggle and data-target attributes which associate a model to the button via Bootstrap libraries. No additional scripting is needed to display the modal.

The modal provides inputs to enter user name, email, and select a role. The Save button click event behavior is defined in the companion file users.js.

Edit User Modal

Each user listed on the view has an Edit element which calls the show_edit_user_modal function when clicked.

User’s name, email, and role are passed to the function and are assigned as input values before the modal is displayed.

Edit User modal has two explicitly defined action buttons: Delete and Save. The Delete button deletes the user and the Save button updates user name and role.

Users jQuery

Users.js is a companion file to the Users view.

Expand the public directory and ctrl-click javascripts and select New - File.

Type in users.js in the name field and press Enter key.

If prompted, click Add to add the file to version control.

Browse to the project repository to view the file:

LineDrop Play/Scala Web Application - Users jQuery

Copy the contents of the file and paste them into users.js.

At the top of the file, button event handlers are defined. Also when either modal’s hide event occurs, the page is reloaded to update the user data. Enter key is associated with the validate_add_user function.

When the Add button is pressed on User Add modal, validate_add_user function checks user’s email and name inputs. If both are valid, add_user function is called.

Add_user function creates a structured AJAX request of POST type to a URL /user/add/json. The payload of the request is a JSON-formatted string carrying the user's name, email and role.

CSRF token, stored on in a hidden field, is added to the header of the request.

On a successful server response, the input elements are hidden on the User Add modal and the prompt element is populated with the success message. Message is a member of the JSON object returned by the server. A warning message is displayed if the server response status is failure.

When the Edit badge on a user listing is clicked, show_edit_user_modal function is called. The function populates name, email, and role inputs in the User Edit modal and displays the modal.

When the Save button is clicked on the User Edit modal, validate_edit_user function is called. Similarly to the validate_add_user function, name input is validated. If the input is valid, the edit_user function is called.

Edit_user function creates a structured AJAX request of POST type to a URL /user/edit/json. The payload of the request is a JSON-formatted string carrying the user's name, email and role. Please note, the user's email is the identifier, and is it not editable.

CSRF token, stored on in a hidden field, is added to the header of the request.

On a successful server response, the input elements are hidden on the User Edit modal and the prompt element is populated with the success message. Message is a member of the JSON object returned by the server. A warning message is displayed if the server response status is failure.

If the Delete button is clicked on the User Edit modal, delete_user function is called.

Delete_user function creates a structured AJAX request of POST type to a URL /user/delete/json. The payload of the request is a JSON-formatted string carrying the user's name, email and role.

CSRF token, stored on in a hidden field, is added to the header of the request.

On a successful server response, the input elements are hidden on the User Edit modal and the prompt element is populated with the success message. Message is a member of the JSON object returned by the server. A warning message is displayed if the server response status is failure.

User Model

Add a case class to handle the JSON data from the Users view.

Add a method to read all users from the database.

The method uses the Database utility’s find_all method to get all documents in the users collection. Data is returned as a sequence; each sequence element is converted to the expected type to create a key/value pair for the map. Key is the MongoDB’s ObjectId of the document, and the value is a User object. Each key/value pair is added to a mutable map and the resulting map is converted to an immutable map, since the map will no longer need to change.

Add a method to delete a user.

Delete method deletes the user document using the Database utility.

Example: LineDrop Play/Scala Web Application - User Model

User Controller

User Controller provides support for adding, editing, and deleting users.

Ctrl-click controllers and select New - Scala Class.

Enter UserController in the name field and double-click Class.

If prompted, click Add to add the file to version control.

Browse to the project repository to view the file:

LineDrop Play/Scala Web Application - User Controller

Copy and paste the contents into the new file replacing the original code.

All methods require that the user performing requests is authenticated and has the role of administrator. If either is not true, the request is redirected to the Sign In page.

User_add_json method maps the JSON data from the request to a UserForm object. The existence of the user is checked using User Operations’ read method. If the user does not exist, an instance of User is instantiated and User Operations’ create method is invoked to create a new user document in the database. A success response is printed. If the user exists, i.e. the email address has already been taken, a failure response is printed.

User_edit_json method maps the JSON data from the request to a UserForm object. The existence of the user is checked using User Operations’ read method. If the user exists, a copy of the instance of User object is created with name and email parameters defined by the request data. User Operations’ update method is invoked to save changes to the user and a success response is printed. If the user couldn’t have been found, a failure response is printed.

User_delete_json method maps the JSON data from the request to a UserForm object. The existence of the user is checked using User Operations’ read method. If the user exists, User Operations’ delete method is invoked to remove the user document from the database and a success response is printed. If the user couldn’t have been found, a failure response is printed.

Dashboard Controller

Add a new users method to the Dashboard controller's subscribers method.

The controller authenticates the user and checks if the user role is administrator. Value users is a map containing all user data.

Example: LineDrop Play/Scala Web Application - Dashboard Controller

Routing

Add new application routes.

Test

Before testing, please make sure that the database and the application are running.

Application Response

Browse to http://localhost:9000/users.

Click Add to add a new user.

Test input validation by entering incorrect email format or leaving the fields blank. Then enter a user with a valid email, different from the administrator’s account, and select Administrator as user’s role. Click Add.

The action will trigger the user creation process and the system will send an invitation email to the new user.

Click Close on the modal to reload the view.

Click Edit to display the User Edit modal. Update the name and change the role to Editor.

Click Sign Out to close the session.

Email

Open the Welcome email sent to the new user and click the Create Password link.

Create a password for the user and proceed to sign in.

Access

Current user does not have access to the resource. If the user were to browse directly to http://localhost:9000/users, the application will redirect the request to the sign in page.

Click Sign Out to exit the session.

Sign in as an administrator and select Users for the left panel. Click Edit in the new user listing and click Delete. Click Close to exit the modal.

Log

Logger will have printed debug messages in the Terminal window. The log has also been written to /logs/application.log in the project’s directory.

Review

...

The view and all operations are accessible only to authenticated administrators. User Add and User Edit modal button clicks are handled with jQuery functions in users.js.

Add_user function creates a structured AJAX request of POST type to a URL /user/add/json, and edit_user creates a similar post to /user/edit/json. The payload of the requests is a JSON-formatted string carrying the user's name, email and role.

Each request is forwarded to by the router to the User controller which processes the request using User Operations and returns a JSON response.

Commit and Push Changes

Select VCS - Commit from the top menu.

Review the files and directories and enter the commit message.

Click the dropdown arrow on the Commit button and select Commit and Push.

Click Push to confirm.


Next: Key Expiration