import React from "react";
import { Button, Card, Form } from "react-bootstrap";
import { apiClient } from "../utils/httpClients";
import { guard } from "../utils/routing";

export default class Login extends React.Component {
    constructor(props) {
        super(props);
    }

    async componentDidMount() {
        const getUserResponse = await apiClient.get("/user");
        guard(() => getUserResponse.status === 401, "/dashboard"); // If it's not 401, then we redirect to dashboard.
    }

    render() {
        return (
            <div className="page-root">
                <Card>
                    <Card.Body>
                        <Card.Title>Login</Card.Title>
                        <Card.Subtitle>Welcome back!</Card.Subtitle>
                        <Form>
                            <Form.Group className="mb-3" controlId="loginEmail">
                                <Form.Label>E-mail</Form.Label>
                                <Form.Control type="email" placeholder="Ex. youremail@mail.com" />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="loginPassword">
                                <Form.Label>Password</Form.Label>
                                <Form.Control type="password" placeholder="Enter password" />
                            </Form.Group>
                            <Button variant="primary" type="submit">
                                Login
                            </Button>
                        </Form>
                    </Card.Body>
                </Card>
            </div>
        );
    }
}