From 353eda13f019636781e6d6f9969f5d6db0b3dd3a Mon Sep 17 00:00:00 2001
From: hxtree <matthew.heroux@gmail.com>
Date: Wed, 21 Feb 2024 14:11:40 +0000
Subject: [PATCH] feat: flesh in signup form

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 .../src/components/SignupForm.tsx             | 47 +++++++++++++++++++
 .../admin-client/src/pages/signup.page.tsx    | 19 +-------
 2 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 clients/admin-client/src/components/SignupForm.tsx

diff --git a/clients/admin-client/src/components/SignupForm.tsx b/clients/admin-client/src/components/SignupForm.tsx
new file mode 100644
index 000000000..099e4cd9c
--- /dev/null
+++ b/clients/admin-client/src/components/SignupForm.tsx
@@ -0,0 +1,47 @@
+import { FC, useState } from "react";
+import { FontAwesomeIcon, faArrowRight, TextField, Button } from '@cats-cradle/design-system/dist/main';
+import React from 'react';
+
+type TSignupForm = {
+  title?: string;
+};
+
+export const SignupForm: FC<TSignupForm> = ({ title }) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+
+  async function createUser() {
+    // Now use the email and password states here
+    console.log("Email:", email);
+    console.log("Password:", password);
+    // await axios.post()
+    // set isLoading
+  }
+
+  function onClickHandler(event: React.MouseEvent) {
+    setIsLoading(true);
+    createUser(); // Call createUser when the button is clicked
+    console.log(event);
+    return;
+  }
+
+  return (
+    <div>
+      <h2>Create an account</h2>
+      <div className="mb-3">
+        {/* Bind the value and onChange to the email state */}
+        <TextField id="email-address" label="Email Address" type="text" value={email} onChange={(e) => setEmail(e.target.value)} />
+      </div>
+      <div className="mb-3">
+        {/* Bind the value and onChange to the password state */}
+        <TextField id="password" label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+      </div>
+      <div className="mb-3">
+        <Button loading={isLoading} onClick={onClickHandler} color="primary">
+          Create Account <FontAwesomeIcon icon={faArrowRight} />
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/clients/admin-client/src/pages/signup.page.tsx b/clients/admin-client/src/pages/signup.page.tsx
index 76b3c4c1f..d9e176570 100644
--- a/clients/admin-client/src/pages/signup.page.tsx
+++ b/clients/admin-client/src/pages/signup.page.tsx
@@ -1,11 +1,7 @@
 import { Paper, Link, Button, TextField, faArrowRight, FontAwesomeIcon } from '@cats-cradle/design-system/dist/main';
-import React from 'react';
+import { SignupForm } from '../components/SignupForm';
 
 export default function SignupPage() {
-  function onClickHandler(event: React.MouseEvent){
-    console.log(event);
-    return;
-  }
 
   return (
     <main className="container">
@@ -21,18 +17,7 @@ export default function SignupPage() {
         </div>
         <div className='col-lg-6 col-sm-12 order-last'>
           <Paper elevation="1" className='p-5'>
-            <div>
-            <h2>Create an account</h2>
-              <div className="mb-3">
-                <TextField id="email-address" label="Email Address" type="text"/>
-              </div>
-              <div className="mb-3">
-                <TextField id="password" label="Password" type="password"/>
-              </div>
-              <div className="mb-3">
-                <Button onClick={onClickHandler} color="primary">Create Account <FontAwesomeIcon icon={faArrowRight}/></Button>
-              </div>
-            </div>
+            <SignupForm/>
           </Paper>
         </div>
       </div>