Make functional: Login

1 files changed, 61 insertions, 84 deletions

diff --git a/src/components/Login.js b/src/components/Login.js
index d0507af..e13606a 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,31 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 
 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 = {
-        setToken: PropTypes.func.isRequired,
-        setError: PropTypes.func.isRequired
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            email: "",
-            password: "",
-            loginFailed: false
-        };
-
-        this.login = this.login.bind(this);
-        this.logout = this.logout.bind(this);
-    }
+function Login(props) {
+    let [email, setEmail] = useState("");
+    let [password, setPassword] = useState("");
+    let [loginFailed, setLoginFailed] = useState(false);
 
     // NOTE: btoa() limits email, password to ASCII
-    login(email, password) {
+    function login(email, password) {
         fetch(window.injectedEnv.JWT_URL, {
             method: "POST",
             headers: { Authorization: "Basic " + btoa(email + ":" + password) }
@@ -36,7 +22,7 @@ class Login extends React.Component {
                     // this path is never taken. Fix this in auth-server-poc.
 
                     // Unauthorized: Wrong email/password
-                    this.setState({ loginFailed: true });
+                    setLoginFailed(true);
                     return;
                 }
                 if (resp.status !== 200)
@@ -47,74 +33,65 @@ class Login extends React.Component {
             })
             .then(resp => resp.json())
             .then(data => {
-                this.props.setToken(data.access_token);
+                props.setToken(data.access_token);
             });
     }
 
-    logout() {
-        this.props.clearToken();
+    function logout() {
+        props.clearToken();
     }
 
-    render() {
-        return (
-            <div id="login-container">
-                <Paper id="login" variant="outlined" color="green">
-                    <TextField
-                        type="text"
-                        name="email"
-                        placeholder="Username..."
-                        onChange={event => {
-                            this.setState({
-                                email: event.target.value
-                            });
-                        }}
-                        onKeyDown={event => {
-                            if (event.key === "Enter")
-                                this.login(
-                                    this.state.email,
-                                    this.state.password
-                                );
-                        }}
-                    />
-                    <TextField
-                        type="password"
-                        placeholder="Password..."
-                        name="password"
-                        onChange={event => {
-                            this.setState({
-                                password: event.target.value
-                            });
-                        }}
-                        onKeyDown={event => {
-                            if (event.key === "Enter")
-                                this.login(
-                                    this.state.email,
-                                    this.state.password
-                                );
-                        }}
-                        sx={{
-                            marginTop: "1em"
-                        }}
-                    />
-                    <Button
-                        variant="contained"
-                        className="submit"
-                        onClick={e => {
-                            this.login(this.state.email, this.state.password);
-                        }}
-                        sx={{
-                            marginTop: "1em"
-                        }}
-                    >
-                        Sign in
-                    </Button>
-                    {this.state.loginFailed && (
-                        <p className="error">Wrong username or password</p>
-                    )}
-                </Paper>
-            </div>
-        );
-    }
+    return (
+        <div id="login-container">
+            <Paper id="login" variant="outlined" color="green">
+                <TextField
+                    type="text"
+                    name="email"
+                    placeholder="Username..."
+                    onChange={event => {
+                        setEmail(event.target.value);
+                    }}
+                    onKeyDown={event => {
+                        if (event.key === "Enter") login(email, password);
+                    }}
+                />
+                <TextField
+                    type="password"
+                    placeholder="Password..."
+                    name="password"
+                    onChange={event => {
+                        setPassword(event.target.value);
+                    }}
+                    onKeyDown={event => {
+                        if (event.key === "Enter") login(email, password);
+                    }}
+                    sx={{
+                        marginTop: "1em"
+                    }}
+                />
+                <Button
+                    variant="contained"
+                    className="submit"
+                    onClick={e => {
+                        login(email, password);
+                    }}
+                    sx={{
+                        marginTop: "1em"
+                    }}
+                >
+                    Sign in
+                </Button>
+                {loginFailed && (
+                    <p className="error">Wrong username or password</p>
+                )}
+            </Paper>
+        </div>
+    );
 }
 
+Login.propTypes = {
+    setToken: PropTypes.func.isRequired,
+    setError: PropTypes.func.isRequired
+};
+
 export default Login;