Add authentication layer
This commit is contained in:
@ -1,16 +1,18 @@
|
||||
import * as React from "react";
|
||||
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
|
||||
import { Alert } from "@mui/material";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from "@mui/material/Link";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Box from "@mui/material/Box";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import * as React from "react";
|
||||
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
|
||||
import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
|
||||
import { AuthApi } from "../api/AuthApi";
|
||||
|
||||
function Copyright(props: any) {
|
||||
return (
|
||||
@ -31,12 +33,28 @@ function Copyright(props: any) {
|
||||
}
|
||||
|
||||
export function LoginRoute() {
|
||||
const loadingMessage = useLoadingMessage();
|
||||
|
||||
const [user, setUser] = React.useState("");
|
||||
const [password, setPassword] = React.useState("");
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
const [error, setError] = React.useState<string | undefined>();
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
// TODO
|
||||
try {
|
||||
loadingMessage.show("Signing in...");
|
||||
setError(undefined);
|
||||
|
||||
await AuthApi.AuthWithPassword(user, password);
|
||||
|
||||
location.href = "/";
|
||||
} catch (e) {
|
||||
console.error("Failed to perform login!", e);
|
||||
setError(`Failed to authenticate! ${e}`);
|
||||
} finally {
|
||||
loadingMessage.hide();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -73,6 +91,9 @@ export function LoginRoute() {
|
||||
<Typography component="h1" variant="h5">
|
||||
SolarEnergy
|
||||
</Typography>
|
||||
|
||||
{error && <Alert severity="error">{error}</Alert>}
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
|
Reference in New Issue
Block a user