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,