From 46b9df3279f51479cfc607cbce8fb8b73bef69f7 Mon Sep 17 00:00:00 2001
From: Ernst Widerberg <ernstwi@kth.se>
Date: Wed, 6 Oct 2021 16:11:06 +0200
Subject: Initial commit

---
 src/components/Login.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/components/Login.js

(limited to 'src/components/Login.js')

diff --git a/src/components/Login.js b/src/components/Login.js
new file mode 100644
index 0000000..7555dcf
--- /dev/null
+++ b/src/components/Login.js
@@ -0,0 +1,96 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Button, Input } from "semantic-ui-react";
+
+class Login extends React.Component {
+    static propTypes = {
+        setToken: PropTypes.func.isRequired,
+        setError: PropTypes.func.isRequired
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            email: "",
+            password: "",
+            error: false
+        };
+
+        this.handleInput = this.handleInput.bind(this);
+        this.login = this.login.bind(this);
+        this.logout = this.logout.bind(this);
+    }
+
+    // NOTE: btoa() limits email, password to ASCII
+    login(email, password) {
+        const url = process.env.JWT_URL + "/api/v1.0/auth";
+        fetch(url, {
+            method: "POST",
+            headers: { Authorization: "Basic " + btoa(email + ":" + password) }
+        })
+            .then(resp => {
+                if (resp.status !== 200) throw resp;
+                return resp;
+            })
+            .then(resp => resp.json())
+            .then(data => {
+                this.props.setToken(data.access_token);
+            })
+            .catch(resp => {
+                if (resp.status === 401) this.setState({ error: true });
+                else
+                    this.props.setError(
+                        `Unexpected response status: ${resp.status} ${resp.statusText}`
+                    );
+            });
+    }
+
+    logout() {
+        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
+                        type="text"
+                        name="email"
+                        placeholder="Username..."
+                        onChange={this.handleInput}
+                        required
+                    />
+                    <Input
+                        type="password"
+                        placeholder="Password..."
+                        name="password"
+                        onChange={this.handleInput}
+                        required
+                    />
+                    <Button color="green" className="submit" type="submit">
+                        Sign in
+                    </Button>
+                    {this.state.error && (
+                        <p className="error">Wrong username or password</p>
+                    )}
+                </form>
+            </div>
+        );
+    }
+}
+
+export default Login;
-- 
cgit v1.1