feat: flesh in signup form

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>
+  );
+};

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>