From f59267092281b25b8951d72b38e94c3c2e5c5a5d Mon Sep 17 00:00:00 2001
From: unleashit <unleashit@protonmail.com>
Date: Fri, 2 Feb 2024 01:18:13 -0800
Subject: [PATCH] fix(demo): reenable forgot password reset in demo

---
 demos/frontend/src/components/App/App.tsx     |  10 +-
 .../src/components/App/Navigation.tsx         |   2 +-
 .../components/forgotPasswordReset/index.tsx  | 115 +++++++++---------
 3 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/demos/frontend/src/components/App/App.tsx b/demos/frontend/src/components/App/App.tsx
index e1729292..e44ad260 100644
--- a/demos/frontend/src/components/App/App.tsx
+++ b/demos/frontend/src/components/App/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import AsyncHandler from '../asyncHandler';
 import ForgotPassword from '../forgotPassword';
-// import ForgotPasswordReset from '../forgotPasswordReset';
+import ForgotPasswordReset from '../forgotPasswordReset';
 import Home from '../Home/Home';
 import Login from '../login';
 import ModalDemo from '../modal';
@@ -30,10 +30,10 @@ function App() {
                 <Route path="/login" element={<Login />} />
                 <Route path="/signup" element={<Signup />} />
                 <Route path="/forgot-password" element={<ForgotPassword />} />
-                {/* <Route */}
-                {/*  path="/forgot-password/reset/:userid/:token" */}
-                {/*  element={<ForgotPasswordReset />} */}
-                {/* /> */}
+                <Route
+                  path="/forgot-password/:userid/:token"
+                  element={<ForgotPasswordReset />}
+                />
                 <Route path="/async-handler" element={<AsyncHandler />} />
                 <Route
                   path="/recursive-data-lister"
diff --git a/demos/frontend/src/components/App/Navigation.tsx b/demos/frontend/src/components/App/Navigation.tsx
index f2c503d5..be6a9a32 100644
--- a/demos/frontend/src/components/App/Navigation.tsx
+++ b/demos/frontend/src/components/App/Navigation.tsx
@@ -27,7 +27,7 @@ function Navigation() {
         </li>
         <li>
           <Link
-            to="/forgot-password/reset/1/1234567890"
+            to="/forgot-password/1/1234567890"
             className="main-navigation__link"
           >
             Forgot Password Reset
diff --git a/demos/frontend/src/components/forgotPasswordReset/index.tsx b/demos/frontend/src/components/forgotPasswordReset/index.tsx
index 4debe9d2..503e7705 100644
--- a/demos/frontend/src/components/forgotPasswordReset/index.tsx
+++ b/demos/frontend/src/components/forgotPasswordReset/index.tsx
@@ -1,56 +1,61 @@
-// import '@unleashit/forgot-password/dist/forgot-password.css';
-//
-// import {
-//   ForgotPasswordReset,
-//   FormValuesReset,
-//   ServerResponse,
-// } from '@unleashit/forgot-password';
-// import React from 'react';
-//
-// class ForgotPasswordResetDemo extends React.Component {
-//   async forgotPasswordResetHandler(values: FormValuesReset) {
-//     const [token, userid] = new URL(window.location.href).pathname
-//       .split('/')
-//       .filter(Boolean)
-//       .reverse();
-//
-//     return await fetch(
-//       `https://unleashit-forgot-password.vercel.app/passwordreset/${userid}/${token}`,
-//       {
-//         method: 'POST',
-//         headers: {
-//           'Content-Type': 'application/json',
-//         },
-//         body: JSON.stringify(values),
-//       },
-//     ).then((resp) => {
-//       if (resp.ok) {
-//         return resp.json();
-//       }
-//       throw new Error('Problem connecting to the server');
-//     });
-//   }
-//
-//   onSuccess(res: ServerResponse) {
-//     console.log(res);
-//   }
-//
-//   render() {
-//     return (
-//       <>
-//         <p style={{ marginBottom: '2.5rem', color: '#aaaaaa' }}>
-//           User ID = 1, token = 1234567890, taken from url in this example
-//         </p>
-//         <ForgotPasswordReset
-//           forgotPasswordResetHandler={this.forgotPasswordResetHandler}
-//           onSuccess={this.onSuccess}
-//           showDefaultConfirmation
-//         />
-//       </>
-//     );
-//   }
-// }
-//
-// export default ForgotPasswordResetDemo;
+import React from 'react';
+import {
+  ForgotPasswordReset,
+  FormValuesReset,
+  ServerResponseReset,
+} from '@unleashit/forgot-password';
+import css from '@unleashit/forgot-password/dist/forgot-password.module.css';
 
-export default null;
+const Header = () => (
+  <div className={css.header}>
+    <h2>Reset Password</h2>
+    <p>Please enter a new password and confirm.</p>
+    <p style={{ marginBottom: '2.5rem', color: '#aaaaaa' }}>
+      In this example, in the handler prop, the user Id and token are taken from
+      url and posted to the server for verification. If the either the id or
+      token don't match or the user input is wrong, it will fail.
+    </p>
+  </div>
+);
+
+function ForgotPasswordResetDemo() {
+  const forgotPasswordResetHandler = async (
+    values: FormValuesReset,
+  ): Promise<any> => {
+    const [token, userid] = new URL(window.location.href).pathname
+      .split('/')
+      .filter(Boolean)
+      .reverse();
+
+    return await fetch(
+      `${process.env.DEMO_URL}/forgot-password/${userid}/${token}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(values),
+      },
+    ).then((resp) => {
+      if (resp.ok) {
+        return resp.json();
+      }
+      throw new Error('Problem connecting to the server');
+    });
+  };
+
+  const onSuccess = (res: ServerResponseReset) => {
+    console.log(res);
+  };
+
+  return (
+    <ForgotPasswordReset
+      handler={forgotPasswordResetHandler}
+      header={Header}
+      onSuccess={onSuccess}
+      cssModule={css}
+    />
+  );
+}
+
+export default ForgotPasswordResetDemo;