Add authentication layer

This commit is contained in:
2024-06-29 14:43:56 +02:00
parent 738c53c8b9
commit e1739d9818
26 changed files with 1038 additions and 90 deletions

View File

@ -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