Merge pull request #59 from vgulerianb/vikrant/add-signup

chore(SignUp): Integrate signup api
NimbleBoxAI · Apr 14, 2023 · 4f7fdb8 · 4f7fdb8
2 parents f10f2ca + e78b773
commit 4f7fdb8
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 5 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -6,13 +6,19 @@ import Sidebar from './components/Sidebar';
 import Dashboard from './pages/Dashboard';
 import FlowViewer from './pages/FlowViewer';
 import Login from './pages/SignIn';
+import SignUp from './pages/SignUp';
 
 const AppRoutes = [
   {
     path: '/ui/login',
     element: <Login />,
     isPrivate: false
   },
+  {
+    path: '/ui/signup',
+    element: <SignUp />,
+    isPrivate: false
+  },
   {
     path: '/ui/dashboard',
     element: <Dashboard />,

diff --git a/client/src/pages/SignIn/index.tsx b/client/src/pages/SignIn/index.tsx
@@ -78,6 +78,14 @@ const Login = () => {
           Sign In
         </Button>
       </div>
+      <span
+        onClick={() => {
+          navigate('/ui/signup');
+        }}
+        className="cursor-pointer z-10 relative text-light-primary-blue-600 semiBold300 mt-[8px]"
+      >
+        Don't have an account? Sign Up
+      </span>
 
       <div
         style={{

diff --git a/client/src/pages/SignUp/index.tsx b/client/src/pages/SignUp/index.tsx
@@ -1,9 +1,35 @@
 import { Button, CircularProgress } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useSignupMutation } from '../../redux/services/auth';
 
 const SignUp = () => {
   const navigate = useNavigate();
+  const [signup] = useSignupMutation();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState('');
+
+  const isValidEmail = (email: string) => {
+    const re = /\S+@\S+\.\S+/;
+    return re.test(email);
+  };
+
+  const handleSignup = () => {
+    signup({
+      username,
+      password,
+      email
+    })
+      .unwrap()
+      .then((res) => {
+        console.log(res);
+        navigate('/ui/login');
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
 
   return (
     <div className={`flex relative flex-col prose-nbx items-center justify-center h-screen w-full`}>
@@ -17,11 +43,45 @@ const SignUp = () => {
             Some text here to describe the app
           </span>
         </div>
-        <input className="w-full h-[40px]" placeholder="Full name" />
-        <input className="w-full h-[40px]" placeholder="Username" />
-        <input className="w-full h-[40px]" placeholder="Email" />
-        <input className="w-full h-[40px]" placeholder="Password" type={'password'} />
-        <Button className="h-[40px] mt-[8px!important] block" variant="contained" color="primary">
+        <input
+          value={username}
+          onChange={(e) => {
+            setUsername(e.target.value);
+          }}
+          className="w-full h-[40px]"
+          placeholder="Username"
+        />
+        <input
+          onChange={(e) => {
+            setEmail(e.target.value);
+          }}
+          value={email}
+          className="w-full h-[40px]"
+          placeholder="Email"
+        />
+        <input
+          onChange={(e) => {
+            setPassword(e.target.value);
+          }}
+          value={password}
+          className="w-full h-[40px]"
+          placeholder="Password"
+          type={'password'}
+        />
+        <Button
+          disabled={
+            username.length === 0 ||
+            password.length === 0 ||
+            email.length === 0 ||
+            !isValidEmail(email)
+          }
+          onClick={() => {
+            handleSignup();
+          }}
+          className="h-[40px] mt-[8px!important] block"
+          variant="contained"
+          color="primary"
+        >
           Create Account
         </Button>
       </div>

diff --git a/client/src/redux/services/auth.ts b/client/src/redux/services/auth.ts
@@ -30,6 +30,20 @@ export const authApi = createApi({
         body: credentials
       })
     }),
+    signup: builder.mutation<
+      DEFAULT_RESPONSE,
+      {
+        username: string;
+        email: string;
+        password: string;
+      }
+    >({
+      query: (credentials) => ({
+        url: '/signup',
+        method: 'POST',
+        body: credentials
+      })
+    }),
     changePassword: builder.mutation<
       DEFAULT_RESPONSE,
       {
@@ -233,6 +247,7 @@ export const authApi = createApi({
 
 export const {
   useLoginMutation,
+  useSignupMutation,
   useComponentsMutation,
   useCreateBotMutation,
   useGetBotsMutation,