🍺 Add login error notice

app/components/auth/auth.css

@@ -3,8 +3,8 @@
 	height: 100vh;
 	background: #eee;
 	display: flex;
-	justify-content: center;
 	align-items: center;
+	flex-direction: column;
 }
 
 .base {
@@ -15,7 +15,8 @@
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
-	padding: 20px;
+	margin: 20px;
+	padding-bottom: 10px;
 	background-color: white;
 	box-shadow: 0 0 10px rgba(17,17,17,0.5);
 }
@@ -41,3 +42,13 @@
 	border-radius: 4px;
 	cursor: pointer;
 }
+
+.notice {
+	display: block;
+	background-color: red;
+	margin: 20px;
+	padding: 10px;
+	color: #fff;
+	border-radius: 5px;
+	box-shadow: 0 0 2px rgb(255, 0, 0);
+}

app/components/auth/index.jsx

@@ -4,6 +4,7 @@ import css from 'react-css-modules';
 import styles from './auth.css';
 
 type Props = {
+	isLoginSuccess: bool,
 	onClick: (name: string, password: string) => void,
 };
 
@@ -41,12 +42,22 @@ export default class Auth extends Component {
 		this.props.onClick(this.state.name, this.state.password);
 	}
 
+	renderErrorNotify() {
+		return (
+			<div styleName="notice">
+				ログインに失敗しました。
+				アカウント名またはパスワードを確認してください。
+			</div>
+		);
+	}
+
 	render() {
 		return (
 			<div styleName="wrap">
+				{!this.props.isLoginSuccess && this.renderErrorNotify()}
 				<div styleName="base">
 					<div styleName="title">
-						PixivDeckにログイン
+						PixivDeck
 					</div>
 					<input
 						placeholder="ユーザー名"

app/components/index.jsx

@@ -11,7 +11,6 @@ import Header from './header';
 import Columns from './app/columns';
 
 type Props = {
-	children: any,
 	columns: Array<ColumnType>,
 	manage: Manage,
 	dispatch: Dispatch
@@ -38,9 +37,9 @@ class App extends Component {
 	}
 
 	render() {
-		const {isLogin} = this.props.manage;
+		const {isLogin, isLoginSuccess} = this.props.manage;
 		if (!isLogin) {
-			return <Auth onClick={this.handleAuth}/>;
+			return <Auth onClick={this.handleAuth} isLoginSuccess={isLoginSuccess}/>;
 		}
 
 		return (

app/middlewares/api.js

@@ -54,7 +54,7 @@ export default (store: Store) => (next: Dispatch) => (action: Action) => {
 		ipcRenderer.send('illust', id);
 	}
 
-	if (action.type === 'SUCCESS_LOGINED') {
+	if (action.type === 'LOGIN_SUCCESS') {
 		const {columns} = store.getState();
 		orderSend(columns);
 	}

app/reducers/manage.js

@@ -16,10 +16,12 @@ export default function (state: Manage = initManageState, action: Action): $Shap
 	switch (action.type) {
 		case 'INIT':
 			return {...state, isModal: false, isDropdown: false, isMangaView: false, isImageView: false};
-		case 'SUCCESS_LOGINED':
-			return {...state, isLogin: true};
+		case 'LOGIN_SUCCESS':
+			return {...state, isLogin: true, isLoginSuccess: true};
+		case 'LOGIN_FAILED':
+			return {...state, isLoginSuccess: false};
 		case 'LOGOUT':
-			return {...state, isLogin: false};
+			return {...state, isLogin: false, isLoginSuccess: true, isDropdown: false};
 		case 'CLOSE_ALL':
 			return {
 				...state,

app/store-wrapper/ipc.js

@@ -30,8 +30,12 @@ function sendIllusts(dispatch: Dispatch, id: number, res: Object) {
 export default (store: Store) => {
 	const dispatch = store.dispatch;
 
-	ipcRenderer.on('SUCCESS_LOGINED', () => {
-		dispatch({type: 'SUCCESS_LOGINED'});
+	ipcRenderer.on('LOGIN_SUCCESS', () => {
+		dispatch({type: 'LOGIN_SUCCESS'});
+	});
+
+	ipcRenderer.on('LOGIN_FAILED', () => {
+		dispatch({type: 'LOGIN_FAILED'});
 	});
 
 	ipcRenderer.on('logout', () => {

app/types/ipc.js

@@ -2,7 +2,7 @@
 
 export type IpcAction =
 	| {type: 'IPC_REQUEST'}
-	| {type: 'SUCCESS_LOGINED'}
+	| {type: 'LOGIN_SUCCESS'}
 	| {type: 'RECIEVE_ILLUSTS', id: number, illusts: Array<number>}
 	| {type: 'SUCCESS_IPC_REQUEST', response: Object}
 ;

app/types/manage.js

@@ -3,6 +3,7 @@ export type ModalType = | 'DEFAULT' | 'ADD_COLUMN' | 'FILTER_TAG' | 'SEARCH';
 
 export type Manage = {
 	isLogin: bool,
+	isLoginSuccess: bool,
 	isModal: bool,
 	isImageView: bool,
 	isImgLoaded: bool,
@@ -24,6 +25,7 @@ export type ManageAction =
 	| {type: 'TOGGLE_DROPDOWN'}
 	| {type: 'SELECT_WORK', id: number}
 	| {type: 'LOGIN', name: string, password: string}
+	| {type: 'LOGIN_FAILED'}
 	| {type: 'LOGOUT'}
 	| {type: 'CLOSE_ALL'}
 	| {type: 'START_IMG_LOADING'}

main.development.js

@@ -131,16 +131,23 @@ app.on('ready', () => {
 		if (auth && auth.remember && auth.name && auth.password) {
 			const {name, password} = auth;
 			pixiv = new Pixiv(name, password);
-			ev.sender.send('SUCCESS_LOGINED');
+			ev.sender.send('LOGIN_SUCCESS');
 			userId = userId || (await pixiv.authInfo()).response.user.id;
 		}
 	});
 
 	ipcMain.on('login', async (ev, {name, password}) => {
 		pixiv = new Pixiv(name, password);
-		ev.sender.send('SUCCESS_LOGINED');
-		config.set('auth', {name, password, remember: true});
-		userId = userId || (await pixiv.authInfo()).response.user.id;
+		try {
+			const info = await pixiv.authInfo();
+			if (info && info.response) {
+				ev.sender.send('LOGIN_SUCCESS');
+				config.set('auth', {name, password, remember: true});
+				userId = userId || info.response.user.id;
+			}
+		} catch (err) {
+			ev.sender.send('LOGIN_FAILED');
+		}
 	});
 
 	ipcMain.on('bookmark', async (ev, {id, isPrivate}) => {