implements proper reset password workflow within admin panel and sets cookie properly

src/client/components/forms/field-types/ConfirmPassword/index.js

@@ -14,6 +14,7 @@ const ConfirmPassword = () => {
     if (value === password?.value) {
       return true;
     }
+
     return 'Passwords do not match.';
   }, [password]);
 

src/client/components/forms/field-types/HiddenInput/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
 import withCondition from '../../withCondition';
@@ -7,16 +7,21 @@ const HiddenInput = (props) => {
   const {
     name,
     path: pathFromProps,
-    required,
+    value: valueFromProps,
   } = props;
 
   const path = pathFromProps || name;
 
   const { value, setValue } = useFieldType({
     path,
-    required,
   });
 
+  useEffect(() => {
+    if (valueFromProps !== undefined) {
+      setValue(valueFromProps);
+    }
+  }, [valueFromProps, setValue]);
+
   return (
     <input
       type="hidden"
@@ -28,14 +33,14 @@ const HiddenInput = (props) => {
 };
 
 HiddenInput.defaultProps = {
-  required: false,
   path: '',
+  value: undefined,
 };
 
 HiddenInput.propTypes = {
   name: PropTypes.string.isRequired,
   path: PropTypes.string,
-  required: PropTypes.bool,
+  value: PropTypes.string,
 };
 
 export default withCondition(HiddenInput);

src/client/components/views/ForgotPassword/index.js

@@ -69,14 +69,6 @@ const ForgotPassword = () => {
         <p>
           Check your email for a link that will allow you to securely reset your password.
         </p>
-        <br />
-        <Button
-          el="link"
-          buttonStyle="secondary"
-          to={`${admin}/login`}
-        >
-          Go to login
-        </Button>
       </MinimalTemplate>
     );
   }

src/client/components/views/ResetPassword/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import config from 'payload/config';
-import StatusList from '../../elements/Status';
+import MinimalTemplate from '../../templates/Minimal';
 import Form from '../../forms/Form';
 import Password from '../../forms/field-types/Password';
+import ConfirmPassword from '../../forms/field-types/ConfirmPassword';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
 import { useUser } from '../../data/User';
@@ -20,19 +21,16 @@ const ResetPassword = () => {
   const history = useHistory();
   const { user, setToken } = useUser();
 
-  const handleResponse = (res) => {
-    res.json()
-      .then((data) => {
-        if (data.token) {
-          setToken(data.token);
-          history.push(`${admin}`);
-        }
-      });
+  const onSuccess = (data) => {
+    if (data.token) {
+      setToken(data.token);
+      history.push(`${admin}`);
+    }
   };
 
   if (user) {
     return (
-      <div className={baseClass}>
+      <MinimalTemplate className={baseClass}>
         <div className={`${baseClass}__wrap`}>
           <h1>Already logged in</h1>
           <p>
@@ -51,34 +49,35 @@ const ResetPassword = () => {
             Back to Dashboard
           </Button>
         </div>
-      </div>
+      </MinimalTemplate>
     );
   }
 
   return (
-    <div className={baseClass}>
+    <MinimalTemplate className={baseClass}>
       <div className={`${baseClass}__wrap`}>
-        <StatusList />
+        <h1>Reset Password</h1>
         <Form
-          handleResponse={handleResponse}
+          onSuccess={onSuccess}
           method="POST"
           action={`${serverURL}${api}/${userSlug}/reset-password`}
           redirect={admin}
         >
           <Password
             error="password"
-            label="Password"
+            label="New Password"
             name="password"
             required
           />
+          <ConfirmPassword />
           <HiddenInput
             name="token"
-            defaultValue={token}
+            value={token}
           />
           <FormSubmit>Reset Password</FormSubmit>
         </Form>
       </div>
-    </div>
+    </MinimalTemplate>
   );
 };