From 8edfcbb83f233d251458cc46119556f207a277c3 Mon Sep 17 00:00:00 2001 From: Ernst Widerberg Date: Wed, 8 Jun 2022 10:38:05 +0200 Subject: Make functional: Login --- src/components/Login.js | 145 ++++++++++++++++++++---------------------------- 1 file 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 ( -
- - { - this.setState({ - email: event.target.value - }); - }} - onKeyDown={event => { - if (event.key === "Enter") - this.login( - this.state.email, - this.state.password - ); - }} - /> - { - this.setState({ - password: event.target.value - }); - }} - onKeyDown={event => { - if (event.key === "Enter") - this.login( - this.state.email, - this.state.password - ); - }} - sx={{ - marginTop: "1em" - }} - /> - - {this.state.loginFailed && ( -

Wrong username or password

- )} -
-
- ); - } + return ( +
+ + { + setEmail(event.target.value); + }} + onKeyDown={event => { + if (event.key === "Enter") login(email, password); + }} + /> + { + setPassword(event.target.value); + }} + onKeyDown={event => { + if (event.key === "Enter") login(email, password); + }} + sx={{ + marginTop: "1em" + }} + /> + + {loginFailed && ( +

Wrong username or password

+ )} +
+
+ ); } +Login.propTypes = { + setToken: PropTypes.func.isRequired, + setError: PropTypes.func.isRequired +}; + export default Login; -- cgit v1.1