mirror of
https://github.com/openziti/zrok.git
synced 2025-06-22 10:41:40 +02:00
roughed in ui for 'forgot password' function (#840)
This commit is contained in:
parent
3b3f1a185c
commit
f341b839dc
@ -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>
|
||||
);
|
||||
|
37
ui100/src/ForgotPassword.tsx
Normal file
37
ui100/src/ForgotPassword.tsx
Normal 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;
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user