focalxaiinspection/src/lib/Components/Login/Login.js

Focalx AI Inspection

import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import UserLogin from '../../services/Api/UserLogin';
import UserProfile from '../../services/Api/UserProfile';
import PropTypes from 'prop-types';
import './Login.scss';

const Login = ({setToken}) => {
  // const { setToken } = useToken();
  const [username, setUserName] = useState();
  const [password, setPassword] = useState();
  const navigate = useNavigate();


  const handleSubmit = async e => {
    e.preventDefault();  
    const token = await UserLogin({
      username,
      password
    });
    // saveToken(token);
    setToken(token.access);
    // console.log(token.access);
    if (token.access) {
      UserProfile(token.access)
        .then((data) => {
          // console.log("User profile received:", data);
          // console.log("Navigating to /dashboard");
          const root = document.documentElement;
          root.style.setProperty('--background-color', data.client.accent_color);
          sessionStorage.setItem("themeColor", data.client.accent_color);
          navigate('/car-body-type');
        })
        .catch((error) => {
          console.log("Error getting user profile:", error);
        });
    }
  }
  
  return (
    <>
      <main className="login-bg">
          <div className="login-section">
              <div className="container">
                  <div className="login-container">
                      <h1>Car inspection has never been easier.</h1>
                      <div className="login-action">
                          <form className="login-form" onSubmit={handleSubmit}>
                              <div className='form-group'>
                                  <input type="text" className="form-control" id="email" placeholder="Email" 
                                  onChange={e => setUserName(e.target.value)}
                                  />
                              </div>
                              <div className='form-group'>
                                  <input type="password" className="form-control" id="password" placeholder="Password"
                                  onChange={e => setPassword(e.target.value)}
                                  />
                              </div>
                              <div className='action-btn-wrap'>
                                <button className='custom-primary-button' type="submit">Continue</button>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
      </main>
    </>
  )
}
export default Login;

Login.propTypes = {
  setToken: PropTypes.func.isRequired
};