RespectNetwork/csp-provisioning-application — pull request #13 by lfielke (2014-05-28 03:08:43+00:00)
Title: Refactor templates to use Thymeleaf layout-dialect

# View template refactoring

We have begun refactoring the view templates to make them more consistent and easier to maintain. There are a couple of areas where we have made changes.

## Template decorators
Thymeleaf [layout-dialect](https://github.com/ultraq/thymeleaf-layout-dialect) uses layout/decorator templates to style pages. The main advantage is that we can reduce boilerplate code in individual page templates by having common elements in common template file (`fragments/page.html`).

The common scripts and css in the head tags has been pulled out into the common file.

## Update to Bootstrap v3
We have added the latest version of Bootstrap and use this in the refactored view templates.

## Improved form validation
Client-side form validation done using a jQuery plugin. The signup page shows a spinner animation while the AJAX call checks the name availability.

![name-loading](https://cloud.githubusercontent.com/assets/6062998/3100337/1c4f6544-e615-11e3-9744-95a5844b7cef.png)

Form controls that can be validated client side show tick icons onBlur when valid, and help text when invalid.

## Change summary
We have not made any changes to the Java code in this branch (aside from a couple of minor typo fixes).

So far we have converted the first four pages a user sees on the signup flow:
* `signup.html`
* `userdetails.html`
* `validate.html`
* `payment.html`

The other pages are untouched and continue to work as before.

There are opportunities to refactor some of the objects that get added to the models, however we didn't want to alter the controller code in this branch, so this is left to a future endeavour.

## Screenshots
### signup
#### Before
![signup-old](https://cloud.githubusercontent.com/assets/6062998/3100298/5fe7e002-e614-11e3-8464-62ba2ab74858.png)
![signup-old-valid](https://cloud.githubusercontent.com/assets/6062998/3100326/e87e78c2-e614-11e3-9747-71fd47c710ea.png)

#### After
![signup-new-valid](https://cloud.githubusercontent.com/assets/6062998/3100327/ed6c8afe-e614-11e3-8b68-42f3d5c5a29a.png)
![signup-new-notavailable](https://cloud.githubusercontent.com/assets/6062998/3100329/f163ea44-e614-11e3-89ab-b742990f8f1f.png)

### userdetails
#### Before
![userdetails-old](https://cloud.githubusercontent.com/assets/6062998/3100315/b51e7482-e614-11e3-904e-94bd3f8c862d.png)
![userdetails-old-invalid](https://cloud.githubusercontent.com/assets/6062998/3100321/cafde292-e614-11e3-8dfe-52749b6bb85c.png)

#### After
![userdetails-new](https://cloud.githubusercontent.com/assets/6062998/3100320/c58b01a0-e614-11e3-936c-8feeb33f2a45.png)
![userdetails-new-valid](https://cloud.githubusercontent.com/assets/6062998/3100323/d1db0d6a-e614-11e3-84dc-c3728441022b.png)

### validate
#### Before
![validate-old](https://cloud.githubusercontent.com/assets/6062998/3100332/fca903f8-e614-11e3-9cab-dd8e2e3202c9.png)

#### After
![validate-new](https://cloud.githubusercontent.com/assets/6062998/3100333/01e49ab2-e615-11e3-8dbb-9ab04f5fa46b.png)

### payment
#### After
![payment-new](https://cloud.githubusercontent.com/assets/6062998/3100334/1069b824-e615-11e3-9472-eece1c00a9ff.png)