feat: Integrate login and signup api

Remove proxy from vite.config.ts and add client url to server cors origin
builtbysuraj · Feb 12, 2024 · 8c07eea · 8c07eea
1 parent c56a57b
commit 8c07eea
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 11 deletions.
diff --git a/client/src/components/form/Form.tsx b/client/src/components/form/Form.tsx
@@ -1,6 +1,11 @@
+import axios from 'axios'
 import { Link } from 'react-router-dom'
+
+import { ENV } from '@/conf'
 import styles from './Form.module.css'
 
+axios.defaults.withCredentials = true
+
 type FormProps = {
   mode: string
   promptText: string
@@ -14,6 +19,21 @@ export default function From({
   promptLink,
   promptLinkText,
 }: FormProps) {
+  const endpoint = mode === 'Signup' ? '/register' : '/login'
+
+  const handleSubmit = async (evt: React.FormEvent<HTMLFormElement>) => {
+    evt.preventDefault()
+    const form = evt.target as HTMLFormElement
+    const formData = new FormData(form)
+
+    // Extracting form values through 'name' property, in 'data'
+    const data = Object.fromEntries(formData)
+    const res = await axios.post(`${ENV.SERVER_URL}/${endpoint}`, data)
+    console.log(res.data)
+
+    form.reset()
+  }
+
   return (
     <div className={styles.formContainer}>
       <div className={styles.left}>
@@ -26,16 +46,21 @@ export default function From({
         </div>
       </div>
       <div className={styles.right}>
-        <form className={styles.form}>
-          <input type="text" placeholder="Username" />
-          <input type="password" placeholder="Password" />
+        <form onSubmit={handleSubmit} className={styles.form}>
+          <input type="text" placeholder="Username" name="username" required />
+          <input
+            type="password"
+            placeholder="Password"
+            name="password"
+            required
+          />
           <small className={styles.fromSmall}>
             By continuing, you agree to Flipkart's
             <span className={styles.demoLink}> Terms of Use </span>
             and
             <span className={styles.demoLink}> Privacy Policy.</span>
           </small>
-          <button>{mode}</button>
+          <button type="submit">{mode}</button>
           <p>
             {promptText}{' '}
             <Link to={promptLink} className={styles.demoLink}>

diff --git a/client/src/context/ServerStatusProvider.tsx b/client/src/context/ServerStatusProvider.tsx
@@ -19,7 +19,7 @@ export default function ServerStatusProvider({ children }: PropsWithChildren) {
   useEffect(() => {
     const checkServerStatus = async () => {
       try {
-        const { data } = await axios.get(`${ENV.SERVER_URL}/api/v1/status`)
+        const { data } = await axios.get(`${ENV.SERVER_URL}/status`)
 
         if (data.status) {
           setServerStatus(data)

diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -34,10 +34,5 @@ export default (args: ViteConfigInput) => {
         generateScopedName,
       },
     },
-    server: {
-      proxy: {
-        '/api': 'http://localhost:5000',
-      },
-    },
   })
 }
diff --git a/server/.env.sample b/server/.env.sample
@@ -1,5 +1,6 @@
 MONGODB_URL=<mongodb_cloud_url>
 MONGODB_URL_LOCAL=mongodb://127.0.0.1:27017
+CLIENT_URL=<client_url>
 
 RAZORPAY_API_KEY=<razorpay_api_key>
 RAZORPAY_APT_SECRET=<razorpay_api_secret>

diff --git a/server/src/app.ts b/server/src/app.ts
@@ -7,7 +7,7 @@ const app = express()
 
 app.use(
   cors({
-    origin: ENV.CORS_ORIGIN,
+    origin: [ENV.CLIENT_URL, ENV.CORS_ORIGIN],
     credentials: true,
   })
 )

diff --git a/server/src/conf/conf.ts b/server/src/conf/conf.ts
@@ -6,6 +6,7 @@ dotenv.config({
 export const ENV = {
   MONGODB_URL: String(process.env.MONGODB_URL),
   MONGODB_URL_LOCAL: String(process.env.MONGODB_URL_LOCAL),
+  CLIENT_URL: String(process.env.CLIENT_URL),
 
   RAZORPAY_API_KEY: String(process.env.RAZORPAY_API_KEY),
   RAZORPAY_APT_SECRET: String(process.env.RAZORPAY_APT_SECRET),