10 files changed, 95 insertions, 5 deletions
diff --git a/web-ui/app/images/forgot my password.svg b/web-ui/app/images/forgot-my-password.svg
index 6dc329e7..6dc329e7 100644
--- a/web-ui/app/images/forgot my password.svg
+++ b/web-ui/app/images/forgot-my-password.svg
diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js
index e400dfae..a6be0c6e 100644
--- a/web-ui/app/js/account_recovery/page.js
+++ b/web-ui/app/js/account_recovery/page.js
@@ -1,5 +1,12 @@
 import React from 'react'
 
-const Page = () => <h1>Hello world</h1>;
+import 'scss/account_recovery/page.scss'
+
+const Page = () => (
+  <div className="container">
+    <img src="assets/images/forgot-my-password.svg" />
+    <h1>E se você esquecer sua senha?</h1>
+  </div>
+);
 
 export default Page
diff --git a/web-ui/app/scss/account_recovery/page.scss b/web-ui/app/scss/account_recovery/page.scss
new file mode 100644
index 00000000..b6a4c024
--- /dev/null
+++ b/web-ui/app/scss/account_recovery/page.scss
@@ -0,0 +1,31 @@
+@import "../vendor/reset";
+@import "../base/colors";
+@import "../base/fonts";
+@import "../base/scaffolding";
+
+body {
+  font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
+  background: $dark_blue; /* For browsers that do not support gradients */
+  background: -webkit-linear-gradient(left top, $dark_blue, $middle_blue); /* For Safari 5.1 to 6.0 */
+  background: -o-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Opera 11.1 to 12.0 */
+  background: -moz-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Firefox 3.6 to 15 */
+  background: linear-gradient(to bottom right, $dark_blue, $middle_blue); /* Standard syntax */
+}
+
+h1 {
+  font-size: 4em;
+  color: $dark_slate_gray;
+}
+
+.container {
+  background: $white;
+  width: 90%;
+  margin: 2% auto;
+  padding: 3%;
+
+  img {
+    display: block;
+    width: 50%;
+    margin: 0 auto;
+  }
+}
diff --git a/web-ui/config/alias-webpack.js b/web-ui/config/alias-webpack.js
index f4ea1b63..43b23836 100644
--- a/web-ui/config/alias-webpack.js
+++ b/web-ui/config/alias-webpack.js
@@ -7,6 +7,7 @@ module.exports = {
   'flight': path.join(__dirname, '../app/bower_components/flight'),
   'found': path.join(__dirname, '../app/bower_components/foundation'),
   'js': path.join(__dirname, '../app/js'),
+  'scss': path.join(__dirname, '../app/scss'),
   'mail_list': path.join(__dirname, '../app/js/mail_list'),
   'page': path.join(__dirname, '../app/js/page'),
   'feedback': path.join(__dirname, '../app/js/feedback'),
diff --git a/web-ui/config/copy-webpack.js b/web-ui/config/copy-webpack.js
index 1d2d11c1..a2567be6 100644
--- a/web-ui/config/copy-webpack.js
+++ b/web-ui/config/copy-webpack.js
@@ -8,6 +8,7 @@ module.exports = new CopyWebpackPlugin([
   { context: 'app/', from: 'css/*' },
   { context: 'app/', from: 'fonts/*' },
   { context: 'app/', from: 'locales/**/*' },
+  { context: 'app/', from: 'images/**/*' },
   { context: 'app/', from: 'bower_components/font-awesome/fonts/*' },
   {
     context: 'app/',
diff --git a/web-ui/package.json b/web-ui/package.json
index 52124c54..6f875280 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -13,8 +13,10 @@
     "babel-preset-react": "^6.22.0",
     "bower": "1.7.9",
     "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.26.1",
     "dompurify": "^0.8.4",
     "enzyme": "^2.7.1",
+    "expect": "^1.20.2",
     "font-awesome": "^4.7.0",
     "handlebars": "^4.0.5",
     "he": "^1.1.0",
@@ -24,13 +26,13 @@
     "i18next-xhr-backend": "^1.2.1",
     "iframe-resizer": "^3.5.7",
     "imagemin": "5.2.1",
-    "jasmine": "^2.5.3",
     "jasmine-flight": "^4.0.0",
     "jasmine-jquery": "^2.1.1",
     "jquery": "^3.1.1",
     "jquery-file-upload": "^4.0.5",
     "jquery-ui": "^1.12.1",
     "jshint": "2.9.2",
+    "json-loader": "^0.5.4",
     "karma": "0.13.19",
     "karma-chrome-launcher": "0.2.2",
     "karma-coverage": "0.2.7",
@@ -41,20 +43,25 @@
     "karma-phantomjs-launcher": "1.0.1",
     "karma-requirejs": "1.0.0",
     "minify": "^2.0.13",
+    "mocha": "^3.2.0",
+    "mocha-webpack": "^0.7.0",
     "modernizr": "^3.3.1",
+    "node-sass": "^4.5.0",
     "quoted-printable": "^1.0.1",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15.4.2",
     "requirejs": "2.2.0",
+    "sass-loader": "^4.1.1",
+    "style-loader": "^0.13.1",
     "typeahead.js": "^0.11.1",
     "utf8": "^2.1.2",
     "watch": "0.19.1",
     "webpack": "^1.14.0"
   },
   "scripts": {
-    "test": "npm run jshint --silent && npm run build-statics --silent && npm run jasmine-test && npm run karma-test",
-    "jasmine-test": "babel-node ./node_modules/.bin/jasmine JASMINE_CONFIG_PATH=test/jasmine.json",
+    "test": "npm run jshint --silent && npm run build-statics --silent && npm run mocha-test && npm run karma-test",
+    "mocha-test": "mocha-webpack --webpack-config webpack.test.config.js \"test/spec/account_recovery/**/*.spec.js\"",
     "karma-test": "karma start --single-run $GRUNT_OPTS",
     "debug": "npm run build && karma start --browsers Chrome $GRUNT_OPTS",
     "watch": "npm run compass-watch & npm run handlebars-watch & npm run build-js-watch",
diff --git a/web-ui/test/spec/account_recovery/account_recovery.spec.js b/web-ui/test/spec/account_recovery/account_recovery.spec.js
index d153f0eb..eaff257b 100644
--- a/web-ui/test/spec/account_recovery/account_recovery.spec.js
+++ b/web-ui/test/spec/account_recovery/account_recovery.spec.js
@@ -1,4 +1,5 @@
 import {shallow} from 'enzyme'
+import expect from 'expect'
 import React from 'react'
 import Page from '../../../app/js/account_recovery/page'
 
@@ -6,6 +7,6 @@ describe('test', () => {
   'use strict';
   it('react', () => {
     const page = shallow(<Page />);
-    expect(page.find('h1').text()).toEqual('Hello world');
+    expect(page.find('h1').text()).toEqual('E se você esquecer sua senha?');
   });
 });
diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js
index f0f605b0..59d2ae5b 100644
--- a/web-ui/webpack.config.js
+++ b/web-ui/webpack.config.js
@@ -26,6 +26,10 @@ module.exports = {
         exclude: /(node_modules|bower_components)/,
         loader: 'babel',
         query: { presets: ['es2015', 'react']}
+      },
+      {
+        test: /\.scss|css$/,
+        loader: "style-loader!css-loader!sass-loader"
       }
     ]
   },
diff --git a/web-ui/webpack.production.config.js b/web-ui/webpack.production.config.js
index 55069c3f..bc10b90e 100644
--- a/web-ui/webpack.production.config.js
+++ b/web-ui/webpack.production.config.js
@@ -25,6 +25,10 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel',
         query: { presets: ['es2015', 'react']}
+      },
+      {
+        test: /\.scss|css$/,
+        loader: "style-loader!css-loader!sass-loader"
       }
     ]
   },
diff --git a/web-ui/webpack.test.config.js b/web-ui/webpack.test.config.js
new file mode 100644
index 00000000..d3b245fc
--- /dev/null
+++ b/web-ui/webpack.test.config.js
@@ -0,0 +1,34 @@
+var path = require('path');
+var webpack = require('webpack');
+var copyWebpack = require('./config/copy-webpack');
+var aliases = require('./config/alias-webpack');
+
+module.exports = {
+  resolve: {
+    alias: aliases,
+    extensions: ['', '.js']
+  },
+  externals: {
+    'react/lib/ExecutionEnvironment': true,
+    'react/addons': true,
+    'react/lib/ReactContext': 'window'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel',
+        query: { presets: ['es2015', 'react']}
+      },
+      {
+        test: /\.scss|css$/,
+        loader: "css-loader!sass-loader"
+      },
+      {
+        test: /\.json$/,
+        loader: "json-loader"
+      }
+    ]
+  }
+}