Mathias/MCDashWrapper
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created a setup page in the Login.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2024-02-15 17:28:00 +01:00
parent 589b4bac8f
commit 4bd6da14be
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
webui/src/states/Login/Login.jsx
View File

@ -1,21 +1,44 @@
import {useContext, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {TokenContext} from "@/common/contexts/Token"; import {TokenContext} from "@/common/contexts/Token";
import {Navigate} from "react-router-dom"; import {Navigate} from "react-router-dom";
import {Alert, Box, Button, Container, Divider, Grid, Stack, TextField, Typography} from "@mui/material"; import {
Alert,
Box,
Button,
CircularProgress,
Container,
Divider,
Grid,
Stack,
TextField,
Typography
} from "@mui/material";
import {t} from "i18next"; import {t} from "i18next";
import {jsonRequest, postRequest} from "@/common/utils/RequestUtil.js";
export const Login = () => { export const Login = () => {
const {tokenValid, checkToken} = useContext(TokenContext); const {tokenValid, checkToken} = useContext(TokenContext);
const [isSetupMode, setIsSetupMode] = useState(null);
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [loginFailed, setLoginFailed] = useState(false); const [loginFailed, setLoginFailed] = useState(false);
useEffect(() => {
jsonRequest("setup").then((r) => setIsSetupMode(r.setup));
}, []);
const login = (e) => { const login = (e) => {
if (e) e.preventDefault(); if (e) e.preventDefault();
localStorage.setItem("token", btoa(`${username}:${password}`)); localStorage.setItem("token", btoa(`${username}:${password}`));
checkToken().then((r) => setLoginFailed(!r)); checkToken().then((r) => setLoginFailed(!r));
} }
const createAccount = () => {
postRequest("setup", {username, password}).then(() => login());
}
if (isSetupMode === null) return <Stack alignItems="center" justifyContent="center" sx={{minHeight: "100vh"}}><CircularProgress/></Stack>;
return ( return (
<div> <div>
{tokenValid && <Navigate to={"/"}/>} {tokenValid && <Navigate to={"/"}/>}
@ -24,25 +47,27 @@ export const Login = () => {
<Grid container spacing={0} direction="column" justifyContent="center" style={{minHeight: "100vh"}}> <Grid container spacing={0} direction="column" justifyContent="center" style={{minHeight: "100vh"}}>
<Box sx={{ <Box sx={{
boxShadow: 5, borderRadius: 2, py: 4, display: "flex", flexDirection: "column", boxShadow: 5, borderRadius: 2, py: 4, display: "flex", flexDirection: "column",
alignItems: "center", justifyContent: "center"}}> alignItems: "center", justifyContent: "center"}} backgroundColor="background.darker">
<Stack direction="row" alignItems="center" gap={1}> <Stack direction="row" alignItems="center" gap={1}>
<img src="/assets/img/favicon.png" alt="MCDash" width="50px" height="50px" /> <img src="/assets/img/favicon.png" alt="MCDash" width="50px" height="50px" />
<Typography variant="h5" noWrap fontWeight={700}>MCDash</Typography> <Typography variant="h5" noWrap fontWeight={700}>MCDash</Typography>
<Divider orientation="vertical" sx={{height: "30px", mx: 0.5}} /> <Divider orientation="vertical" sx={{height: "30px", mx: 0.5}} />
<Typography variant="h5" noWrap color="text.secondary">{t("login.sign_in")}</Typography> <Typography variant="h5" noWrap color="text.secondary">
{t("login." + (isSetupMode ? "setup" : "sign_in"))}
</Typography>
</Stack> </Stack>
{loginFailed && <Alert severity="error" sx={{mt: 1, width: "80%"}}> {loginFailed && <Alert severity="error" sx={{mt: 1, width: "80%"}}>
{t("login.failed")} {t("login.failed")}
</Alert>} </Alert>}
<Box component="form" onSubmit={login} sx={{mt: 1, width: "80%"}}> <Box component="form" onSubmit={isSetupMode ? createAccount : login} sx={{mt: 1, width: "80%"}}>
<TextField margin="normal" value={username} required fullWidth label={t("login.name")} <TextField margin="normal" value={username} required fullWidth label={t("login.name")}
autoFocus onChange={(e) => setUsername(e.target.value)}/> autoFocus onChange={(e) => setUsername(e.target.value)}/>
<TextField margin="normal" value={password} required fullWidth label={t("login.password")} <TextField margin="normal" value={password} required fullWidth label={t("login.password")}
type="password" onChange={(e) => setPassword(e.target.value)}/> type="password" onChange={(e) => setPassword(e.target.value)}/>
<Button variant="contained" fullWidth sx={{mt: 3}} onClick={login} type="submit"> <Button variant="contained" fullWidth sx={{mt: 3}} onClick={isSetupMode ? createAccount : login}>
{t("login.sign_in")} {t("login." + (isSetupMode ? "create_account" : "sign_in"))}
</Button> </Button>
</Box> </Box>
</Box> </Box>