From 05336b1912dd81be6a37df47cac7ce0c046e2401 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Thu, 2 Feb 2017 17:35:49 -0200 Subject: [#922] Adds css to account recovery with @tayanefernandes --- web-ui/app/js/account_recovery/page.js | 7 ++++++- web-ui/app/scss/account_recovery/page.scss | 11 +++++++++++ web-ui/config/alias-webpack.js | 1 + web-ui/package.json | 4 ++++ web-ui/webpack.config.js | 4 ++++ web-ui/webpack.production.config.js | 4 ++++ 6 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 web-ui/app/scss/account_recovery/page.scss diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index e400dfae..c0d58e06 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -1,5 +1,10 @@ import React from 'react' -const Page = () =>

Hello world

; +import 'scss/account_recovery/page.scss' + +const Page = () => ( +
+
+); 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..b3b6b1c2 --- /dev/null +++ b/web-ui/app/scss/account_recovery/page.scss @@ -0,0 +1,11 @@ +@import "../vendor/reset"; +@import "../base/colors"; +@import "../base/scaffolding"; + +body { + 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 */ +} 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/package.json b/web-ui/package.json index 52124c54..ec880270 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -13,6 +13,7 @@ "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", "font-awesome": "^4.7.0", @@ -42,11 +43,14 @@ "karma-requirejs": "1.0.0", "minify": "^2.0.13", "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", 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" } ] }, -- cgit v1.2.3 From 16ce2be7e2a7496cedfe74bf27c72878941072cf Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Thu, 2 Feb 2017 18:12:09 -0200 Subject: [#922] Creates container in backup account page with @tayanefernandes --- web-ui/app/images/forgot my password.svg | 154 ----------------------------- web-ui/app/images/forgot-my-password.svg | 154 +++++++++++++++++++++++++++++ web-ui/app/js/account_recovery/page.js | 4 +- web-ui/app/scss/account_recovery/page.scss | 20 ++++ web-ui/config/copy-webpack.js | 1 + 5 files changed, 178 insertions(+), 155 deletions(-) delete mode 100644 web-ui/app/images/forgot my password.svg create mode 100644 web-ui/app/images/forgot-my-password.svg diff --git a/web-ui/app/images/forgot my password.svg b/web-ui/app/images/forgot my password.svg deleted file mode 100644 index 6dc329e7..00000000 --- a/web-ui/app/images/forgot my password.svg +++ /dev/null @@ -1,154 +0,0 @@ - - - - forgot my password - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/web-ui/app/images/forgot-my-password.svg b/web-ui/app/images/forgot-my-password.svg new file mode 100644 index 00000000..6dc329e7 --- /dev/null +++ b/web-ui/app/images/forgot-my-password.svg @@ -0,0 +1,154 @@ + + + + forgot my password + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index c0d58e06..a6be0c6e 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -3,7 +3,9 @@ import React from 'react' import 'scss/account_recovery/page.scss' const Page = () => ( -
+
+ +

E se você esquecer sua senha?

); diff --git a/web-ui/app/scss/account_recovery/page.scss b/web-ui/app/scss/account_recovery/page.scss index b3b6b1c2..b6a4c024 100644 --- a/web-ui/app/scss/account_recovery/page.scss +++ b/web-ui/app/scss/account_recovery/page.scss @@ -1,11 +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/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/', -- cgit v1.2.3 From 2a0c02295ac6b3a21047e08a0174361003f02736 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Fri, 3 Feb 2017 14:12:46 -0200 Subject: [#922] Move new js tests to mocha We decided to move to mocha because it has more support for node testing with webpack (no need for browser). Since we're moving to React, we don't need the browser for our unit tests. With @tayanefernandes --- web-ui/package.json | 9 ++++-- .../spec/account_recovery/account_recovery.spec.js | 3 +- web-ui/webpack.test.config.js | 34 ++++++++++++++++++++++ 3 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 web-ui/webpack.test.config.js diff --git a/web-ui/package.json b/web-ui/package.json index ec880270..6f875280 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -16,6 +16,7 @@ "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", @@ -25,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", @@ -42,6 +43,8 @@ "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", @@ -57,8 +60,8 @@ "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(); - 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.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" + } + ] + } +} -- cgit v1.2.3