added routes and signup , signup pages

brainly_backend/src/routes/userRoutes.ts

@@ -182,7 +182,7 @@ userRouter.post("/brain/share", authMiddleware, async function (req:Request, res
 })
 
 //copying the particular content of others
-userRouter.get("/brain/:shareLink", authMiddleware,async function (req:Request, res:Response) {
+userRouter.get("/brain/:shareLink", async function (req:Request, res:Response) {
     let hash = req.params.shareLink;
     let userId = req.userId;
 

brainly_frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.20",
+    "axios": "^1.7.9",
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

brainly_frontend/src/App.tsx

@@ -1,11 +1,20 @@
 import Dashboard from "./pages/dashboard"
+import { Signin } from "./pages/signin"
 import { Signup } from "./pages/signup"
+import { BrowserRouter, Routes, Route } from "react-router-dom"
 
 function App() {
 
   // const LazyElement = lazy(()=> import("./components/ui/YTEmbed"))
   return <div>
-    <Signup/>
+      <BrowserRouter>
+        <Routes>
+          <Route index path="/"element={<Signin/>} ></Route>
+          <Route path="/signup" element={<Signup/>}></Route>
+          <Route path="/dashboard" element={<Dashboard/>}></Route>
+        </Routes>
+      </BrowserRouter>
+
   </div>
 }
 

brainly_frontend/src/components/ui/AddModal.tsx

@@ -1,6 +1,7 @@
 import { CloseIcon } from "../icons/close"
 import { Button } from "./Button"
 import { MutableRefObject, useRef } from "react"
+import {InputComponent} from "./input"
 interface AddModalProps {
     open:boolean,
     onClose?:() => void
@@ -38,10 +39,3 @@ export function AddModal({open, onClose}:AddModalProps) {
      </div>}
     </div>
 }
-
-function InputComponent({changeHandler, placeholder}:{changeHandler?:()=> void, placeholder:string}) {
-
-    return <div>
-        <input type="text" className="py-2 px-4 border rounded border-slate-800 " onChange={changeHandler} placeholder={placeholder}/>
-    </div>
-}

brainly_frontend/src/components/ui/Button.tsx

@@ -10,17 +10,18 @@ interface ButtonProps {
     startIcon?:ReactElement,
     size?: ButtonSize,
     handlerClick?:() => void;
+    loading?:boolean;
 }
 
 let variantStyles:{primary:string, secondary:string} = {
     primary:'bg-cs-purple-600 text-white',
     secondary:'bg-cs-purple-200  text-cs-purple-600'
 }
 
-let defaultStyles = "px-4 py-2 rounded-sm font-light flex items-center gap-2 h-10"
+let defaultStyles = "px-4 py-2 rounded-sm font-light flex items-center gap-2 h-10 "
 
-export function Button({variant, text, startIcon, size, handlerClick}:ButtonProps) {
-    return <button className={`${variantStyles[variant]} ${defaultStyles}`} onClick={handlerClick}>
+export function Button({variant, text, startIcon, size, handlerClick, loading}:ButtonProps) {
+    return <button className={`${variantStyles[variant]} ${defaultStyles} ${size == "lg" ?"w-full":""} ${loading ?"opacity-50":""}`} disabled={loading} onClick={handlerClick}>
         {startIcon}
         {text}
     </button>

brainly_frontend/src/components/ui/SideBar.tsx

@@ -17,7 +17,7 @@ export function Sidebar() {
     </div>
 }
 
-function SideBarItems({text, startIcon, variant}:{text:string, startIcon:ReactElement | string, variant: "header" | "item" }) {
+export function SideBarItems({text, startIcon, variant}:{text:string, startIcon:ReactElement | string, variant: "header" | "item" }) {
 
     return <div >
         {variant == "header"&& <div className="flex gap-2 items-center mb-6"> 

brainly_frontend/src/components/ui/input.tsx

@@ -0,0 +1,7 @@
+
+export function InputComponent({changeHandler, placeholder, reference}:{changeHandler?:()=> void, placeholder:string, reference:any}) {
+
+    return <div>
+        <input type="text" ref={reference} className="py-2 px-4 border rounded border-slate-800 " onChange={changeHandler} placeholder={placeholder}/>
+    </div>
+}

brainly_frontend/src/config.ts

@@ -0,0 +1,12 @@
+export const backendURL = "http://localhost:3000"
+//signin and signup
+export const signinURL = "/user/signin" //POST
+export const signupURL = "/user/signup" //POST
+
+//content
+export const userContentDeleteURL = "/user/content"
+//POST, GET, DELETE and auth
+
+//share links
+export const brainShareURL = "/user/brain/share" //POST and auth
+export const brainShareLink = "/user/brain/" //GET and non-auth

brainly_frontend/src/pages/signin.tsx

@@ -1,8 +1,38 @@
+import { Button } from "../components/ui/Button"
+import { InputComponent } from "../components/ui/input"
+import BrainLogo from "../assets/brain.png"
+import { SideBarItems } from "../components/ui/SideBar"
+import { useNavigate } from "react-router-dom"
+import { useRef } from "react"
 
 export function Signin() {
 
-    return <div className="bg-purple-600 h-screen w-screen fixed top-0 left-0">
+    const usernameRef = useRef<any>()
+    const passwordRef = useRef<any>()
 
+
+    const navigate = useNavigate();
+
+    return <div className="bg-purple-600 h-screen w-screen fixed top-0 left-0 flex items-center justify-center">
+          <div className="h-96 w-72 bg-purple-300 rounded-md py-6 px-4 select-none flex flex-col items-center">
+
+            <SideBarItems variant="header" startIcon={BrainLogo} text="Brainly" />
+            <div className="space-y-4">
+
+            <InputComponent reference={usernameRef} placeholder="username" />
+            <InputComponent reference={passwordRef} placeholder="password" />
+            </div>
+
+            <div className="button mt-8  flex justify-between gap-2">
+                <Button variant="primary" text="Sign In" loading={false} handlerClick={function() {
+                    console.log(usernameRef.current.value, passwordRef.current.value)
+                }}/>
+                <Button variant="secondary" text="Signup instead" handlerClick={function () {
+                    navigate("/signup")
+                }}  />
+            </div>
+
+        </div>
     </div>
 
 }

brainly_frontend/src/pages/signup.tsx

@@ -1,8 +1,49 @@
+import { Button } from "../components/ui/Button"
+import { InputComponent } from "../components/ui/input"
+import BrainLogo from "../assets/brain.png"
+import { SideBarItems } from "../components/ui/SideBar"
+import {  useNavigate } from "react-router-dom"
+import { useRef } from "react"
+import axios from "axios"
+import { backendURL, signupURL } from "../config"
 
 export function Signup() {
+    const usernameRef = useRef<any>()
+    const passwordRef = useRef<any>()
 
-    return <div className="bg-purple-600 h-screen w-screen fixed top-0 left-0">
+   async function sendData() {
+        let username = usernameRef.current.value;
+        let password = passwordRef.current.value;
+        let response = await axios.post(backendURL+signupURL, {
+           data:{
+                username, password
+           } 
+        })
+        console.log(response)
 
+        alert("user is added")
+    }
+
+    const navigate = useNavigate();
+
+    return <div className="bg-purple-600 h-screen w-screen fixed top-0 left-0 flex items-center justify-center">
+          <div className="h-96 w-72 bg-purple-300 rounded-md py-6 px-4 select-none flex flex-col items-center">
+
+            <SideBarItems variant="header" startIcon={BrainLogo} text="Brainly" />
+            <div className="space-y-4">
+
+            <InputComponent reference={usernameRef} placeholder="username" />
+            <InputComponent reference={passwordRef} placeholder="password" />
+            </div>
+
+            <div className="button mt-8  flex justify-between gap-2">
+                <Button variant="primary" text="Sign Up"  loading={false} handlerClick={sendData}/>
+                <Button variant="secondary" text="Signin instead" handlerClick={function () {
+                    navigate("/")
+                }}  />
+            </div>
+
+        </div>
     </div>
 
 }