83 lines
1.8 KiB
JavaScript
83 lines
1.8 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/router";
|
|
import Link from "next/link";
|
|
import {
|
|
Alert,
|
|
Button,
|
|
TextField,
|
|
Stack,
|
|
InputField,
|
|
Box,
|
|
Snackbar,
|
|
Container,
|
|
} from "@mui/material";
|
|
|
|
export default function Index(props) {
|
|
const [username, setUsername] = useState("");
|
|
const [snackbarOpen, setSnackbarOpen] = useState(false);
|
|
|
|
// get username from localStorage
|
|
useEffect(() => {
|
|
const localUsername = localStorage.getItem("username");
|
|
if (localUsername) {
|
|
setUsername(localUsername);
|
|
}
|
|
}, []);
|
|
|
|
const router = useRouter();
|
|
|
|
const login = () => {
|
|
if (!username) {
|
|
setSnackbarOpen(true);
|
|
return;
|
|
}
|
|
// set local storage
|
|
localStorage.setItem("username", username);
|
|
props.setUsername(username);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (props.username) {
|
|
router.push("/time");
|
|
}
|
|
}, [props.username]);
|
|
|
|
return (
|
|
<Container>
|
|
<Stack direction="row" spacing={2}>
|
|
<TextField
|
|
label="您的大名？"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
onKeyUp={(e) => {
|
|
if (e.key === "Enter") {
|
|
login();
|
|
}
|
|
}}
|
|
/>
|
|
<Link href="/time" passHref>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
login();
|
|
}}
|
|
>
|
|
登入
|
|
</Button>
|
|
</Link>
|
|
</Stack>
|
|
<Snackbar
|
|
open={snackbarOpen}
|
|
autoHideDuration={1000}
|
|
onClose={() => setSnackbarOpen(false)}
|
|
>
|
|
<Alert variant="filled" severity="error">
|
|
请输入您的大名
|
|
</Alert>
|
|
</Snackbar>
|
|
</Container>
|
|
);
|
|
}
|