diff --git a/browser/finder/Components/FinderList.jsx b/browser/finder/Components/FinderList.jsx index f88b31b6..bfada399 100644 --- a/browser/finder/Components/FinderList.jsx +++ b/browser/finder/Components/FinderList.jsx @@ -12,7 +12,7 @@ module.exports = React.createClass({ var index = this.props.articles.indexOf(this.props.currentArticle) var el = React.findDOMNode(this) var li = el.querySelectorAll('li')[index] - + if (li == null) { return } diff --git a/browser/main/Containers/LoginContainer.jsx b/browser/main/Containers/LoginContainer.jsx index c0e1419b..b02ab6a5 100644 --- a/browser/main/Containers/LoginContainer.jsx +++ b/browser/main/Containers/LoginContainer.jsx @@ -4,6 +4,8 @@ var Link = ReactRouter.Link var AuthActions = require('../Actions/AuthActions') +var AuthStore = require('../Stores/AuthStore') + var OnlyGuest = require('../Mixins/OnlyGuest') module.exports = React.createClass({ @@ -11,14 +13,50 @@ module.exports = React.createClass({ getInitialState: function () { return { email: '', - password: '' + password: '', + authenticationFailed: false, + connectionFailed: false, + isSending: false + } + }, + componentDidMount: function () { + this.unsubscribe = AuthStore.listen(this.onListen) + }, + componentWillUnmount: function () { + this.unsubscribe() + }, + onListen: function (res) { + if (res.status === 'failedToLogIn') { + if (res.data.status === 401) { + // Wrong E-mail or Password + this.setState({ + authenticationFailed: true, + connectionFailed: false, + isSending: false + }) + return + } + // Connection Failed or Whatever + this.setState({ + authenticationFailed: false, + connectionFailed: true, + isSending: false + }) + return } }, handleSubmit: function (e) { - AuthActions.login({ - email: this.state.email, - password: this.state.password + this.setState({ + authenticationFailed: false, + connectionFailed: false, + isSending: true + }, function () { + AuthActions.login({ + email: this.state.email, + password: this.state.password + }) }) + e.preventDefault() }, render: function () { @@ -46,6 +84,19 @@ module.exports = React.createClass({
+ + {this.state.isSending ? ( +

Logging in...

+ ) : null} + + {this.state.connectionFailed ? ( +

Please try again.

+ ) : null} + + {this.state.authenticationFailed ? ( +

Wrong E-mail or Password.

+ ) : null} +
diff --git a/browser/main/Containers/RegisterContainer.jsx b/browser/main/Containers/RegisterContainer.jsx index a1aee8f2..0c398b00 100644 --- a/browser/main/Containers/RegisterContainer.jsx +++ b/browser/main/Containers/RegisterContainer.jsx @@ -4,6 +4,8 @@ var Link = ReactRouter.Link var AuthActions = require('../Actions/AuthActions') +var AuthStore = require('../Stores/AuthStore') + var OnlyGuest = require('../Mixins/OnlyGuest') module.exports = React.createClass({ @@ -13,15 +15,74 @@ module.exports = React.createClass({ email: '', password: '', name: '', - profileName: '' + profileName: '', + connectionFailed: false, + emailConflicted: false, + nameConflicted: false, + validationFailed: false, + isSending: false + } + }, + componentDidMount: function () { + this.unsubscribe = AuthStore.listen(this.onListen) + }, + componentWillUnmount: function () { + this.unsubscribe() + }, + onListen: function (res) { + if (res.status === 'failedToRegister') { + if (res.data.status === 409) { + // Confliction + var emailConflicted = res.data.body.errors[0].path === 'email' + var nameConflicted = res.data.body.errors[0].path === 'name' + + this.setState({ + connectionFailed: false, + emailConflicted: emailConflicted, + nameConflicted: nameConflicted, + validationFailed: false, + isSending: false + }) + return + } else if (res.data.status === 422) { + this.setState({ + connectionFailed: false, + emailConflicted: false, + nameConflicted: false, + validationFailed: { + errors: res.data.body.errors.map(function (error) { + return error.path + }) + }, + isSending: false + }) + return + } + // Connection Failed or Whatever + this.setState({ + connectionFailed: true, + emailConflicted: false, + nameConflicted: false, + validationFailed: false, + isSending: false + }) + return } }, handleSubmit: function (e) { - AuthActions.register({ - email: this.state.email, - password: this.state.password, - name: this.state.name, - profileName: this.state.profileName + this.setState({ + connectionFailed: false, + emailConflicted: false, + nameConflicted: false, + validationFailed: false, + isSending: true + }, function () { + AuthActions.register({ + email: this.state.email, + password: this.state.password, + name: this.state.name, + profileName: this.state.profileName + }) }) e.preventDefault() @@ -57,6 +118,27 @@ module.exports = React.createClass({
+ + {this.state.isSending ? ( +

Signing up...

+ ) : null} + + {this.state.connectionFailed ? ( +

Please try again.

+ ) : null} + + {this.state.emailConflicted ? ( +

E-mail already exists.

+ ) : null} + + {this.state.nameConflicted ? ( +

Username already exists.

+ ) : null} + + {this.state.validationFailed ? ( +

Please fill every field correctly: {this.state.validationFailed.errors.join(', ')}

+ ) : null} +
diff --git a/browser/main/Stores/AuthStore.js b/browser/main/Stores/AuthStore.js index 9918a9b1..cde154ef 100644 --- a/browser/main/Stores/AuthStore.js +++ b/browser/main/Stores/AuthStore.js @@ -23,7 +23,10 @@ var AuthStore = Reflux.createStore({ .end(function (err, res) { if (err) { console.error(err) - this.trigger(null) + this.trigger({ + status: 'failedToLogIn', + data: res + }) return } @@ -44,8 +47,11 @@ var AuthStore = Reflux.createStore({ .set('Accept', 'application/json') .end(function (err, res) { if (err) { - console.error(err) - this.trigger(null) + console.error(res) + this.trigger({ + status: 'failedToRegister', + data: res + }) return } diff --git a/browser/styles/main/containers/LoginContainer.styl b/browser/styles/main/containers/LoginContainer.styl index 0d7bd873..b33c6ca7 100644 --- a/browser/styles/main/containers/LoginContainer.styl +++ b/browser/styles/main/containers/LoginContainer.styl @@ -54,8 +54,18 @@ form width 400px margin 0 auto 45px + .alertInfo, .alertError + margin-top 15px + margin-bottom 15px + height 44px + text-align center + border-radius 22px + .alertInfo + alertInfo() + .alertError + alertError() div.form-group:last-child - margin-top 45px + margin-top 15px button.logInButton btnPrimary() height 44px diff --git a/browser/styles/mixins/alert.styl b/browser/styles/mixins/alert.styl new file mode 100644 index 00000000..d030c124 --- /dev/null +++ b/browser/styles/mixins/alert.styl @@ -0,0 +1,18 @@ +alert() + line-height 44px + border-radius 5px + +alertSuccess() + alert() + background-color successBackgroundColor + color successTextColor + +alertError() + alert() + background-color errorBackgroundColor + color errorTextColor + +alertInfo() + alert() + background-color infoBackgroundColor + color infoTextColor diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl index 46afd88d..5f54d4c1 100644 --- a/browser/styles/shared/modal.styl +++ b/browser/styles/shared/modal.styl @@ -175,8 +175,6 @@ width 250px .alertSuccess, .alertError, .alertInfo float right - line-height 44px - border-radius 5px transition 0.1s overflow hidden white-space nowrap @@ -185,14 +183,11 @@ &.hide width 0 .alertSuccess - background-color successBackgroundColor - color successTextColor + alertSuccess() .alertError - background-color errorBackgroundColor - color errorTextColor + alertError() .alertInfo - background-color infoBackgroundColor - color infoTextColor + alertInfo() .saveButton float right .contact @@ -213,8 +208,6 @@ float right .alertSuccess, .alertError, .alertInfo float right - line-height 44px - border-radius 5px transition 0.1s overflow hidden white-space nowrap @@ -223,14 +216,11 @@ &.hide width 0 .alertSuccess - background-color successBackgroundColor - color successTextColor + alertSuccess() .alertError - background-color errorBackgroundColor - color errorTextColor + alertError() .alertInfo - background-color infoBackgroundColor - color infoTextColor + alertInfo() .info text-align left .infoLabel diff --git a/main.js b/main.js index b3948204..4eff84ad 100644 --- a/main.js +++ b/main.js @@ -6,6 +6,9 @@ var Tray = require('tray') require('crash-reporter').start() var mainWindow = null +var appIcon = null +var menu = null +var popUpWindow = null // app.on('window-all-closed', function () { // if (process.platform !== 'darwin') app.quit() @@ -15,11 +18,11 @@ app.on('ready', function () { // menu start var template = require('./modules/menu-template') - var menu = Menu.buildFromTemplate(template) + menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu) // menu end - var appIcon = new Tray(__dirname + '/tray-icon.png') + appIcon = new Tray(__dirname + '/tray-icon.png') appIcon.setToolTip('This is my application.') appIcon.on('clicked', function () { if (mainWindow == null) { @@ -38,7 +41,7 @@ app.on('ready', function () { mainWindow.show() }) - var popUpWindow = new BrowserWindow({ + popUpWindow = new BrowserWindow({ width: 600, height: 400, show: false,