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

ui100/src/App.tsx

@@ -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>
     );

ui100/src/ForgotPassword.tsx

@@ -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;

ui100/src/Login.tsx

@@ -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>