roughed in ui for 'forgot password' function (#840)

This commit is contained in:
Michael Quigley 2025-01-28 17:15:53 -05:00
parent 3b3f1a185c
commit f341b839dc
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 40 additions and 1 deletions

View File

@ -4,6 +4,7 @@ import Login from "./Login.tsx";
import {useEffect} from "react";
import {User} from "./model/user.ts";
import useApiConsoleStore from "./model/store.ts";
import ForgotPassword from "./ForgotPassword.tsx";
const App = () => {
const user = useApiConsoleStore((state) => state.user);
@ -42,6 +43,7 @@ const App = () => {
<BrowserRouter>
<Routes>
<Route index element={consoleRoot}/>
<Route path="/forgotPassword" element={<ForgotPassword />}/>
</Routes>
</BrowserRouter>
);

View File

@ -0,0 +1,37 @@
import {Box, Button, Container, TextField, Typography} from "@mui/material";
import {useState} from "react";
import zroket from "./assets/zrok-1.0.0-rocket-purple.svg";
const ForgotPassword = () => {
const [email, setEmail] = useState("");
return (
<Typography component="div">
<Container maxWidth="xs">
<Box sx={{marginTop: 8, display: "flex", flexDirection: "column", alignItems: "center"}}>
<img src={zroket} height="300"/>
<h1 style={{ color: "#241775" }}>z r o k</h1>
<Box component="form" noValidate>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
value={email}
onChange={v => { setEmail(v.target.value) }}
/>
<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }} style={{ color: "#9bf316" }}>
Send Password Reset Email
</Button>
</Box>
</Box>
</Container>
</Typography>
);
}
export default ForgotPassword;

View File

@ -84,7 +84,7 @@ const Login = ({ onLogin }: LoginProps) => {
<Box component="h3" style={{color: "red"}}>{message}</Box>
</Box>
<Box component="div" style={{ textAlign: "center" }}>
<Link to="/resetPassword">Forgot Password?</Link>
<Link to="/forgotPassword">Forgot Password?</Link>
</Box>
<Box component="div" style={{ textAlign: "center" }}>
<div dangerouslySetInnerHTML={{__html: tou}}></div>