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 {useEffect} from "react";
|
||||||
import {User} from "./model/user.ts";
|
import {User} from "./model/user.ts";
|
||||||
import useApiConsoleStore from "./model/store.ts";
|
import useApiConsoleStore from "./model/store.ts";
|
||||||
|
import ForgotPassword from "./ForgotPassword.tsx";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const user = useApiConsoleStore((state) => state.user);
|
const user = useApiConsoleStore((state) => state.user);
|
||||||
@ -42,6 +43,7 @@ const App = () => {
|
|||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route index element={consoleRoot}/>
|
<Route index element={consoleRoot}/>
|
||||||
|
<Route path="/forgotPassword" element={<ForgotPassword />}/>
|
||||||
</Routes>
|
</Routes>
|
||||||
</BrowserRouter>
|
</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 component="h3" style={{color: "red"}}>{message}</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box component="div" style={{ textAlign: "center" }}>
|
<Box component="div" style={{ textAlign: "center" }}>
|
||||||
<Link to="/resetPassword">Forgot Password?</Link>
|
<Link to="/forgotPassword">Forgot Password?</Link>
|
||||||
</Box>
|
</Box>
|
||||||
<Box component="div" style={{ textAlign: "center" }}>
|
<Box component="div" style={{ textAlign: "center" }}>
|
||||||
<div dangerouslySetInnerHTML={{__html: tou}}></div>
|
<div dangerouslySetInnerHTML={{__html: tou}}></div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user