Merge 0d87498 into d0c05f5

amalv · Feb 7, 2019 · 5e00caa · 5e00caa
2 parents d0c05f5 + 0d87498
commit 5e00caa
Show file tree

Hide file tree

Showing 6 changed files with 522 additions and 542 deletions.
diff --git a/src/client.js b/src/client.js
@@ -1,13 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import JssProvider from 'react-jss/lib/JssProvider';
+import {
+  MuiThemeProvider,
+  createMuiTheme,
+  createGenerateClassName,
+} from '@material-ui/core/styles';
 import { BrowserRouter } from 'react-router-dom';
 
 import App from './components/App';
 
 const app = document.getElementById('app');
+
+const theme = createMuiTheme({});
+
+const generateClassName = createGenerateClassName();
+
 ReactDOM.hydrate(
   <BrowserRouter>
-    <App />
+    <JssProvider generateClassName={generateClassName}>
+      <MuiThemeProvider theme={theme}>
+        <App />
+      </MuiThemeProvider>
+    </JssProvider>
   </BrowserRouter>,
   app,
 );
diff --git a/src/components/App.js b/src/components/App.js
@@ -4,6 +4,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Button from '@material-ui/core/Button';
 import styled from 'styled-components';
+import SignIn from './SignIn';
 
 const Base = styled.div`
   flex-grow: 1;
@@ -17,7 +18,6 @@ const Index = () => <h2>Home</h2>;
 const About = () => <h2>About</h2>;
 const Users = () => <h2>Users</h2>;
 const SignUp = () => <h2>Sign up</h2>;
-const SignIn = () => <h2>Sign in</h2>;
 
 class App extends React.Component {
   constructor() {

diff --git a/src/components/SignIn.js b/src/components/SignIn.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import FormControl from '@material-ui/core/FormControl';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { withTheme } from '@material-ui/core/styles';
+import styled from 'styled-components';
+
+const Base = styled.main` 
+    width: auto;
+    display: block;
+    margin-left: ${theme => theme.spacing.unit * 3}px;
+    margin-right: ${theme => theme.spacing.unit * 3}px;
+    ${theme => theme.breakpoints.up('md')} {
+      width: 400;
+      margin-left: auto;
+      margin-right: auto;
+    }
+;`;
+
+const PaperStyled = styled(Paper)`
+    margin-top: ${theme => theme.spacing.unit * 8}px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: ${theme => theme.spacing.unit * 2}px ${theme => theme.spacing.unit * 3}px ${theme => theme.spacing.unit * 3}px;
+  }}
+`;
+
+const AvatarStyled = styled(Avatar)`
+    margin: ${theme => theme.spacing.unit}px;
+    background-color: ${theme => theme.palette.secondary.main};
+`;
+
+const Form = styled.form`
+    width: 100%;
+    margin-top: ${theme => theme.spacing.unit}px;
+`;
+
+const SubmitButtonStyled = styled(Button)`
+    margin-top: ${theme => theme.spacing.unit * 3}px;
+`;
+
+const SignIn = (props) => {
+  // eslint-disable-next-line react/prop-types
+  const { theme } = props;
+  return (
+    <Base {...theme}>
+      <CssBaseline />
+      <PaperStyled {...theme}>
+        <AvatarStyled {...theme}>
+          <LockOutlinedIcon />
+        </AvatarStyled>
+        <Typography component="h1" variant="h5">
+          Sign in
+        </Typography>
+        <Form {...theme}>
+          <FormControl margin="normal" required fullWidth>
+            <InputLabel htmlFor="email">Email Address</InputLabel>
+            <Input id="email" name="email" autoComplete="email" autoFocus />
+          </FormControl>
+          <FormControl margin="normal" required fullWidth>
+            <InputLabel htmlFor="password">Password</InputLabel>
+            <Input name="password" type="password" id="password" autoComplete="current-password" />
+          </FormControl>
+          <SubmitButtonStyled
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            {...theme}
+          >
+            Sign in
+          </SubmitButtonStyled>
+
+        </Form>
+      </PaperStyled>
+    </Base>
+  );
+};
+
+export default withTheme()(SignIn);
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <title>React Universal</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 </head>
 
 <body>

diff --git a/src/server.js b/src/server.js
@@ -9,11 +9,14 @@ import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import {
   MuiThemeProvider,
+  createMuiTheme,
   createGenerateClassName,
 } from '@material-ui/core/styles';
 
 import Layout from './components/App';
 
+const theme = createMuiTheme({});
+
 function htmlTemplate({ reactDom, styleTags, css }) {
   return `
         <html lang="en">
@@ -22,13 +25,14 @@ function htmlTemplate({ reactDom, styleTags, css }) {
             <title>React Universal</title>
             <style id="jss-server-side">${css}</style>
             <meta name="viewport" content="width=device-width, initial-scale=1">
-            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
             ${styleTags}
         </head>
         
         <body>
             <div id="app">${reactDom}</div>
-            <script src="./app.bundle.js"></script>
+            <script src="./app.bundle.js" type="text/babel"></script>
         </body>
         </html>
     `;
@@ -60,7 +64,7 @@ app.get('/*', (req, res) => {
 
   const reactDom = renderToString(
     <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
-      <MuiThemeProvider sheetsManager={sheetsManager}>
+      <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
         <StaticRouter location={req.url} context={context}>
           <StyleSheetManager sheet={sheet.instance}>
             <Layout />