Notes

import React, { Fragment, useState } from "react";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress";
import InputAdornment from "@material-ui/core/InputAdornment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Lock from "@material-ui/icons/Lock";
import Joi from "joi";
import Snackbar from "@material-ui/core/Snackbar";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import { useHistory } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
loginJwtToken,
loginRefreshToken,
} from "../store/actions/loginActions";
import { rootUser } from "../store/actions/rootActions";
import RecoverPasswordForm from "../components/RecoverPasswordForm";
import { RootState } from "../store/mainReducers";
import _ from "lodash";

export const LoginForm = () => {
const initialError = { label: "", message: "" };
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState<{ label: string; message: string }>(
initialError
);
const history = useHistory();
const dispatch = useDispatch();
const maintenance: any = useSelector((state: RootState) => state.maintenance);

const schema = Joi.object().keys({
username: Joi.string().min(3).required(),
password: Joi.string().min(3).required(),
});

const login = () => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
username,
password,
login_from: "simcaa",
navigator_info: navigator.userAgent,
});

var requestOptions: any = {
method: "POST",
headers: myHeaders,
body: raw,
redirect: "follow",
};

setLoading(true);
fetch(`${import.meta.env.SNOWPACK_PUBLIC_AUTH_URI}/login`, requestOptions)
.then((response) => response.json())
.then((data) => {
if (data.token) {
dispatch(loginJwtToken(data.token));
dispatch(loginRefreshToken(data.refresh_token));
me(data.token);
} else {
setLoading(false);
setError({ label: "fetch", message: data.output.payload.message });
}
})
.catch((error) => {
setLoading(false);
setError({ label: "fetch", message: error.message });
});
};

const me = (token: string) => {
setLoading(true);
fetch(`${import.meta.env.SNOWPACK_PUBLIC_AUTH_URI}/me`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ token }),
})
.then((response) => response.json())
.then((data) => {
setLoading(false);
dispatch(rootUser(data.me));
history.push("/home");
})
.catch((error) => {
setLoading(false);
setError({ label: "fetch", message: error.message });
});
};

const submit = () => {
const { error } = schema.validate({
username,
password,
});

if (error) {
setError({
label: error.details[0].context?.label!,
message: error.message,
});
} else {
setError(initialError);
login();
}
};

if (!_.isEmpty(maintenance)) {
return (
<Alert variant="filled" severity="error" style={{ textAlign: "left" }}>
You can't login now
</Alert>
);
}

return (
<Fragment>
<Grid container spacing={3} alignItems="center">
<Grid item sm={12} xs={12}>
<TextField
disabled={loading}
error={error.label === "username"}
id="login-username"
label={error.label === "username" ? "Error" : "Username"}
variant="outlined"
value={username}
helperText={error.label === "username" ? error.message : ""}
onChange={(e) => setUsername(e.target.value)}
onKeyDown={(e) => (e.key === "Enter" ? submit() : null)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
</Grid>
<Grid item sm={12} xs={12}>
<TextField
disabled={loading}
type="password"
error={error.label === "password"}
id="login-password"
label={error.label === "password" ? "Error" : "Password"}
variant="outlined"
value={password}
helperText={error.label === "password" ? error.message : ""}
onChange={(e) => setPassword(e.target.value)}
onKeyDown={(e) => (e.key === "Enter" ? submit() : null)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Lock />
</InputAdornment>
),
}}
/>
</Grid>
<Grid item sm={12} xs={12}>
<Button
variant="contained"
color="primary"
onClick={() => submit()}
disabled={loading}
style={{ width: 80 }}
>
{loading ? <CircularProgress size={24} /> : "Login"}
</Button>
</Grid>
<Grid item sm={12} xs={12}>
<RecoverPasswordForm />
</Grid>
</Grid>
<Snackbar
open={error.label === "fetch"}
autoHideDuration={6000}
onClose={() => setError(initialError)}
>
<Alert severity="error" variant="filled">
<AlertTitle style={{ textAlign: "left" }}>
<strong>Error</strong>
</AlertTitle>
{error.message}
</Alert>
</Snackbar>
</Fragment>
);
};