added site logo

src/component/auth/Login2.jsx

@@ -1,13 +1,36 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+
 import LoginImg from '../../assets/bg/login.svg'
 
 import { Link, useNavigate } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
+import { loginUser } from '../../services/services'
 
 export default function Login() {
 
   const navigate = useNavigate()
 
+  const [fields, setFields] = useState({
+    username: '',
+    password: ''
+  })
+
+  const handleChange = ({target:{name, value}}) => {
+    console.log('working')
+    setFields(prev => ({...prev, [name]:value}))
+  }
+
+  const login = useMutation({
+    mutationFn: (fields) => {
+      return loginUser('panel/auth/login', fields)
+    },
+    onError: (error) => {
+        console.log('error', error)
+        navigate('/dash') // remove later
+      },
+  })
+
   return (
     <div className="app">
         <div className="app-wrap">
@@ -25,13 +48,13 @@ export default function Login() {
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label">User Name*</label>
-                                                        <input type="text" className="form-control" placeholder="Username" />
+                                                        <input name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label">Password*</label>
-                                                        <input type="password" className="form-control" placeholder="Password" />
+                                                        <input name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
@@ -46,7 +69,7 @@ export default function Login() {
                                                     </div>
                                                 </div>
                                                 <div className="col-12 mt-3">
-                                                    <button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
+                                                    <button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
                                                 </div>
                                                 <div className="col-12  mt-3">
                                                     <p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>