forgot -> reset; password reset testing & tweaks (#65)

ui/src/App.js

@@ -3,7 +3,7 @@ import Register from "./register/Register";
 import Console from "./console/Console";
 import {useEffect, useState} from "react";
 import Login from "./console/login/Login";
-import ForgotPassword from "./console/forgotPassword/ForgotPassword"
+import ResetPassword from "./resetPassword/ResetPassword"
 
 const App = () => {
     const [user, setUser] = useState();
@@ -28,7 +28,8 @@ const App = () => {
             <Routes>
                 <Route path={"/"} element={consoleComponent}/>
                 <Route path={"register/:token"} element={<Register />} />
-                <Route path={"forgotpassword"} element={<ForgotPassword />}/>
+                <Route path={"resetPassword"} element={<ResetPassword />}/>
+                <Route path={"resetPassword/:token"} element={<ResetPassword />}/>
             </Routes>
         </Router>
     );

ui/src/api/account.js

@@ -2,21 +2,6 @@
 // Auto-generated, edits will be overwritten
 import * as gateway from './gateway'
 
-/**
- * @param {object} options Optional options
- * @param {module:types.forgotPasswordRequest} [options.body] 
- * @return {Promise<object>} forgot password request created
- */
-export function forgotPassword(options) {
-  if (!options) options = {}
-  const parameters = {
-    body: {
-      body: options.body
-    }
-  }
-  return gateway.request(forgotPasswordOperation, parameters)
-}
-
 /**
  * @param {object} options Optional options
  * @param {module:types.inviteRequest} [options.body] 
@@ -77,6 +62,21 @@ export function resetPassword(options) {
   return gateway.request(resetPasswordOperation, parameters)
 }
 
+/**
+ * @param {object} options Optional options
+ * @param {object} [options.body] 
+ * @return {Promise<object>} forgot password request created
+ */
+export function resetPasswordRequest(options) {
+  if (!options) options = {}
+  const parameters = {
+    body: {
+      body: options.body
+    }
+  }
+  return gateway.request(resetPasswordRequestOperation, parameters)
+}
+
 /**
  * @param {object} options Optional options
  * @param {module:types.verifyRequest} [options.body] 
@@ -92,12 +92,6 @@ export function verify(options) {
   return gateway.request(verifyOperation, parameters)
 }
 
-const forgotPasswordOperation = {
-  path: '/forgotPassword',
-  contentTypes: ['application/zrok.v1+json'],
-  method: 'post'
-}
-
 const inviteOperation = {
   path: '/invite',
   contentTypes: ['application/zrok.v1+json'],
@@ -122,6 +116,12 @@ const resetPasswordOperation = {
   method: 'post'
 }
 
+const resetPasswordRequestOperation = {
+  path: '/resetPasswordRequest',
+  contentTypes: ['application/zrok.v1+json'],
+  method: 'post'
+}
+
 const verifyOperation = {
   path: '/verify',
   contentTypes: ['application/zrok.v1+json'],

ui/src/api/types.js

@@ -91,13 +91,6 @@
  * @property {module:types.shares} shares 
  */
 
-/**
- * @typedef forgotPasswordRequest
- * @memberof module:types
- * 
- * @property {string} email 
- */
-
 /**
  * @typedef inviteTokenGenerateRequest
  * @memberof module:types

ui/src/console/forgotPassword/ForgotPassword.js

@@ -1,24 +0,0 @@
-import {useState} from "react";
-import * as account from '../../api/account';
-import {Button, Container, Form, Row} from "react-bootstrap";
-import { useLocation } from "react-router-dom";
-import SendRequest from "./SendRequest"
-import ResetPassword from "./ResetPassword";
-
-const ForgotPassword = (props) => {
-    const { search } = useLocation();
-    const token = new URLSearchParams(search).get("token")
-    console.log(token)
-    let forgetPasswordComponent = undefined
-    if (token) {
-        forgetPasswordComponent = <ResetPassword token={token} />
-    } else {
-        forgetPasswordComponent = <SendRequest />
-    }
-
-    return (
-        <div className={"fullscreen"}>{forgetPasswordComponent}</div>
-    )
-}
-
-export default ForgotPassword;

ui/src/console/login/Login.js

@@ -68,10 +68,10 @@ const Login = (props) => {
 
                                 <Button variant={"light"} type={"submit"}>Log In</Button>
                                 
-                                <div>
-                                <Link to="/forgotpassword" className="">
-                                    Forgot Password?
-                                </Link>
+                                <div id={"zrok-reset-password"}>
+                                    <Link to="/resetPassword" className="">
+                                        Forgot Password?
+                                    </Link>
                                 </div>
                             </Form>
                         </Row>

ui/src/index.css

@@ -113,3 +113,7 @@ code, pre {
 .actions-tab p {
     font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
 }
+
+#zrok-reset-password {
+    margin-top: 25px;
+}

ui/src/resetPassword/ResetPassword.js

@@ -0,0 +1,23 @@
+import {useLocation, useParams} from "react-router-dom";
+import SendRequest from "./SendRequest"
+import SetNewPassword from "./SetNewPassword";
+
+const ResetPassword = () => {
+    const { search } = useLocation();
+    const { token } = useParams();
+    console.log(token)
+    let component = undefined
+    if (token) {
+        component = <SetNewPassword token={token} />
+    } else {
+        component = <SendRequest />
+    }
+
+    console.log(token);
+
+    return (
+        <div className={"fullscreen"}>{component}</div>
+    )
+}
+
+export default ResetPassword;

ui/src/resetPassword/SendRequest.js

@@ -1,9 +1,8 @@
 import { useState } from "react";
-import * as account from '../../api/account';
+import * as account from '../api/account';
 import { Button, Container, Form, Row } from "react-bootstrap";
-import { Link } from "react-router-dom";
 
-const SendRequest = (props) => {
+const SendRequest = () => {
     const [email, setEmail] = useState('');
     const [complete, setComplete] = useState(false);
 
@@ -11,7 +10,7 @@ const SendRequest = (props) => {
         e.preventDefault();
         console.log(email);
 
-        account.forgotPassword({ body: { "email": email } })
+        account.resetPasswordRequest({ body: { "emailAddress": email } })
             .then(resp => {
                 if (!resp.error) {
                     setComplete(true)
@@ -66,14 +65,7 @@ const SendRequest = (props) => {
                     <h1>Reset Password</h1>
                 </Row>
                 <Row>
-                    We will get back to you shortly with a link to reset your password!
-                </Row>
-                <Row>
-                    <div>
-                        <Link to="/" className="">
-                            Login
-                        </Link>
-                    </div>
+                    Check your email for a password reset message!
                 </Row>
         </Container>
     )

ui/src/resetPassword/SetNewPassword.js

@@ -1,9 +1,9 @@
 import {useState} from "react";
-import * as account from '../../api/account';
+import * as account from '../api/account';
 import {Button, Container, Form, Row} from "react-bootstrap";
 import { Link } from "react-router-dom";
 
-const ResetPassword = (props) => {
+const SetNewPassword = (props) => {
     const [password, setPassword] = useState('');
     const [confirm, setConfirm] = useState('');
     const [message, setMessage] = useState();
@@ -93,9 +93,9 @@ const ResetPassword = (props) => {
                 Password reset successful! You can now return to the login page and login.
             </Row>
             <Row>
-                <div>
+                <div id={"zrok-reset-password"}>
                     <Link to="/" className="">
-                        Login
+                        <Button variant={"light"}>Login</Button>
                     </Link>
                 </div>
             </Row>
@@ -103,4 +103,4 @@ const ResetPassword = (props) => {
     )
 }
 
-export default ResetPassword;
+export default SetNewPassword;