Move Login to material-ui

2 files changed, 34 insertions, 23 deletions

diff --git a/src/components/Login.js b/src/components/Login.js
index 7684703..209871e 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,6 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Button, Input } from "semantic-ui-react";
+
+import Button from "@mui/material/Button";
+import Paper from "@mui/material/Paper";
+import TextField from "@mui/material/TextField";
 
 class Login extends React.Component {
     static propTypes = {
@@ -17,7 +20,6 @@ class Login extends React.Component {
             error: false
         };
 
-        this.handleInput = this.handleInput.bind(this);
         this.login = this.login.bind(this);
         this.logout = this.logout.bind(this);
     }
@@ -52,44 +54,51 @@ class Login extends React.Component {
         localStorage.removeItem("token");
     }
 
-    handleInput(e) {
-        this.setState({
-            [e.target.name]: e.target.value
-        });
-    }
-
     render() {
         return (
             <div id="login-container">
-                <form
-                    id="login"
-                    onSubmit={e => {
-                        e.preventDefault();
-                        this.login(this.state.email, this.state.password);
-                    }}
-                >
-                    <h1></h1>
-                    <Input
+                <Paper id="login" variant="outlined" color="green">
+                    <TextField
                         type="text"
+                        required
                         name="email"
                         placeholder="Username..."
-                        onChange={this.handleInput}
-                        required
+                        onChange={event => {
+                            this.setState({
+                                email: event.target.value
+                            });
+                        }}
                     />
-                    <Input
+                    <TextField
                         type="password"
                         placeholder="Password..."
                         name="password"
-                        onChange={this.handleInput}
+                        onChange={event => {
+                            this.setState({
+                                password: event.target.value
+                            });
+                        }}
                         required
+                        sx={{
+                            marginTop: "1em"
+                        }}
                     />
-                    <Button color="green" className="submit" type="submit">
+                    <Button
+                        variant="contained"
+                        className="submit"
+                        onClick={e => {
+                            this.login(this.state.email, this.state.password);
+                        }}
+                        sx={{
+                            marginTop: "1em"
+                        }}
+                    >
                         Sign in
                     </Button>
                     {this.state.error && (
                         <p className="error">Wrong username or password</p>
                     )}
-                </form>
+                </Paper>
             </div>
         );
     }
diff --git a/src/styles/main.css b/src/styles/main.css
index 3d7ecc9..d0c0c18 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -106,6 +106,7 @@ body {
 /* Login */
 
 #login-container {
+    width: 100%;
     display: flex;
     justify-content: center;
 }
@@ -116,6 +117,7 @@ body {
     flex-direction: column;
     justify-content: center;
     text-align: center;
+    padding: 2em;
 }
 
 #login > h1 {