replace login information page with React/Material-UI

assets/css/default.css

@@ -34,6 +34,11 @@ div.container {
 	}
 }
 
+.login-info {
+	margin-top: 5em;
+	margin-bottom: 1em;
+}
+
 .new-post {
 	margin: 8px 0px;
 	padding: 8px;

assets/js/login.js

@@ -0,0 +1,49 @@
+/*
+ * login - login.js
+ *
+ * Copyright (C) 2016 by The wasam@s production
+ * You can modify and/or distribute this under GPL.
+ */
+import 'babel-polyfill';
+import 'whatwg-fetch';
+import * as React from 'react';
+import {render} from 'react-dom';
+import {Flux} from 'flumpt';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import {MuiThemeProvider, RaisedButton} from 'material-ui';
+import ImageNavigateNext from 'material-ui/svg-icons/image/navigate-next';
+import Footer from './component/footer';
+import muiTheme from './theme';
+
+require('../css/default.css');
+injectTapEventPlugin();
+
+const main = document.querySelector('#main');
+const state = {
+};
+
+class Login extends Flux {
+	render(state) {
+		return(
+			<div>
+				<MuiThemeProvider muiTheme={muiTheme}>
+					<RaisedButton label="Login with Twitter"
+						onTouchTap={e => {location.href = "/auth/twitter"}}
+						primary={true}
+						icon={<ImageNavigateNext/>}
+					/>
+				</MuiThemeProvider>
+				<Footer/>
+			</div>
+		);
+	}
+}
+
+const app = new Login({
+	renderer: el => {
+		render(el, main);
+	},
+	initialState: state
+});
+app.update(_initialState => (state));
+

views/login.haml

@@ -2,13 +2,9 @@
 %html
 	%head
 		%title login - Massr
+		%link{rel: "stylesheet", type: "text/css", href: "/css/main.css"}
 		!= haml :head
 	%body
-		!= haml :header
-		.container-fluid
-			.row-fluid
-				.span12
-					.main
-						%p<#{_need_login}
-						%a.btn.btn-large.btn-primary{:href => "/auth/twitter", :title => "Login"}<TwitterでLogin &raquo;
-			!= haml :footer
+		%p.login-info<#{_need_login}
+		.main#main
+		%script{src: "/js/login.js"}

webpack.config.js

@@ -4,7 +4,7 @@ const path = require('path');
 
 module.exports = {
 	entry: {
-		top: './assets/js/top.js',
+		login: './assets/js/login.js',
 		main: './assets/js/main.js'
 	},
 	output: {